4-3 页面性能

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

1. 资源压缩合并,减少 HTTP 请求

2. 非核心代码异步加载

   • 异步加载的方式
     1. 动态脚本的加载(通过document.create一个script标签,然后再添加到body中去)
     2. defer
     3. async
   • 异步加载的区别
     1. defer 是在html文档加载完毕后执行,如果是多个js,则按照加载的顺序依次执行
     2. async 是在加载完成后立即执行,如果是多个js,加载和执行的顺序不是依次进行

3. 利用浏览器缓存(最重要)

   • 缓存的分类
     1. 强缓存 问都不问服务器,直接拿过来就用了,强制缓存
        • Expires (http响应头上): Expires:Tue, 12 Jun 2018 08:30:15 GMT 这是一个绝对时间
        • Cache-Control: Cache-Control:max-age=31536000 这是一个相对时间,在这个时间内我不会再向服务器去请求资源,都会在浏览器直接拿缓存
        • 总之就是在这个时间之前,我不会和服务器通信了,直接从副本中拿出来给页面用
        • 如果这两个时间都下发了以后者为准
     2. 协商缓存 浏览器发现本地有这个副本,但我又不确定用不用它,那怎么办啊,我得向服务器问一下它,这个文件要不要用
        • Last-Modified if Modified Sence : Last-Modified Wed, 25 Nov 2015 07:48:07 GMT 上次修改的时间
        • ETag If-None-Match: ETag:"AFxUj3Ewv5-31T_T8ldpjkSkJy8D" 哈希值 当过了强缓存的时间,浏览器再向服务器请求问它这个资源我可不可以再用,就需要 If-None-Match了
   • 缓存的原理

4. 使用CDN

5. 预解析DNS

   <meta http-equiv="x-dns-prefetch-control" content="on" />
   <link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />
   

   ​