提升网页性能的五大策略-优快云博客

本文链接：https://blog.youkuaiyun.com/webFrontEndDev/article/details/102392927

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

1、资源压缩合并，减少 HTTP 请求

2、非核心代码异步加载、异步加载的方式、异步加载的区别

异步加载的方式：

1)、动态脚本加载 —— 用 js 创建 script 标签实现动态加载

2)、defer —— 在 script 标签上加 defer 属性实现异步加载

3)、async —— 在 script 标签上加 async 属性实现异步加载

异步加载的区别：

1)、 defer 是在 HTML 解析完之后都会执行，如果是多个，按照加载的顺序依次执行

2)、async 是在加载完之后立即执行，如果是多个，执行顺序和加载顺序无关

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>性能优化-defer</title>
  <script src="./defer1.js" defer></script>//console.log('defer1')
  <script src="./defer2.js" defer></script>//console.log('defer2')
</head>
<body>
  test
  <script>
    console.log('write')
    document.write('<span>write</span>')
  </script>
  <script>
    for(var i=0; i < 200000; i++){
      if(i%20000 === 0){
        console.log(i)
      }
    }
  </script>
</body>
</html>

//执行结果  结论：先执行同步任务再执行异步任务
write
0
20000
40000
60000
80000
100000
120000
140000
160000
180000
defer1
defer2

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>性能优化-async</title>
  <script src="./async1.js" async></script>
  <script src="./async2.js" async></script>
</head>
<body>
  test
  <script>
    console.log('write')
    document.write('<span>write</span>')
  </script>
  <script>
    for(var i=0; i < 200000; i++){
      if(i%20000 === 0){
        console.log(i)
      }
    }
  </script>
</body>
</html>
//执行结果  结论：页面文件较小、加载速度较快的先执行
write
0
20000
40000
60000
80000
100000
120000
140000
160000
180000
defer2//页面文件较小、加载速度较快的先执行
defer1//页面文件较小、加载速度较快的先执行

3、利用浏览器缓存、缓存的分类、缓存的原理

缓存的分类

缓存：资源文件在浏览器中存在的备份，即访问到的资源文件缓存在本地磁盘，下次访问时直接读取不再请求

1)、强缓存

Expires：过期时间，响应头中的key：value表示的是绝对时间如：Expires:Tue, 09 Feb 2016 15:15:15 GMT，该时间由服务器下发，可能和客户端时间不一致

Cache-Control：public,max-age=25920000 以客户端相对时间为准，在此时间之内不会再请求资源，而是使用缓存文件

如果服务器下发了两个时间，则以后者为准。

2)、协商缓存：和服务器进行版本对比，如过期重新请求，如没有过期不再请求

Last-modified（上次修改时间） If-Modified-Since —— 当强缓存失效，携带上次修改时间，以 HTTP请求头中的 If-Modified-Since 字段携带 Last-modified 与服务器上的 Last-modified 值进行对比。

Etag If-None-Match —— 相当于Hash值，Last-modified 修改时间变了，但是可能内容并没有变，所以增加此字段，服务器下发资源时携带 Etag 值，当过了强缓存时间，浏览器请求服务器携带此值进行对比，判断是否重新请求

4、使用CDN

5、预解析 DNS

//页面中的所有a标签默认打开 DNS 预解析，但是如果页面是 HTTPS 协议，默认是关闭DNS预解析的。通过这个设置来强制打开 DNS 预解析
<meta http-equiv="x-dns-prefetch-control" content="on">

<link rel="dns-prefetch" href="//host_name_to_prefetch.com">

【性能优化】提升页面性能