前端性能优化
2020-03-31 14:16:32 1 举报AI智能生成
前端性能优化
作者其他创作
大纲/内容
加载性能
加载性能测试工具
谷歌的PageSpeedTools
避免使用着陆页重定向<br>
启用压缩功能
缩短服务器响应用时
使用浏览器缓存
缩减资源大小
优化图片
优化 CSS 发送过程
优先加载可见内容
移除会阻止内容呈现的 JavaScript
浏览器的web开发者控制台<br>
瀑布图Timing
DOMContentLoaded<br>
加载性能优化措施<br>
优化内容效率
JavaScript启动优化
优化JavaScript
永远不要加载相同的资源两次<br>
延迟加载资源
关键渲染路径
http2<br>
资源优先级<br>
使用webpack进行web性能优化
渲染性能
优化JavaScript执行
缩小样式计算的范围并降低其复杂性
避免大型、复杂的布局和布局抖动
简化绘制的复杂度、减少绘制区域
坚持仅合成器的属性和管理层技术
传输入处理程序去抖动
前端性能优化(普通视角)
静态资源优化
资源合并：js、css合并，雪碧图：减少http的请求次数，节省网络请求时间<br>
资源压缩：js、css、图片压缩，http传输gzip压缩：减少请求返回的数据量<br>
静态资源缓存机制<br>
强缓存<br>
Expires<br>
Cache-Control
协商缓存
Last-Modified/If-Modified-Since
静态资源CDN分发：客户端可以通过最佳的网络链路加载静态资源
权衡DNS的查找，DNS预解析
尽量使用字体图标或SVG矢量图替代png图片
懒加载，减少首屏http请求数<br>
接口访问优化
同构直出
接口合并<br>
事件节流
非核心代码异步加载
defer<br>
async
页面渲染速度优化
css放在顶部，优先渲染
js放在底部，避免阻塞
图片懒加载
js中避免嵌套循环和死循环
减少DOM元素数量
减少重绘重排<br>
减少dom操作
对Dom操作做缓存
将多个dom操作合并执行，比如要设置多个样式，将设置样式全放在一起设置
img标签要设置宽高
vue/react框架采用虚拟dom的渲染方案，在内存中进行dom diff，做到最小化的操作真实dom<br>
事件节流，比如监听输入框的文字改变事件
优化原则
实际情况因地制宜
不出Bug
性能监控
performance API
性能优化其他文章
前端性能优化总结<br>
前端性能优化-超详细
前端性能优化归纳总结-基于请求过程的
前端性能优化7大手段
0 条评论
下一页
