90%的人都不知道的前端性能优化技巧（下

以上，介绍了前端领域我们能改变的瓶颈点。还有其他方面，我没有提到。

• 比如，操作系统。 我曾在一个15寸的屏幕上做首屏秒开，当时记得是操作系统是Android 5.3 版本。多苦，你想想就明白了。

• GPU、GUI等。

• 网络层和服务层

• 预防阻塞

• 负载均衡

• 慢启动

• 算法

• 页面解析、渲染的算法

• 标记化算法

• 树构建算法

• GC

• ……

搭建一个性能监控平台？

---

现在市场并没有功能做得很全面的产品。即使有，目前也没有好的开源项目。但如果仅仅只是正对公司部分业务搭建一个简单的性能监控平台是没有那么难的。

准备一，做好数据埋点。

目的是为了能获取到一部分上报数据。例如页面在1小时内被访问的次数，页面出错的次数，哪些位置、入口点击数最高等等。那说下几种埋点方式吧。

• 手动埋点（代码埋点）

• 纯手动写代码，调用埋点SDK的函数。在需要埋点的业务逻辑功能位置调用接口上报埋点数据。目前市场上第三方数据统计服务商（例如百度）大都采用这种方案；

• 手动埋点的技术本质是什么呢？它能获取到哪些内容？

• 域名：document.domainURLdocument.URL

• 页面标题：document.title

• 分辨率：window.screen.height & window.screen.width

• 颜色深度：window.screen.colorDepth

• Referrer：document.referrer

• 客户端语言：navigator.language

• 埋点做法

// 命令式埋点

()=>{

// … 这里是你的业务逻辑代码

sendData(params); //这里是发送你的埋点数据，params是你封装的埋点数据

}

// 声明式埋点

Touch

• 可视化埋点

• 解决了纯手动埋点的开发成本和更新成本，通过可视化工具快速配置采集节点（圈点），在前端自动解析配置，并根据配置上传埋点数据，比起手动埋点看起来更无痕，这里的配置数据可以设置过滤条件，避免针对所有元素（比如全埋点），可以在调用开启自动监控API时通过设置一些特征属性，来过滤不符合条件的元素，实现只针对某些元素进行自动上报数据的需求。(这不多赘述了，细聊内容很多。等以后吧。)

• 无埋点 （wait…）

准备二，定义好性能指标以及量化指标数据

• 指标量化场景

• 弱网情况下

• 无网络情况下

• 机型

• 网络短暂异常

• ……

• 指标

• 页面白屏时间

• FPS

• 页面秒开率

• 页面报错率

• 页面卡顿次数

• ……

开发吧。

你啥都搞清楚了，真的可以尝试开发一个简易版本的性能监控平台了。

骨架屏

---

为什么要单独拿出来说。因为，骨架屏可以做一个很重要的性能指标：渲染数据到页面的时间。

所以，你认为的骨架屏是什么？例如以下这个样子？

是的，它是骨架屏。

Q： 骨架屏仅仅只能做到如此吗？ 答： 你错了。如果骨架屏出现的足够快，那为什么我不在骨架屏中加入其它元素呢？举个栗子。

如图，这张卡片内容有三部分组成： 商品图片、商品名称、立即购买按钮。假如你的骨架屏能预先拿到文字相关的数据呢？ 你是不是可以考虑，把这些商品的名字当中骨架屏的一部分。

事实上，我在做组件骨架屏的时候就发现了这个问题。抛开获取数据的时间不谈，组件骨架屏渲染一个文本节点的时间几乎可以忽略不计。所以，问题就转移到了数据上。那假如你把数据本地缓存了一份？

再假设一下，假如图片骨架屏也能预先拿到图片数据呢？ 那是不是也可以尝试去渲染图片呢？

这里要被问到了，那做了这些还算是骨架屏吗？那我们是不是可以对骨架屏有另一个认知：只要没有绑定JS事件的元素都可以看作是骨架。

人有美丑，为什么骨架屏不能有？ 那么这里又会有人杠了。你这又是数据缓存又是懒加载的，骨架屏需要这些吗？

那么，什么是骨架屏。 骨架屏的本质是不是对你的组件自动生成一套骨架？ 至于生成什么样的骨架，你管我？我有性能监测平台的好不啦？ 平台告诉我，我的页面秒卡率大幅增加了好不啦？

所以，最重要一点，即使很多人认为前端性能优化一提到就是老四样，你依然可以玩出花来。毕竟，实践出真知。

快照

---

快照是一个很有意思的事情。例如天猫，你下单的时候会给你生成交易快照，后面的所有流程都以交易快照的数据为准，保证你的钱不会后期被多花或者少花。 比较价格这种东西，变一变很正常。

还有一种快照的解释。例如手机截图，把当前用户看到的页面内容生成一张图片保存到相册中。

那，这里我说一种。将你的首页做一份快照，备份到native缓存里，每次进来先加载那份快照。这份快照就是index.html文件，放native包的本地缓存里。你觉得浏览器直接访问你的index.html快嘛？

又得要杠了。这怎么有点像SSR？ SSR理，服务端会给客户端发送一份包含html的模版字符串，可以没有样式，可以没有js。但快照有样式，就跟摆了张图片覆盖在首页一样。那你觉得是渲染一张足以覆盖首页的图片快，还是访问一份index.html快？

预渲染

---

先解释下预渲染的本质吧。提前准备好以下两点：

• index.html + js + css

• data (JSON)

再上张图吧。

结合图片描述，再来认真解释一下。

预渲染是指在用户访问这个页面之前，完成页面渲染的准备。 简单点说就是在用户访问页面之前，我将页面内容存放在用户看不见的地方，待用户需要看见内容的时候再把已经渲染完毕的内容挪到能看见的位置。

稍微总结下。

• 在用户正式访问页面之前，要将页面的内容渲染完毕。

• 在用户正式访问的时候，只需直接加载已经渲染好的内容。

具体咋实现呢？

NSR（Native side rendering，客户端渲染）

通过客户端（Native）进行页面结构拼接，进而实现页面渲染的处理技术。

需要离线包提供模板等资源（如 HTML、JS、CSS ）。预加载提供数据，把页面作为数据经过模板函数变化后产生的结果，然后通过 v8 引擎在客户端渲染出来。

• 预加载 提前将数据准备好。例如在用户访问之前就将接口缓存下来，调用接口后把得到的data也缓存下来。

NSR 是怎么实现的呢？

1. 首先是模板和数据必须准备好，保证用户点击页面链接进入后，这个页面的所有资源是准备好的。至于咋做，可以看一下（上篇）

• 离线化

• 预加载

• 缓存

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

总结

• 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

• 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！