专注于
IT技术和业内交流

Chrome DevTools 之 Profile

一.如何看待性能问题

不要认为性能就像dos设置一样简单,事实上并不是。规则会改变,并且很容易便错误地运用了规则,首先应该专注于用户上。 那么,如何看待用户延迟远远超过任何性能的准则。

RAIL是一个以用户为中心的性能模型和在响应、动画、空闲和负载四个阶段体现性能。学习如何运用RAIL模型测试性能以及运用浏览器分析tools性能。

  1. RAIL 性能模型
  2. 如何使用Timeline
  3. Timeline 相关事件简介

二.Runtime 性能

让你的网站看起来非常棒并且在任何设备上都能够快速加载。当浏览器页面呈现元素时,利用工具识别并修复一些常见问题。

  1. 分析 Runtime 性能
  2. 优化JS运行速度
  3. 检测强制Layouts同步

不了解rendering性能?来看看下面这些伟大的资源:
Udacity’s Browser Rendering Optimization course
Rendering Performance in Web Fundamentals

三.页面加载的性能优化

测试在不同网络条件下的网页加载情况。DevTool可以模拟不同的网络条件。

服务器和客户端通过网络连接。服务端和客户端都受网络连接的限制。两点之间的连接受制于中间最慢的节点限制。网络问题常常表现在加载很慢。

  1. 页面加载性能
  2. 了解资源加载时序
  3. 在不同网络条件下优化性能

四.如何解决内存问题

内存丢失常常发生于 一个失败的程序重复的 return 他们申请的临时内存,请小心提防内存泄漏、 膨胀和强制GC。

在我们的代码中现代JavaScript引擎很多情况下都能做到很好的垃圾自动回收。这句话的意思就说:我只能帮你到这了,我们的应用程序任然很容易因为我们的逻辑错误而内存溢出。使用以下工具可以找到并记录它,don’t guess it – test it.

  1. 查找常见的内存问题
  2. 内存分析中常见的术语
  3. 如何记录堆快照
  4. 如何使用对象追踪器

未经允许,不得转载本站任何文章:代码山 » Chrome DevTools 之 Profile

分享到:更多 ()

专注品牌化高端网站建设

商务服务联系我们