前端性能优化指南.pdfVIP

目 录 前言 AJAX优化 Cookie专题 DOM优化 eval优化 HTML优化 JIT与GC优化 js载入优化 with优化 变量专题 常规优化 代码压缩 代码优化 动画优化 对象专题 服务端优化 类型转换专题 逻辑判断优化 内存专题 事件优化 数组专题 同域跨域 性能测试工具 循环专题 原型优化 运算符专题 重绘专题 字符串专题 作用域链和闭包优化 本文档使用 看云 构建 - 2 - 前言 前言 原文 ：GITHUB前端性能优化指南 参考和借鉴了大家的经验 ，收集整理了这一篇开发规范 ，感谢所有的原作 者 ，众人拾柴火焰高 ，技术无国界 ，持续更新中。 本文档使用 看云 构建 - 3 - AJAX优化 AJAX优化 AJAX优化 缓存 AJAX ： 异步 并不等于 即时 。 请求使用 GET ： 当使用 XMLHttpRequest 时 ，而URL长度不到 2K ，可以使用 GET 请求数据 ，GET 相比 POST 更快速。 POST 类型请求要发送两个 TCP 数据包。 先发送文件头。 再发送数据。 GET 类型请求只需要发送一个 TCP 数据包。 取决于你的 cookie 数量。 本文档使用 看云 构建 - 4 - Cookie专题 Cookie专题 Cookie专题 减少 COOKIE 的大小。 使用无 COOKIE 的域。 比如图片 CSS 等静态文件放在静态资源服务器上并配置单独域名 ，客户端请求静态文件的时 候 ，减少 COOKIE 反复传输时对主域名的影响。 本文档使用 看云 构建 - 5 - DOM优化 DOM优化 DOM 优化 优化节点修改。 使用 cloneNode 在外部更新节点然后再通过 replace 与原始节点互换。 var orig document.getElementById(container); var clone orig.cloneNode(true); var list [foo, bar, baz]; var content; for (var i 0; i list.length; i++) { content document.createTextNode(list[i]); clone.appendChild(content); } orig.parentNode.replaceChild(clone, orig); 优化节点添加 多个节点插入操作 ，即使在外面设置节点的元素和风格再插入 ，由于多个节点还是会引发多次 reflow。 优化的方法是创建 DocumentFragment ，在其中插入节点后再添加到页面。 如 JQuery 中所有的添加节点的操作如 append ，都是最终调用 DocumentFr