Web性能优化的15条实用技巧

加载和执行,1.IE8,FF,3.5,Safari 4和Chrome都允许并行下载js文件，当script下载资源时不会阻塞其他script的下载。但是js下载仍然会阻塞其他资源的下载，如图片。尽管脚本下载不会互相影响，但页面仍然必须等待所有js代码下载并执行完才能继续。因此仍然存在脚本阻塞问题.推荐将所有js文件放在body标签底部以减少对整个页面的影响。,2.减少页面外链脚本文件的数量将会提高页面性能：,http请求会带来额外的开销，因此下载单个300k的文件将比下载10个30k的文件效率更高。,3.动态脚本加载技术：,无论何时启动下载，文件的下载和执行都不会阻塞页面其他进程。,1.在js中，数据存储的位置会对代码整体性能产生重大影响。数据存储共有4种方式：字面量，变量，数组项，对象成员。他们有着各自的性能特点。,2.访问字面量和局部变量的速度最快，相反，访问数组和对象相对较慢,3.由于局部变量存在于作用域链的起始位置，因此访问局部变量的比访问跨域作用变量更快,4.嵌套的对象成员会明显影响性能，应尽量避免,5.属性和方法在原型链位置越深，访问他的速度越慢,6.通常我们可以把需要多次使用的对象成员，数组元素，跨域变量保存在局部变量中来改善js性能,1.访问DOM会影响浏览器性能，修改DOM则更耗费性能，因为他会导致浏览器重新计算页面的几何变化。<通常的做法是减少访问DOM的次数，把运算尽量留在JS这一端。,注：如过在一个对性能要求比较高的操作中更新一段HTML，推荐使用innerHTML，因为它在绝大多数浏览器中运行的都很快。但对于大多数日常操作而言，并没有太大区别，所以你更应该根据可读性，稳定性，团队习惯，代码风格来综合决定使用innerHTML还是createElement(),2. HTML集合优化,HTML集合包含了DOM节点引用的类数组对象，一直与文档保持连接，每次你需要最新的信息时，都会重复执行查询操作，哪怕只是获取集合里元素的个数。,① 优化一——集合转数组collToArr,② 缓存集合length,③ 访问集合元素时使用局部变量（即将重复的集合访问缓存到局部变量中，用局部变量来操作）,3. 遍历DOM,① 使用只返回元素节点的API遍历DOM,因为这些API的执行效率比自己实现的效率更高：, ② 选择器API——querySelectorAll(),querySelectorAll()方法使用css选择器作为参数并返回一个NodeList——包含着匹配节点的类数组对象，该方法不会返回HTML集合，因此返回的节点不会对应实时文档结构，着也避免了HTML集合引起的性能问题。,4.重绘和重排,浏览器在下载完页面的所有组件——html,js,css,图片等之后，会解析并生成两个内部数据结构—— DOM树，渲染树.一旦DOM树和渲染树构建完成，浏览器就开始绘制页面元素（paint）.,① 重排发生的条件：,添加或删除可见的DOM 元素位置变化 元素尺寸改变 内容改变 页面渲染器初始化 浏览器窗口尺寸变化 出现滚动条时会触发整个页面的重排 ,重排必定重绘,5.渲染树变化的排列和刷新,大多数浏览器通过队列化修改并批量执行来优化重排过程，然而获取布局信息的操作会导致队列强制刷新。,一些优化建议：将设置样式的操作和获取样式的操作分开：,另外，获取计算属性的兼容写法：,6.最小化重绘和重排,①.批量改变样式,②.批量修改dom的优化方案——使元素脱离文档流-对其应用多重改变-把元素带回文档,上面的优化方法使用了文档片段: 当我们把文档片段插入到节点中时，实际上被添加的只是该片段的子节点，而不是片段本身。可以使得dom操作更有效率。,③.缓存布局信息,④.慎用:hover,如果有大量元素使用:hover,那么会降低相应速度，CPU升高,⑤.使用事件委托（通过事件冒泡实现）来减少事件处理器的数量，减少内存和处理时间,2.使用Duff装置来优化循环（该方法在后面的文章中会详细介绍）,3.基于函数的迭代（比基于循环的迭代慢）,​​1.浏览器的UI线程：用于执行javascript和更新用户界面的进程。,2.在windows系统中定时器分辨率为15毫秒，因此设置小于15毫秒将会使IE锁定，延时的最小值建议为25ms.,3.用延时数组分割耗时任务：​,4.记录代码运行时间批处理任务：,​5.使用Web Worker：它引入了一个接口，能使代码运行且不占用浏览器UI线程的时间。一个Worker由如下部分组成：,① 一个navigator对象，包括appName,appVersion,user Agent和platform.,② 一个location对象，只读。,③ 一个self对象，指向全局worker对象,④ 一个importScripts()方法，用来加载worker所用到的外部js文件,⑤ 所有的ECMAScript对象。如object,Array,Date等,⑥ XMLHttpRequest构造器,⑦ setTimeout()，setInterval(),⑧ 一个close()方法，它能立刻停止worker运行,应用场景,1. 编码/解码大字符串,2.  复杂数学运算（包括图像，视屏处理）,3. 大数组排序​,1.向服务器请求数据的五种方式：,① XMLHttpRequest,② Dynamic script tag insertion 动态脚本注入,③ iframes,④ Comet（基于http长连接的服务端推送技术）,⑤ Multipart XHR（允许客户端只用一个http请求就可以从服务器向客户端传送多个资源）,2.单纯向服务端发送数据（beacons方法）——信标,3.ajax性能的一些建议,缓存数据,1).在服务端设置Expires头信息确保浏览器缓存多久响应（必须GET请求）,2）.客户端把获取到的信息缓存到本地，避免再次请求,1.避免重复工作,2.使用Object/Array字面量,3.多用原生方法,1.js的http压缩 当web浏览器请求一个资源时，它通常会发送一个Accept-Encoding HTTP头来告诉Web服务器它支持那种编码转换类型。这个信息主要用来压缩文档以获取更快的下载，从而改善用户体验。Accept-Encoding可用的值包括：gzip,compress,deflate,identity. 如果Web服务器在请求中看到这些信息头，他会选择最合适的编码方式，并通过Content-Encoding HTTP头通知WEB浏览器它的决定。,2.使用H5离线缓存,3.使用内容分发网络CDN,4.对页面进行性能分析,1.添加Expires头,2.使用cache-control cache-ontrol详解 浏览器缓存机制,1.web客户端可以通过http请求中的Accept-Encoding头来表示对压缩的支持,浏览器（如IE）在样式表没有完全下载完成之前不会呈现页面，导致页面白屏。如果样式表放在页面底部，那么浏览器会花费更长的时间下载样式表，因此会出现白屏，所以最好把样式表放在head内。白屏是浏览器对“无样式闪烁”的修缮。如果浏览器不采用“白屏”机制，将页面内容逐步显示（如Firefox），则后加载的样式表将导致页面重绘重排，将会承担页面闪烁的风险。,使用css表达式时执行函数重写自身,DNS缓存和TTL,这块需要前后端共同配合，对页面路由进行统一规范。