前端性能优化

Posted 2020-09-05 奋飛

规则5：压缩组件

? 压缩组件可以使响应包变小，缩短传输时间。HTTP1.1中，可以通过Accept-Encoding:gzip（gzip是目前最理想的压缩方法）进行控制（上述已提及）。需要注意的是：图片和pdf不应该压缩，因为它们本来就已经被压缩过了，试图对它们压缩只会浪费CPU资源，还可能增加文件大小。

代理缓存

? 上述阐述的方式对于浏览器和服务器直接通信会工作的很好，当浏览器通过代理发送过来请求时，情况就复杂了，综述一下具体请查看：Vary、mod_gzip

• 网站用户少或注重带宽开销：Vary: Accept-Encoding Web服务器告知代理服务器根据Accept-Encoding来改变缓存的响应（边缘情况太对，尽量不要使用）。
  
  • 网站用户群体大且多变，能过应付带宽开销：Cache-Control: Private禁用缓存。

规则6：将样式表放在顶部

? 将Dhtml特征的样式表放在文档顶部Head中首先下载它们能使页面呈现得更快。

无样式内容的闪烁

? 白屏现象源自浏览器的行为。样式表在页面中的位置并不影响下载时间，但是会影响页面的呈现。

如果样式表仍在加载，构建呈现树就是一种浪费，因为在所有样式表加载并解析完毕之前无需绘制任何东西。否则，在其准备好之前显示内容会遇到FOUC（无样式内容的闪烁 Flash of Unstyled Content）问题。

? 白屏是浏览器对FOUC问题的补充。浏览器可以延迟呈现，直到所有的样式表都下载完之后，然而，其会导致白屏。反之，浏览器可以逐步呈现，但要承担闪烁的风险。这里没有完美的选择。IE通常会白屏，Firefox等会其他浏览器会闪烁（逐步呈现）。

避免白屏和闪烁：

• @import url()会导致组件下载时的无序性，使用Link标签代理会带来性能上的收益；
• 如果样式表不是呈现页面所必需的，可以想办法再文档加载完后动态加载；
• 可视化回馈的重要性：(1)让用户知道系统并没有崩溃；(2)告知用户需要等待多久，以便用户可以在漫长等待中做些其他事情；(3)提供一些可以看得东西。

规则7：将脚本放在底部

? 将脚本放在页面底部，这样可以提高下载的并行速度，同时达到页面逐步呈现。

并行下载

? 对响应时间影响最大的是页面中组件的数量。HTTP1.1的RFC2616中建议单用户客户端不应该与任何服务器或代理保持超过2个连接，RFC7230中取消了该限制。现代浏览器，一般允许同域6个并发请求。我们可以使用CNAME（DNS别名）将组件分别放到多个主机名中，增加并发下载数。但是增加并发下载数，同时需要取决你的带宽和CPU速度，过多的并行下载反而会降低性能。

脚本阻塞下载

? 在下载脚本时并行下载实际上是被禁用的—即使用了不同的主机名，浏览器也不会启动其他的下载。之所以做这样的限制有两个原因：(1)脚本可能使用document.write来修改页面内容，因此浏览器会等待，以确保页面能够恰当布局；(2)为了保证脚本能够按照正确的顺序执行。

? 因此将脚本放到页面顶部不仅会阻塞对其后面内容的呈现，而且还会阻塞后续组件的下载。当然，也可以使用Defferred（延迟）脚本（不包含document.write），浏览器获得这一信息后可继续呈现和下载。

规则8：避免CSS表达式

? CSS表达式是动态设置CSS属性的一种强大（并危险）的方式（只针对IE浏览器，其他浏览器不起作用）。在IE11以前的版本，并不支持min-width，通过CSS表达式可以很好的解决该问题。

min-width: 600px;
/* IE11以下版本的兼容写法 */
width: expression(document.body.clientWith < 600 ? "600px" : "auto");

? 表达式不只在页面呈现和大小改变时求值，当页面滚动、甚至用户鼠标在页面上拖拽时都要求值。这很可能导致页面死掉，不得不终止进程。

解决表达式重复求值

一次性表达式：可以在表达式执行过程中重写它自身。

<style>
    p {
      background-color: expression(bgColor(this));
    }
</style>
<script>
    function bgColor(ele) {
      ele.style.backgroundColor = (new Date()).getHours() % 2 ? "#ddd" : "#bbb";
    }
</script>

事件处理器：可以通过事件处理器达到期望的行为。

function setMinWidth() {
  var eles = document.getElementsByTagName("p");
  for(var i = 0, len = eles.length; i < len; i++) {
    eles[i].runtimesStyle.width = (document.body.clientWidth < 600 ? "600px" : "auto");
  }
}

if(1 != navigator.userAgent.indexOf("MSIE")) { // 只针对IE
  // 需要注意，这里没有做"节流"
  window.onresize = setMinWidth;
}

注意：没有深入了解底层影响的情况下使用CSS表达式是很危险的！

规则9：减少DNS查找

? DNS（Domain Name System，域名系统 ）将主机名映射到IP地址上（域名解析）。在解析完成之前，浏览器不能从主机名服务器下载任何东西，而这个过程需要花费一定的时间。其依赖于DNS解析器（ISP提供）、它所承受的请求压力、距离和带宽等。

? 操作系统具有自身的ISP，同时浏览器也可缓存DNS记录。TTL存活时间决定了域名解析在DNS服务器中存留时间。对于大部分公司都会进行快速故障转移的构建（虚拟IP等），这从一定程度上需要TTL时间不能过长。

• Keep-Alive持久连接，无需DNS查找。
• 减少主机数量（和并行下载有冲突），建议将组件分别放到2到4个主机名下，减少DNS查找和高度并行可以不错的权衡。

规则10：其他

• 压缩CSS和javascript；
• 删除重复脚本。这里更多的是指避免重复脚本加载和执行，确保加载过得脚本不被重复加载。
• 避免重定向，如必须重定向，最好使用3xx HTTP状态码，已确保后退按钮可以正常工作；
  在URL的结尾必须出现斜线(/)而没有出现

• 使Ajax可缓存。对于一个用户可能每天或者每周进行很多次请求，可以使用Expires头设置缓存，会有带来不错的用户体验。将URL查询字符串携带特征信息（如时间戳）进行重新请求。这里我们携带当前小时的时间戳来达到当前小时内的缓存效果。

  /* 可以设置如下响应头，使其不缓存 */
  ==Response Headers==
  Cache-Control: no-store, private
  Expores: Thu, 01 Jan 1970 00:00:00 GMT (过去某一时间点)

总结

? 上述描述了我们经常使用，也是最基础的前端优化方式或称为最佳实践。作为前端工程师，提高网站性能是我们义不容辞的责任，从而给用户创建更好和更快的页面和体验。

• 减少HTTP请求
• 使用内容发布网络CDN
• 为组件添加长久的Max-Age或Expires头
• 自定义ETage或移除ETag
• 压缩脚本和样式表
• 将JavaScript和CSS放到外部文件中，并确保脚本仅被包含一次
• 使用LINK标签，并将标签放到页面HEAD中
• 将脚本放到页面底部
• 避免CSS表达式
• 通过Keep-Alive和较少的域名较少DNS查找
• 寻找一种避免重定向的方法