Appearance
性能优化
前言
在项目开发过程中,任何一个细节都有可能影响网站的访问速度,如果不了解性能优化知识,很多不利网站访问速度的因素会形成累加,从而严重影响网站的性能,导致网站访问速度变慢,用户体验低下,最终导致用户流失。
目标
让你的网站访问速度飞起来,性能体验留住你的客户。让你面试披荆斩棘,收获各大厂心仪offer,废话不多说,直接开整。
优化方案
- 感知性能优化
- loading
- 骨架屏
- HTML优化
- 压缩 HTML
- 删除不必要的注释
- 删除不必要的属性
- 使用语义化标签
- 减少iframe数量
- 削减DOM数量和层级数量
- 减少 HTTP 请求次数
- 减少重排重绘
- JavaScript优化
- javascript脚本放到页面底部
- 将javascript和css从外部引入
- 删除重复的脚本
- 减少DOM访问
- 节流与防抖
- 合理的ajax恳求
- 长列表虚拟滚动优化
- 代码结构的优化
- Css优化
- 尽量少用@import
- 避免!important,可以选择其他选择器
- 图片优化
- webpack构建优化
- 资源加载优化
- 浏览器缓存策略
- 服务器优化
性能测试网站推荐:
- 36全球网站性能测试(强烈推荐)
- WebPage Test
- WebPage Analyzer
- GT Matrix
- Pingdom