I前端性能优化方案索引.docVIP

前端性能优化方案索引 陆续整理和不断更新网络上给出的前端性能的优化方案。 这里只是做一个总概括式的索引，每一个方案都十分值得推敲和细说。 1 请求和响应 缓存控制 请求头里，可以发送 If-Modified-Since 以及 If-None-Match 等信息，来询问服务端请求内容是否有更新，如果没有更新，可返回304，告诉浏览器使用缓存，避免重新下载资源。Pragma 和 Cache-Control 等也能控制缓存。如告诉服务端不要缓存等。 响应头里，Expires 可以告诉浏览器过期时间，Last-Modified 最近更新时间，ETag 则可允许浏览器进行缓存验证（在 If-None-Match 请求信息中使用）。 复用TCP 请求头里，Connection 可控制 TCP 通道的使用，使用 keep-alive 可以复用上次打开的 TCP。 GZIP压缩 如果可以启用 gzip 压缩，将减少响应数据大小，加快响应。请求头里面可用 Accept-Encoding 告知浏览器支持的压缩方式，而服务端则用 Content-Encoding 作为回应。 Cookies 发送请求时，cookies 也在请求之中。因此，cookies 也可以作为减少请求的优化对象。如，根据同源限制策略，可以使用多个域名加载资源，如加载静态资源，就不会发送多余的 cookies；同时，合理设置 cookies 的路径和域名，如在子站避免不必要的来自父站的 cookies。 减少HTTP请求 有很多细节可以实现，比如CSS Sprites、Data URL等等，由于此部分内容和下述内容有所重复，故部分细节在下面会讲到。 多域名分发 同域下浏览器能并发的请求有限，而为了增加并发，尤其是一些静态资源上，可以使用多个域名。但由于域名DNS解析本身也是耗时的，所以实践原则是2-4个为宜。 需要额外提醒的是，加载图像资源的时候，并发没有问题；但在加载 JavaScript 脚本的时候，还是会暂停加载其他资源。 使用CDN 根据用户能访问的最快位置加速访问。 避免重定向和404 重定向和404将浪费加载请求。 favicon.ico 浏览器默认加载的资源，最好能够缓存之。 2 HTML 减少DOM 过多的DOM元素会影响渲染、加载、执行。除了精简页面结构外，还可以适时删除不必要的DOM元素（页面内已经不会再访问的元素），又或者可以懒加载（不一定会使用到的元素，如登录框）。 CSS 和 JavaScript 文件位置 CSS 放 head，JavaScript 放 body 闭标签前。乃是因为： 样式表不参与 DOM 修改，所以不会为了解析样式停止文档解析 浏览器要避免重绘，在没有拿到全部样式前不会开始渲染 解析样式时，有的浏览器（FF）会停止脚本运行，而有的（Webkit）则会在脚本访问样式属性但可能受未加载样式影响时停止脚本运行 脚本解析中可能请求样式，如果样式还未解析完毕就会出错 脚本执行将暂停文档的解析和资源的下载 因此，将二者放在适当的位置，能够极大提高渲染效率。 脚本延迟加载 可将脚本添加 defer 和 async 属性。两个属性的共通点在于，脚本的加载和文档的解析是同步进行的，而区别在于：async 一旦加载完毕，立即停止文档解析并执行脚本；defer 等待文档解析完毕后再执行。 合理使用内联 脚本和样式，应按需选择内联或者外链。对于访问少、样式和脚本复用少的页面，可以考虑使用内联样式从而减少 HTTP 请求。但如果页面访问频繁，样式脚本在多个页面经常复用，使用外链则是最优选择。 无论如何，需要避免使用 @import 来导入样式。 而图像也是一样，高级浏览器支持将图像数据直接 base64 编码在 src 属性里，必要时可直接在 HTML 里输出图片数据。 减少iframe iframe 本身有许多优点，比如可以并行下载脚本，适合加载慢内容（如广告），同时浏览器可以对其进行安全控制。 减少使用 iframe 的主要考虑是：iframe 会阻碍页面加载，同时也没有语义。 3 CSS 选择器 选择器效率排行如下： ID选择器 类选择器 标签选择器 相邻选择器 子选择器 后代选择器 通配符选择器 属性选择器 伪类选择器 效率与优先级并不是对等关系，优先级高的不一定效率高。如 #id.class 合用比 单个 #id 的优先级高，但效率却比值慢。 选择器书写建议是： 避免使用通配符 不使用标签名或类名修饰ID规则：如果规则使用ID选择器作为关键选择器，不要给规则添加标签名。因为ID本身