如何对 APP 内的 H5 页面做性能优化？你有哪些不同的思考角度？
【特别说明】此问题属于 BOSS 钓鱼专题，提问者正在招聘高薪岗位。如果你使用真实身份发布回答，BOSS 将可以直接查看你的在线简历，并选择是否与你主动开聊。
回答·33
最热
最新
- 什么是性能？性能的本质是用户体验。用户感觉不到卡顿，就说明页面性能上没问题。 卡顿是什么？用户的每一项操作之后，都在等待 app 做出响应或者说反馈，等待的时间超过一定标准，就是卡顿。 比如说用户打开一个页面，开始等待页面加载完成；用户在一个文本框内输入文字，等待文字出现在框中；用户滑动页面，往下想查看其他内容，等待页面向上移动；用户点击按钮提交，等待服务器返回结果。 可以看出，不同场景下，等待时间的标准是不一样的。这主要是人的心理预期导致的。人们习惯于页面加载这个过程，所以相对宽容一些，可以等个 1 到 2 秒。而对于输入文字以及滑动页面这种操作，则等个几十毫秒都觉得卡死了。 那么造成卡顿的原因主要是什么？IO 和 CPU。 页面加载速度，主要受限于网络，网络就是 IO 的一种（可以说网页的 IO 主要就是网络）。这个该怎么优化呢？两方面，开源节流嘛。一是提高网速，二是减少资源文件的传输量。 提高网速怎么办呢？手机端网络一般都是 4G 或者 wifi，带宽这块儿其实没什么可以提升的，作为开发者无能为力。但是我们细想，网速是啥决定的，除了带宽那就是距离（粗略理解为经过多少个路由器），所以我们就想到了 CDN，通过把静态资源部署在 CDN 节点，就可以让用户在最近的服务器上下载资源，变相地提升了访问速度。 减少资源文件的传输量，其实有两层含义，一是减小资源文件的大小，这就要求我们合理组织代码并运用打包工具，删除无用的代码（tree-shaking），压缩代码（所以用更短的变量是没什么用的），按需加载（可以比较明显提升首屏的加载速度）。二是减少资源的传输次数，其实也就是合理运用缓存，这块儿挺复杂的（各种缓存策略的运用），就不展开说了。 有时候，我们输入文字或者滑动页面会非常卡，这是为什么呢，答案是 CPU 不够用了。JS 是单线程的，这个大家应该都知道，渲染和 JS 的执行在一个线程上，这是劣势（无法并行），也是优势（简化模型，方便开发）。多线程这块儿唯一的例外就是 webworker 了，但是它不能操作 DOM，但是如果你有繁重的计算任务（比如科学计算、机器学习），就可以利用上它。抛开 worker 不说，我们就认为只有一个线程可以用。怎么用？省着点用呗！尤其是用户触发的一些事件，click、input、scroll 这些事件处理逻辑一定要保持尽可能的轻量，能异步就异步，繁重的计算可以 CPU 分片。 占用 CPU 的不光是 JS，还有浏览器的渲染或者说排版引擎，那么怎么减轻这部分工作呢？ 一方面就是动画，合理的动画运用，可以直观地减少用户的“心理等待时间”。动画一定不要太多，通篇动画看起来很炫酷，但是会给用户带来困扰，是一种极差的实践；动画一定要贴合场景，时长不宜过短也不宜过长，一些过场动画一定要脆，让用户觉得爽。、干脆利落。另外，动画的卡顿属于老生常谈了，尽量使用 transformopacity 不要用 marginpaddingleft 之类的属性。 再就是页面的布局，合理安排布局，不要生成过多的 layer 或者过多的元素，也是性能很重要的一部分。比如长列表，就可以使用“虚拟化技术”，只渲染可见部分，这块儿展开讲也是很复杂，按下不表，网上也有很多这方面的文章。 上面所说就是通用的 web 页面优化方向。题目所说的 APP 中的页面，其实本质上也都是一样的。不过 APP 的优势就是，可以不用从网络而从本地获取资源，这样变相提升了“带宽”（好快！尤其手机都是闪存芯片），所以我们可以把一些很少变化的关键的资源尤其首屏的一些资源，打包在 app 内。这本质也是 IO 方面的优化啦。 完。
- 1)减少 js 加载体积很多库能用 CDN 的尽量使用 CDN，这样打包出来的 js 体积会很小，加载很快。 2）尽量采用比较轻量级的 UI 组件库，我一般都是自己封装组件，只实现自己需要的功能，也因为自己也得 h5 会嵌入很多平台也避免样问题 3）图片尽量放在图片服务器上，尽量图片进行压缩 4）尽量减少网络请求数量 程序中的数据，有的能一个接口返回的尽量一个接口返回，不要弄太多的接口。 5）尽量把大的 JS 文件进行分割成小的 js 文件，细化拆分。 6）尽量不要在手机端做过于复杂的逻辑处理 复杂的逻辑后端处理，手机端尽量只进行数据的展示和一些简单的逻辑处理。 7)lazyload 懒加载 能采用懒加载的尽量采用懒加载，如模块懒加载，页面懒加载，图片懒加载等等。 8)减少使用定位属性（fixed/absolute） 否则存在明显的渲染问题 9)尽量不使用闭包，定时器。必要时一定要清空。 等等等。。。。
- 反应速度必须要快,特效不能因为炫就加影响速度，大图建议压缩和保存为渐进式,js 位置放后,代码要压缩,浏览器 f12 看什么影响速度了。像三只松鼠首页反应感人。
- app 内嵌 H5 分两种， 1 是本地 html5 缺点就是不方便维护，需要同 app 一起更新。 2 是走 http 链接内前，很多开发者都会遇到这些问题 网络带宽 资源过大过多 app 内嵌交互 还有 iOS 安卓兼容性等 如何优化：我们都非常了解 h5 运行机制给出以下方案根据自己公司项目需求而定. 最简单粗暴就是在页面相应完成之前加个进度加载让用户知道。 要不然 css 在头部 js 放在尾部 大图懒加载 小小的图片采用 base64 合并图片成大型单张减少 htpp 相应 尽量异步执行 js 优化 for 循环和内存消耗过多的程序 js css 等压缩合并配置版本号 能够使用 gulp 工具 使用 dns 域名加速提高用户访问时间 能离线存储那就更好。
- 想优化服务器就减少图片尽量用 css 和 js 渲染出效果，要是懒的话大部分效果都可以贴图，这样如果服务器宽带够用的话加载的还快 要是自己写前后双端的话直接用后端脚本语言直接渲染遍历的数据会加载更快，用 js 渲染遍历的话加载速度相对会慢一些，但是前后端分离代码更整洁 以上都是我瞎编的
- 看了好多，感觉回答的都跑偏了。明显文么 app 内部的 h5 优化，把 js 文件，html 文件，图片等静态文件都放在 app 打包了，直接 file 协议本地读取，比你们那些压缩合并再请求快的可不是一点奥，还有就是 app 可以预读取数据，h5 加载的时候不需要请求，或者不用预加载，把请求放在 app 中做，跳转 h5 的同时就去请求，这也比用 h5 加载完再去请求来的快，方式太多了，就不一一列举了
- 1.静态资源上 cdn，走强缓存，cache-control 直接设一年，文件更新通过变更文件名的方式更新。 2.静态资源和接口都开启 gzip 3.html 走协商缓存 4.单页面应用对 chunk-vendors 适当拆包，使之并行加载 5.长列表做成虚拟滚动 6.loading 放在 index.html 中实现，让用户先最快看到加载状态，而不是白屏
- 先得分析性能瓶颈在哪儿吧，app 内嵌 h5 场景不像 pc 端拥有相对稳定的网络条件，性能瓶颈往往出现在静态资源加载的问题上，离线方案就是很好的解决办法。可以用 pwa，但 ios 的 app 内受限于内核还不支持，可以配合 app 自己开发离线方案，拦截静态自由到本地文件。还可以做包括离线包预置，动态更新等优化。
- 屏高，阅读流畅，趣味性，沉浸式体验，数据可视化，适度分割
- 离线包技术，在线资源按需加载(按照设备，网络环境，系统，等等)，减少业务逻辑（逻辑给中台处理），还有一些老生常谈的 cdn，图标字体，css 优化，雪碧图，减少 dom 操作