追境的笔记

# 前端性能优化

FP (First Paint) 首次绘制 FCP (First Contentful Paint) 首次内容绘制 LCP (Largest Contentful Paint) 最大内容渲染 DCL (DomContentloaded) FMP(First Meaningful Paint) 首次有效绘制 L (onLoad) TTI (Time to Interactive) 可交互时间 TBT (Total Blocking Time) 页面阻塞总时长 FID (First Input Delay) 首次输入延迟 CLS (Cumulative Layout Shift) 累积布局偏移 SI (Speed Index)

  1. 减少HTTP请求
  2. 使用CDN
  3. 添加Expires头
  4. 采用Gzip压缩组件
  5. 将样式表放在顶部
  6. 将脚本放到底部
  7. 避免使用CSS表达式
  8. 使用外部的JavaScript和CSS
  9. 减少DNS查询
  10. 精简JavaScript
  11. 避免重定向
  12. 删除重复无用的脚本
  13. 配置Etag
  14. Ajax可缓存

# DNS 预解析

DNS Prefetch，即DNS预解析就是根据浏览器定义的规则，提前解析之后可能会用到的域名，使 解析结果缓存到系统缓存中，缩短DNS解析时间，来提高网站的访问速度

# 参考

  1. https://blog.csdn.net/c_kite/article/details/104237256
  2. https://zhuanlan.zhihu.com/p/98880815
  3. 前端性能优化 24 条建议 (opens new window)
  4. 百度前端工程化之H5性能优化篇 (opens new window)
  5. 使用预解析, async, defer 以及 preload (opens new window)

# 性能测试工具

Lighthouse、PageSpeed、WebPageTest、Pingdom、PhantomJS

← 测试自动readme →