认识达内从这里开始

说起web前端的优化，这不是一句两句就能解释清楚的，但是只说前端性能优化，涉及到一些具体可用的手段，都是日常工作中比较容易就可以做到的。不涉及复杂的比如CDN技术，或者服务器端优化技术(服务器端优化也可以改进前端性能)。

在这里，太原达内web学员主动为大家分享了他们积累的经验和了解的技巧，因为有时候很多小的改变可以让用户体验有质的提升。比如保持一个良好的编码习惯和一些简单但不太注意到的策略。

首先是提出一个问题：

为什么进行前端性能优化?

响应速度对用户的影响-用等待时间来衡量

可以看出来，前端性能，反应给用户最直观的方面就是页面的响应速度。

3-5秒还能接受，大于8秒甚至上双的响应时间，作为用户肯定是接受不了的。

相信我们自己平常上网逛论坛也有类似的体验。

一句话，页面的响应速度对用户体验至关重要。

如何提高响应速度?

下面就逐一来讲，有的可能没列举实例，对细节感兴趣的朋友可以网上查查相关主题的资料，或者直接问我。

1避免坏请求：

什么是坏请求?最明显的就是404请求，也可以把无意义的重复请求叫做坏请求。

无意义的请求，浪费了服务器的资源也影响前端性能

404会导致服务器无谓的响应，所以，没用的请求，比如链接图片，请求无用的资源等都需要及时删除。

2合并js和css文件：

这样也可以减少http请求次数

3利用缓存：

可以缓存js css等文件资源，也可以缓存请求回来的数据。

开启了缓存之后，有些资源文件，客户端就不用每次都从服务器端重新请求加载，从本地缓存里取，速度会快得多。至于该缓存哪些文件数据，那就看你的需求了。我们的目的还是想办法减少请求次数。

4使用css精灵整合图片：

通过整合图片和css定位的方法，我们可以把多张图片整合到一起，这样就减少了请求次数。

5启用压缩：

减少请求资源的数据量，达到更快的速度。

6避免css @import语句：

此语句顺序加载，会阻塞浏览器的并行加载。

7优化脚本js和样式表css的顺序：

(经测试IE8及以上没有这个问题，如果还需要兼容IE8以下版本浏览器，请注意这点)

8处理小文件：

将小文件比如小的js css文件写入到html中，或者第二点提到的合并，减少请求次数。

9减少dom数量：

想方设法减少dom数量，即减少浏览器处理的时间，因为很多时候客户端javascript处理的就是dom，dom的多少直接影响前端到性能，而且是全方位，多角度的影响。

可以想象下，如果web应用程序中含有成千上万的dom节点，我的意思是比原本多的多多节点。然后我们需要使用选择器操作dom，无论如何优化，这些dom节点都是存在的，这无疑是一项耗时的工作。

我见过一个项目，在一个列表下，有2万多个li节点，这些节点数据都是ajax请求回来的，更要命的是，在这些节点下，还需要完成搜索的功能。

浏览器解析dom，渲染样式都会花费不少时间，何况还需要操作搜索，和各种重绘。

10慎用document.write：

会阻塞浏览器的渲染。

11使用浏览器文档碎片createDocumentFragment：

这个可以减少操作dom的次数，从而减少渲染次数，提高页面性能。

总结

那么按这么说，我们就两招王牌：

减少请求，加快渲染!

提高页面性能，我们从这两个点出发，就可以解决很多问题。

好了，今天就给大家讲这么多吧，喜欢我的内容可以关注或者分享（微信公众平台：tytedu）选择太原达内web培训，不再孤军奋战，轻轻松松做IT高薪白领。太原达内培训带领有明确目标的学子迈向成功之路!