Learning Web Performance with MDN

Web 性能是客观的衡量标准,是加载时间和运行时的感知用户体验。

https://developer.mozilla.org/en-US/docs/Web/Performance

Lazy loading

懒加载 / 延迟加载

https://developer.mozilla.org/zh-CN/docs/Web/Performance/Lazy_loading

延迟加载(懒加载) 是一种将资源标识为非阻塞(非关键)资源并仅在需要时加载它们的策略。

懒加载是一种缩短关键渲染路径长度的方法,可以缩短页面加载时间。

延迟加载可以在应用程序的不同时刻发生,但通常会在某些用户交互(例如滚动和导航)上发生。

随着网络的发展,我们已经看到发送给用户的资产数量和规模都在急剧增加。

从2011年到2019年,台式机的资源中位数从 ~100KB 增至 ~400KB,移动版的资源中位数从 ~50KB 增至 ~350KB。

图像大小已从台式机上的 ~250KB 增至 ~900KB,而移动设备上的 ~100KB 增至~850KB。

Critical Rendering Path / CRP

关键渲染路径

https://wiki.developer.mozilla.org/zh-CN/docs/Web/Performance/Critical_rendering_path

关键渲染路径是浏览器将 HTML,CSS 和 JavaScript 转换为屏幕上的像素所经历的步骤序列。

优化关键渲染路径可提高渲染性能。关键渲染路径包含了 文档对象模型 (DOM),CSS 对象模型 (CSSOM),渲染树和布局。

在解析 HTML 时会创建文档对象模型。

HTML 可以请求 JavaScript,而 JavaScript  反过来,又可以更改 DOM。

HTML 包含或请求样式,依次来构建 CSS 对象模型。浏览器引擎将两者结合起来以创建渲染树。

布局确定页面上所有内容的大小和位置。确定布局后,将像素绘制到屏幕上。

优化关键渲染路径可以缩短首次渲染的时间。

了解和优化关键渲染路径对于确保重排和重绘可以每秒 60 帧的速度进行,以确保高效的用户交互并避免讨厌是很重要的。

https://developer.mozilla.org/zh-CN/docs/Glossary/render_tree ???

CSSOM

CSS 对象模型

https://developer.mozilla.org/zh-CN/docs/Glossary/CSSOM

CSS 对象模型 (CSSOM) 是树形形式的所有CSS选择器和每个选择器的相关属性的映射,具有树的根节点,同级,后代,子级和其他关系。

CSSOM 与 文档对象模型(DOM) 非常相似。两者都是关键渲染路径的一部分,也是正确渲染一个网站必须采取的一系列步骤。

CSSOM 与 DOM一起构建渲染树,浏览器依次使用渲染树来布局和绘制网页。

CSSOM API, CSS 对象模型也是一组API,允许从J avaScript 操纵 CSS。

它非常类似于DOM,但应用于 CSS 而不是 HTML。

它允许用户动态读取和修改 CSS样式。


DOM

文档对象模型

https://developer.mozilla.org/zh-CN/docs/Glossary/DOM


refs

Web Page Performance Test / 网页性能测试

https://webpagetest.org/

https://www.xgqfrms.xyz



xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


