前端优化方案
-
运行时优化
-
减少重绘重排
- js修改样式时，最好不要直接修改样式，而是通过class进行样式修改
- 对dom元素显示隐藏，使用v-show而不是v-if
-
使用事件委托
- 事件委托利用事件冒泡机制，只指定一个事件处理程序就可以处理某一类的所有事件。
-
不要覆盖原生方法
-
尽可能降低CSS选择器的复杂性
-
使用弹性布局flexbox
-
Transform 和 opacity属性更改来实现动画，这两个属性不会触发重绘和重排。
-
-
加载时的优化
-
减少Http请求
- 一个完整的http请求需要经过dns解析 tcp连接 浏览器发出请求 服务器接受请求并响应返回 浏览器渲染返回文件 整个流程比较繁琐，如果过多请求会直接体现在页面性能上
- 所以需要将多个小文件合并成一个大文件，减少http请求数
-
使用服务器渲染
- 客户端渲染是获取HTML文件，根据需要下载JS文件，运行文件 生成DOM再渲染。无形中会拖慢性能
- 服务器渲染会返回HTML文件，客户端对其进行解析即可
-
静态资源使用CDN
- 在各个地方部署服务器，让用户离服务器越近，从而缩短请求时间
-
CSS放在头部，JS放在底部
-
所有放在标签里面的css和js文件都会堵塞渲染，如果是js文件比较大，解析起来会比较慢这时候页面就可能会空白。因此需要将JS放在底部，html加载解析完之后再解析js文件。
-
那为什么CSS不放在底部，而是头部呢？这是因为，如果先加载完html再加载css，会让用户第一时间看到页面是无样式的。为了避免这种情况，所以css要放在头部。
-
其实JS也可以放在头部
- 在标签加上defer即可 ,defer属性是非同步请求外部脚本，会等待浏览器解析完才执行。
-
-
字体图标代替图片图标
- 字体图标小
- 矢量图，不会失真
- 可以使用font-size、color等属性
-
利用缓存，不重复加载相同的资源
- 浏览器缓存策略 设置expires设置过期时间、cache-control 设置缓存策略
-
图片优化
- 图片延迟加载
- 降低图片质量
- css3代替图片
- 使用雪碧图
-
按需加载代码
- webpack按需加载代码
- 提取第三方库代码，减少ES6转成ES5的冗余代码
-
