Shymean

Appearance

性能优化 ​

参考：

前端性能优化可以从下面几个方面入手

  • 减少请求数
    • 字体图标、雪碧图
    • 合并js、css
    • 长链接
    • 文件按需加载
  • 优化请求速度
    • 预加载
    • 资源压缩，减少请求文件的体积
    • CDN
    • webp
  • 缓存
    • http缓存
    • 本地数据持久化
  • 首屏效果
    • ssr
    • 非关键资源延迟加载
    • 骨架屏
    • BigPipe

总结 ​

  • 减少http请求,主要思想就是减少HTML文档内链接的资源数量：
    • 项目上线时将CSS``JavaScript等文件压缩合并打包，减少源文件的数量和体积
    • 将多张小图片制作成精灵图
    • 将资源转换为base64编码
    • 使用缓存可以加快网页打开速度，有效减少http请求
    • 使用懒加载，按需加载对应资源
  • 页面加载速度
    • 使用多个域名来存储网络资源
    • 页面渲染流程
      • 选择器从右向左解析，嵌套顺序不宜过深
    • 页面打开效率
      • 使用CDN加载资源
      • 将CSS放在页面头部，防止页面闪烁
      • 将JavaScript异步或延迟加载，防止JavaScript运行阻塞页面加载
      • 延迟请求首屏外的文件，即优先加载首屏内容。
  • 页面运行效率
    • reflow和repaint可能会严重影响性能，需要尽可能的减少reflow和repaint操作
      • 不要一条一条地修改DOM的样式，如果修改的样式过多可以将样式统一在某个类中，然后直接更改元素节点的className；
      • 使用临时变量保存DOM节点，而不是每次都直接对DOM节点进行操作（减少元素节点的读写），在JS性能与浏览器性能方面都能得到一些优化；
      • 尽可能修改层级比较低的DOM，缩小操作的影响范围；
      • 放弃使用table进行布局，一个很小的改动都会造成整个table的重新布局
    • JavaScript中减少作用域链的查找，避免使用eval和Function等性能缓慢的接口
    • DOM操作的代价是十分昂贵的，可以使用DocumentFragment暂时存放那些一次插入文档的节点
    • 事件节流

一些需要注意的小细节 ​

问：图片懒加载中，为何将实际图片资源路径放在data-src中? 答：所有 HTML 中自定义的属性，都应该用data-开头，因为data-开头的属性浏览器渲染的时候会忽略掉，提高渲染性能。

长列表性能优化 ​

如果需要渲染的DOM节点很多，会导致页面很卡，可以使用“窗口化”的技术来优化

bigPipe ​

参考

解决问题：减少白屏时间，提高首屏加载渲染速度

实现原理：

  • bigpipe主要思想是将页面区域按拆分成多个模块，然后通过Web服务器和浏览器之间建立管道，进行分段输出。
  • 主要使用HTTP响应头Transfer-Encoding:chunked，让浏览器尽早的接收到html，可以先行渲染。

用于页面上各个模块之间联系较小，可以分开展示，对于SEO需求较弱的场景下，可以使用bigpipe让用户尽可能早地看见视图，