Web表现层性能优化

时间 2019-11-06

标签 web 表现性能优化栏目 HTML 繁體版

原文原文链接

咱们先了解一下，从输入URL地址或者点击URL的一个连接到页面呈现的一次请求，大体须要下面几个步骤css

1：查找DNS，解析出URL对应的IP地址
2：初始化网络链接
3：发送HTTP请求
4：网络传输请求到服务器
5：Web服务器接收到请求，通过处理转发到相应的Web应用
6：Web应用处理请求，并返回相应的应答
7：网络传输应答内容到前端浏览器
8：浏览器开始解析从服务器端返回的内容，开始渲染和绘制
9：根据HTML内容来构建DOM（文档对象模型）
10：加载和解析样式，构建CSSOM（CSS对象模型）
11：根据DOM和CSSOM来构建渲染树，这个过程是按照文档顺序从上到下依次进行的
12：会根据构建渲染树的过程，在适当的时候，把已经构建好的部分绘制到界面上，中间还会伴随着重
绘(repaint)和回流(reflow)等，如此循环操做，直到渲染绘制完成
13：整个页面加载完成，会触发OnLoad事件

简单分析一下上面这些步骤的这个过程：html

1：要经过URL请求服务器，浏览器就要知道这个URL对应的IP是什么，只有知道了IP地址，浏
览器才能准备的把请求发送到指定的服务器的具体IP和端口号上面。浏览器的DNS解析器负
责把URL解析为正确的IP地址。
这个解析工做是要花时间的，并且这个解析的时间段内，浏览器不能从服务器那里
下载任何东西。浏览器和操做系统提供了DNS解析缓存支持。
2：当得到了IP地址以后，浏览器会请求与服务器的链接，TCP通过三次握手后创建链接通道
3：浏览器真正发送HTTP请求，这个请求包含了不少东西，如cookie和其余的head头信息。
4：网络开始传输请求到服务器，这个会包括不少时间，好比网络阻塞时间、网络延迟时间和
真正传输内容的时间等，这是个很复杂的过程
5：Web服务器接收到请求，会根据URL里面的上下文，转交给相应的Web应用进行处理
6：Web应用会依次经过不少处理，好比：filter、aop的前置处理、IoC处理、真实处理对象的
寻找和建立等，这个根据每一个应用的具体实现而不一样。而后会把请求转交到真实的处理对象，进行相应的业务处理，并生成Response对象

7：经过网络传输应答内容回到前端的浏览器。其实首先到达浏览器的是纯粹的html代码，不
包含什么图片，外部脚本，外部CSS等，也就是页面主要的html结构。
8：接下来就是浏览器解析页面，进行渲染和绘制的过程了，大体以下：
（1）装载和解析Html文档，构建DOM，若是在解析中发现须要其它的资源，好比图片，那么浏
览器会发出请求以获取这个资源
（2）装载和解析CSS，构建CSSOM
（3）根据DOM和CSSOM来构建渲染树
（4）而后对渲染树的节点进行布局处理，肯定其在屏幕的位置
（5）把渲染好的节点绘制到界面上
以上步骤是一个渐进的过程，渲染引擎不会等到全部Html都被解析完才建立并布局
渲染树，它会在获取文档内容的同时把已经接收到的局部内容先展现出来。
9：重绘（repaint）的发生：若是渲染到后面，发现须要修改前面已经绘制元素的外观，好比
背景色、文字颜色等，不影响它周围和内部布局的行为，这就须要重绘这个元素
10：回流（reflow）的发生：若是渲染到后面，发现须要修改前面已经绘制好的元素的某些行
为，这些行为引发了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引
起它内部、周围甚至整个页面的从新渲染，这就是回流

什么是延迟
延迟指的是：消息或分组从信息源发送到目的地所需的总时间
延迟的构成前端

1：传播延迟
指的是消息从发送端到接收端须要的时间，是信号传播距离和速度的函数。取决于
距离和信号经过的媒介。
2：传输延迟
指的是把消息中的bit转移到链路所须要的时间，是消息长度和链路速率的函数。取
决于链路的速率，跟客户端到服务器的距离无关。
3：处理延迟
指的是处理分组头部、检查位错误、肯定分组目标所须要的时间。一般由硬件来完
成，如路由器要根据分组头部来选择出站路由。
4：排队延迟
指的是分组排队等待处理的时间。若是分组到达的速度超过了路由器的处理能力，
那么分组就要进入缓冲区排队。

