持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第7天，点击查看活动详情
接上一篇： 前端性能优化(2/3) juejin.cn/post/710600…
- 减少http请求
- 静态资源使用CDN
- 将 CSS 放在文件头部，JavaScript 文件放在底部
- 使用字体图标 iconfont 代替图片图标
- 善用缓存，不重复加载相同的资源
- 压缩文件
- 图片优化
- 使用 webpack5 按需加载代码，提取第三库代码，减少 ES6 转为 ES5 的冗余代码
- 减少重绘重排
- if-else 对比 switch与查找表
- 不要覆盖原生方法
- 使用 flexbox 而不是较早的布局模型
- gzip
14.算法复杂度
在数据量大的应用场景中，需要着重注意算法复杂度问题。
Performance解析出的Javascript执行指标上，可以推测出来你的code执行效率如何，如果执行时间过长就要考虑一下是否要优化一下复杂度了。
在时间换空间，空间换时间的选择上，要根据业务场景来进行取舍。
15.组件渲染
拿react举例，组件分割方面不要太深。需要控制组件的渲染，尤其是深层组件的render。
老生常谈的话题，我们可以一些方式来优化组件渲染
- 声明周期控制 - 比如react的shouldComponentUpdate来控制组件渲染。
- 官网提供的api- PureComponent
- 控制注入组件的参数
- 分配组件唯一key
没有必要的渲染是对性能的极大浪费。
16.web worker
Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。
合理实用web worker可以优化复杂计算任务
17.SSR
渲染过程在服务器端完成，最终的渲染结果 HTML 页面通过 HTTP 协议发送给客户端，又被认为是‘同构'或‘通用'，如果你的项目有大量的detail页面，相互特别频繁，建议选择服务端渲染。
服务端渲染(SSR)除了SEO还有很多时候用作首屏优化，加快首屏速度，提高用户体验。但是对服务器有要求，网络传输数据量大，占用部分服务器运算资源。
Vue的Nuxt.js和React的next.js都是服务端渲染的方法
18.Resource Hints
Resource Hints(资源预加载)是非常好的一种性能优化方法，可以大大降低页面加载时间，给用户更加流畅的用户体验。
现代浏览器使用大量预测优化技术来预测用户行为和意图，这些技术有预连接、资源与获取、资源预渲染等。
Resource Hints 的思路有如下两个：
- 当前将要获取资源的列表
- 通过当前页面或应用的状态、用户历史行为或 session 预测用户行为及必需的资源
实现Resource Hints的方法有很多种，可分为基于 link 标签的 DNS-prefetch、subresource、preload、 prefetch、preconnect、prerender，和本地存储 localStorage。
19.Ajax可缓存
Ajax在发送的数据成功后，为了提高页面的响应速度和用户体验，会把请求的URL和返回的响应结果保存在缓存内，当下一次调用Ajax发送相同的请求（URL和参数完全相同）时，它就会直接从缓存中拿数据。
在进行Ajax请求的时候，可以选择尽量使用get方法，这样可以使用客户端的缓存，提高请求速度。