本文介绍了优化网页性能的多种策略，包括：将CSS文件前置，JS文件后置加载；减小文件体积，如删除注释、压缩图片和文件；利用雪碧图减少请求；避免不必要的404请求；合理利用异步加载和CDN；缓存基础数据；避免串行请求；优化组件使用等。这些技巧旨在加速页面加载，减少网络请求时间和提高用户体验。
偶然的机会看的，不是本人总结的哦，
如有冒犯联系我删除，谢谢
1，将js脚本文件引入后置，css文件引入前置
下载css文件是不会阻塞浏览器解析DOM的，但是浏览器会一直等到css文件下载完成后才会进行渲染。所以，<link />标签要放到<head>中，这样DOM解析和css下载同步进行，以最快的速度将页面内容展示给用户。
总所周知，js文件的下载、执行是会阻塞页面加载的，所以大家都要把<script>放在<body>最后。
2，减小文件体积
1> 删除js和css中的注释
2> 压缩图片
3、压缩文件
对文件压缩包含两个方面：
1> 在代码发布到生产环境时压缩、混淆代码，能够很大程度上减小文件体积
2> 在服务器上启动gzip压缩
服务器压缩文件后会大大减低网络传输耗时，对网站速度有很大影响。
但是要注意千万不要对图片进行gzip压缩，可能会适得其反。图片GZip压缩后体积竟然变大了 - 记忆盒子
4、雪碧图
把多个小图片合并成一个大图，减少网络请求。
5、尽量少用图片
能用字体图标的地方就不要用图片。
6、合并多个小文件。
和雪碧图的道理一样，将多个小文件合并，减少网络请求。但凡事都要有个度，一个特别大的文件同样会影响下载时间。
7、避免重绘和重排
8、避免404请求
假如页面上有一个图片，浏览器向服务器发出请求，等了半天服务器告诉浏览器我没有该图片，但是浏览器还要再跟服务器确认一遍，最后才放弃请求该图片了。这样一来二去，浪费了网络请求的时间和带宽。
9、减少dom元素数量
10、异步加载组件
上面也提到了页面加载时好多元素是隐藏的，这些元素直到用户点击某个按钮时才会显示出来，如果用户根本就没点击按钮，那浏览器白白浪费时间渲染它们了。
现在的开发模式基本上都是以组件为单位，那么，那些等到点击按钮时才会显示的组件完全可以通过异步方式加载了。这样做既减少了首次下载的代码量、也减少了浏览器解析执行的时间。
11、获取数据用GET请求
我们都知道POST请求分为两步，先发送请求头，再发送请求体，因此要比GET请求慢。而获取数据希望是越快越好，所以，赶快改掉吧。
12、合并关键数据请求
如果页面上的某个部分渲染所需的数据是由两个接口提供的，如果在页面上发出两次请求，每个请求返回后渲染一次，导致浏览器执行两次构建。
13、静态资源放到CDN
好处如下：
1> 就近访问，且CDN有缓存，减少请求时间
2> 不同的域名，增加浏览器并发下载文件的数量（同一个域名并发数2-4个）
3> 跨域请求不传cookie，减少请求时发送的数据量，加快请求速度
14、对基础数据请求缓存
像城市、公司介绍等不常变更的数据，直接让浏览器缓存一段时间，这样浏览器就不用每次都向服务器请求了。
15、避免串行请求
async/await 语法糖在给我们带来便利的同时也会因为不合理的使用导致性能问题。如下图中，productRowsResult 和 productsResult 的获取并无前后依赖关系，但是由于使用了await导致前一个请求返回后才会请求下一个数据，无形中延长了请求时间。
16、组件的使用优化
在组件的设计和使用过程中，多思考一下组件之间的关联关系，也许一个小小的样式或属性提前或延迟就会影响页面的性能。
扫一扫
2762
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
