H5开发优化标准指南

作者: 林思念 | 来源:发表于2022-11-15 22:12 被阅读0次

H5开发优化标准指南
第一篇性能第一篇
转载：移动H5前端性能优化指南
移动H5前端性能优化
移动H5前端性能优化指南
H5性能优化方面的探索
Xcode 构建优化全指南
spark性能调优
Awesome Extra
A2019机器人开发最佳实践

按需引入，避免无用资源。大资源进行拆分。
例1：分享类H5需引用【微信jssdk】，在微信中展示开发标签或二次分享时使用，但APP内H5无需使用。
方案：分场景配置模板页面，按需使用
例2： sensors.js 引入页面但没有调用，sensor仍会执行初始化，被打包进bundle
首屏没有引用的第三方资源，通过CDN等进行延迟加载
https://www.cnblogs.com/jiasm/p/7683930.html
例子：photoswiper，首屏渲染不会使用，点击图片时才调用。
方案：

<script defer src="https://path/to/cdn/photoswipe.min.js" ></script>

lazyLoad https://webpack.js.org/guides/lazy-loading/
https://www.cnblogs.com/jiasm/p/7683930.html
使用preload对chunk等初始化需要的资源提升加载优先级
<link rel='preload' > 是一种 resource hint，用来指定页面加载后很快会被用到的资源，所以在页面加载的过程中，我们希望在浏览器开始主体渲染之前尽早 preload。

<html>
  <head>
    <link href="https://path/to/cdn/chunk-vendors.fa2fb879.js" rel="preload" as="script">
    <link href="https://path/to/cdn/clientShare-puzzle.b3fce672.js" rel="preload" as="script">
    <link href="https://path/to/cdn/clientShare-puzzle.91879661.css" rel="preload" as="style">
    <link href="https://path/to/cdn/clientShare-puzzle.91879661.css" rel="stylesheet">
  </head>
  <body>
    <div id="app"></div>
    <script src="https://path/to/cdn/chunk-vendors.fa2fb879.js"></script>
    <script src="https://path/to/cdn/clientShare-puzzle.b3fce672.js"></script>
  </body>
</html>

照片查看器引入
● 图片查看器模块通过 cdn 方式引入，通过设置 defer 或 async 进行设置异步加载，不阻塞页面加载速度，可以更快看到首屏内容

Vue-Cli 默认启用
https://cli.vuejs.org/zh/guide/html-and-static-assets.html#preload
使用dns-prefetch对CDN域名进行预解析【实验行功能】

<link rel="dns-prefetch" href="https://static.xhey.top">
<link rel="dns-prefetch" href="https://net-cloud.xhey.top">

业务资源CDN加速，列表中用小尺寸图，预览时用中大尺寸。图片列表使用lazyload。

?x-oss-process=image/resize,w_400  //可按需调整图片宽度

app.use(VueLazyLoad, {
  preload:1.3,
  attempt:1,
  listenEvents:['scroll','resize','animationend','transitionend','touchmove','touchstart','touchend']
})

字体
字体按需进行裁剪，尽量选用woff、woff2等有压缩的格式
对于特殊字体的文本，采用渐进展示的方案：

font-display: swap;

使用预编译和骨架屏
对于页面结构固定的分享类、表单类等H5，推荐对页面首屏基本布局和元素，进行骨架屏预编译，避免页面首屏加载白屏，提升用户体验。
骨架屏生成工具：
react-content-loader
vue-content-loader
模板预编译方案：

CRA脚手架工具：
https://create-react-app.dev/docs/pre-rendering-into-static-html-files/
Next.js 生成预编译的模板页面
https://www.nextjs.cn/docs/basic-features/pages#%E9%9D%99%E6%80%81%E7%94%9F%E6%88%90%EF%BC%88%E6%8E%A8%E8%8D%90%EF%BC%89
客户端渲染出骨架屏代码后手动Copy到模板页面
缓存
页面请求使用协商缓存，保证用户能及时访问最新版本；
前端资源使用强制缓存，cache-control: max-age=31536000
业务资源：客户端上传图片时，是否要设置缓存？？？业务资源的生命周期只有一次？！

离线包
安卓具备离线包能力，iOS还没有。
根据业务重要程度和双端对齐情况而定。

性能监控及错误收集