前端网页优化

性能优化概述

从输入 URL 到页面加载完成，完整的链路

1.DNS 解析
2.TCP 连接
3.HTTP 请求抛出
4.服务端处理请求，HTTP 响应返回
5.浏览器拿到响应数据，解析响应内容，把解析的结果展示给用户

整个性能消化
在这里插入图片描述
http层面优化

DNS 解析:
DNS 实现域名到IP的映射。通过域名访问站点，每次请求都要做DNS解析。目前每次DNS解析，通常在200ms以下。一般采用DNS Prefetch 一种DNS 预解析技术，当你浏览网页时，浏览器会在加载网页时对网页中的域名进行解析缓存，这样在你单击当前网页中的连接时就无需进行DNS的解析，减少用户等待时间，提高用户体验。


<link rel="dns-prefetch" href="www.baidu.com" />  
只有部分浏览器支持

TCP 连接：

采用http2.0，可以复用tcp通道，采用二进制格式而非文本格式，使用报头压缩，HTTP/2降低了开销，支持cache push
浏览器并发

基于端口跟线程切换开销，浏览器不可能无限的并发请求。chrome的并发为6，超过限制数目的请求就会被阻塞；
对于某些静态资源，图片等等，我们可以对其URL分散处理，不同的资源域名(部署在cdn上)。
http请求次数

减少http的请求次数，将多个请求合并成同一个，减少http的开销
webpack

充分利用webpack提供给我们的能力，利用DllPlugin与commonPlugins等插件对我们代码进行
优化，文件的分割与合并，公共代码的提取，长缓存等策略，webpack是个很好的东西，值得大家仔细研究
http压缩

采用Gzip压缩：HTTP 压缩就是以缩小体积为目的，对 HTTP 内容进行重新编码的过程，原理是找出一些重复出现的字符串、临时替换它们，从而使整个文件变小，文件中代码的重复率越高，那么压缩的效率就越高，使用 Gzip 的收益也就越大

浏览器渲染
浏览器渲染机制

DOM树:

解析 HTML 以创建的是 DOM 树（DOM tree ）：渲染引擎开始解析 HTML 文档，转换树中的标签到 DOM 节点，它被称为“内容树”。
CSSOM树：

解析 CSS（包括外部 CSS 文件和样式元素）创建的是 CSSOM 树。CSSOM 的解析过程与 DOM 的解析过程是并行的。
-渲染树：

CSSOM 与 DOM 结合，之后我们得到的就是渲染树（Render tree ）。
布局渲染树：

从根节点递归调用，计算每一个元素的大小、位置等，给每个节点所应该出现在屏幕上的精确坐标，我们便得到了基于渲染树的布局渲染树（Layout of the render tree）。
绘制渲染树:
遍历渲染树，每个节点将使用 UI 后端层来绘制。整个过程叫做绘制渲染树（Painting the render tree）。
阻塞
普通模式，JS 会阻塞浏览器，浏览器必须等待 index.js 加载和执⾏完毕才能去做其它事情。一般将此类js放在在标签的底部，减少对整个页面下载的影响

async 模式：JS 不会阻塞浏览器做任何其它的事情。它的加载是异步的，当它加载结束，JS 脚本会⽴即执⾏。


<script async src="index.js"></script>

defer 模式：JS 的加载是异步的，执⾏是被推迟的。等整个⽂档解析完成DOMContentLoaded 事件即将被触发时，被标记了defer 的 JS ⽂件才会开始依次执⾏


<script defer src="index.js"></script>

一般当我们的脚本与 DOM 元素和其它脚本之间的依赖关系不强时，我们会选择 async；当脚本依赖于 DOM
元素和其它脚本的执⾏结果时，我们会选择 defer。

动态加载脚本：此文件当元素添加到页面之后立刻开始下载。无论在何处启动下载，文件的下载和运行都不会阻塞其他页面处理过程。甚至可以将这些代码放在部分而不会对其余部分的页面代码造成影响

var script = document.createElement ("script");
   script.type = "text/javascript";
   script.src = "script1.js";
   document.getElementsByTagName("head")[0].appendChild(script);

可采用HTML5的离线储存

剥离静态资源请求到CDN

一般在主域名下的HTTP请求里都会携带大量Cookie信息，最大4KB，每个域名下最多50条；但如果仅仅访问js/css/jpeg等静态资源文件的话是不需要Cookie信息，所以可以将整个站点的静态资源放到一个专门的域名下，以求减小网络开销，也就是Cookie free domain；

多域名存储资源

浏览器在对同一个域名下的并发请求资源数量是有上限的（IE为8个，chrome为4-6个），一个完整的html页面需要加载的资源一般已经超过100个，所以为了缩短加载速度可以将下载资源分布在多个域名下（也不能太多，DNS查询也需要耗时）；这样不仅可以增加资源加载的并发数，还可以实现静态资源Cookie Free加载；

合并HTTP请求

加速网页加载不仅需要加快单个请求速度的同时，还需要减少总的请求个数，css spirites可以将多张图片合并成一张图片，这样只需要一次请求，不同css展示图片上不同的位置；通过使用smartspirites命令在打包的时候讲图片合并成一张图片；

压缩请求资源

将js/css进行concat, minify和compress，最终合并成一个大的js/css，然后使用gzip生成.gz格式的文件，只要在request里指定accept-encoding=gzip,deflate，则可以请求打包之后的.gz文件，极大降低http请求的个数和带宽的负载压力。基于Ant的构建打包里js/css的合并、混淆和压缩可以通过concat, closure实现，而gzip则需要client browser和web server同时约定一些规定。首先client browser发送的request要写明accept-encoding=gzip,deflate，表示可以接受gzip的文件编码；然后web server将js/css文件打包成跟源文件具有同样名字路径的gz后缀文件，并且在response里写明content-encoding=gzip，这样web server响应请求的时候就可以返回gz文件，web browser也可以正确对gz文件进行解析。

合理利用浏览器cache

浏览器会将网页资源cache到客户端本地，然后通过HTTP request header里的cache-control，expires等来控制cache的生命周期。

猜你喜欢