前端机能优化——加载页面和静态资本（入门级别）

2019年8月24日 238次阅读 来源: 明矾

近来一直在预备口试，打仗了一些机能优化方面的学问，前端机能优化重要从两个方面举行：

1.加载页面和静态资本；
2.页面衬着；

这篇文章重要讲第一点：

加载页面和静态资本

加载页面和静态资本重要可以从三个角度举行：

  1. 静态资本的兼并、紧缩(http2.0时期有变)
  2. 静态资本缓存（css、img）
  3. 运用CDN让静态资本加载更快

我们一个一个细致展开说。

静态资本的兼并、紧缩

静态资本的兼并和紧缩可以削减HTTP要求的数目和要求资本的大小。
可以运用webpack或fis3举行。以fis3为例：

// 消灭其他设置，只保存以下设置
fis.match('*.js', {
  // fis-optimizer-uglify-js 插件举行紧缩，已内置
  optimizer: fis.plugin('uglify-js')
});

fis.match('*.css', {
  // fis-optimizer-clean-css 插件举行紧缩，已内置
  optimizer: fis.plugin('clean-css')
});

fis.match('*.png', {
  // fis-optimizer-png-compressor 插件举行紧缩，已内置
  optimizer: fis.plugin('png-compressor')
});

上面就是紧缩资本的设置文件。

但http2.0中增加了许多特征，比方多路复用，也就是说在将来的前端工作中，能够静态资本的兼并就显得没那末重要了！

静态资本缓存

我们在写前端页面的时刻，常常要引入多个css、js文件，这些文件中，有一些文件是不太须要修正的，然则这些不太须要修正的文件，假如每次用户接见页面都要从新加载就会很影响机能。合理的做法是关于更新频次不太高的文件，让用户可以应用当地缓存。

浏览器缓存的分类：

1）强迫缓存：缓存资本未过有效期则不须要要求资本。HTTP首部字段应用catch-control,Expires设置缓存逾期时候.

Expires：

Expires: Thu, 10 Nov 2017 08:45:11 GMT

这个字段示意的是缓存到期时候

相对时候，即服务器时候。浏览器会搜检当前时候，假如还没有到失效时候，则会直接运用缓存文件。然则由于这个字段中运用的是相对时候，能够涌现客户端与服务器时候差别的状况，而且客户端用户可以本身修正时候。

catch-control

Cache-Control: max-age=2592000

这个字段示意的也是逾期时候，以上面为例就是2592000s后逾期。然则它用的是相对时候，纵然客户端时候转变，相对时候也不会随之转变，这确保服务器和客户端的时候一致性。

2）对照缓存：从缓存中猎取对应的数据标识，然后向服务器发送要求，确认数据是不是更新，假如已更新，则返回新数据和新缓存，假如没有更新，则返回304状况码，关照客户端缓存未更新，可以运用缓存。经由历程HTTP的last-modified,Etag字段推断。对照缓存和强迫缓存比拟，越发适合于一些常常要更新的资本文件。

Last-Modified:

Last-Modified: Thu, 10 Nov 2015 08:45:11 GMT

第一次要求资本时，服务器返回末了一次更新资本时候。浏览器下一次要求资本时，就会发送If-Modified-Since字段。

If-Modified-Since：再次要求时，要求头中带有该字段，服务器会将If-Modified-Since的值与Last-Modified字段举行对照，假如相称，则示意未修正，相应304，让浏览器应用缓存；反之，则示意修正了，缓存逾期，相应200状况码，返回数据。

这个字段可以和Cache-Control合营运用。

然则他照样有肯定缺点的：

假如资本更新的速率是秒以下单元，那末该缓存是不能被运用的，由于它的时候单元最低是秒。
假如文件是经由历程服务器动态天生的，那末该要领的更新时候永远是天生的时候，只管文件能够没有变化，所以起不到缓存的作用。

Etag

Etag存储的是资本的实体标识(平常都是hash天生的，哈希字符串)，服务器存储着文件的Etag字段，当资本内容更新的时刻，Etag会变。服务器可以在与每次客户端传送If-no-match的字段举行比较，假如相称，则示意未修正，相应304；反之，则示意已修正，相应200状况码，返回新资本。

下面是打开了segmentfault上的一个网页，然后从新革新页面的状况。

《前端机能优化——加载页面和静态资本（入门级别）》

运用CDN让静态资本加载更快

在差别地区的用户要求资本（接见网站）的相应速率具有很大的差别，为了进步用户体验，我们在用户和服务器中心加了一层，就是CDN。CDN（Content Delivery Network），它的头脑就是将源站的内容分发到最接近用户的收集边沿节点，让用户可以就近获得所需的内容，进步用户接见的相应速率。

当用户提议HTTP要求时，经由历程CDN向边沿节点服务器提议要求，边沿节点会检测当前节点是不是具有你想要求的数据，假如没有就去源站，假如有要求数据就会进一步推断，这个数据是不是在有效期，依据是不是逾期来决议。（细致的历程更庞杂一点，触及负载平衡等，下面一篇文章会细致讲）

    原文作者：明矾
    原文地址: https://segmentfault.com/a/1190000013772876
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