chrome-devtools 学习

一，概述

      对于前后端分离的项目，对于用户体验来说，除了功能交互逻辑清晰简单，页面的加载效率，页面的性能，前端部署的架构都会影响用户的使用体验。在信息爆棚的时代，人们耐心也逐步降低，用户的选择多，对产品的忍耐逐渐降低，而且前端产品运行在各个不同系统设备上，有配置搞的，有配置低的形形色色。所以产品必须做到极致的快，用户的每个输入必须即时相应。前端性能分析任务艰巨，所以需要系统的、精确的分析前端的各个指标，我选择chrome-devtools。

User perception of performance delays

0 to 16 ms	Users are exceptionally good at tracking motion, and they dislike it when animations aren't smooth. They perceive animations as smooth so long as 60 new frames are rendered every second. That's 16 ms per frame, including the time it takes for the browser to paint the new frame to the screen, leaving an app about 10 ms to produce a frame.
0 to 100 ms	Respond to user actions within this time window and users feel like the result is immediate. Any longer, and the connection between action and reaction is broken.
100 to 1000 ms	Within this window, things feel part of a natural and continuous progression of tasks. For most users on the web, loading pages or changing views represents a task.
1000 ms or more	Beyond 1000 milliseconds (1 second), users lose focus on the task they are performing.
10000 ms or more	Beyond 10000 milliseconds (10 seconds), users are frustrated and are likely to abandon tasks. They may or may not come back later.

二、chrome-devtools

      Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具，可用来对网站进行迭代、调试和分析。包括网络、资源、性能、安全、内存、存储等等，我这里主要对性能和网络进行学习。

      打开 chrome-devtools的方法，chrome中右键页面->检查，或 点击自定义和控制chrome（右上角那三个点）->更多工具->开发者工具 或 Control+Shift+I。（Windows环境）

三、Performance 

    1、识别问题

    如上图：查看FPS图表。 只要您在FPS上方看到红色条，就表示帧速率下降得很低，以至于可能损害用户体验。 通常，绿色条越高，FPS越高。

 如上图：在FPS图表下方，您会看到CPU图表。 CPU图表中的颜色与“性能”面板底部的“摘要”选项卡中的颜色相对应。 CPU图表充满色彩的事实意味着在记录过程中CPU已被用尽。 每当您看到CPU长时间长时间处于满负荷状态时，就可以找到减少工作量的方法。

在“框架”部分中，将鼠标悬停在绿色方块之一上。 DevTools为您显示该特定框架的FPS。 每帧可能远低于60 FPS的目标

    2、定位问题

注意摘要选项卡。 如果未选择任何事件，则此选项卡向您显示活动的细分。 该页面花费了大部分时间进行渲染。 由于性能是减少工作量的艺术，因此您的目标是减少花费在进行渲染工作上的时间。

单击“动画帧触发”事件。 现在，“摘要”选项卡向您显示有关该事件的信息。 请注意显示链接。 单击该按钮可使DevTools突出显示启动“动画帧触发”事件的事件。 还要注意app.js：94链接。 单击可跳至源代码中的相关行。

    3、解决问题

此代码的问题在于，在每个动画帧中，它都会更改每个正方形的样式，然后查询页面上每个正方形的位置。 由于样式已更改，因此浏览器不知道每个正方形的位置是否已更改，因此必须重新布局正方形才能计算其位置。

四、Network 

    1、识别问题

    2、定位问题

在单个域上提出了太多请求。在HTTP / 1.0或HTTP / 1.1连接上，Chrome每个主机最多允许六个同时TCP连接。

    3、解决问题

• 如果必须使用HTTP / 1.0或HTTP / 1.1，请实施域分片。
• 使用HTTP / 2。不要在HTTP / 2中使用域分片。
• 删除或推迟不必要的请求，以便关键请求可以更早下载。

参考：https://developers.google.cn/web/tools/chrome-devtools/