Learning Web Performance with MDN的更多相关文章

  1. Learning web development with MDN

    Learning web development with MDN Server-side website programming Dynamic Websites – Server-side pro ...

  2. Web Performance Test : 为Request的Post参数名添加XPath支持

    问题描述 本文的标题看起来有些含糊其辞,这里我需要把问题阐述得更加清楚.这是我们使用VSTS进行Web Performance Test时,Asp.net造成的特定问题(也许其他开发工具或插件也会造成 ...

  3. Web Performance Test: 如果使用Plugin过滤Dependent Request

    前言 由于Visual Studio的Web Performance Test是基于XML脚本的,留给用户修改测试行为的自由度并不高.因此,Plugin机制就对于实现很多客户化的配置显得很重要. 问题 ...

  4. Visual Studio的Web Performance Test提取规则详解(3)

    总结 Visual Studio的Web Performance Test是基于HTTP协议层的,它不依赖于浏览器,通过直接接收,发送HTTP包来和Web服务器交互.Web Performance T ...

  5. Visual Studio的Web Performance Test提取规则详解(2)

    总结 Visual Studio的Web Performance Test是基于HTTP协议层的,它不依赖于浏览器,通过直接接收,发送HTTP包来和Web服务器交互.Web Performance T ...

  6. Visual Studio的Web Performance Test提取规则详解(1)

    总结 Visual Studio的Web Performance Test是基于HTTP协议层的,它不依赖于浏览器,通过直接接收,发送HTTP包来和Web服务器交互.Web Performance T ...

  7. Web Performance and Load Test Project错误集

    当我们创建Web Performance and Load Test Project时,经常会遇到下面这些问题: 1. 当点击Add Recording时, 左边的record tree没有出现: 解 ...

  8. 13 Reasons Why You Should Pay Attention to Mobile Web Performance

    Mobile is no longer on the sidelines. If you’re not already thinking mobile first, you should at lea ...

  9. play games for learning web skills

    play games for learning web skills CSS flexbox https://codepip.com/games/flexbox-froggy/ CSS grid ht ...

随机推荐

  1. Maven 基础详解

    一.编写pom.xml文件     Maven项目的核心是pom.xml.POM(Project Object Model,项目对象模型)定义了项目的基本信息,用于描述项目如何构建,声明项目依赖等等. ...

  2. Spring Security OAuth2.0认证授权六:前后端分离下的登录授权

    历史文章 Spring Security OAuth2.0认证授权一:框架搭建和认证测试 Spring Security OAuth2.0认证授权二:搭建资源服务 Spring Security OA ...

  3. 关于Java客户端连接虚拟机中的Kafka时,无法发送、接收消息的问题

    kafka通过控制台模拟消息发送和消息接收正常,但是通过javaAPI操作生产者发送消息不成功 消费者接收不到数据解决方案? 1.问题排查 (1)首先通过在服务器上使用命令行来模拟生产.消费数据,发现 ...

  4. vim 行号的显示与隐藏

    通常我们在使用vim编辑器的时候,需要显示和隐藏行号 隐藏行号: 1.首先我们vim   1.txt   (进入我们编辑的文档),如下,此时是显示行号的 2.按一下esc键,并输入:(冒号),完成效果 ...

  5. 在 ASP.NET Core 应用中使用 Cookie 进行身份认证

    Overview 身份认证是网站最基本的功能,最近因为业务部门的一个需求,需要对一个已经存在很久的小工具网站进行改造,因为在逐步的将一些离散的系统迁移至 .NET Core,所以趁这个机会将这个老的 ...

  6. ACCESS数据库偏移注入

    偏移注入主要是针对知道表,但是不知道字段的ACCESS数据库. 比如我们已经知道了表名是 admin 判断字段数: http://192.168.74.136:8002/Production/PROD ...

  7. MapReduce编程练习(四),统计多个输入文件学生的平均成绩,

    问题描述: 在输入文件中,有多个,其中每个输入文件代表一个学生的各科成绩,其中每行的数据形式为<科目,成绩>,你需要将每个文件中的每科目的成绩进行统计,然后求平均值. 输入文件格式: 这里 ...

  8. 【hdu 1576】A/B(数论--拓展欧几里德 求逆元 模版题)

    题意:给出 A%9973 和 B,求(A/B)%9973的值. 解法:拓展欧几里德求逆元.由于同余的性质只有在 * 和 + 的情况下一直成立,我们要把 /B 转化为 *B-1,也就是求逆元. 对于 B ...

  9. 【noi 2.5_1789】算24(dfs)

    最开始我想的是全排列+枚举符号和括号的方法,但是我自己倒腾了很久还是打不对,只好向他人请教.正解很机智--直接随意将几个数"捆绑"在一起,值存在其中一个数上,其他数标记不可再选,直 ...

  10. Codeforces Round #631 div1C(或者div2E) Drazil Likes Heap 题解

    题目链接:https://codeforces.com/contest/1329/problem/C 或者:https://codeforces.com/contest/1330/problem/E ...