前端如何去进行性能优化
DNS解析时间： domainLookupEnd - domainLookupStart
TCP建立连接时间： connectEnd - connectStart
白屏时间： responseStart - navigationStart
dom渲染完成时间： domContentLoadedEventEnd - navigationStart
页面onload时间： loadEventEnd - navigationStart
通过作用域链 / 原型链 读取变量或方法时，需要更多的耗时，且越长越慢；
对象嵌套越深，读取值也越慢；
最佳实践:
尽量在局部作用域中进行 变量缓存；
避免嵌套过深的数据结构，数据扁平化 有利于数据的读取和维护；
循环
代码的性能问题会再循环中被指数倍放大
最佳实践:
尽可能 减少循环次数；
减少遍历的数据量；
完成目的后马上结束循环；
避免在循环中执行大量的运算，避免重复计算，相同的执行结果应该使用缓存；
js 中使用 倒序循环 会略微提升性能；
尽量避免使用 for-in 循环，因为它会枚举原型对象，耗时大于普通循环
减少 cookie 体积:
减少访问 dom 的次数，如需多次，将 dom 缓存于变量中；
减少重绘与回流
多次操作合并为一次；
减少对计算属性的访问；
例如 offsetTop， getComputedStyle 等
因为浏览器需要获取最新准确的值，因此必须立即进行重排，这样会破坏了浏览器的队列整合，尽量将值进行缓存使用；
大量操作时，可将 dom 脱离文档流或者隐藏，待操作完成后再重新恢复；
使用DocumentFragment / cloneNode / replaceChild进行操作；
使用事件委托，避免大量的事件绑定；
css 优化:
层级扁平，避免过于多层级的选择器嵌套；
层级扁平，避免过于多层级的选择器嵌套；
特定的选择器 好过一层一层查找: .xxx-child-text{} 优于 .xxx .child .text{}
减少使用通配符与属性选择器；
减少不必要的多余属性；
使用 动画属性 实现动画，动画时脱离文档流，开启硬件加速，优先使用 css 动画；
使用 <link> 替代原生 @import；
html 优化
减少 dom 数量，避免不必要的节点或嵌套；
避免<img src="" />空标签，能减少服务器压力，因为 src 为空时，浏览器仍然会发起请求
图片提前 指定宽高 或者 脱离文档流，能有效减少因图片加载导致的页面回流；
语义化标签 有利于 SEO 与浏览器的解析时间；
减少使用 table 进行布局，避免使用<br />与<hr />;
页面基础优化
引入位置: css 文件<head>中引入， js 文件<body>底部引入
减少请求 (http 1.0 - 1.1)，合并请求，正确设置 http 缓存
小图片合成 雪碧图，低于 5K 的图片可以转换成 base64 内嵌；
合适场景下，使用 iconfont 或者 svg
使用缓存:
浏览器缓存: 通过设置请求的过期时间，合理运用浏览器缓存
CDN缓存: 静态文件合理使用 CDN 缓存技术
打包后的图片 / js / css 等资源上传到 CDN 上，文件带上 hash 值；
服务器缓存: 将不变的数据、页面缓存到 内存 或 远程存储(redis等) 上；
数据缓存: 通过各种存储将不常变的数据进行缓存，缩短数据的获取时间；
首屏渲染优化
css / js 分割，使首屏依赖的文件体积最小，内联首屏关键 css / js
非关键性的文件尽可能的 异步加载和懒加载，避免阻塞首页渲染；
使用dns-prefetch / preconnect / prefetch / preload等浏览器提供的资源提示，加快文件传输；
重要的元素优先渲染；视窗内的元素优先渲染；
服务端渲染(SSR)
优化用户感知
利用一些动画 过渡效果，能有效减少用户对卡顿的感知；
尽可能利用 骨架屏(Placeholder) / Loading 等减少用户对白屏的感知；
动画帧数尽量保证在 30帧 以上，低帧数、卡顿的动画宁愿不要；
js 执行时间避免超过 100ms，超过的话就需要做
859
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
