前言当你觉得页面卡顿的时候，可能需要换手机了，当然你也可以请教相应的同学优化性能。本文适合技术小白&部分前端同学。当然，在写正文之前，笔者也对部门和公司内部的一些H5页面的表现做了一个粗略的评估，结果当然是很不尽如人意。也许我们忙于业务，但有时我们还是要停下来评估性能，不能一直谈性能优化。之前正经的文章也说过，页面很卡，那么卡是什么概念，或者说如何衡量一个页面是否卡死，大致概括一下，可以分为以下几点：页面加载takealongtime白屏时间，术语：弱网环境下量化不能超过4s加载过程中页面有明显的页面抖动或多次白屏，术语：页面重排非常耗能，动画上移动端页面出现明显卡顿，术语：FPS低于40帧移动端页面在行为交互（按钮点击/页面滚动）时出现明显卡顿，术语：FPS低于40帧当我们通过直觉&客观理解如何简化后判断一个页面是否卡顿，可以判断该页面是否需要开发同学介入进行性能优化。那么性能优化方法有哪些呢？页面本身及其静态资源的大小减少了，数量也减少了。优化页面交互方式，eg：初始化禁止轮播，图片lazyload等。页面视觉优化页面代码优化其他：太繁琐，省去1W字但涉及到具体的性能优化方案，我们应该如何选择呢？我们制作的网站在编码方式/打包方式等很多方面差异很大，这也让我们很难优化性能。也说明性能优化很难做好，就看你的期望和实际的差距了。说完期望与现实之间的差距，我们再来说说如何快速缩小这种差距，而不是彻底解决。特地整理了以下大概的处理方法。切断加载时间最长的行。绿色区域表示TTFB/蓝色区域表示LOAD/灰色区域表示等待或Stalled1。减少TTFB2。减少等待时间->一次只能同时发起5个http请求，需要考虑我们的打包方式，应该是regular的。3、减少一些大文件->基础文件中是否有冗余代码，是否可以反汇编成其他文件，均匀分布4、gzip的合理应用->flexlbie。综上所述，我们要控制打包方式，尽量减少冗余代码的加载，平均分配js文件的大小，避免js/css文件变小。当然，http的个数还是要减少，大小和数量上要取时间的最小值。最后，还有一点需要说明。有时我们会依赖第三方服务，这可能需要第三方的配合来优化。lazyload的加入和适当的交互干扰在右下角有一个比较明显的1/5，说明是轮播的原始逻辑：页面渲染时，会批量加载所有图片，轮播会js加载完成后执行，可能会出现图片还没有完全显示出来，也就是接下来优化的逻辑：当页面渲染完成后，禁止加载未显示的图片，当页面不渲染，图片不加载，不进行旋转操作。上述处理方式1一方面优化首屏加载大小，同时也保证页面处理不会因为动画执行导致页面整体渲染卡顿。无论如何都无法避免视觉干预和白屏时间。这时候，我们就需要一些视觉欺骗。具体方法如上图所示。在加载过程中，会出现页面默认的背景色。当页面开始加载时，将出现加载图像。在这种情况下，页面将被正确更新。预计用户可以多等几秒钟。如果你处理好前三点后，删掉console等一些冗余代码，恭喜你，你基本完成了页面80%以上的性能提升，而且投入产出比很高，估计那1-2天肯定够了，而且还是很值得的。说到底，性能优化真是佛系操作。前面的优化很轻松，后面10-20%的优化就没有底了。这种东西还是需要同学们有一定的前端功底，知道页面需要优化。彻底颠覆重构。但是之前的优化确实可以考虑。ps：早睡早起，多运动，多交异性朋友~
