文章目录
性能
性能简单说就是我们使用网站的响应速度，以及网页交互的流畅程度；
移动端为什么进行性能优化
- 提升用户体验；
- 移动端网络速度较慢；
- 移动设备性能较低；
HTML性能优化
CSS、JS代码引入方式优化
在HTML中引入CSS、JS代码主要有两种方式：内联、外部文件引入。
内联
优点：
- 减少HTTP请求；
缺点：
- 代码不能复用；
- 使HTML文件变大，使加载时间变长；
- 不利于后期维护；
外部文件引入
优点：
- 可以进行代码复用；
- 有效利用了浏览器的静态资源缓存；
- 代码分离，便于后期维护；
缺点：
- 增加了HTTP请求；
这两种引入CSS、JS代码的方式各有利弊，没有好与坏，结合实际需要合理使用。
建议内联首屏需要的CSS、JS代码。
CSS、JS代码位置优化
CSS代码一般放在<head>中，先加载CSS，避免DOM没有样式。
JS代码一般放在DOM结构下面，这是因为JS常用来操纵DOM，等DOM加载完再加载执行JS代码，符合代码的执行顺序。
不是所有的JS代码都放在后面，要按照实际需求合理放置。比如屏幕适配的JS代码，就要放在前面内联进来，因为越早适配用户体验越好。
如果将JS代码放在DOM结构之前，JS代码会先加载完，再等DOM加载，其次加载JS代码会阻塞DOM的加载与渲染。
代码的压缩与合并
借助webpack等工具将代码压缩，可以减少代码体积，HTTP请求也变小了。
合理的合并代码，可以减少HTTP请求次数，但注意不要过度合并，避免代码体积太大，请求变大也不利于后期代码的维护。
文件缓存
利用浏览器缓存，减少HTTP请求。
图片优化
大图片优化
图片大，HTTP请求大，可以将图片进行压缩处理（比如使用webp格式），简单的图形也可以用CSS画。
小图片优化
- 使用iconfont;
- 使用base64内嵌；
- CSS精灵（雪碧图）；
其他优化
- 避免DOM层级太深；
- 避免空链接（href、src不能为空）；
- 主要内容优先渲染（DOM结构放在前面）；
CSS性能优化
CSS选择器优化
- CSS选择器层级不要太深（简单无歧义）;
- 不使用通配符*（直接枚举）；
- 不留空选择器（选择器里没有属性，或属性被注释）；
CSS属性优化
- 提取公共属性，减少代码冗余；
- 合并可以合并的属性；
- 移动端推荐使用flex布局，不使用float布局；
JS性能优化
DOM操作优化
- 尽量通过id操纵DOM(用id查找DOM最快)；
- 使用DocumentFragment，减少DOM操作；
- 修改样式时不要单个属性进行修改，可以添加class实现；
- 避免重排，减少重绘；
事件优化
- 批量添加事件时使用事件委托，给父元素绑定事件；
- 像scroll、mousemove等高频事件，结合节流和防抖使用，避免频繁触发；
懒加载和预加载
懒加载
先加载首屏的网络资源，其他的网络资源再按需加载。
预加载
提前加载网络资源，当用户需要查看时可直接从本地缓存中渲染。
1565
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
