LightHouse
关注
分享
扫一扫
文章平均质量分 73
Anita-Sun
一只热衷于分享前端知识的奶牛猫~ ️
展开
-
分析关键渲染路径性能
概述优化关键渲染路径能够让浏览器尽可能快地绘制网页如果要尽快提供首次绘制，那么早些响应 domContentLoaded 事件如果存在CSS资源当不存在media属性时：domContentLoaded 事件需要等待 CSSOM 和 DOM 构建完成存在media属性时：根据属性值判断在特定条件下等待 CSSOM 和 DOM 构建完成；一般情况下 DOM 构建完成相应 domContentLoaded如果存在js资源当不存在async属性时：domContentLoaded 事件原创 2021-12-08 20:45:33 · 595 阅读 · 0 评论 -
CDN 带来这些性能优化
前言CDN的全称是 Content Delivery Network，即内容分发网络。CDN 是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN 的关键技术主要有内容存储和分发技术。—— 科学百科CDN 存在的意义：为了不让网络拥塞成为互联网发展的障碍。举个例子在讲 CDN 之前我们先看个生活实例：在淘宝购物我们在淘宝购物，大部分个人卖家只是在一个地原创 2021-12-08 09:24:53 · 1161 阅读 · 0 评论 -
网络过程的优化
减少网络请求浏览器缓存本地存储localStoragelocalStorage是html5新增的本地存储API，在一般浏览器支持的存储容量是5M大小，它仅在浏览器中保存，不参与和服务器的通信。存储在localStorage中的数据没有过期时间，只有手动清除。因为数据是保存在浏览器本地硬件设备中的，所以即使关闭浏览器，这部分数据依旧存在，下次打开浏览器访问网站时数据可继续使用。localStorage使用起来非常简单，常用API包含setItem、getItem、removeItem、cl..原创 2021-12-08 09:01:04 · 262 阅读 · 0 评论 -
如何异步加载CSS
media = ’none‘οnlοad=“if(media!=‘all’)media=‘all’”<link rel="stylesheet" href="css.css" media="none" onload="if(media!='all')media='all'">原创 2021-12-08 08:18:56 · 479 阅读 · 0 评论 -
DOMContentLoaded和load
概述load事件：load 应该仅用于检测一个完全加载的页面 当一个资源及其依赖资源已完成加载时，将触发load事件。也就是说，页面的html、css、js、图片等资源都已经加载完之后才会触发 load 事件DOMContentLoaded事件：当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。也就是说，DOM 树已经构建完毕就会触发 DOMContentLoaded 事件js 阻塞了什么因为js在执行的过程原创 2021-12-08 00:05:49 · 2004 阅读 · 0 评论 -
Evaluate critical render path 评估关键渲染路径
概述优化关键渲染路径是指优先显示与当前用户操作有关的内容通过优化关键渲染路径，我们可以显著缩短首次渲染页面的时间关键渲染路径将HTML原创 2021-12-07 16:45:07 · 241 阅读 · 0 评论 -
First Contentful Paint【FCP】
First Contentful PaintFirst Contentful Paint (FCP)是 Lighthouse 报告的性能部分追踪的六个指标之一。每个指标捕获页面加载速度的某些方面。Lighthouse 以秒为单位显示 FCPWhat FCP measures一直以来，对开发者来说衡量页面加载中主要内容加载、显示的速度都比较困难。由于Load和DOMContentLoaded跟屏幕上用户所见内容并无必然的关系，所以不够好（它们不是面向用户的指标）。FCP（First Conte原创 2021-12-07 15:35:11 · 4295 阅读 · 0 评论 -
使用 Javascript 添加交互
概述JavaScript 可以查询和修改 DOM 与 CSSOMJavaScript 执行会阻止 CSSOM除非将 JavaScript 显式声明为异步，否则它会阻止构建 DOM例<!DOCTYPE html><html> <head> <meta name="viewport" content="width=device-width,initial-scale=1"> <link href="style.css" r原创 2021-12-07 15:27:31 · 584 阅读 · 0 评论 -
阻塞渲染的CSS
概述默认情况下，CSS 被视为阻塞渲染的资源。如果没有CSS，浏览器将阻塞渲染，直至 DOM 和 CSSOM 全都准备就绪我们可以通过媒体类型和媒体查询将一些 CSS 资源标记为不阻塞渲染浏览器会下载所有 CSS 资源，无论阻塞还是不阻塞CSS媒体类型和媒体查询CSS 是阻塞渲染的资源。需要将它尽早、尽快地下载到客户端，以便缩短首次渲染的时间如果有一些资源只在特定条件下使用，使用媒体查询可以不阻塞渲染。只在特定条件下才会下载资源，阻塞渲染<link href="style.css"原创 2021-12-07 15:00:17 · 635 阅读 · 0 评论 -
构建对象模型
概述字节 -> 字符 -> 令牌 -> 节点 -> 对象模型HTML 标记转换成文档对象模型 (DOM)；CSS 标记转换成 CSS 对象模型 (CSSOM)DOM 和 CSSOM 是独立的数据结构文档对象模型（DOM）<!DOCTYPE html><html> <head> <meta name="viewport" content="width=device-width,initial-scale=1">转载 2021-12-07 14:44:10 · 689 阅读 · 0 评论 -
Lighthouse performance scoring
为什么分数会波动互联网流量路由变化在不同的设备上进行测试，如高性能台式机和低性能笔记本电脑插入 JavaScript 和添加/修改网络请求的浏览器扩展（所以在 Devtools 官网上要关掉浏览器插件）杀毒软件分数的组成部分Lighthouse Scoring Calculator：可以通过这个查看得分的加权平均数LightHouse 8LightHouse 6表现最好的网站渲染 LCP 的时间约为1,220毫秒如何处理桌面电脑和移动电话在 Lighthouse v6之前原创 2021-12-07 09:29:03 · 295 阅读 · 0 评论