前端全链路性能优化

tT91834
1,414 阅读2分钟
  1. 图片优化：
    • 用工具进行图片压缩（node-pangquant-native、jpegtran、gifsicle）
    • 图片尺寸随网络环境变化
    • 响应式图片
    • 逐步加载图片（低质量图片占位符LQIP、SQIP）
    • Web Font代替图片
    • Data URI代替图片
    • 雪碧图：多个小图片合成一个大图
  2. 图片服务器自动优化解密
  3. 精简HTML代码
  4. 文件放到合适的位置（css尽量放在头部、js尽量放在尾部）
  5. 增强用户体验
    • 设置favicon.ico
    • 增加首屏必要的css和js（骨架）
  6. 提升css渲染性能
  7. 提升css文件加载性能
  8. 精简css代码
  9. 合理使用Web Fonts
  10. css动画优化
  11. JS优化总体原则
  12. JS变量和函数优化
  13. JS动画优化
  14. 合理使用缓存
  15. Cookie
  16. IndexedDB
  17. LocalStorage
  18. JS模块加载方案和选型
    • CommonJS：
      • 旨在Web浏览器之外为Javascript简历模块生态系统
      • ModeJS模块化方案CommonJS
      • 同步加载的方式
    • AMD（Asynchronous Module Definition异步模块定义）规范
      • RequireJS模块化加载器：基于AMD API实现
    • CMD（Common Module Definition通用模块定义）规范
      • SeaJS模块化加载器：遵循CMD API编写
    • ES6 import
  19. 减少回流和重绘
    • 利用chorme-tools-rendering =》勾选Paint flashing(回流) =》performance
    • CSS
    • JS
  20. 静态文件压缩工具介绍
    • html-minifiter
    • clean-css
    • uglify-js
  21. 静态文件打包方案
  22. 前端构建工具介绍和选型建议
    • Grunt
    • Gulp（流）
    • Webpack
    • FIS(百度)
    • JDF（京东）
  23. 浏览器渲染过程
    1. 解析HTML生成DOM Tree（Parse HTML）
    2. 解析CSS生成CSSOM（CSS Object Model）Tree
    3. JavaScript会通过DOM API 来操作DOM Tree和CSS Rule Tree，浏览器将DOM Tree和CSSOM Tree合成渲染树（Render Tree）；
    4. 布局（layout）：根据生成的Render Tree,进行回流，计算每个节点的几何信息（位置、大小、字体样式等等）
    5. 绘制（Painting）：根据渲染树和回流得到的几何信息，得到每个节点的绝对像素
    6. 展示（Diaplay）：将像素发送给图形处理器（GPU）,展示在页面上
  24. BigPipe
  25. 同构
  26. PWA
    • 全站改造为HTTPS,没有HTTPS就没有Service Worker
    • 应用Service Worker技术提升性能，离线提供静态资源文件，提高首屏用户体验
    • 使用App Manifest
    • 最后可以考虑消息推送的功能
  27. 懒加载
  28. 预加载
  29. 接口换粗策略优化
    • Ajax/fetch缓存（请求时带上cache，依赖浏览器本身缓存机制）
    • 本地缓存（localStorage。。。）
    • 多次请求（本地无缓存发送请求）
avatar
文章
阅读
粉丝