web性能优化总结

h5性能优化可以总结为如下的几个方向:

• 将请求时间线上的行为提前执行
• 将请求时间线上不紧急的后置
• 将资源从最近的位置提供给页面

在讨论h5加载性能的时候主要有以下角色:

• Native容器
• 用户(开发的视角)
• 服务端(数据/页面)
• h5页面
  本文会结合优化的方向从不同角色的角度总结h5优化的一些通用方案。

Native容器优化

• Webview池 通过提前初始Webview和Webview复用降低Webview初始化时间
• 数据预取 容器侧提供数据预取能力，提前数据加载
• DNS连接 容器提前建立与h5页面相同域名的DNS链接
• 离线包 通过离线包可以直接加载提前下载好的本地资源展示

h5页面内优化

• 预连接 dns-prefetch(提前DNS), preconnect(DNS/TCP/TLS)
• 资源包拆分 框架和业务代码进行拆包，框架层使用更长的缓存策略来减少框架代码的请求
• 页面资源加载 图片懒加载、路由懒加载、小图内联、模块动态加载
• js执行优化 缓存计算结果、WebWorker、GPU渲染、长列表优化
• 脚本标签优化
  1. defer 等待html解析完毕后执行 多个defer文件按顺序执行
  2. async 下载后立即执行无顺序

服务端优化

• api聚合服务 前端侧可以通过一个请求聚合多个后端请求，后端在内网完成数据的聚合
• CDN容灾策略
• 预渲染技术
  1. SSR(server-side rendering)服务端渲染,在服务端完成数据请求和html内容的生成返回给用户
  2. SSG(static site generation)静态页面生成，SSG主要用于生成静态的网站比如博客等
  3. ISR(Incremental Static Generation)渐进式静态内容生成，可以增量的方式在服务端生成新的内容和替换已有内容，对SSG的一种补充
  4. Selective Hydration 可选的注水 通过Suspense和pipeToNodeStream流式输入实现可选注水
  5. Islands Architecture 孤岛架构,可以实现静态和动态内容的分离渲染，可以对组件渲染更细粒度的控制

用户

• 功能取舍 低端机放弃一些功能保证页面更流畅
• 骨架屏 使用骨架屏在数据未返回时给用户更好的体验
• 同层渲染

参考

WebView性能、体验分析与优化 渲染页面：浏览器的工作原理 同层渲染方案比较