前端性能优化

Dear 丶 2022-06-06 10:25 406阅读 0赞

前端性能优化的方法：合并、压缩、缓存或者在服务器上开启gzip之类的，目的都是为了让页面加载的更快

资源预拉取（prefetch）则是另一种性能优化的技术。通过预拉取可以告诉浏览器用户在未来可能用到哪些资源。

**1、DNS prefetch:**

DNS prefetching通过指定具体的URL来告知客户端未来会用到相关的资源，这样浏览器可以尽早的解析DNS。比如我们需要一个在www.funwall.cn的图    片或者视频文件。在<head>就可以这么写：

当请求这个域名下的文件时就不需要等待DNS查询了。项目中有用到第三方的代码时这么做尤其有益（其他的使用场景，比如当静态资源和HTML不在     一个域上，而在CDN上；又比如在重定向前可以加上DNS prefetch)。

**2、Preconnect**

和DNS prefetch类似，preconnect不光会解析DNS，还会建立TCP握手连接和TLS协议（如果需要）。

开发者可以提前告诉浏览器那些通信在实际请求发起前就建立连接  
  举个栗子：  [![xfont-preconnect.png.pagespeed.ic.tC0wdnTl8DuD8UE7Xn1Y.png][]][xfont-preconnect.png.pagespeed.ic.tC0wdnTl8DuD8UE7Xn1Y.png] 上半张图显示了浏览器先拉html、再拉CSS并建立好CSSOM后，发现需要两个外链的字体（在fonts.gstatic.com上）,然后浏览器开始发     起两   个请求，具体来说，需要对这个域进行DNS解析、TCP和TLS握手（一个建立后可以复用给另一个连接）。

目前只支持firefox 39+    chrom46+

3、Prefetch  
  当能确定网页在未来一定会使用到某个资源时，开发者可以让浏览器提前请求并且缓存好以供后续使用。prefetch支持预拉取图片、脚本或者任何可     以被浏览器缓存的资源

不同于DNS prefetch，上面的写法可是会去请求、下载资源并且缓存起来。当然也是有一些发生条件的。比如，客户端可能会在弱网络下不去请求较    大的字体文件，Firefox则只会在浏览器空闲的时候prefetch资源..

**prefetch很适用于优化webfonts的性能**。以前，字体文件必须等DOM和CSSOM创建好后才能下载，可如果prefetch了字体，这个瓶颈就能轻松解决    了。Prefetch没有同域的要求

**4、subresource**

subresource**可以用来指定资源是最高优先级**的。比如，在Chrome和Opera中我们可以加上下面的代码

rel=subresource是一种新的连接，指定当前页面资源的提前加载，rel=prefetch指定了下载后续页面用到资源的低优先级

**所以，如果资源是在当前页面需要，或者马上就会用到，则推荐用subresource，否则还是用prefetch**  
  
**5、prerender**

prerender是一个重量级的选项，它可以让浏览器提前加载指定页面的所有资源

但是要注意，一定要在十分确定用户回点某个链接时才用这个特性，否则客户端就会无端的下载很多资源和渲染这个页面

转载连接：http://blog.csdn.net/franktaoge/article/details/51473823

[xfont-preconnect.png.pagespeed.ic.tC0wdnTl8DuD8UE7Xn1Y.png]: https://1-ps.googleusercontent.com/sk/bYSmB63yuhjL_l7bPRuu4R3ENi/www.igvita.com/posts/15/xfont-preconnect.png.pagespeed.ic.tC0wdnTl8DuD8UE7Xn1Y.png