本文介绍了多种网页性能优化方法，包括将JavaScript文件放底部，CSS文件放头部，使用lazyload处理大图，减少DOM元素，启用gzip压缩，服务端渲染，骨架屏，路由懒加载，图片懒加载，Promise优化，减少HTTP请求，使用精灵图，压缩图片，利用CDN，避免不必要的页面重载，正确使用display属性，按需加载，以及缓存和预加载策略。
1.首屏优化
1、JavaScript外联文件引用放在html文档底部；CSS外联文件引用在html文档头部，位于head内；对首屏页面用到的 css内容，可以style 的形式写在首页
2、首屏不需要展示的较大尺寸图片，请使用lazyload；
3、避免404错误：尽量减少外联js；
4、减少cookies的大小：尽量减少cookies的体积对减少用户获得响应的时间十分重要；
5、减少DOM Elements的数量；
6、Webpack开启gzip压缩
7、服务端渲染SSR
8、Skeleton Screen (骨架屏)
9、路由懒加载
10、图片懒加载(vue-lazyload)
11、Promise优化
12、减少http请求
13、精灵图可以大大地减少CSS背景图片的HTTP请求次数；
14、压缩图片
15、CDN优化
16、少用location.reload()
17、正确使用display的属性
18、采用按需加载
19、压缩图片优化
20、合理使用缓存
21、预加载
扫一扫
2330
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
