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. windows10复制粘贴键突然失效无法复制粘贴的最简单办法

    报了学习班,打开了VCE的加密文档 今天复制粘贴键突然失效 在网上捣鼓了好多方法都不行最后发现看看你有没有在用加密文件,也就是网课类的文档和视频.有就把它关了关了就好了

  2. LR 场景中Windows资源配置设置

    监视连接前的准备工作 1)进入被监视windows系统,开启以下几个服务Remote Procedure Call(RPC) .Rmote Resgistry.Network DDE.Server.W ...

  3. Eclipse插件springsource-tool-suite的下载和安装

    根据佟刚Spring课程,装完这个插件,再利用maven构建工程,爽 课程:https://www.bilibili.com/video/av21335209?from=search&seid ...

  4. centos设系统置语言为中文

    [root@host /]# vim /etc/sysconfig/i18n #i18n 是 internationalization 的缩写形式,意即在 i 和 n 之间有 18 个字母,本意是指软 ...

  5. Python Package(转)

    http://www.cnpythoner.com/post/2.html python中的Module是比较重要的概念.常见的情况是,事先写好一个.py文 件,在另一个文件中需要import时,将事 ...

  6. linux系统权限管理拓展:特殊权限

    文件与目录权限设置不止读.写.执行这些,还有所谓的特殊权限,由于特殊权限会拥有一些"特权": 1 2 3 4 本章内容 SUID SGID SBIT 文件扩展权限ACL 1.SUI ...

  7. P3128 [USACO15DEC]最大流Max Flow (树上差分)

    题目描述 Farmer John has installed a new system of N-1N−1 pipes to transport milk between the NN stalls ...

  8. UVA 10480 Sabotage (最大流最小割)

    题目链接:点击打开链接 题意:把一个图分成两部分,要把点1和点2分开.隔断每条边都有一个花费,求最小花费的情况下,应该切断那些边. 这题很明显是最小割,也就是最大流.把1当成源点,2当成汇点. 问题是 ...

  9. 2019牛客暑期多校训练营(第七场)B Irreducible Polynomial

    传送门 题意: 给你一个n次n+1项式(An*X^n+A(n-1)*X^(n-1)...A*X+A0),将系数An都给你,问你这个多项式是不是一个不可约多项式,可约多项式就是类型(x+1)*(x+2) ...

  10. Miller_Rabbin算法判断大素数

    普通的素数测试我们有O(√ n)的试除算法.事实上,我们有O(s*log³n)的算法. 下面就介绍一下Miller_Rabbin算法思想: 定理一:假如p是质数,且(a,p)=1,那么a^(p-1)≡ ...