【优化】前端优化的几种常用方法（持续更新）

雅虎军规

 

一、有关服务器端

1.使用CDN

　　CDN工作流程如下：

1.浏览器获得需要访问的资源的域名;

2.通过域名解析得到该域名指向CDN的一个CNAME;

3.为了获得IP地址，需要对CNAME进行域名解析，这时请求就会被发送到CDN的中心服务器，全局负载均衡通过预先设定的规则，同时根据用户访问的地理位置信息，把最合适的边缘服务器IP地址返回；

4.浏览器获得IP地址后，就向边缘服务器发出请求；

5.边缘服务器根据访问域名，首先搜索缓存，查看资源是否存在，存在则直接返回资源给浏览器，直接完成整个资源请求过程，否则就根据缓存内部的DNS解析得到资源实际IP地址（即客户的服务器IP地址），向该IP地址发起资源请求；

6.边缘服务器向客户服务器请求资源成功后，就把该资源加入本身的高速缓存中，并把资源发送给用户。

 

2.静态资源缓存

• Cache-contral/Expires
• 配置Etag(弱缓存)

　　　　实体标签(EntityTag)是唯一标识了一个组件的一个特定版本的字符串，是web服务器用于确认缓存组件的有效性的一种机制，通常可以使用组件的某些属性来构造它。　

　　　　ETag主要是为了解决Last-Modified无法解决的一些问题：

1. 一些文件也许会周期性的更改，但是他的内容并不改变(仅仅改变的修改时间)，这个时候我们并不希望客户端认为这个文件被修改了，而重新GET;

2. 某些文件修改非常频繁，比如在秒以下的时间内进行修改，(比方说1s内修改了N次)，If-Modified-Since能检查到的粒度是s级的，这种修改无法判断(或者说UNIX记录MTIME只能精确到秒);

3. 某些服务器不能精确的得到文件的最后修改时间。

• 移动端离线缓存

　　　　manifest 文件可分为三个部分：
　　　　（1） CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存，等价于CACHE
　　　　（2） NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
　　　　（3） FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面

• LocalStorage

 

二、有关网络

1.减少http请求数量(在http2.0中没有效果)

• 小图片css sprites
• 组件合并

　　　　注意合并顺序、依赖关系

• 避免重复资源请求（上面说的静态资源缓存）

 

2.减少请求带宽

• 压缩JS、CSS

　　　　尽可能控制DOM节点数；

　　　　精简css、 JavaScript，移除注释、空格、重复css和脚本

• 压缩图片
• Gzip

　　　　Gzip的思想就是把文件先在服务器端进行压缩，且压缩率达到85%，然后再传输，传输完毕后浏览器会 重新对压缩过的内容进行解压缩，并执行。。好处在于Gzip的支持已经很好，且爬虫可识别，压缩率达到66%-85%显著减少了文件传输的大小。另外，gzip对pdf文件的压缩效果不大，而且会浪费CPU。

• 专门主机存静态资源（cookie优化）

 

　　

3.域名小且独立

　　短小可以减少头部开销，因为域名越短请求头起始行的 URI 就越短。之所以要求独立，因为独立域名不会共享主域的 Cookie，可以有效减小请求头大小，这个策略一般称之为 Cookie-Free Domain；另外一个原因是浏览器对相同域名的并发连接数限制，一般允许同域名并发 6~8 个连接，域名不是越多越好，每个域名的第一个连接都要经历 DNS 查询（DNS Lookup），导致会耗费一定的时间，控制域名使用在2-4个之间。另外注意：同一静态资源在不同页面被散列到不同子域下，会导致无法利用 HTTP 缓存。

 

4.使用http2.0

　　所有的HTTP2.0的请求都在一个TCP链接上

　　HTTP2.0所有通信都是在一个TCP连接上完成。HTTP 2.0 把 HTTP 协议通信的基本单位缩小为一个一个的帧，这些帧对应 着逻辑流中的消息。并行地在同一个 TCP 连接上双向交换消息。就好比，我请求一个页面http://www.qq.com。页面上所有的资源请求都是客户端与服务器上的一条TCP上请求和响应的！

　　大多数HTTP 连接的时间都很短，而且是突发性的，但TCP 只在长时间连接传输大块数据时效率才最高。HTTP 2.0 通过让所有数据流共用同一个连接，可以更有效地使用TCP 连接，让高带宽也能真正的服务于HTTP的性能提升。

　　同时，单链接多资源的方式，使到至上而下的层面都得到了好处：

　　　　1.可以减少服务链接压力,内存占用少了,连接吞吐量大了

　　　　2.由于 TCP 连接减少而使网络拥塞状况得以改观;

　　　　3.慢启动时间减少,拥塞和丢包恢复速度更快。

 

三、客户端优化

　　JS方面的可以看我之前JS版面中的优化，下面主要介绍CSS优化及一些补充

1.CSS方面

• 建议使用类选择器，访问比较快；
• 不建议使用很长的base64；
• 避免CSS表达式；
• 避免使用Filters。

 

2.图片格式的选择

• 颜色较为丰富的图片而且文件比较大的（40KB - 200KB）或者有内容的图片优先考虑 jpg；图标等颜色比较简单、文件体积不大、起修饰作用的图片，优先考虑使用 PNG8 格式；图像颜色丰富而且图片文件不太大的（40KB 以下）或有半透明效果的优先考虑 PNG24 格式。
• 条件允许的，使用新格式WEBP和BPG。
• 用SVG和ICONFONT代替简单的图标。

 

3.合理分配资源加载时间，按需加载，包括CSS、JS文件以及图片、业务模块等。

　　根据我们网页最初加载需要的最小内容集推断其他内容延迟加载；无条件提前加载公共内容或根据用户行为推断提前加载某些内容，如根据搜索框输入的文字来判断加载的内容。加载机制如下：

• 　　　　预加载
• 　　　　Dom Ready后加载
• 　　　　onLoad后加载
• 　　　　滚动加载

 

4.减少DNS 查询

　　DNS 查询一般需要几毫秒到几百毫秒，移动环境下会更慢。我们可以预先读取DNS，减少用户等待时间。