前端性能优化

Posted 奋飛

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端性能优化相关的知识,希望对你有一定的参考价值。

规则5:压缩组件

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

代理缓存

? 上述阐述的方式对于浏览器和服务器直接通信会工作的很好,当浏览器通过代理发送过来请求时,情况就复杂了,综述一下具体请查看:Varymod_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查找
  • 寻找一种避免重定向的方法

以上是关于前端性能优化的主要内容,如果未能解决你的问题,请参考以下文章

前端性能优化

如何对前端性能进行优化

前端代码性能优化

如何进行前端优化

前端性能优化jQuery性能优化

前端性能优化