H5 性能优化
之前有篇文章粗略聊了一下 webview 的内存优化问题，只涉及到了图片的优化，这篇文章准备较为全面地介绍一下 H5 项目可以采用的方便落地的一些性能优化方式。
加载时优化
加载时的优化主要是为了减少用户从入口到看到内容展示这中间的白屏时间，这部分时间浏览器的主要工作就是 DNS 解析、建立 HTTP 连接、加载 JS、解析 dom，针对这几个步骤，我们在项目中处理的方式有：
DNS 解析优化
在index.html中添加link标签用于预解析：
dns-prefetch
这个标签我们在项目中用于解析静态资源的域名，建议用于图片服务器的域名解析或 CDN 域名解析。
preconnect
这个标签则适用于对后端接口域名进行解析，该标签除了解析 DNS 外，还会预先进行 TCP 连接。
1 | <link rel="dns-prefetch" href="https://www.a.static.com" /> |
HTTP 请求优化
减少 HTTP 请求数量
接口合并，合成雪碧图，文件合并，复用图片地址，本地缓存数据。
减少 HTTP 请求大小
webpack 进行拆包压缩，对静态资源（包括 JS、CSS、图片、字体等）进行大小压缩与限制，推荐的 webpack 插件：UglifyPlugin、SplitChunksPlugin、CommonsChunkPlugin。
使用 HTTP2
相对 HTTP1，有解析速度快、多路复用、首部压缩等特性，这个我们项目中没有实践，有兴趣的朋友可以去研究一下。
服务端渲染
项目一开始没有考虑 SSR 的话，后期进行改造实现成本会稍高，但如果同时有 SEO 需求，可以考虑服务端渲染，客户端加载速度会有很大提升。
运行时优化
页面渲染优化
避免
table布局,使用flex布局一个很小的改动都可能造成整个
table重新布局，现在flex布局已经相当普遍了，能上flex就上。使用
transform来改变位置直接更改元素的
top,left等值会引起重排重绘，建议使用tranform: translate来 更新位置。这点在编写动画时对页面渲染有肉眼可见的影响，频繁改动top等值很容易让页面卡顿。
内存优化
页面缓存
keep-alive避免每次回到上级页面都要重新渲染，
vue框架可以直接使用。长列表优化
无限滚动的大数据建议考虑虚拟列表的方案，否则当数据加载超过临界值，很有容易出现 H5 页面 crash 的情况。首屏也可以使用懒加载的方式去渲染列表，只渲染一屏内的数据，减少内存开销。
考虑多页面方案
当单页面应用体积过大已经无法继续优化时，可以改变一下思路，将单页面应用改成多页面应用，如果是通过 webview 进行加载的话，多页面应用就可以对应的用多个 webview 容器来承载，这样就将内存分散到了各个 webview 容器中。
性能检测与分析
没有性能检测工具的话很难将优化效果量化出来，这里介绍一下我们在项目中常用到的：
Chrome Performance
这个工具算是最亲民最好用的了，打开 F12 就可以很直观看到整个页面加载过程中的耗时，然后再进行针对性的优化，效果也可以通过 LCP、FCP 的时间来进行对比。
资源打包分析
这里用的就是 webpack 的插件：webpack-bundle-analyzer，相信大部分前端er都用过，这个插件可以将我们整个项目打包后的资源大小占用直观的展现出来，再根据结果去针对性的做拆包等操作。
Sentry
这是一个第三方的性能监控工具，我们组的项目基本都接入了这个工具，在管理后台可以看到用户的真实加载时间以及 JS 运行时报错。
写在后面
以上的方法我个人认为都是能够落地去真正实施的，我们有个资源密集型项目按照上面的方式优化之后加载时长以及运行流畅度都有明显提升。以上方法写的可能有些粗，以后有时间会再对其中一些值得深入的优化方式单独讲讲。