高效前端：加快页面打开速度_快速在页面打开前端的方法-优快云博客

本文介绍如何优化网页加载速度，包括调整JS和CSS加载方式，图片优化，使用DNS预读取，以及利用HTTP2等技术手段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

head中的js会引起堵塞，阻碍DOM的渲染，可以使用以下方法代替；
（1）将script标签放在body后面
（2）给script标签添加defer属性，添加了defer属性之后，引入的js文件会变为异步加载形式，而执行的时机在于document的readyState==interactive(可交互）之后，DOMContentLoaded事件之前。同时，加上defer之后，资源的优先级将会变的最低（优先级影响资源的加载顺序，优先级高的就算在后面也会先加载），img的优先级都会比defer高。
尽量减小head中的css资源
（1）不要在css文件中使用太多的base64，将一张图片转化为base64会大大增加文件的体积；
（2）如果css文件内容比较少，就10k20k左右，也可以考虑写成内联样式处理。这种写法虽然对缓存不太有利，但是对于首屏加载速度却能够提高不少;
优化网页中的图片
（1）使用img标签的srcset属性可以设定不同dpr下加载不同的图片资源
```
<img srcset="images/test(1).jpg 1x,images/test(2).jpg 2x"  src="images/test(3).jpg" alt="">
```
表示在dpr为1时加载test(1)资源，dpr为2时加载test(2)资源，其他情况下使用src中的资源。
但是srcset属性可能存在兼容问题

还可以使用picture标签(picture标签中必须要有img标签，否则不显示)
```
<picture>
    <source srcset="images/test(1).jpg" media="(max-width:800px)">
    <source srcset="images/test(2).jpg" media="(min-width:901px)">
    <img src="images/test(3).jpg" alt="">
</picture>
```
（2）使用图片懒加载；
压缩与缓存（需要nginx配置）
（1）gzip压缩代码
（2）cache-control，在nginx中配置Last-Modified之后，nginx的http响应头就会返回html文件的最近修改时间，这样就会可以判断文件是否已被更改，是否需要重新请求资源。
（3）使用etag

（4）使用http2，http2主要的优势在于对于一个域只会建立一个TCP连接，多路复用，传输多个资源，就不需要使用类似于spirit，合并js/css等技术减少请求数了，可以做到同时加载多个资源。
其他优化方式
（1）使用dns预读取
```
<link ref="dns-prefetch" href="https://www.google.com">
<link ref="dns-prefetch" href="https://www.baidu.com">
```
在head中加上这些link标签就可以对相应的域名提前进行dns解析，并且由于是并行操作，不会阻碍页面的渲染。
（2）html优化，可以通过对html去空格处理优化。