文档章节

专题 俄罗斯方块的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
React性能分析利器来了,妈妈再也不用担心我的React应用慢了

Profiler React16.5正式在devtool中加入了Profiler功能,用于收集每次变更导致的渲染时间,帮助开发者发现潜在的性能问题,有助于开发更高性能的React应用 官方博客 如何使用 在Chrome的开发...

Jokcy
09/19
0
0
React Native / React调试技巧

React Native / React调试技巧 做过原生APP开发的同学们都清楚,我们在Xcode和studio中就可以直接对编写的代码进行断点调试,很方便,但是web开发断点调试就不能直接在开发工具中完成了,需要...

光强
09/12
0
0
WebAssembly 执行速度比 JavaScript 快?小心打脸

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

王练
07/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

shell特殊符号、cut、sort、uniq、wc、tee、tr、split命令

10月15日任务 8.10 shell特殊符号cut命令 8.11 sort_wc_uniq命令 8.12 tee_tr_split命令 8.13 shell特殊符号下 cut 命令 cut作用:截取字符串 用法如下:cat /etc/passwd |head -2 |cut -d ...

hhpuppy
8分钟前
0
0
Springboot实现filter拦截token验证和跨域

背景 web验证授权合法的一般分为下面几种 1使用session作为验证合法用户访问的验证方式 使用自己实现的token 使用OCA标准 在使用API接口授权验证时,token是自定义的方式实现起来不需要引入其...

funnymin
43分钟前
1
0
linux使用ntfs-3g操作ntfs格式硬盘

Linux内核目前只支持对微软NTFS文件系统的读取。 NTFS-3G 是微软 NTFS 文件系统的一个开源实现,同时支持读和写。NTFS-3G 开发者使用 FUSE 文件系统来辅助开发,同时对可移植性有益。 安装 ...

linuxprobe16
今天
1
0
kubeadm部署kubernetes集群

一、环境要求 这里使用RHEL7.5 master、etcd:192.168.10.101,主机名:master node1:192.168.10.103,主机名:node1 node2:192.168.10.104,主机名:node2 所有机子能基于主机名通信,编辑...

人在艹木中
今天
13
0
Shell特殊符号总结以及cut,sort,wc,uniq,tee,tr,split命令

特殊符号总结一 * 任意个任意字符 ? 任意一个字符 # 注释字符 \ 脱义字符 | 管道符 # #号后的备注被忽略[root@centos01 ~]# ls a.txt # 备注 a.txt[root@centos01 ~]# a=1[root@centos01...

野雪球
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部