从品牌到营销，从策略到执行的一站式服务
来源：沙漠风网站建设公司 | 2020.09.02
5. 预加载
DNS预取-DNS Prefetch
这会通知客户端，我们以后需要通过特定的URL来获取资产，以便浏览器可以尽快解析DNS。假设我们需要URL中的资源如图像或音频等文件需要从www.gogoing.site网站下下载。
然后，当我们请求文件时，我们将不再需要等待DNS查找。Chrome一直在做类似的事情。如果您仅在URL栏中键入域名的一小部分，它将自动预解析DNS（有时甚至预渲染页面），从而节省了每个请求至关重要的毫秒数。
资源预取-Prefetch
Prefetch和DNS Prefetch相同。Prefetch应主要用于预加载静态资源，例如图像，CSS和JavaScript文件。整个文件将下载并保存在浏览器缓存中。也可以预取HTML文档。
但是，您不能依赖正在下载的资源。浏览器会在处于空闲状态时并且没有其他要执行的任务下载资源文件。如果用户的网络连接较慢，它也将完全忽略大文件。
子资源- subresource
subresource与Prefetch相同。都是从服务器预下载指定的文件，并将其存储在浏览器的缓存中。但是不同的是，根据Chromium文档，它的工作方式如下：
LINK rel=“subresource”提供了一种新的链接关系类型，其语义与LINK rel="prefetch"不同。尽管rel="prefetch"提供了低优先级的资源下载，以供后续页面使用，而rel="subresource"则允许及早加载当前页面中的资源。
因此，如果当前页面需要该资产，或者尽快需要该资产，则zui好使用它subresource，否则请使用prefetch。
预渲染-Prerender
预渲染功能是此处介绍的zui强大的技术。从根本上确保具有所有必要静态资源的URL在后台完全加载和设置。您可以想象它是在新选项卡中预先打开URL，但在用户实际调出页面之前它一直处于隐藏状态。并且所有在实际页面下载期间发生的活动都将在后台进行。
但是由于兼容性问题，一般情况下，我们都会同时使用Prefetch和Prerender来预加载HTML文档。
任何丢失的文件都会产生HTTP 404 错误。如果请求一个不存在的脚本文件，因为浏览器在请求脚本文件的时候，即便是返回404，它也会尝试去按照Javascript的方式解析响应中的内容。这无疑会增加很多处理的时间。
6. 重绘和回流
在了解重绘和回流之前，我们先回顾一下浏览器的工作原理：
浏览器解析HTML源代码，并构造一个DOM树，其中每个HTML标签在树中都有一个对应的节点，标签之间的文本块也会生成一个文本节点。DOM树中的根节点是documentElement（<html>标记）
浏览器解析CSS代码：基础规则在User-Agent样式表（浏览器默认设置）中，然后可能有用户样式表，作者样式表，外部样式，导入样式，内联样式以及zui终样式被编码为styleHTML标签的属性
接下来是构造渲染树（render tree）。渲染树有点像DOM树，但不完全匹配。渲染树会获取样式信息，因此，如果您将元素隐藏display: none，则它将不会出现在渲染树中。其他不可见元素（例如，head以及其中的所有元素）也是如此。另一方面，例如在渲染树状文本节点中可能存在* 用多个节点表示的DOM元素。渲染树中的节点称为box（CSS box 中的盒模型），每个节点都有CSS框属性-宽度，高度，边框，边距等
构造渲染树后，对于每个visible节点，匹配合适的节点CSSOM rules并应用它们，然后浏览器在屏幕上绘制渲染树节点。
重绘-repaint
由于节点属性的更改或样式更改（例如更改opacity，color，background-color，visibility），因此需要更新屏幕的某些部分。此屏幕更新称为重绘（repaint）。
回流-reflow
渲染树的一部分（或整个树）需要重新计算，包括元素的位置、宽高度以及边框等几何形状以及所有受影响的其他元素的位置都会由浏览器重新绘制，此过程称为回流。更改单个元素会影响所有的子元素，祖先元素和兄弟元素。
回流一定会导致重绘。
通常情况下，以下情况会导致回流：
1、激活伪类，如:hover
2、内容输入，如input输入
3、添加、删除样式表
4、添加、删除、更新DOM节点
5、使用offsetWidth和offsetHeight
6、为DOM节点设置动画以及使用JS来块操作DOM节点
使用display: none（重绘和回流）或visibility: hidden（仅重绘，因为不会没有位置发生更改且不会影响后面节点的显示）隐藏DOM节点； 用户操作，如调整窗口大小，更改字体大小或滚动。
如何减少重绘和回流
避免使用表格进行布局
通过为容器设置固定高度来限制受影响的元素
使用offsetWidth和offsetHeight时， 先将其缓存到本地变量中，不要每次直接从元素属性中读取
尽量通过添加/修改className来控制节点样式，且减少CSS规则层级以及使用复杂的CSS选择器
批量更新DOM，且减少DOM深度。使用documentFragment来操作DOM变化数据。更新/克隆/替换节点时，先将节点样式设置为display: none, 替换完成后再移出display: none样式（总共2个回流和2个重绘），
7. 避免301重定向
重定向是性能的杀手，应该尽可能避免使用它们。重定向将产生额外的往返时间（RTT），因此在浏览器甚至开始加载其他资源之前，加载初始HTML文档所需的时间将迅速增加一倍。
8. 浏览器存储
使用浏览器存储（localStorage或sessionStorage）来存储网站中使用的不可变数据以保证页面的加载速度和减少不必要的请求。在某些情况下（如商城），还可以保存首页数据，以保证首页的快速加载和减少白屏时间。
—— 沙漠风微信公众号 ——
上一条———————
2020-09-03 优秀网站首页设计的五大布局技巧下一条———————
2020-09-01 网站性能的优化方法有哪些？（一）深圳网站建设公司沙漠风是一家集创新、创意、技术为一体的综合型互联网品牌建设公司，22年来为众多世界500强及上市公司提供网站建设和网络营销服务。沙漠风一直秉承专业、诚信、进取的价值观，以用户价值为导向，向客户提供优质产品和优质服务，从而赢得了客户的信赖。未来，沙漠风始终以不懈的努力、更高的目标来要求自己，继续为客户提供一体化全方位的互联网营销整合方案。
22年专业互联网服务经验
深圳前沿网站建设、网站开发及小程序开发能力
服务上市企业300余家，世界500强27家
深圳专业网站团队、资深行业分析策划
多项网站设计传播大奖
具有完备的项目管理
完善的售后服务体系
深厚的网络运营经验
致力于互联网品牌建设与网络营销，专业领域包括品牌网站建设、电商网站制作开发、微信营销、小程序开发、系统平台开发等。服务范围涵盖品牌分析策划、网站设计、界面创意表现、技术架构、网站程序开发以及售后维护，网站运营等一系列服务，帮助客户在新的全球化互联网环境中始终保持优势。
公司地址：深圳市福田区车公庙创新科技广场一期A座11层 | 业务热线：0755-83739159
深圳市沙漠风网络科技有限公司 | 粤ICP备06108334号-15 Copyright 2025,ALL Rights Reserved szweb.cn | © Copyright 2025版权所有.
专家团队为您提供深圳网站建设,电商网站开发,品牌网站设计,营销型网站制作等服务,公司建网站就找沙漠风！ | 网站建设地图
