文档章节

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

 田浩hoyt
发布于 2017/08/31 23:41
字数 873
阅读 19
收藏 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
杭州
私信 提问
前端技术周刊 2019-03-25:React Hooks

2019-03-25 前端快爆 V8 7.4 发布。此版本支持了 JIT-less 启动模式 、WebAssembly Threads 以及私有类成员属性语法 ,并优化了函数形参实参数不匹配、原生访问器读写、流式解析等场景的性能...

阿里妈妈前端快爆
03/28
0
0
前端技术周刊 2018-06-22:Webpack 生存指南

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

a独家记忆
2018/07/13
0
0
Deep In React (一) 高性能React组件

原文链接:hateonion.me/2018/10/17/… React的渲染机制 在React内部,存在着初始化渲染和更新渲染的概念。 初始化渲染会在组件第一次挂载时,渲染所有的节点 当我们希望改变某个子节点时 我...

hateonion
2018/10/18
0
0
[开发者简报第十六期] JavaScript异步演化史 | 谷歌系列性能指南教程 | Kotlin协程 | JavaScript解构

微信阅读 本专栏可以点击阅读 异步JavaScript的演化史:从回调到Promise再到Async/Await 本文以实际样例阐述了异步 JavaScript 的发展过程,介绍了每种实现方式的优势和不足,能够帮助读者掌...

developergang
08/26
5K
1
酷!Chrome 浏览器里玩 NES 模拟器

这是可以证明Chrome强大之处的最佳方法了,用Chrome打开JSNES,你可以直接在浏览器里选择各种NES模拟器来玩,全是童年的经典(包括吃豆人、俄罗斯方块、超级马里奥、网球、魂斗罗、超级马里奥...

红薯
2009/09/17
743
1

没有更多内容

加载失败,请刷新页面

加载更多

堆”和“栈

C++作为一款C语言的升级版本,具有非常强大的功能。它不但能够支持各种程序设计风格,而且还具有C语言的所有功能。我们在这里为大家介绍的是其中一个比较重要的内容,C++内存区域的基本介绍。...

SibylY
39分钟前
4
0
总结:Https

一、介绍 简单理解,https即在http协议的基础上,增加了SSL协议,保障数据传输的安全性。 它由以前的http—–>tcp,改为http——>SSL—–>tcp;https采用了共享密钥加密+公开密钥加密的方式 ...

浮躁的码农
42分钟前
6
0
数据库表与表之间的一对一、一对多、多对多关系

表1 foreign key 表2 多对一:表 1 的多条记录对应表 2 的一条记录 利用foreign key的原理我们可以制作两张表的多对多,一对一关系 多对多: 表1的多条记录可以对应表2的一条记录 表2的多条记...

Garphy
今天
7
0
MySQL 表崩溃修复

MySQL日志报错 2019-10-19 13:41:51 19916 [ERROR] /usr/local/mysql/bin/mysqld: Table './initread_hss/user_info' is marked as crashed and should be repaired2019-10-19 13:41:51 1......

雁南飞丶
今天
6
0
Error和Exception

1.Error类和Exception类都是继承Throwable类 2.Error(错误)是系统中的错误,程序员是不能改变的和处理的,是在程序编译时出现的错误,只能通过修改程序才能修正。一般是指与虚拟机相关的问...

大瑞清_liurq
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部