DOM、CSSOM和JavaScript常常交织在一块儿：
1：脚本执行过程当中可能会处理须要同步的功能，好比document.write，从而会阻塞DOM的解析
和构建；
2：脚本可能会查询任何对象的计算样式，从而阻塞CSS处理
结果就是DOM构建在JS执行完毕前没法进行，而JS在CSSOM构建完成前也没法进行。
浏览器对于HTML的解析是递增的，对于JavaScript和CSS的解析执行，要等到整个文
件下载完毕。web

最基本的优化思路，大体来讲：
1：尽可能减小没必要要的网络延迟
2：尽可能减小请求数量
3：尽可能减小来回传递的数据量
4：提升后台程序的响应速度
5：提升每一个环节和步骤的处理能力，以加快速度ajax

Web性能的基本指标
1：请求响应时间：从客户端发起请求，到web应用对用户请求做出响应，再发送反馈直至用户
接收完毕所须要的时间，也被称为TTLB(Time to Last Byte)，建议3/5/10秒。
2：最大并发用户数：用来衡量可用性，就是在不出现系统崩溃的状况下，能同时提供服务的
最大用户数量，一般分红两种：
（1）严格意义上的并发：即全部的用户在同一时刻作一样的操做
（2）广义的并发：多个用户同时进行了操做，可是这些操做能够是相同的，也能够是不一样的
3：事务响应时间：是针对业务的概念，事务可能由一系列请求组成，以完成业务功能
4：TPS(Transaction Per Second)：每秒钟系统可以处理的交易或者事务的数量，通用用来衡
量系统处理能力
5：吞吐量：在一次性能测试过程当中，经过网络传输的数据量的总和。吞吐量/传输时间就是吞
吐率正则表达式

Web性能测试的常见工具
1：用于测试页面资源加载速度，好比：
Firebug、Chrome的开发者工具、HttpWatch等
2：用于测试页面渲染呈现，以及js运行速度，好比：
dynaTrace Ajax、Speed Trace等
3：对页面进行总体评价分析，好比：
WebPageTest、Page Speed、yslow等
4：专业的测试工具，好比：
Selenium、WebLoad、ab、LoadRunner等
JavaScript的常见优化数组

1：尽可能把JS放在页面底部
2：循环中要屡次使用的表达式，好比：判断长度的表达式、获取对象的表达式，最
好在外面作个变量来保存
3：减小页面重绘，好比：不要在循环中改变元素外观，应该拼接好后，一次性的设
置给元素，这样就只须要重绘一次
4：尽可能避免使用eval
5：把全局域的变量缓存成为局部域的变量，全局变量实际上是window对象的成员，而
局部变量是放在函数的栈里的，局部变量访问更快
6：尽可能避免对象的嵌套查询，好比：obj1.obj2.obj3这样的表达式就会引发屡次查
找，应该把各个对象用局部变量缓存起来，这样后续使用就直接使用
7：当须要将数字转换成字符时，采用以下方式：“” + 数字的方式最快
8：当须要将浮点数转换成整型时，应该使用Math.floor()或者Math.round()。而不
是使用parseInt() ，Math是内部对象，速度是最快的

9：尽可能让代码简洁，好比变量名、方法名在不影响语意的状况下尽可能简单
10：连加多个字符串的，可使用数组，把要链接的字符串放到数组中，而后使用
数组的join方法，形如：var str = myArr.join(“”);
11：尽可能用JSON格式来建立对象，而不是var obj=new Object()，由于前者是直接
复制，然后者须要调用构造器
12：尽可能使用JSON格式来建立数组，即直接使用：[parm,param,param...]，而不是
采用 new Array(parm,param,param...)这种语法。由于使用JSON格式的语法是
引擎直接解释的。然后者则须要调用Array的构造器
13：尽可能使用正则表达式来操做字符串，例如替换、查找等。由于JS的循环速度比
较慢，而正则表达式的操做是用C写成的API，性能比较好
14：对于大的JS对象，由于建立时时间和空间的开销都比较大，所以应尽可能缓存
15：避免使用document.write，可使用innerHTML来向页面添加对象
16：避免使用setTimeOut方法，应用setInterval，setTimeout每次要重置定时器
17：避免with语句，with会建立自已的做用域，会增长其中执行代码的做用域长度

18：尽可能减小对DOM的操做，避免回流，引发回流的操做常见的有：
（1）改变窗体大小
（2）更改字体
（3）添加移除stylesheet块
（4）内容改变哪怕是输入框输入文字
（5）CSS虚类被触发如 :hover
（6）更改元素的className
（7）当对DOM节点执行新增或者删除操做或内容更改时
（8）动态设置一个style样式时
（9）当获取一个必须通过计算的CSS值时，好比访问offsetWidth、clientHeight等
为了不回流的发生，建议：
（1）在对DOM进行操做以前，尽量把屡次操做内容准备好，而后尽可能1次操做完成
（2）在对DOM操做以前，把要操做的元素，先从当前DOM结构中删除，等处理好事后再添加回
到DOM中。从DOM中删除元素的方法有：
A：经过removeChild()或者replaceChild()实现真正意义上的删除
B：设置该元素的display样式为“none”

