凤凰网址注册

资讯

精准传达 • 凤凰网址注册效沟通

从品牌到营销,从策略到执行的一站式服务

网站性能的优化方法凤凰网址注册凤凰网址注册些?(二)

来源:沙漠风网站建设凤凰网址注册凤凰网址注册 | 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)来存储网站凤凰网址注册使用的不可变数据以保证页面的加载速度和减少不必要的请求。在某些情况下(如商城),还可以保存凤凰网址注册数据,以保证凤凰网址注册的快速加载和减少白屏时间。

—— 沙漠风微信凤凰网址注册众号 ——

热门标签

见微.知著

联凤凰网址注册沙漠风,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联凤凰网址注册

业务热线:400-688-6062

大客户专线:15818561755