欢迎来到新闻!
我的订单 签到有礼 资讯中心
当前位置:首页 > 代码知识 >
代码知识

【编程】高性能网站建设指南-前端性能优化(二)

发布日期:2019-12-16 09:50 浏览量:0

  规则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查找

  寻找一种避免重定向的方法