[Debug] Diagnose a Slow Page Using Developer Tools
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.
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.
相关文章
- ERROR: Re-run SonarScanner using the -X switch to enable full debug logging.
- ORA-01610: recovery using the BACKUP CONTROLFILE option must be done ORACLE 报错 故障修复 远程处理
- ORA-19550: cannot use backup/restore functions while using dispatcher ORACLE 报错 故障修复 远程处理
- ORA-26040: Data block was loaded using the NOLOGGING option ORACLE 报错 故障修复 远程处理
- ORA-29655: USING clause is incompatible with its supertype ORACLE 报错 故障修复 远程处理
- ORA-29814: expecting USING or DEFAULT keyword ORACLE 报错 故障修复 远程处理
- MySQL Error number: MY-010771; Symbol: ER_CANT_IDENTIFY_CHARSET_USING_DEFAULT; SQLSTATE: HY000 报错 故障修复 远程处理
- node.js:exopress-连接mysql报错:Access denied for user ‘root’@’localhost’ (using password: NO)问题解决。详解编程语言
- 数据库Using MySQL Databases in ObjectiveC Projects(ocmysql)
- Exploring the Benefits of Using Linux and Pysvn for Effective Software Development(linuxpysvn)
- Using Linux to Easily Retrieve Process Names for Optimal System Management(linux获取进程名)
- Maximizing System Performance: A Guide to Using Linux SAR for Monitoring and Analysis.(linuxsar)
- Using Java to Work with MongoDB: A Guide for Developers(java操作mongodb)
- Exploring the Benefits and Advantages of Using MongoDB for .NET Development(mongodbnet)