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