Hibop.github.io
Hibop.github.io copied to clipboard
Hibop
关于前端性能优化：系统总结
前端性能优化梳理
四个方面考虑：静态资源缓存 >>> 请求优化 [请求量 压缩 + 速度 ssr ] >>> 编译时优化 >>> 运行渲染时优化
网络优化：
- webview：
- webview缓存
- 超webview（hybrid）
webview缓存
- 资源缓存：
- http缓存： url缓存，强缓存、协商缓存、cdn缓存
- 离线缓存manifest
- service work： 可以实现入口缓存index.html
- 数据缓存(浏览器缓存)
- cookie，session cookie滥用情况（种cookie要区分主域 子域）
- storage： loacal session
请求优化： 两方面： 请求量（带宽）；；加快请求速度（时延）
- 带宽： 图片处理（图片是流量大头, webp），资源压缩minify 、开启gzip、按需lazyload等
- 时延：cdn分发、并行加载优化、DNS预解析
图片： png（无损、大） jpg（有损）svg（渲染成本，浏览器渲染，icon-font系统渲染）webp（移动端推荐）base64（即时预览，canvas）
cdn: 哪些要缓存、cors易忽略、源站缓存、怎样缓存命中率、CDN Combo请求合并
并行优化：
- 页面优化（首屏一个请求或者无请求ssr）
- 多域名，分布式
- 合并请求防止页面抖动
编译时优化
tree-shaking：去除没用过的代码
UglifyJsPlugin：压缩代码
ExtractTextPlugin：提取css出来
dllPlugin： 提取公共库
运行时渲染优化
- 服务端渲染（ssr）： 集合式渲染，SEO，跨团队推动后端接口优化
- 客户端渲染（csr）： 分式渲染，分布计算力 css阻塞： 不会阻塞html DOM tree， 但会阻塞渲染render tree 【布局layout-绘制paint-合成composit】 js阻塞：加载并行， 执行阻塞DOM的解析和渲染 defer/ async 并行下载， async下载完即执行； defer等DOM解析完再执行
DOM的重绘回流 减少DOM操作，DOM碎片技术（fragment） 渲染队列：60fps（16ms） requestAnimation（渲染速度 < 显示器刷新速度） 开启GPU加速
浏览器队列： 宏队列（ajax, setTimeout） -> 微队列（promise） -> 渲染队列
- 合理利用MTU策略 通常情况下，我们认为 TCP 网络传输的最大传输单元（Maximum Transmission Unit，MTU）为 1500B，即一个RTT（Round-Trip Time，网络请求往返时间）内可以传输的数据量最大为 1500 字节。因此，在前后端分离的开发模式中，尽量保证页面的 HTML 内容在 1KB 以内，这样整个 HTML 的内容请求就可以在一个 RTT 内请求完成，最大限度地提高 HTML 载入速度。
一个是页面加载的很快，另一个是页面使用起来很流畅。
当面试官问你如何进行性能优化时，你该这么回答(一) https://juejin.im/post/5a99f80cf265da238c3a1e16
世界顶级Web性能专家教你优化出高性能网站（上）
前端白屏问题和内容闪烁问题原因以及解决方案：
- https://www.jianshu.com/p/47edb3759489;
- http://www.cnblogs.com/hustskyking/p/white-screen-in-chrome.html