web性能检测
5篇文章 · 0订阅
  • 网页性能分析不完全指南
    经常能在博客或者论坛上看到很多有关前端性能优化的文章，但是却很少看到如何分析一个网页的性能的文章。到底什么样的指标（或者说是标准）代表这个网页性能好或者不好，通过什么方式来得到这些指标呢？因此，本文来讲述下如何分析一个网页的性能的好与差。本文用到的工具：chrome浏览器。下面…
    Chrome 图片资源 前端
  • 页面渲染：性能分析
    Chrome DevTools的performance面板可以记录和分析页面在运行时的所有活动。 配合无痕模式，可以避免chrome插件的影响。 1. 录制查看 下面部分是网页快照，浏览器按照一定时间间隔截取。 2. 实时查看 Paint Flashing 高亮显示网页中需要被…
    CSS JavaScript 浏览器
  • chrome devtools使用详解——Elements篇
    1. 右键菜单 隐藏元素。这个必需说下，相信大家在看到广告或者去掉迅雷种子（#。#正经）的遮罩层的时候一定想起自己的专业技能，那么你是display:none还是Delete element？试试Hide element更好用 强制状态，其实就是添加伪类。这个功能在调试伪类样式…
    JavaScript 前端 稀土
  • chrome devtools使用详解——Performance
    当页面卡顿、慢时可以使用Performance来分析问题原因所在。 截图：默认勾选，每一帧都会截图。关闭后区域二下面部分会去除（下图红框标记那里） 1 . FPS 绿色越高越好，出现红色则表示FPS低（这就是你为啥觉得页面卡顿了），你可以在区域三Frames中看到具体的FPS值…
    Chrome 前端 JavaScript
  • 现代浏览器观察者 Observer API 指南
    前段时间在研究前端异常监控/埋点平台的实现。 在思考方案时，想到了浏览器自带的观察者以及页面生命周期API 。 Intersection Observer，交叉观察者。 Mutation Observer，变动观察者。 Resize Observer，视图观察者。 | 用途 |…
    Vue.js JavaScript
    现代浏览器观察者 Observer API 指南