【知识梳理】4.3页面性能

1.一道面试题

题目：提升页面性能的方法有哪些？

• 1.资源压缩合并，减少HTTP请求
• 2.非核心代码异步加载--->异步加载的方式--->异步加载的区别
• 3.利用浏览器缓存--->缓存的分类--->缓存的原理*
• 4.使用CDN（特别是页面第一次打开的时候，缓存不起作用，此时使用CDN效果明显）
• 5.预解析DNS（页面中涉及多个域名的时候使用）

    //在高级浏览器中a标签是默认打开预解析的，但是在https协议中是默认关闭的，此句话是强制打开a标签的预解析
    
    
    //DNS预解析
    

2.异步加载

异步加载的方式：

• 1.动态脚本加载（动态创建节点：document.createElement("/script/")，用js创建一个标签，再加到文档中）；
• 2.defer（在script标签中加上此属性）；
• 3.async（在script标签中加上此属性）。

异步加载的区别：

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

3.浏览器缓存

缓存的分类：

1.强缓存（在http响应头中，如果两个时间都有，以Cache-Control为准）

• Expire（绝对时间，下发的服务器时间，有可能客户端和服务端时间不一致。Expire：Thu,21 Jan 2017 23:39:02 GMT）；

//在前端标签中设置
  

//在后端设置
response.setDateHeader("Expires",date.getTime()+20000); //Expires:过时期限值 
response.setDateHeader("Expires", 0);//不允许浏览器端或缓存服务器缓存当前页面信息。   

• Cache-Control（相对时间，按照客户端时间，3600秒内使用缓存。Cache-Control:max-age=3600）

    //在前端标签中设置
    
    
    //在后端设置
    response.addHeader( "Cache-Control", "no-cache" );//浏览器和缓存服务器都不应该缓存页面信息

2.协商缓存（问一下服务器）

• Last-Modified（服务器下发的响应头中加，Last-Modified:Thu,21 Jan 2017 23:39:02 GMT）
• If-Modified-Since，（http请求头中加，时间和Last-Modified下发的一致，缺点：文件没变但时间过期，会再次加载）

   //在后端设置
    response.setDateHeader("Last-Modified",date.getTime()); //Last-Modified:页面的最后生成时间 

• Etag （哈希值，服务器下发的响应头中加，文件没改变可继续使用缓存）
• If-None-Match（http请求头中加，时间和Etag下发的一致）

//响应消息头
Etag:"a030f020ac7c01:1e9f" 

4.引申

跟浏览器缓存相关的HTTP头有哪些？

• Expire
• Cache-Control
• Last-Modified、If-Modified-Since
• If-Modified-Since、If-None-Match