页面性能--待完善

本文是学习慕课网上课程前端跳槽面试必备技巧的学习笔记，便于之后复习。本文说明页面性能的方法：

提升页面性能的方法有哪些

1. 资源压缩合并，减少HTTP请求
2. 非核心代码异步加载   //异步加载的方式  异步加载的区别
3. 利用浏览器缓存（很关键的一步） // 缓存的分类 //缓存的原理
4. 使用CDN
5. 预解析DNS

 标签在很多浏览器中默认打开预解析 , 如果是https协议开头的 很多浏览器中默认关闭预解析

 

异步加载

方式：动态脚本加载 、defer、async

defer

IE4.0就出现，defer属声明脚本中将不会有document.write和dom修改。浏览器会并行下载其他有defer属性的script。而不会阻塞页面后续处理。注：所有的defer脚本必须保证按顺序执行的。

async

Html5新属性。脚本将在下载后尽快执行，作用同defer，但是不能保证脚本按顺序执行。他们将在onload事件之前完成。

区别：

1. defer是在html解析完成后才会执行，如果是多个，按照加载的顺序依次执行
2. async是在加载完之后立即执行，如果是多个，执行顺序和加载顺序无关

缓存的分类

       浏览器缓存(Brower Caching)是浏览器在本地磁盘对用户最近请求过的文档进行存储，当访问者再次访问同一页面时，浏览器就可以直接从本地磁盘加载文档。

缓存主要分为强缓存和协商缓存

浏览器在第一次请求发生后，再次请求时：

        浏览器会先获取该资源缓存的header信息，根据其中的expires和cache-control判断是否命中强缓存），若命中则直接从缓存中获取资源，包括缓存的header信息，本次请求不会与服务器进行通信； 

        如果没有命中强缓存，浏览器会发送请求到服务器，该请求会携带第一次请求返回的有关缓存的header字段信息（Last-Modified/IF-Modified-Since、Etag/IF-None-Match）,由服务器根据请求中的相关header信息来对比结果是否命中协商缓存，若命中，则服务器返回新的响应header信息更新缓存中的对应header信息，但是并不返回资源内容，它会告知浏览器可以直接从缓存获取；否则返回最新的资源内容。

强缓存

强缓存是利用http的返回头中的Expires或者Cache-Control两个字段来控制的，用来表示资源的缓存时间。浏览器直接从缓存中获取资源，而不经过服务器。

Expires

Expires：Thu,21 Jan 2017 23:39:02 GMT   // 资源过期时间 是服务器的绝对时间

这是http1.0时的规范；它的值为一个绝对时间的GMT格式的时间字符串。如果发送请求的时间在expires之前，那么本地缓存始终有效，否则就会发送请求到服务器来获取资源。

Cache-Control

Cache-Control:max-age=3600 // 相对时间 请求到资源后，以本地时间为准，3600s内不再请求服务器，直接访问浏览器缓存

这是http1.1时出现的header信息，主要是利用该字段的max-age值来进行判断，它是一个相对值；资源第一次的请求时间和Cache-Control设定的有效期，计算出一个资源过期时间，再拿这个过期时间跟当前的请求时间比较，如果请求时间在过期时间之前，就能命中缓存，否则就不行。

注意：如果cache-control与expires同时存在的话，cache-control的优先级高于expires

协商缓存

       向服务器发送请求，服务器会根据这个请求的request header的一些参数来判断是否命中协商缓存，如果命中，则返回304状态码并带上新的response header通知浏览器从缓存中读取资源。即第一次请求的响应头带上某个字段（Last-Modified或者Etag），则后续请求则会带上对应的请求字段（If-Modified-Since或者If-None-Match）。

Last-Modify/If-Modify-Since

Last-Modified If-Modified-Since Last-Modified: Wed, 21 Jan 2017 23:39:02 GMT

       浏览器第一次请求一个资源的时候，服务器返回的header中会加上Last-Modify，Last-modify是一个时间标识该资源的最后修改时间；当浏览器再次请求该资源时，request的请求头中会包含If-Modify-Since(Last-Modify的值)。服务器收到If-Modify-Since后，根据资源的最后修改时间判断是否命中缓存.如果在If-Modify-Since之后资源没有被修改过，则命中。流程参考下图▼

ETag/If-None-Match

Etag：是web服务器响应请求时，告诉浏览器当前资源在服务器的唯一标识，相当于版本id（生成规则由服务器决定）。ETag可以保证每一个资源是唯一的，资源变化都会导致ETag变化。

If-None-Match：当资源过期时（使用Cache-Control标识的max-age），发现资源具有Etage声明，则再次向服务器请求时带上头If-None-Match （Etag的值）。服务器收到请求后发现有头If-None-Match 则与被请求资源的相应校验串进行比对，决定是否命中协商缓存；如果资源版本标识一致，则命中。

ETag和Last-Modified的作用和用法，他们的区别：

1.Etag要优于Last-Modified。Last-Modified的时间单位是秒，如果某个文件在一秒内改变了多次，那么他们的Last-Modified其实并没有体现出来修改，但是Etag每次都会改变确保了精度；

2.在性能上，Etag要逊于Last-Modified，毕竟Last-Modified只需要记录时间，而Etag需要服务器通过算法来计算出一个hash值；

3.在优先级上，Last-Modified与ETag是可以一起使用的，服务器会优先验证ETag，一致的情况下，才会继续比对Last-Modified，最后才决定是否返回304。

 

强缓存和协商缓存两者的共同点是都从客户端缓存中读取资源；区别是强缓存不会发请求，协商缓存会发请求。

用户行为对缓存的影响

本文参考浏览器缓存：强缓存和协商缓存