（3）对获取的那些会触发回流操做的属性，好比offsetWidth等 缓存起来
（4）尽可能避免经过style属性对元素的外观进行修改，由于会触发回流操做
A：使用更改className的方式替换style.xxx=xxx的方式
B：使用style.cssText = ‘’;一次写入样式
C： 避免设置过多的行内样式
（5）添加的结构外元素尽可能设置它们的位置为fixed或absolute
（6）避免使用表格来布局
（7）避免在CSS中使用JavaScript表达式
19：对局部使用的JS，采用异步装载、按需装载JS的方式，好比使用jQuery的：
jQuery.getScript(“t.js”,function(){t1();});
这个是没有缓存js的，要缓存的话，以下：

jQuery.ajax({
   url: "t.js",
   dataType: "script",
   cache: true
}).done(function() {
    t1();
});

一，将脚本放在底部，脚本放在顶部带来的问题：
   1：使用脚本时，对于位于脚本如下的内容，逐步呈现将被阻塞
   2：在下载脚本时会阻塞并行下载
  放在底部，当脚本没加载进来，用户就触发脚本事件，可能会出现JS错误问题。
二，将样式文件放在页面顶部
样式表加载完成后，才会构建渲染树，所以样式文件放在页面底部可能会
出现两种状况：
1：白屏
2：无样式内容的闪烁
三，CSS尽可能写在<head>，不要出如今<body>中，不然会引发从新渲染
四，最小化 iframe 的数量
iframe会致使重绘，同时iframe也是SEO的大忌。针对前端优化来讲iframe
有其好处，能够异步和并发加载资源浏览器

五，减小DOM访问缓存

查找DOM会花费时间，若是更改了位置和外观，可能会引发重绘和回流，建议:
1：使用临时变量（或数组）缓存已经访问过的元素
2：“离线”更新节点, 再将它们添加到树中
3：避免使用 JavaScript 输出页面布局--应该是 CSS 的事儿
4：批量操做时，使用字符串拼接，用innerHTML开销更小，速度更快，同时内存
也更安全安全

六，避免没必要要的渲染

（1）position:fixed：fixed定位在滚动时会不停的进行渲染，特别是若是是页面
顶部有个fiexd，页面底部有个相似返回顶部的fixed，则在滚动时会整个页面进
行渲染，效率很是低。能够加transform: translateZ(0);解决。
（2）hover 特效：建议页面滚动时，先取消hover效果，滚动中止后再加上hover效
果。这个能够经过在外层加类名进行控制
（3）应该设置border:none，而不是border:0，设置为0，仍然是会渲染的

七，使用 <link> 而不是@importChoose，在 IE 中 @import 指令等同于把 link 标记写在 HTML 的底部。
八，全部图片都应该指定高宽属性，不然浏览器会从新渲染网页
九，尽可能少用帧数过多过快的FLASH，GIF动画
十，尽可能避免使用CSS子选择符，CSS子选择符会形成一次浏览器的筛选和定位计算，
好比能用.div 的，就尽可能不要用.nav ul li a .div 这样的写法
十一，尽可能避免渲染过程的”中断”，好比等待js的执行
十二，不要在 HTML 中使用缩放图片
十三，避免使用 CSS 表达式

现代的浏览器会作不少优化，典型如：

1：资源预取和排定优先次序
2：DNS预解析
3：TCP预链接
4：页面预渲染
为了更好的利用浏览器的这些机制，咱们能够：
1：CSS和JavaScript等重要资源应该尽早在文档中出现
2：应该尽早交付CSS，从而避免渲染阻塞并让JavaScript执行
3：非关键性的JavaScript应该推迟，以免阻塞DOM和CSSDOM的构建
咱们能够在文档中嵌入提示，以触发浏览器为咱们采用其余优化机制
1：预解析特定域名，如：<link rel=“dns-prefetch” href=“//abc.com”>
2：预先获取页面后面要用的资源，如：<link rel=“subresource” href=“/js/a.js”>
3：预先获取未来导航要用的资源，如：<link rel=“prefetch” href=“/img/a.jpg”>
4：根据对用户下一个目标的预测，预渲染特定页面，如：<link rel=“prerender”
href=“//abc.com/a/b/d.html”>
这些提示会触发浏览器的优化机制，若是浏览器不支持，会当成空操做，没有害处