zoukankan      html  css  js  c++  java
  • 前端性能测试工具hiper介绍

      对前端性能测试工具还不了解,在请教了旁边的前端同事后学习到了简单的工具,在这里总结下。

      前端的性能测试测什么?

      以下是复制:

    • 渲染引擎工作流
     
    • dom树构建:从html标签的解析开始,将各种标签解析为dom树中的各个节点,标签和dom树的中的节点是一一对应关系。

    • 渲染树构建:将CSS和style标签中的样式信息解析为渲染树,渲染树由一些包含有颜色和大小等属性的矩形组成,它们将被按照正确的顺序显示到屏幕上。

    • 渲染树布局和绘制:渲染树确定各个dom节点在屏幕中单确切位置,根据渲染树中的颜色等信息绘制出网页。

     
        

        值得注意的是,这个过程是逐步完成的,为了更好的用户体验,渲染引擎将会尽可能早的将内容呈现到屏幕上,并不会等到所有的html都解析完成之后再去构建和布局渲染树。它是解析完一部分内容就显示一部分内容,同时,可能还在通过网络下载其余内容。

        所以前端性能测试的重点之一,在于资源下载及渲染。

        当当当~ 工具出场了~

        其实很多浏览器自带的开发者工具已经很好的完成了这个功能,比如chrome, 只是用命令行看起来高大上一点。

        https://github.com/pod4g/hiper

        推荐下这个,支付宝的前端开发做的

  • 相关阅读:
    01-节点层次
    WebAPI02
    WebAPI01
    牛客剑指Offer7
    Python字典排序
    Python字典中的键映射多个值
    计算机硬件的主要技术指标
    计算机的基本组成
    计算机系统概论
    数据库概论
  • 原文地址:https://www.cnblogs.com/spillage/p/11428992.html
Copyright © 2011-2022 走看看