Your page is showing high CPU usage and spinning up your laptop fan, but nothing is visibly happening. What is it doing, and why is it so slow?

This lesson is a real-world performance diagnosis of this very page, right here on egghead. Two infinite (but hidden) animations were causing CPU usage to spike, and Chrome's Task Manager and Performance tools helped uncover the elements causing the problem. You'll see how to use the profiler to record a snapshot, and learn a trick for discovering animations running in the background.

Souce video

There numbers of things you can do to detect a slow page

1. Check the CPU usage

2. Bring up the chrome dev tool, performance monitor, pretty much you can say above 10% CPU usage is high

3. Record the Performance in dev tool to see any 'Layout' event, usually Layout event cause the DOM re-render, so we need to be carefully about this.

  If there is such, check which element it is and try to solve the problem. For example, a hidden svg loading spinner, can cause the problem, we can set it to 'display: none', so it remove from the DOM

4. If there is any animation happens, we can do:

window.onanimationiteration = console.log

It will prints out when animation happens, so we can know that whether there is any unnecessary animation in the background.

[Debug] Diagnose a Slow Page Using Developer Tools的更多相关文章

  1. Can I prevent the Firefox developer tools network panel from clearing on page reload?

    Can I prevent the Firefox developer tools network panel from clearing on page reload? I couldn't fin ...

  2. Developer tools

    20. Developer tools Spring Boot includes an additional set of tools that can make the application de ...

  3. How to Build Office Developer Tools Projects with TFS Team Build 2012

    Introduction Microsoft Visual Studio 2012 provides a new set of tools for developing apps for Office ...

  4. Chrome的开发者工具(Chrome Developer Tools)

    Chrome的开发者工具(Chrome Developer Tools) 按F12 https://developer.chrome.com/devtools/index http://www.w3s ...

  5. 浏览器开发调试工具的秘密 - Secrets of the Browser Developer Tools

    来源:GBin1.com 如果你是一个前端开发人员的话,正确的了解和使用浏览器开发工具是一个必须的技能. Secrets of the Browser Developer Tools是一个帮助大家了解 ...

  6. Chrome调试工具Developer Tools——前端必备神器

    本文链接:https://blog.csdn.net/u012542647/article/details/79401485 今天要给大家介绍一个神器,就是谷歌浏览器(Chorme)自带的前端调试工具 ...

  7. Chrome Developer Tools:Network Panel说明

    官方资料:Chrome Developer Tools: Network Panel 一.chrome Developer Tools:Network Panel 从网络面板中可以获取很多有用信息,如 ...

  8. eclipse中jsp文档无语法着色,安装Eclipse Java Web Developer Tools插件

    一.安装Eclipse Java Web Developer Tools插件 1.eclipse菜单:help/install New Software,打开Available Software窗体: ...

  9. React Developer Tools 安装小提示

    1,在google市场里边,安装React Developer Tools之后,发现是开启的,但是按下F12后,并没有发现react选项 2,后来通过查资料,发现必须是运行react项目的时候,才出现 ...

随机推荐

  1. python登录知乎

    #coding:utf-8 import requests import urllib3 import time class Zhihu: def __init__(self): self.login ...

  2. 向mysql中批量插入数据的性能分析

    MYSQL批量插入数据库实现语句性能分析 假定我们的表结构如下 代码如下   CREATE TABLE example (example_id INT NOT NULL,name VARCHAR( 5 ...

  3. 转:android listview局部刷新和模拟应用下载

    在 android开发中,listview是比较常用的一个组件,在listview的数据需要更新的时候,一般会用 notifyDataSetChanged()这个函数,但是它会更新listview中所 ...

  4. 输出读入优化——QAQ

    #include<bits/stdc++.h> const int RN=1e5; ],*ip=ib+RN,ob[RN+],*op=ob; inline int gc(){ ip==ib+ ...

  5. 取代VS, sourceISight的IDE神器CLION

    https://www.jetbrains.com/clion/download/download-thanks.html 随时升级 http://idea.lanyus.com/ m_pRemoti ...

  6. [LA_3938]最大连续动态和

    Sample Input 3 1 1 2 3 1 1 Sample Output Case 1: 1 1 线段树 L,R表示该区间的左右端点,sum表示该区间值的总和 l,r表示该区间连续的最大和的左 ...

  7. 开源免费的C/C++网络库(c/c++ sockets library)(转)

    原文转自 http://blog.csdn.net/weiwangchao_/article/details/8730199 (1)ACE 庞大.复杂,适合大型项目.开源.免费,不依赖第三方库,支持跨 ...

  8. F28379D烧写双核程序(在线&离线)

    烧写双核程序前需知在分别对F28379D的CPU1和CPU2两个核进行烧写程序时,需要在CCS中建立两个工程,独立编写两个核的程序.如controlSUITE中提供的双核程序例程: 1. 在线1.1 ...

  9. Google Chrome默认字体设置(Win)

    宋体·新宋体·仿宋字体.rar 下载地址:http://pan.baidu.com/s/1nt0l8FZ 或者:http://yunpan.cn/Qzv3UTTngbsID

  10. NYOJ 21.三个水杯-初始态到目标态的最少次数-经典BFS

    题目传送门:biubiubiu~ 三个水杯 时间限制:1000 ms  |  内存限制:65535 KB 难度:4   描述 给出三个水杯,大小不一,并且只有最大的水杯的水是装满的,其余两个为空杯子. ...