性能优化

2020-12-23

字数统计: 437 | 阅读时长≈ 2 分钟

性能优化开篇

Html 数量控制 -> 压缩合并（30k为标准，请求变少） -> 开启CDN， gzip,brotli压缩方式 -> 服务端开启keep-alive http2 -> 测速 -> 缓存

离线缓存

localStorage 5M 低端机型，不能占用过高

script 放在底部，不会影响dom的解析，但是会影响dom的渲染

<body>
  <h1>标题</h1>
  <script>
    alert(0)
  </script>
</body>

同样css不会影响dom的解析，但是影响dom的渲染

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css">
</head>

<body>
  <h1>标题</h1>
</body>

css 加载会阻塞js的执行，因为不知道js中是否使用了css, 但是不会影响dom的解析

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css">
</head>

<body>
  <h1>标题</h1>
  <script>
    alert(0)
  </script>
</body>

css的加载不会影响dom ready,但是如果css,下面有js脚本，则不会执行dom ready，因为不知道是否使用了css样式

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    document.addEventlister('DomContentloaded',()=>{console.log('ready')})
  </script>
  <link rel="stylesheet" href="./css">
</head>

<body>
  <h1>标题</h1>
  <!-- <script>
    alert(0)
  </script> -->
</body>

渲染中的性能优化

打赏

版权声明： 本博客所有文章除特别声明外，著作权归作者所有。转载请注明出处！