网页慢的原因不一定只是前端，所以需要结合Network一起看

如何评价一个页面打开得快不快，可以用两个指标描述，一个是ready的时间，另一个是load的时间。

如下示例表示，read时间是2.72s，load时间是4.74s。

DOMContentLoaded: 2.72s |Load 4.74s

chrome devtools

性能优化

GTmetrix工具

其他工具

Web 页面性能分析笔记的更多相关文章

  1. web页面性能分析一些网址

    https://developers.google.com/speed/pagespeed/insights/

  2. 转 WEB前端性能分析--工具篇

    在线网站类: WebPageTest 说明: 在线的站点性能评测网站,地址http://www.webpagetest.org/ 补充: 其实这网站也是个开源项目,所以支持自己搭建一个内部的测试站点 ...

  3. 转 web前端性能分析--原理篇

    转自http://blog.csdn.net/five3/article/details/7686715 web前端性能: 即是web用户在访问一个页面时所要花费的时间总和.即一个完全意义上的用户响应 ...

  4. Web页面性能优化（YSlow）

    YSlow(解析为Why Slow)是雅虎基于网站优化规则推出的工具,帮助你分析并优化网站性能.旧版Yslow 有13条规则,新版Yslow有23项规则,YSlow会根据这些规则分析你的网站,并给出评 ...

  5. 隔壁老主精讲web页面性能优化。

    首先说一下为什么要进行web页面性能优化,在同样的网络环境下,两个同样能满足你的需求的网站,一个“Biu”的一下就加载出来了,一个卡--卡--卡--卡--卡--才出来,你会选择哪个?研究表明:用户最满 ...

  6. 前端性能优化之利用 Chrome Dev Tools 进行页面性能分析

    背景 我们经常使用 Chrome Dev Tools 来开发调试,但是很少知道怎么利用它来分析页面性能,这篇文章,我将详细说明怎样利用 Chrome Dev Tools 进行页面性能分析及性能报告数据 ...

  7. Web前端性能分析

    Web前端性能通常上代表着一个完全意义上的用户响应时间,包含从开始解析HTML文件到最后渲染完成开始的整个过程,但不包括在输入url之后与服务器的交互阶段.下面是整个过程的各个步骤: 开始解析html ...

  8. 转 web前端性能分析--实践篇

    当我们知道了web前端性能的关键点后,那么接下来要做的就是如何去具体实施并获取这些关键点的数据了.通过前面的学习知道了不少好的工具,经过对比后个人觉得dynatrace还是不错的. 不仅支持ie,ff ...

  9. 转 web前端性能分析--分析篇

    通过具体实施后就可以获得第一手的web前端性能的数据了,然后每次新版本都跑,这就会获得大量的数据,为性能分析提供了基础的输入,同时应该还要综合使用多种工具去从不同的方向收集数据:比如showslow同 ...

随机推荐

  1. jQuery-animate万能动画效果

    问题:效果受局限 解决:万能动画函数:animate() animation()可对数值类型的CSS样式执行定时器动画 包括:宽高,位置,透明度,边框宽度,字体大小 强调:不能对非数值类型属性做动画 ...

  2. iframe中父页面与子页面的传值方法

    涉及到iframe传值的情况有这么几种:(1)父页面给iframe中的子页面传值(2)子页面调用父页面中的函数(3)iframe中的子页面给父页面传值(4)兄弟iframe之间的传值 下面来逐一看一下 ...

  3. Visio 保存卡死解决办法

    右键Visio图标 属性--兼容性--以兼容模式运行这个程序 要打上对勾  且下面的系统版本要选和你电脑版本一致的选项 特权等级   以管理员身份运行次程序  要打上对勾

  4. uva 12222 Mountain Road

    题意: 有一个单行道,两个方向都有车在等待.给出每个车的方向以及到达的时间以及走完这段路所需要的时间. 为了防止车祸,同向两车通过任一点的时间间隔不得小于10s. 求最后一辆车离开时刻的最小值. 思路 ...

  5. 使用IntelljIDEA生成接口的类继承图及装饰器模式

    类图生成方法 以一个装饰器模式实现数学运算的例子为例. 安装 Intellj Ultimate , lience server: http://xdouble.cn:8888/ 在类上右键点击 cla ...

  6. python相关工具

      1.matlab与python之间的数据传递 import scipy.io as sio import numpy as np ###下面是讲解python怎么读取.mat文件以及怎么处理得到的 ...

  7. vue 加载更多2

    <template lang="html"> <div class="yo-scroll" :class="{'down':(sta ...

  8. python之运算符与基本数据类型

    1.开发工具:IDE pycharm(推荐).eclipse 2.运算符 结果是值 算数运算 a = 10 * 10 赋值运算 a = a + 1    a+=1 结果是布尔值 比较运算 a = 1 ...

  9. ui-router .state参数配置

    .state('页面被引用时的变量名',{ template: '<h1>My Contacts</h1>',//被应用时插入的模板,状态被激活时,它的模板会自动插入到父状态对 ...

  10. 怎样从外网访问内网IIS？

    本地安装了一个IIS,只能在局域网内访问,怎样从外网也能访问到本地的IIS呢?本文将介绍具体的实现步骤. 准备工作 安装并启动IIS 默认安装的IIS端口是80. 实现步骤 下载并解压holer软件包 ...