H5页面秒开优化与实践

文章结尾有视频资料1. 背景3月份针对线上重点H5项目秒开进行治理,本文将逐步介绍如何通过H5页面的优化手段来提高 1.5 秒开率。2.?为什么要优化从用户角度看，优化能够让页面加载得更快、对用户操作响应更及时，用户体验更良好，提升用户体验和降低用户流失率非常重要。其中 Global Web Performance Matters for ecommerce报告中也有具体说明优化的重要性。从企业角度看，优化能够减少页面请求数或者减小请求所占带宽，能够节省可观的资源成本，最终提高收益转化。3. 优化目标从上图中可以看出，有些域名下可能低于90%，最高的也没达到96%，离既定98%的目标还有一定差距。4. H5性能分析分析工具LighthouseChrome DevToolsgtmertrix 在线可视化分析工具?https://gtmetrix.com/Webview加载H5通常情况分以下几个阶段Webview初始化。到达新的页面，网络连接，从服务器下载html，css，js，页面白屏。页面基本框架出现，js请求页面数据，页面处于loading状态。出现所需的数据，完成整个页面的渲染，用户可交互。从图形直观看H5 启动过程：如何缩短这些过程的时间，就成了优化 H5 性能的关键。接下来我们详细看一下各个阶段注意的优化点。优化方案从以下几个方面入手：加载策略优化增加骨架屏资源请求优化（静态资源、图片以及 webp 、图片懒加载、组件按需加载）打包资源优化CDN & 缓存接下来就逐个分析(1) 加载策略优化先看一张图：https://developers.google.com/web/fundamentals/primers/modules#module-vs-script?从这张图里我们能看到什么，大致能总结为以下四点：默认情况：HTML解析,然后加载 JS，此时 HTML 解析中断，然后执行 JS，最后 JS执行完成并恢复 HTML解析。defer情况下：HTML 和 JS 并驾齐驱，最后才执行 JS（ js脚本在所有元素加载完成后执行，而且是按照js脚本声明的顺序执行，但要等到dom文档全部解析完才会被执行）。async 情况下：HTML和 JS 并驾齐驱，JS 的执行可能在 HTML解析之前就已完成了 （js脚本是乱序执行的，不管你声明的顺序如何，只要某个js脚本加载完就立即执行）。module情况下：与defer情况类似，只不过在提取的过程中会加载多个 JS 文件而已 （声明acript标签type="module"属性从而拥抱es6的模块导入导出语法， 加载也和defer差不多，只不过可以加载多个JS文件而已）项目中实践示例：(2) 预加载prefetch 和 preloadpreload 是一个新的 Web 标准，在页面生命周期中提前加载你指定的资源，同时确保在浏览器的主要渲染机制启动之前。具体使用如下： = []; const isProduction = process.env.NODE_ENV === 'production'; if (isProduction) { // 设置预加载的 react 等包为 external plugins.push( createExternal({ react: 'React', 'react-dom': 'ReactDOM', history: 'HistoryLibrary', 'react-router': 'ReactRouter', 'react-router-dom': 'ReactRouterDOM', immer: 'immer', axios: 'axios', 'js-cookie': 'Cookies', }), ); plugins.push( cdn({ enableModule: true, }), ); } // https://vitejs.dev/config/ return defineConfig({ legacy({ targets: ['> 0.05%', 'not dead', 'not op_mini all'], }), ...plugins, ], build: { rollupOptions: { external: [ 'react', 'react-dom', 'history', 'react-router', 'react-router-dom', 'axios', 'js-cookie', ], }, }, });};这里@auto/vite-plugin-cdn私有插件中提供正常骨架屏、预加载资源、处理资源加载顺序示例：?我们来看一组图：从图上看优化前后，文件数从295 个减少到 214 个， 大小从 1.63MB 减少到439.88KB，大小降了73.6460%webpack 和 vite 配置设置预警来检验打包文件资源(asset)是从 webpack 生成的任何文件。此选项根据单个资源体积(单位: bytes)，控制 webpack 何时生成 性能提示。用法：//?webpack 设置单个静态资源文件的大小最大超过300KB则给出警告module.exports = {// ... performance: { maxAssetSize: 1024 * 300 }};// vite设置build: { chunkSizeWarningLimit: 300 // 块大小警告的限制 (以kbs为单位)默认500}将打包后的静态资源控制在 300KB 以内，最终通过 Gzip 压缩后，基本都在 100KB 以内。其他的优化包括提取第三方库、移除调试和无用代码、Tree Shaking 等。5. 总结经过以上的一系列的优化实施，我们来看一下优化前后数据的对比：?从2月底开始实施优化，上图可以很明显看出数据的变化，秒开率虽然已经做到了95%以上，达到 98%的只有个别项目，还需要在迭代过程中关注性能以及持续的优化，这里也感谢为H5页面秒开做出贡献的同学。如有什么问题和想法欢迎留言区评论交流。如果你读完了也不妨点个哟，万分感谢!请查看这些优化指南以获取更多信息：?Global Web Performance Matters for ecommercehttps://www.keycdn.com/support/preconnectasync-defer-modulePPT视频讲解 &?发送弹幕互动 & 有问题可留言 已关注 关注 重播 分享 赞 关闭观看更多更多之家前端共享流已关注分享视频，时长26:590/000:00/26:59 切换到横屏模式 继续播放进度条，百分之0播放00:00/26:5926:59 倍速播放中 0.5倍 0.75倍 1.0倍 1.5倍 2.0倍 超清 流畅 您的浏览器不支持 video 标签 继续观看 H5页面秒开优化与实践 观看更多原创,H5页面秒开优化与实践之家前端共享流已关注分享点赞在看已同步到看一看写下你的评论 视频详情 ? 谢谢支持- END -