文档章节

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

 田浩hoyt
发布于 2017/08/31 23:41
字数 873
阅读 16
收藏 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
杭州
私信 提问
Google:Chrome 页面加载较之去年提升 20%+

Chrome 的 Speedometer 得分相比去年提高了 25% 至 35%。 Google 构建了 V8 JavaScript 引擎,以确保 Chrome 通过丰富的网络应用程序发挥作用,但开发人员承认,他们优化引擎的基准已过时。...

达尔文
2017/04/18
2K
9
前端技术周刊 2018-06-22:Webpack 生存指南

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

a独家记忆
2018/07/13
0
0
高性能 React: 3 种提升 APP 速度的新工具

React 已经比较快了,但使用时仍很容易犯些小错误,导致其性能下降。组件挂载慢,组件树层级过深以及没必要的循环渲染都会让app感觉很慢。 幸亏有很多工具(有些甚至内置在 React 中)能帮助诊...

oschina
2017/07/24
2.3K
0
Deep In React (一) 高性能React组件

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

hateonion
2018/10/18
0
0
一文了解 Chrome 的十年“加速”历程

自十年前 Chrome 浏览器首次推出后,速度已经成为 Chrome 的四个核心原则之一。我们一直都想让 Web 开发者能够向用户提供快速的、优秀的上网体验。在 Chrome 诞生十周年之际,我们认为回顾在...

oschina
2018/09/13
906
0

没有更多内容

加载失败,请刷新页面

加载更多

Cookie 显示用户上次访问的时间

import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.Cookie;import javax.servlet.http.HttpServlet;import javax.serv......

gwl_
今天
1
0
网络编程

第14天 网络编程 今日内容介绍  网络通信协议  UDP通信  TCP通信 今日学习目标  能够辨别UDP和TCP协议特点  能够说出UDP协议下两个常用类名称  能够说出TCP协议下两个常用类名称...

stars永恒
今天
1
0
二进制相关

二进制 众所周知计算机使用的是二进制,数字的二进制是如何表示的呢? 实际就是逢二进一。比如 2 用二进制就是 10。那么根据此可以推算出 5的二进制等于 10*10+1 即为 101。 在计算机中,负数以...

NotFound403
昨天
3
0
day22:

1、写一个getinterface.sh 脚本可以接受选项[i,I],完成下面任务: 1)使用格式:getinterface.sh [-i interface | -I ip] 2)当用户使用-i选项时,显示指定网卡的IP地址;当用户使用-I选项...

芬野de博客
昨天
2
0
Spring Cloud Alibaba基础教程:使用Nacos实现服务注册与发现

自Spring Cloud Alibaba发布第一个Release以来,就备受国内开发者的高度关注。虽然Spring Cloud Alibaba还没能纳入Spring Cloud的主版本管理中,但是凭借阿里中间件团队的背景,还是得到不少...

程序猿DD
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部