前端核心

Appearance

性能检测七步走

  1. 查看接口返回DNS，与服务器链接时间，后端返回时间，资源下载时间
  2. 页面加载时间，再用lighthouse测一下第一个页面和最后一个画面结束时间
  3. 查看CPU性能分析
  4. 交互的时候看GPU性能和fps指标
  5. 要复合谷歌测量模型RAIL，
    • 操作页面50ms反馈，输入框100ms反馈，（R：Response）
    • Animation动画每秒60帧，（A：Animation）
    • 保持空闲，处理少量长任务（I：Idle空闲）
    • 5秒内加载完成并可交互（L：Load加载）
  6. 关闭页面第二次打开看是否有缓存优化
  7. 再调成3G网络再测一遍。

一、谷歌测量模型RAIL ​

  1. Response
    1. 页面操作完50ms内反馈
    2. 输入input得到输出要100ms内，输入50ms，浏览器反馈50ms
  2. Animation
    • 每秒60帧
  3. Idle空闲
    • 前端要尽量保持空闲，处理少量的长任务和业务逻辑
  4. Load加载
    • 5S完成加载，并可交互
  5. 异步请求的完成时间,1s内完成，否则加loading动画(在RAIL再加一条)

二、性能查看 ​

  1. 等待后台返回TTFB img_44.png
    img_47.png
  2. 速度指数 img_45.png

三、 页面加载时间 ​

img_49.png

四、首次渲染 ​

  • 第一次出现内容的时候 img_46.png

五、可调节网络 ​

img_43.png

六、 lighthouse，调整网络速度，性能分析，网络分析 ​

img_48.png

七、 frame rendering ​

img_41.png
img_42.png
img_51.png

八、 Performance monitor分析CPU ​

img_52.png

九、 webPageTest ​

  1. 多测试地点，全面性能报告
  2. 可在线，https://www.webpagetest.org/
  3. 可本地部署，docker pull webpagetest/server img_50.png
    img_12.png
    img_13.png
    img_14.png

十、 代码测量 ​

js
window.addEventListener('load',(e)=>{
  let timing = performance.getEntriesByType('navigation')[0]
  console.log('DNS 解析耗时',timing.domainLookupEnd-timing.domainLookupStart)
  console.log('TCP 连接耗时',timing.connectEnd-timing.connectStart)
  console.log('SSL 安全连接耗时',timing.connectEnd-timing.secureConnectionStart)
  console.log('网络请求耗时 (TTFB)',timing.responseStart-timing.requestStart)
  console.log('数据传输耗时',timing.responseEnd-timing.responseStart)
  console.log('DOM 解析耗时',timing.domInteractive-timing.responseEnd)
  console.log('资源加载耗时',timing.loadEventStart-timing.domContentLoadedEventEnd)
  console.log('First Byte时间',timing.responseStart-timing.domainLookupStart)
  console.log('白屏时间',timing.responseEnd-timing.fetchStart)
  console.log('首次可交互时间',timing.domInteractive-timing.fetchStart)
  console.log('DOM Ready 时间',timing.domContentLoadEventEnd-timing.fetchStart)
  console.log('页面完全加载时间',timing.loadEventStart-timing.fetchStart)
  console.log('http 头部大小',timing.transferSize-timing.encodedBodySize)
  console.log('重定向次数',timing.redirectCount)
  console.log('重定向耗时',timing.redirectEnd-timing.redirectStart)
})

十一、 html优化 ​

  1. fastDom
    1. 批量读取DOM，批量写入dom，不要一边读一边写 img_55.pngimg_56.png
  2. 减少布局和重绘
    1. ctrl+shift+p
    2. 渲染/Rendering=突出显示绘制区域/Paint flashing

十二、 js优化 ​

啊啊 ​

  1. js管理内存
    1. img_15.png
    2. 局部变量，函数执行完，没有闭包引用，则标记回收
    3. 全局变量，直至浏览器卸载页面才释放
  2. V8优化
    1. 标记清除，对变量继续宁打标，然后清除。缺点是清楚后会导致内存碎片
    2. 引用计数清除，记录变量被引用的次数，引用次数为0就会被清除，缺点是回收机制是周期性运行的，每隔几百毫秒执行一次，且需要大量空间来计算引用次数
  3. sonar优化代码

