专栏首页Super 前端高性能网站建设指南-前端性能优化(二)

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

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://ligang.blog.csdn.net/article/details/63259552

规则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查找
  • 寻找一种避免重定向的方法

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jQuery动画与特效--jQuery基础知识点(4)

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

    奋飛
  • 揭秘AngularJS工作原理

    从本质上讲,在浏览器加载AngularJS web应用的方式与加载非AngularJS引用的方式一样。但是,它们的运行方式略有不同。

    奋飛
  • 解决PKIX问题:unable to find valid certification path to requested target

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

    奋飛
  • 三分钟学会 Java 单元测试

    前言: 此篇文章使用 Junit 4.0, 希望给无任何单元测试经验的开发者, 能在最短的时间内, 开展单元测试的工作◦ 本文:  学习 Junit 的测试框架...

    Ken Fang 方俊贤
  • Java常用类(五)之集合工具类Collections

    前言    Java提供了一个操作Set、List和Map等集合的工具类:Collections,该工具类提供了大量方法对集合进行排序、查询和修改等操作,   ...

    用户1195962
  • Android6.0开发中屏幕旋转原理与流程分析

    本文实例讲述了Android6.0开发中屏幕旋转原理与流程。分享给大家供大家参考,具体如下:

    砸漏
  • 【面试题】SpringCloud架构中如何保证定时任务只在一个服务在执行

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/...

    林老师带你学编程
  • 关于SQL里面两个case when then的应用案例

    (例子二)使用case when then生成虚拟列统计,我们现在的科目数据里面每个人没有分文科和理科类别,如果我们想要按照文科和理科统计,应该怎么写?如下:

    我是攻城师
  • Python中的三目运算符(三元表达式)

    python并不支持? :这种符号所表达的先判断再选择的含义,但仍然有相应的语法支持:

    py3study
  • 关于angluar options请求在ie浏览器报错导致页面不能正常运行

    浏览器自动发送的options请求,是浏览器针对跨域请求自行发起的检查(preflight)请求。 这个请求主要验证Access-Control-Allow-...

    lilugirl

扫码关注云+社区

领取腾讯云代金券