前端页面性能优化指标

前端优化性能指标

前端性能优化方案索引 陆续整理和不断更新网络上给出的前端性能的优化方案。 这里只是做一个总概括式的索引，每一个方案都十分值得推敲和细说。 1 请求和响应 缓存控制 请求头里，可以发送 If-Modified-Since 以及 If-None-Match 等信息，来询问服务端请求内容是否有更新，如果没有更新，可返回304，告诉浏览器使用缓存...

关于 性能优化 是个大的面，这篇文章主要涉及到 前端 的几个点，如 前端性能优化 的流程、常见技术手段、工具等。 提及 前端性能优化 ，大家应该都会想到 雅虎军规，本文会结合 雅虎军规 融入自己的了解知识，进行的总结和梳理

注意：回流一定会造成重绘，但是重绘不一定会回流 1、造成回流的情况有：回流这一阶段主要是计算节点的位置和几何信息，那么在页面布局的几何信息发生变化时，就需要回流. 一个DOM树常见几何属性有：width、height、padding、margin、left、top等 2、造成重绘的情况有：例如改变visibility、autline、background-color等属性，这些属性只是影响元素的外观、风格、 并没有影响几何属性，只会导致重绘。由此，元素在用户视角就形成了层叠的关系，某个元素可能。

前端性能优化（一）性能优化的指标和工具一.性能指标1. F12 network进行调试，我们以淘宝为例2. 此外还有一个瀑布流的概念 waterfall3.蓝线和红线4.保存当前网页指标，方便以后对比5.查看动画帧数6.异步请求的指标二. RAIL测量模型1.R\A\I\L含义2.RAIL评估标准指标三.性能测量工具1.我们常用的 Chrome DevTools2.webpagetest是什么怎么用怎么看3.lighthouse的使用 一.性能指标 1. F12 network进行调试，我们以淘宝为例 可

都可以考虑用空间换时间。

常见性能指标: FP（First Paint–首次像素绘制）：是时间线上的第一个“时间点”，它代表浏览器第一次向屏幕传输像素的时间，也就是页面在屏幕上首次发生视觉变化的时间，只要在视觉上开始发生变化，无论是什么内容触发的视觉变化，在这一刻，这个时间点，叫做FP； FCP（First Contentful Paint–首次内容绘制）：这个指标用于记录浏览器首次绘制来自DOM的内容，例如：文本，图片，SVG，非空白canvas元素等，这个时间点叫FCP。FP 指的是绘制像素，比如说页面的背景色是灰色的，那么在

文章目录一、为什么需要监控页面性能二、页面性能指标三、如何上报性能指标 一、为什么需要监控页面性能 前端页面性能是一个非常核心的用户体验指标。一个页面性能差的话会大大影响用户体验。用户打开页面等待的太久（5秒以内是比较优秀的，10秒以内还是可以忍受的，超过十秒用户一般回选择直接关闭页面），可能会直接关掉页面，甚至就不再使用了。 二、页面性能指标 一般来说，我们需要获取到的页面性能参数包括：DNS查询耗时、TCP链接耗时、request请求耗时、解析dom树耗时、白屏时间、domready时间、onload时

本节总结了性能优化的指标和工具。