十三、 css优化 ​

  1. 创建图层
    1. 视频音频
    2. position为fixed
    3. css动画
  2. 动画优化
    • react动画优化，每16ms画完一帧之后，空闲时间去处理其他事情
  3. 复合线程和图层优化
    • ctrl+shift+p 图层/layers img_16.png

十四、 网络优化 ​

  1. 优化资源加载
    1. 右击network的某条记录的200状态，调出Priority优先级 img_17.png
    2. 使用preload和prefetch调整优先级 img_19.png

十五、 传输优化 ​

  1. nginx启动压缩技术Gzip img_26.png
  2. nginx启用keep-alive img_27.pngimg_28.png
  3. 缓存配置 img_29.png
  4. serviceWorker,(加速重复访问),(离线支持),(react的create-app自动支持，自己的webpack需要配置),(兼容性有问题，移动端老早就支持了),(只允许在localhost或https下使用) img_30.png
  5. HTTP2 (新的二进制格式，http1是文本) (多路复用，一个链接可以并行请求，http1只能发一个) (头部压缩且缓存，各方都有缓存，避免http1同样内容重复传输) (服务器一次性将所有资源推送给前端，不需要一个个请求) (必须先开启https) img_31.pngimg_32.pngimg_33.pngimg_34.png

十六、 字体 ​

  1. 字体放入CDN，且预加载 img_18.pngimg_20.pngimg_21.png

十七、 渲染优化 ​

  1. 预渲染
    1. react-snap，首页渲染 img_22.png
  2. 长列表渲染
    1. react-window img_23.pngimg_24.png
  3. 使用骨架屏 减少布局移动

十八、 首屏优化 ​

img_25.png

十九、 SSR ​

二十、 图片优化 ​

  1. 图片类型
    1. jpg
      1. 色彩好
      2. 本地/在线使用imagemin插件压缩图片
      3. 首屏，轮播，宣传
      4. 强调纹理、边缘会有锯齿和模糊，logo不适合
    2. png
      1. 透明背景的图片
      2. 纹理和边缘处理得好
      3. 做小图片，logo图标
      4. 使用imagemin-pngquant压缩 img_35.pngimg_36.pngimg_37.png
    3. webp
      1. 色彩好，体积小
      2. 普及率低，ie和safrai支持不是太好
    4. iconFont
    5. svg移动端图标，更好
  2. 图片懒加载
    1. 原生<img loading="lazy" src=""/,扩展性不是太好
    2. react-lazy-load-image-component组件，使用<LazyLoadImage替代img img_38.png
  3. 渐进式图片
    • 需要美工提供，也可以通过库生成 img_39.png
  4. 响应式图片
    • Srcset属性 Sizes属性 img_40.png
  5. PNG到IconFont
    1. 多个png可以一套字体解决，价绍请求数量和体积
    2. 矢量图形
    3. 可通过css修改颜色，大小
    4. 颜色单调，无法实现彩色
  6. iconFont到svg
    1. 支持多色彩
    2. 矢量图形
    3. xml语法SEO可阅读
  7. 雪碧图
    • 减少http请求

二一、 ningx优化 ​

  • 设置nginx把CPU内核占满
  • 根据业务需求和CPU性能设置时间单位，错误的配置会影响cpu性能。
  • 节约内存和磁盘，nginx只记录必要的日志，像请求转发的时候不要缓存请求头，请求体。
  • 限制每分钟最大请求数
  • 快速失败，快速返回，

二二、 首屏优化 ​

  1. 服务器硬件：带宽、磁盘吞吐速度、内存大小、cpu计算速度、CDN
  2. 服务器软件：使用纯净版Linux,比如centos和redhat、nginx
    • 设置nginx占满CPU资源
    • 节约内存和磁盘，nginx只记录必要的日志，像请求转发的时候不要缓存请求头，请求体。
    • 限制每分钟最大请求数
  3. 前端代码上的优化
    • 一个是使用SSR，服务器生成出html文件传给前端，然后再由react或者vue接管
    • 另一个就是前端根据路由打包资源
    • 再通过webpack或vite资源进行一个压缩优化
    • 最后把首页的资源放入CDN