前端性能优化总结

Posted 2020-09-17

前端性能优化：健康的优化应该是根据页面的加载过程，全面的优化过程

从输入URL到页面加载完成的整个过程：从浏览器地址栏的请求链接开始，浏览器通过DNS解析查到域名映射的IP地址，成功之后浏览器端向此IP地址取得连接，成功连接之后，浏览器端将请 求头信息 通过HTTP协议向此IP地址所在服务器发起请求，服务器接受到请求之后等待处理，最后向浏览器端发回响应，此时在HTTP协议下，浏览器从服务器接收到 text/html类型的代码，浏览器开始显示此html，并获取其中内嵌资源地址，然后浏览器再发起请求来获取这些资源，并在浏览器的html中显示。

1. 输入地址，浏览器查找域名对应的 IP 地址，这一步包括DNS具体的查找过程，包括：浏览器缓存->系统缓存->路由器缓存...

优化原则： 减少DNS查找次数 

1）缓存DNS查找记录；2）减少主机名的数量（2-4个主机）。把页面中的内容分割成至少两部分但不超过四部分。可以在减少DNS查找次数和保持较高程度并行下载两者之间权衡。

2. 浏览器根据 IP 地址与服务器建立 socket 连接，通信连接的建立需要三次握手

优化原则1：使用内容分发网络（CDN）

其目的是通过在现有的Internet中增加一层新的网络架构，将网站的内容发布到最接近用户的网络"边缘"（边缘服务器），使用户可以就近取得所需的内容，解决Internet网络拥挤的状况，提高用户访问网站的响应速度。从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均等原因所造成的用户访问网站响应速度慢的问题。

优化原则2：用域名划分页面内容

按页面内容划分域名，在合适的资源服务器上存放文件，可以最大限度地实现并行下载。由于DNS查找带来的影响你首先要确保你使用的域名数量在2个到4个之间。例如，你可以把用到的HTML内容和动态内容放在www.example.org上，而把页面各种组件（图片、脚本、CSS)分别存放在statics1.example.org和statics.example.org上。

3. 浏览器向web服务器发送HTTP请求

终端用户响应的时间中，有80%用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、Flash等。

优化原则1：尽量减少HTTP请求次数

1）合并文件，尽可能的将外部的脚本、样式进行合并，多个合为一个

2）CSS Sprites是减少图像请求的有效方法

3）使用内联图象，内联图像是使用data:URL scheme的方法把图像数据加载页面中，优点：1、减少http请求次数；2、做为背景平铺类的图片使用内联图片的话，减少http请求次数，并且不会影响加载速；缺点：1、浏览器不会缓存内联图片资源；2、兼容性较差，只支持ie8以上浏览器；3、超过1000kb的图片，base64编码会使图片大小增大，导致网页整体下载速度减慢。

4）使用Lazy Load Images，

这条策略实际上并不一定能减少 HTTP请求数，但是却能在某些条件下或者页面刚加载时减少 HTTP请求数。对于图片而言，在页面刚加载的时候可以只加载第一屏，当用户继续往后滚屏的时候才加载后续的图片。这样一来，假如用户只对第一屏的内容感兴趣时，那剩余的图片请求就都节省了。

 

 

优化原则2：合理的利用缓存

1）添加Expires或Cache-Control信息头

2）配置ETag 实体标签

优化原则3：使iframe的数量最小。 

优化原则4：不要出现404错误。

4. 等待响应

优化原则1：避免重定向

跳转会降低用户体验。在用户和HTML文档中间增加一个跳转，会拖延页面中所有元素的显示，因为在HTML文件被加载前任何文件（图像、Flash等）都不会被下载。有一种经常被网页开发者忽略却往往十分浪费响应时间的跳转现象。这种现象发生在当URL本该有斜杠（/）却被忽略掉时。在Apache服务器中可以使用Alias 或者 mod_rewrite或者the DirectorySlash来避免。连接新网站和旧网站是跳转功能经常被用到的另一种情况。这种方法对于开发者来说可以降低复杂程度，但是它同样降低用户体验。一个可替代方法就是如果两者在同一台服务器上时使用Alias和mod_rewrite和实现。如果是因为域名的不同而采用跳转，那么可以通过使用Alias或者mod_rewirte建立CNAME（保存一个域名和另外一个域名之间关系的DNS记录）来替代。

优化原则2：服务器端开启Gzip压缩

通过减小HTTP响应的大小可以节省HTTP响应时间。Gzip压缩所有可能的文件类型，图像和PDF文件除外。

优化原则3：减小Cookie体积

HTTP coockie可以用于权限验证和个性化身份等多种用途。coockie内的有关信息是通过HTTP文件头来在web服务器和浏览器之间进行交流的。因此保持coockie尽可能的小以减少用户的响应时间十分重要。

优化原则4：对于页面内容使用无coockie域名 

5. 服务器传输处理好的html文本内容到浏览器，浏览器解析html，并加载css，js，图片等内容

优化原则1：使用外部javascript和CSS ；削减JavaScript和CSS；把样式表置于顶部 ，把脚本置于页面底部 ；剔除重复脚本 

优化原则2：避免使用CSS表达式；用<link>代替@import ；避免使用滤镜 ；

优化原则3：favicon.ico要小而且可缓存 ；不要在HTML中缩放图像 ；