专题 俄罗斯方块的React实现 (四)使用Chrome进行性能优化
专题 俄罗斯方块的React实现 (四)使用Chrome进行性能优化
田浩hoyt 发表于9个月前
专题 俄罗斯方块的React实现 (四)使用Chrome进行性能优化
  • 发表于 9个月前
  • 阅读 12
  • 收藏 0
  • 点赞 0
  • 评论 0

移动开发云端新模式探索实践 >>>   

Chrome不仅是一个浏览器,还是一个非常强力的前端代码调优工具。它能够记录下来前端页面运行时,显示内容、内存等详细信息,可以帮助我们快速定位到程序的性能瓶颈、发现潜在的问题。

打开Chrome控制台,切换到Performance这个Tab,默认Screenshots会打勾,memory没有勾选,不用犹豫,一并钩上,开始录制,一段时间后,停止录制。Chrome便会记录下来整个前端页面录制时间内的屏幕变化和内存变化。

对于前端页面的性能优化,一般会从以下几个方面着手考虑:

  • 网络加载速度
  • 页面渲染速度
  • 脚本执行速度

网络加载优化

通过Chrome的Network标签,可以看到所有网络资源的加载时间线,很容易定位到问题所在。一般来说,如果是静态资源加载较慢,可以通过CDN和bundle解决。

CDN

在世界各地部署内容分发网络,可以显著提升网络加载速度,目前也有不少CDN服务提供商。一些公共库还可以选择使用免费的CDN。

生成bundle文件

将分散的js文件打包成一个完整的bundle文件,可以减少文件请求数量。Webpack不仅能将源代码合并打包到同一个bundle文件,还可以按需将bundle文件做切割。因为bundle文件也不是越大越好,如果太大,分成两个部分同时加载也可以提速。

按需延迟加载

前端总还是有一些资源,不适合伴随webpack打包到bundle文件中去,例如视频、图片资源。这些资源都应当按需、延迟加载。

页面渲染优化

页面渲染优化基本上都让React承包了。React的diff算法,会只在dom tree需要更新时才调用浏览器接口。避免了一些不必要的更新。

另外,合理的html文档结构,也会加快页面渲染速度。Chrome的工具能够看到录制过程中,dom操作的开销。

执行速度优化

压缩代码

js代码由于是解释型编程语言,解释器执行时会有一部分开销。压缩过后的js代码,一方面可以减少bundle文件体积,另一方面还可以加快js文件的解释速度。

异步调用

一些能够异步执行的操作,尽量异步调用,js没有多线程一说,如果因为某个资源未满足而卡住等待,用户体验会非常不好。当然了,俄罗斯方块应该是不会出现这种情况了。也没啥图片资源,css代码就那么几行,还注入到html页面里了;js文件也不大。

内存泄漏检测

Chrome的工具栏能够看到页面运行过程中内存的变化情况,如果内存占用的曲线呈逐渐上升的趋势,那就要注意了,八成是有内存泄漏的情况。如果内存占用稳定在某个区间内周期性的变化,那么应该是正常情况。当然,此时也可以通过Chrome的内存分析,看看哪部分比较吃内存,是不是有节约的空间。

标签: 俄罗斯方块
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 0
博文 5
码字总数 4943
×
田浩hoyt
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: