前端性能优化(3/3)

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第7天,点击查看活动详情

接上一篇: 前端性能优化(2/3) juejin.cn/post/710600…

  1. 减少http请求
  2. 静态资源使用CDN
  3. 将 CSS 放在文件头部,JavaScript 文件放在底部
  4. 使用字体图标 iconfont 代替图片图标
  5. 善用缓存,不重复加载相同的资源
  6. 压缩文件
  7. 图片优化
  8. 使用 webpack5 按需加载代码,提取第三库代码,减少 ES6 转为 ES5 的冗余代码
  9. 减少重绘重排
  10. if-else 对比 switch与查找表
  11. 不要覆盖原生方法
  12. 使用 flexbox 而不是较早的布局模型
  13. 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方法,这样可以使用客户端的缓存,提高请求速度。

分类:
前端
标签: