文档章节

专题 俄罗斯方块的React实现 (四)使用Chrome进行性能优化

 田浩hoyt
发布于 2017/08/31 23:41
字数 873
阅读 13
收藏 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
作品 0
杭州
前端技术周刊 2018-06-22:Webpack 生存指南

前端技术周刊 2018-06-22 新闻 生态更新 Nodejs 发布了六月安全更新,建议开发者更新到 10.4.1 版本,包含对 HTTP/2 拒绝服务攻击、TLS 拒绝服务等的预防。 五月底,欧盟的通用数据保护协议 ...

a独家记忆
07/13
0
0
划词翻译柯林斯词典 Chrome 扩展 - youdao-collins-chrome-extension

查询英文单词的柯林斯释义的chrome扩展应用。支持划词翻译,数据来源于有道词典。接入扇贝生词本,快速记录新单词,方便未来复习。 使用说明 在配置页面可以设置划词翻译的模式 划词即翻译 ...

oyyd
06/22
0
0
【省带宽、压成本专题】带宽成本降低50%的秘密——深入解析WebP

过去几年,又拍云一直在点播、直播等视频应用方面潜心钻研,取得了不俗的成果。我们结合点播、直播、短视频等业务中的用户场景,推出了“省带宽、压成本”系列文章,从编码技术、网络架构等角...

又拍云
06/12
0
0
WebAssembly 执行速度比 JavaScript 快?小心打脸

WebAssembly 一直被视为解决 Web 性能低下的救星,各大主流浏览器也纷纷选择拥抱 WebAssembly 。尤其是 Firefox ,在对 WebAssembly 的优化上下了许多功夫,像是引入分层编译和 IndexedDB 缓...

王练
07/11
0
0
前端每周清单第 51 期: React Context API 与模式变迁, Webpack 与 Web 优化, AI 界面生成

前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公...

王下邀月熊
02/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

谷歌 Fuchsia 上手体验,将取代Android/win10

在手机市场领域,Google表现很抢眼,毫无疑问,Android 至今在移动操作系统的市场份额占据绝对领先地位,但是 Android 仍然存在不少问题,碎片化问题严重,在平板以及大屏幕设备上表现糟糕,...

linux-tao
28分钟前
1
0
List、Array与ArrayList

数组在内存中是连续存储的,所以它的索引速度很快,而且赋值和修改元素也非常快,比如: string[] s=new string[3];//赋值 s[0]="a"; s[1]="b"; s[2]="c";//修改 s[1]="b1"; 但是数组...

shimmerkaiye
31分钟前
0
0
Linux 的Lnmp环境下为mysql添加环境变量

一.问题 在Linux 安装完Lnmp 环境后 , 连接Mysql 告诉没有这条命令 mysql -uroot -p 命令失效 因为是源码安装的,所以会出现这样的的原因 。集成环境是不会出现的。 其实很简单,只需要给m...

15834278076
33分钟前
3
0
apolloxlua include函数

include函数不是单独使用的函数, 他并不是标准库的一部分, 你可以使用include函数将某个后缀为 .aop的文档包含到你的文档流中。 因为include是单独处理流, 所以不会在主处理流程中有所表示...

钟元OSS
37分钟前
0
0
【转载分享】做一名较真的工程师

近些年与我共事过的同事,一定知道我至今仍有一个较真的性格。我会:指出同事所写代码的不当命名问题(并帮助改进);指出同事所写文档中的逻辑混乱问题(并辅以修订);指出同事所写PPT中乱...

HellerZhang
38分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部