页面性能优化

Web前端性能优化的实用技巧汇总

今天小编要跟大家分享的文章是关于Web前端性能优化的实用技巧汇总。javascript在浏览器中运行的性能，可以认为是开发者所面临的最严重的可用性问题。这个问题因为javascript的阻塞性而变得复杂，事实上，多数浏览器使用单一进程来处理用户界面和js脚本执行，所以同一时刻只能做一件事。js执行过程耗时越久，浏览器等待响应的时间越长。

一.提高加载性能

1.IE8,FF,3.5,Safari4和Chrome都允许并行下载js文件，当script下载资源时不会阻塞其他script的下载。但是js下载仍然会阻塞其他资源的下载，如图片。尽管脚本下载不会互相影响，但页面仍然必须等待所有js代码下载并执行完才能继续。因此仍然存在脚本阻塞问题.推荐将所有js文件放在body标签底部以减少对整个页面的影响。

2.减少页面外链脚本文件的数量将会提高页面性能：

http请求会带来额外的开销，因此下载单个300k的文件将比下载10个30k的文件效率更高。

3.动态脚本加载技术：

无论何时启动下载，文件的下载和执行都不会阻塞页面其他进程。

functionlaodScript(url,callback){

varscript=document.createElement('script');_

_cript.type='text/javascript';

__f(script.readyState){//ie

____cript.onreadystatechange=function(){_____

if(script.readyState=='loaded'||script.readyState=='complete'){_______

_cript.onreadystatechange=null;_______

callback()_____

____

__

}else{//其他浏览器___

script.onload=function(){_____

_allback()

___}_

}_

script.src=url;_

document.getElementsByTagName('head')[0].appendChild(script);

}

//使用

loadScript('./a.js',function(){_

loadScript('./b.js',function(){___

loadScript('./c.js',function(){_____

console.log('加载完成')___

})_

})

})

4.无阻塞加载类库——LABjs,使用方法如下：

//链式调用时文件逐个下载，.wait()用来指定文件下载并执行完毕后所调用的函数

$LAB.script('./a.js')_

.script('./b.js')_

.wait(function(){__

_pp.init();

})

//为了保证执行顺序，可以这么做,此时a必定在b前执行

$LAB.script('./a.js').wait()_

.script('./b.js')_

.wait(function(){___

_pp.init();

})

二.数据存取与JS性能

1.在js中，数据存储的位置会对代码整体性能产生重大影响。数据存储共有4种方式：字面量，变量，数组项，对象成员。他们有着各自的性能特点。

2.访问字面量和局部变量的速度最快，相反，访问数组和对象相对较慢

3.由于局部变量存在于作用域链的起始位置，因此访问局部变量的比访问跨域作用变量更快

4.嵌套的对象成员会明显影响性能，应尽量避免

5.属性和方法在原型链位置越深，访问他的速度越慢

6.通常我们可以把需要多次使用的对象成员，数组元素，跨域变量保存在局部变量中来改善js性能

三.DOM编程

1.访问DOM会影响浏览器性能，修改DOM则更耗费性能，因为他会导致浏览器重新计算页面的几何变化。

注：如过在一个对性能要求比较高的操作中更新一段HTML，推荐使用innerHTML，因为它在绝大多数浏览器中运行的都很快。但对于大多数日常操作而言，并没有太大区别，所以你更应该根据可读性，稳定性，团队习惯，代码风格来综合决定使用innerHTML还是createElement()

2.HTML集合优化

HTML集合包含了DOM节点引用的类数组对象，一直与文档保持连接，每次你需要最新的信息时，都会重复执行查询操作，哪怕只是获取集合里元素的个数。

①_优化一——集合转数组collToArr

functioncollToArr(coll){_

for(vari=0,a=[],len=coll.length;i

a._ush(coll[i]);

__

returna

}

②缓存集合length

③访问集合元素时使用局部变量（即将重复的集合访问缓存到局部变量中，用局部变量来操作）

3.遍历DOM

①使用只返回元素节点的API遍历DOM,因为这些API的执行效率比自己实现的效率更高：

td{border:1pxsolid#ccc;padding:5px;margin:auto;}

tdp{text-align:left;}

tdpspan{text-align:center;display:block;}

属性名

被替代属性

children

childNodes

childElementCount

childNodes.length

firstElementChild

firstChild

lastElementChild

lastChild

nextElementSibling

nextSibling

previousElementSibling

previousSibling

_谘≡衿_PI——querySelectorAll()

querySelectorAll()方法使用css选择器作为参数并返回一个NodeList——包含着匹配节点的类数组对象，该方法不会返回HTML集合，因此返回的节点不会对应实时文档结构，着也避免了HTML集合引起的性能问题。

let_rr=_ocument.querySelectorAll('div.warning,_iv.notice_')

4.重绘和重排

浏览器在下载完页面的所有组件——html,js,css,图片等之后，会解析并生成两个内部数据结构——_OM树，渲染树.一旦DOM树和渲染树构建完成，浏览器就开始绘制页面元素（paint）.

①重排发生的条件：

添加或删除可见的DOM元素位置变化元素尺寸改变内容改变页面渲染器初始化浏览器窗口尺寸变化出现滚动条时会触发整个页面的重排_嘏疟囟ㄖ鼗

5.渲染树变化的排列和刷新

大多数浏览器通过队列化修改并批量执行来优化重排过程，然而获取布局信息的操作会导致队列强制刷新。

offsetTop,offsetWidth...

scrollTop,scrollHeight...

clientTop,clientHeight...

getComputedStyle()

一些优化建议：将设置样式的操作和获取样式的操作分开：

//设置样式

body.style.color='red';

body.style.fontSize='24px'

//读取样式

letcolor=body.style.color

let_ontSize=_ody.style.fontSize

另外，获取计算属性的兼容写法：

functiongetComputedStyle(el){_

varcomputed=(document.body.currentStyle?el.currentStyle:document.defaultView.getComputedStyle(el,'');_

returncomputed

}

6.最小化重绘和重排

①.批量改变样式

/*使用cssText

*/el.style.cssText='border-left:1px;_order-right:2px;_adding:20px';

②.批量修改dom的优化方案——使元素脱离文档流-对其应用多重改变-把元素带回文档

functionappendDataToEl(option){

vartargetEl=option.target||document.body,___

createEl,___

data=option.data||[];_//让容器脱离文档流，减少重绘重排_

vartargetEl_display=targetEl.style.display;_

targetEl.style.display='none';

_

//*****创建文档片段来优化Dom操作****_

varfragment=document.createDocumentFragment();_//给元素填充数据_

for(vari=0,max=data.length;i

createEl=

document.createElement(option.createEl);___

for(varitemindata[i]){_____

if(item.toString()==='text'){_______

createEl.appendChild(document.createTextNode(data[i][item]));________ontinue;___________

_f(item.toString()==='html'){_______

createEl.innerHTML=item,data[i][item];_______

continue;_____

}_____

_reateEl.setAttribute(item,data[i][item]);_______

//****将填充好的node插入文档片段****___

fragment.appendChild(createEl);___

//****将文档片段统一插入目标容器****_

targetEl.appendChild(fragment);_

//显示容器，完成数据填充_

targetEl.style.display=

targetEl_display;

}

//使用

varwrap=document.querySelectorAll('.wrap')[0];

vardata=[_

_name:'xujaing',text:'选景',title:'xuanfij'},_

{name:'xujaing',text:'选景',title:'xuanfij'},_

{name:'xujaing',text:'选景',title:'xuanfij'}];

appendDataToEl({_

target:wrap,_

createEl:'div',

_ata:data

});

上面的优化方法使用了文档片段:_蔽颐前盐牡灯尾迦氲浇诘阒惺保导噬媳惶砑拥闹皇歉闷蔚淖咏诘悖皇瞧伪旧怼？梢允沟_om操作更有效率。

②.缓存布局信息

//缓存布局信息

letcurrent=el.offsetLeft;

current++;

el.style.left=current+'px';

if(current300){_

stop();

}

④.慎用:hover

如果有大量元素使用:hover,那么会降低相应速度，CPU升高

⑤.使用事件委托（通过事件冒泡实现）来减少事件处理器的数量，减少内存和处理时间

functiondelegation(e,selector,callback){_

e=e||window.event;_

vartarget=e.target||e.srcElement;

_if(target.nodeName!==selector||

target.className!==selector||target.id!==selector){___

return;

_}_

if(typeofe.preventDefault==='function'){__

_.preventDefault();___

e.stopPropagation();

}else{___

e.returnValue=false;

e.cancelBubble=true;_

}

__allback()}

四.算法和流程控制

1.循环中减少属性查找并反转(可以提升50%-60%的性能)

//for循环

for(vari=item.length;i--){_

process(item[i]);

}

//while循环

varj=item.length;

while(j--){_

process(item[i]);

}

2.使用Duff装置来优化循环（该方法在后面的文章中会详细介绍）

3.基于函数的迭代（比基于循环的迭代慢）

items.forEach(function(value,index,array){__rocess(value);})

4.通常情况下switch总比if-else快，但是不是最佳方案

五.字符串和正则表达式

1.除了IE外，其他浏览器会尝试为表达式左侧的字符串分配更多的内存，然后简单的将第二个字符串拷贝到他的末尾，如果在一个循环中，基础字符串位于最左侧，就可以避免重复拷贝一个逐渐变大的基础字符串。2.使用[\s\S]来匹配任意字符串3.去除尾部空白的常用做法：

if(!String.prototype.trim){_

String.prototype.trim=function(){___

returnthis.replace(/^\s+/,'').replace(/\s\s*$/,'')_

}

}

六.快速响应的用户界面

1.浏览器的UI线程：用于执行javascript和更新用户界面的进程。

2.在windows系统中定时器分辨率为15毫秒，因此设置小于15毫秒将会使IE锁定，延时的最小值建议为25ms.

3.用延时数组分割耗时任务：

functionmultistep(steps,args,callback){_

vartasks=steps.concat();

__etTimeout(function(){___

vartask=tasks.shift();___

task.apply(null,args||[]);_//调用Apply参数必须是数组

___

if(tasks.length0){_____

setTimeout(arguments.callee,25);

___else{_____

_allback();___

__

},25);

}

4.记录代码运行时间批处理任务：

functiontimeProcessArray(items,process,callback){_

vartodo=item.concat();

__etTimeout(function(){___

varstart=+newDate();

__o{_____

_rocess(todo.shift());___

}while(todo.length0(+newDate()-start____f(todo.length0){_____

_etTimeout(arguments.callee,25);

___else{____

_allback(items);_

}_

_,25)

}

5.使用WebWorker：它引入了一个接口，能使代码运行且不占用浏览器UI线程的时间。一个Worker由如下部分组成：

①一个navigator对象，包括app

如何加快网页打开速度

问题一：如何提高电脑打开网页的速度 影响网页打开速度的因素主要有如下几方面：

1、网络防火墙的设置不允许多线程访问，例如目前WinXPSP2就对此默认做了限制，使用多线程下载工具就受到了极大限制，BT、迅雷都是如此。因此，同时打开过多页面也会出现打开网页速度慢的问题。

2、系统有病毒，尤其是蠕虫类病毒，严重消耗系统资源，打不开页面，甚至死机。

3、本地网络速度太慢，过多台电脑共享上网，或共享上网用户中有大量下载时也会出现打开网页速度慢的问题。

4、使用的浏览器有BUG，例如多窗口浏览器的某些测试版也会出现打开网页速度慢的问题。

5、访问的网站负荷太重，带宽相对太窄，程序设计不合理，也会出现打开网页速度慢的问题。

6、用户和网站处于不同网段，例如电信用户与网通网站之间的访问，也会出现打开网页速度慢的问题。

7、网络中间设备问题，线路老化、虚接、路由器故障等。

8、是否和系统漏洞有关，也不好说，冲击波等病毒就是通过漏洞传播并导致系统缓慢甚至瘫痪的。

问题二：怎样让浏览器打开网页速度变快 把你的大内存变成一个小硬盘，要一款软件RamDisk Plus。这里有下载down.jujumao/downinfo/22135（本人珍藏软件）

安装好后！你就点击IE属性把IE缓存文件移动到内存硬盘上！这样你的上网速度会大大提高！内存的速度你也知道的。（没用拿刀砍我）

问题三：如何加快网页打开速度 1、定期整理磁盘碎片

计算机硬盘中最细小的单位是扇区，一个档案通常会占用若干扇区，每当硬盘用久了，无数次的新增、更改和删除档案后，就会造成很多断断续续的扇区，因而非连续性的档案便会愈来愈多，硬盘磁头便需要花更多时间跳来跳去来读取数据，这就导致硬盘速度减慢。有见及此，windows才会有“整理磁盘碎片”出现。只要执行“整理磁盘碎片”，所有非连续性的档案都会被重新编排得整整齐齐，至于执行时间，大约一星期左右执行一次便可了。

2、去掉预定任务

通常情况下，Windows XP在连接其它计算机时，会全面检查对方机子上所有预定的任务，这个检查会让你等上30秒钟或更多时间。去掉的方法是开始

a、修改注册表的run键，取消那几个不常用的东西，比如Windows Messenger。启用注册表管理器：开始→运行→Regedit→找到“HKEY_CURRENT_USER\Software\Microsoft\Windows\Current\Version\Run\

MSMSGS”/BACKGROUND这个键值，右键→删除，世界清静多了，顺便把那几个什么cfmon的都干掉吧。

b、修改注册表来减少预读取，减少进度条等待时间，效果是进度条跑一圈就进入登录画面了，开始→运行→regedit启动注册表编辑器，找HKEY_LOCAL_MACHINESYSTEM\ Current\Control\SetControl\ Session anagerMemory\ManagementPrefetchParameters，有一个键EnablePrefetcher把它的数值改为“1”就可以了。另外不常更换硬件的朋友可以在系统属性中把总线设备上面的设备类型设置为none(无)。

3、关闭系统属性中的特效

这可是简单有效的提速良方。点击开始→控制面板→系统→高级→性能→设置→在视觉效果中，设置为调整为最佳性能→确定即可。这样桌面就会和win2000很相似的，我还是挺喜欢XP的蓝色窗口，所以在“在窗口和按钮上使用视觉样式”打上勾，这样既能看到漂亮的蓝 *** 面，又可以加快速度。

5、Windows XP实现1秒关机

体积庞大的Windows XP操作系统关机起来很慢，大约需要30～50秒，但是按我们下面提供的方法更改注册表选项，你的Windows XP系统关机速度就会非常的快了。

找到HKEY－CURRENT－USER＼Control Panel＼Desktop键，将WaitToKillAppTimeout改为：1000，即关闭程序时仅等待1秒。

另：程序出错和系统自动关闭停止响应的程序如何实现快速关闭。

a、将HungAppTimeout 值改为：200，表示程序出错时等待0.5秒。

b、将AutoEndTasks 值设为：1，让系统自动关闭停止响应的程序。

6、关掉调试器Dr. Watson

我好像从win95年代开始一次也没用过这东西，可以这样取消：打开册表，找到HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\Current\Version\AeDebug子键分支，双击在它下面的Auto键值名称，将其“数值数据”改为0，最后按F5刷新使设置生效，这样就取消它的运行了。沿用这个思路，我们可以把所有具备调试......

问题四：怎样提高网页打开的速度 可以通过禁用加载项来提速（以IE为例）：

1）打开IE，按下Alt打开菜单，选择“工具”，再选择“Internet选项”。

2）打开Internet选项窗口后，选择“程序”选项卡，再单击“管理加载项”按钮。

3）打开管理加载项窗口后，可以看到后很多加载项，Adobe和Microsoft发布的加载项建议启用，其它的加载项可以根据需求禁用。选择列表中的加载项，鼠标右击，选择“禁用”。

问题五：如何加快HTML页面加载速度 1、页面精简：去掉html页面不必要的空格、注释，尽量将script和css写在外部文件中。

可以借用第三方工具对页面进行加速。

2、减少文件数量减少页面上引用的文件数量可以减少HTTP连接数许多JavaScript、CSS文件可以合并最好合并，人家财帮子都把自己的JavaScript.functions和Prototype.js合并到一个base.js文件里去了

3、减少外部域名文件的引用

4、优化页面元素加载顺序例如：首先加载页面最初显示的内容和与之相关的JavaScript和CSS，不需要的图片文件放到后面加载，或者引用延迟加载的js

5、减少页面中inline和JavaScript的数量

6、不要在table标签中嵌套table标签，不过现在基本上都用div+css了，HTML5也出来了。

7、检查页面是否有js错误，或者空引用（检查页面有没有502错误），有没有js文件的重复加载

问题六：怎样加快网页显示速度 两个加快网页打开速度的方法 受服务器影响的无法解决（毕竟网站的问题），硬件可以提高

比如：当你的电脑里存在其他具有ie内核的浏览器时，用ie（有些浏览器叫兼容模式）模式或ie浏览器会变卡。办法么，卸载这个浏览器

二、清理缓存，在internet选项，第三方浏览器就是设置里面有（不同浏览器界面不同，自己百度浏览器名字+如何清理缓存）

不过，其实最有效的办法：升级宽带至至少光纤10M，然后加块SSD固态硬盘就行了

问题七：请问。怎么加快网页加载图片的速度呢。 您好，很高兴为您解答：

建议清理一下浏览器里 “cookies”，

希望我的回答对您有所帮助，?若还有问题，请点击【追问】?若满意，可选择【采纳回答】?谢谢！

问题八：如何给网页做优化，加快网页的打开速度 0）做网站时把各个部分做成层比只用表格打开速度快－－感觉确实如此 1）网页上的各部分内容都放在层上，不会出现定位不准错位的情况-----前提是准确的执行CSS规则，在CSS中对于网页元素可以相对定位，也可以绝对定位等，使用前者，能够精确定位网页元素在页面的独立位置，而不考虑其他网页元素的定位设置；使用后者，可以精确的设定任何网页元素距离浏览器左边和顶部的（像素）位置 2）其它缺点：有些浏览器不支持CSS（层叠样式表）－－这种情况正在改善，因为使用CSS布置网页布局已是大趋势，就像现在所在的当前页面，其左右下的布局，就是DIV＋CSS。 3）如果是用表格，怎么样才能使它打开速度最快－－尽量减少表格数量，特别是减少表格的嵌套层数。 参考转载！

问题九：怎样加快网页显示速度 第二步：移动鼠标到菜单栏，单击“工具”一“In-ternet选项”。 第三步：在出现的对话框中单击选中“高级”。 第四步：在其中的“多媒体”区域，单击清除“显示图片”、“播放动画”、“播放视频”、“播放声音”及“优化图像抖动”复选框。 第五步：单击“确定”，结束设定操作，可加快网页的显示速度(只显示文字)。 [方法二] 第一步：启动Internet浏览器。 第二步：移动鼠标到菜单栏，单击“工具”一“In-ternet选项”。 第三步：在出现的对话框中单击选中“常规”，通常“常规”选项卡是打开“Internet选项”时的缺省设置。 第四步：单击“Internet临时文件”框中的“设置”。 第五步：在出现的“设置”对话框中，单击选中“不检查”。 第六步：在“使用的磁盘空间”直接键人数字或用鼠标拖动滑尺，根据硬盘容量适当增加空间。

问题十：win10怎样加快网页打开速度 win10加快网页打开速度的步骤如下：

1、按win+X，点击“命令提示符(管理员)”。

2、输入命令：netsh int tcp set global autotuninglevel=disabled

3、系统会收到确认消息，现在“窗口自动调节”级别已经被关闭。

4、现在打开网页的速度就会相对变快一些。

注意事项：打开网页的速度可以通过以上设置进行，但打开网页内容的速度还要依靠网速的提高。

浏览器层合成与页面性能优化

一个web页面由多层构成的

比如掘金：

浏览器渲染页面

在编写页面中，我们要知道浏览器如何处理 HTML、JavaScript 和 CSS。 需要了解并注意五个主要区域， 这些我们拥有控制权的部分，也是像素至屏幕管道中的关键点。

每一步简介

• JavaScript。  一般来说，我们会使用 JavaScript 来实现一些视觉变化的效果。比如用 jQuery 的 animate 函数做一个动画、对一个数据集进行排序或者往页面里添加一些 DOM 元素等。当然，除了 JavaScript，还有其他一些常用方法也可以实现视觉变化效果，比如：CSS Animations、Transitions 和 Web Animation API。• 样式计算。  此过程是根据匹配选择器（例如 .headline 或 .nav .nav__item）计算出哪些元素应用哪些 CSS 规则的过程。从中知道规则之后，将应用规则并计算每个元素的最终样式。• 布局。  在知道对一个元素应用哪些规则之后，浏览器即可开始计算它要占据的空间大小及其在屏幕的位置。网页的布局模式意味着一个元素可能影响其他元素，例如 元素的宽度一般会影响其子元素的宽度以及树中各处的节点，因此对于浏览器来说，布局过程是经常发生的。• 绘制。  绘制是填充像素的过程。它涉及绘出文本、颜色、图像、边框和阴影，基本上包括元素的每个可视部分。绘制一般是在多个表面（通常称为层）上完成的。• 合成。  由于页面的各部分可能被绘制到多层，由此它们需要按正确顺序绘制到屏幕上，以便正确渲染页面。对于与另一元素重叠的元素来说，这点特别重要，因为一个错误可能使一个元素错误地出现在另一个元素的上层。

ps：  当然，不是每一步更改都会遵循上图这个流程。

每一步不是必经的

比如：

•更改了元素的布局相关的属性：width, height, 位置... 那么浏览器就会检查其他元素，自动 重排一次 。•更改了元素的 color, 阴影... 不会影响页面的布局，那么浏览器就会跳过布局。这就是我们平常说的：重排一定引起重绘，重绘不一定引起重排。•如果更改了 一个既不会布局，也不会绘制的属性，那么浏览器直接跳到最后一步，不得不说，这是最高效的

使用 csstriggers[1] 可以详细看到 css 属性改变时触发的流程。

如何提升绘制的性能

尽量使用影响较少的属性

举个🌰：

div class="box box1"1/divdiv class="box box2" 2 /div  script  const box1 = document.querySelector('.box1');  setTimeout(() = {    box1.style.display = 'none'  }, 3000);  /script

我们可以看到，box1 和 box2 都绿（重绘）了一次，说明 box1 的变化影响了 box2。那这个属性变化的代价是比较大的。

假如是我让 box1 的位置 向右移动 60px，我们做如下更改：

document.querySelector('.box1').style.transform = 'translateX(60px)';

现在 box2的位置不受影响，直观地看到 box2是没被绿（重绘）的。

提升为合成层（Compositing Layers）

我们在上一步做了优化，box2 已经不受影响，但是box1 依然被重绘，那能不能在优化呢。 答案是能的。 left 这个属性的改变会造成的影响是：

layout - painted - composited

这个流程可以在 csstriggers[2] 看到。

那现在我们要找到一个 css 属性，既能让元素位移，又能造成的影响最小。

答案是有的： transform：影响最小，直接到达最后一步  Composite 。 做如下更改：

box1.style.transform = 'translateX(60px)'

好像事与愿违。box1, box2 都被重绘了。

这里因为：  他们都在一个层上，一个元素的变化也影响了其他元素。浏览器会联合需要绘制的区域，而导致整个屏幕重绘。

为了直接到达最后一步  Composite 。其实这里有个条件：  更改属性所在的元素应处于其自身的合成层，如果没在，我们可以提升为合成层` 这样就不会影响其他元素，而能减少绘制区域。

提升为合成层的原因有一下几种

这里我大概罗列了这么多

•video•有 3D transform•backface-visibility 为 hidden•对 opacity、transform、fliter、backdropfilter 应用了 animation 或者 transition（需要是 active 的 animation 或者 transition，当 animation 或者 transition 效果未开始或结束后，提升合成层也会失效）•will-change 设置为 opacity、transform、top、left、bottom、right（其中 top、left 等需要设置明确的定位属性，如 relative 等）•重叠原因

在 box1 上面做如下更改：

will-change: transform;

再次观察效果：

大功告成：

•box1 不在重绘了•box2 不受影响 我们可以查看最终的分层效果：

和 ps 里面的图层差不多，每一个图层叠加在一起组成我们看到的网页。

好处

提升为合成层简单说来有以下几点好处：

•合成层的位图，会交由 GPU 合成，比 CPU 处理要快•当需要 repaint 时，只需要 repaint 本身，不会影响到其他的层•对于 transform 和 opacity 效果，不会触发 layout 和 paint

建议：

由于 transition animation 也有提升层的作用，所以动画可以优先考虑 css3 动画。

物极必反

图层越多越好吗？ 当然不是。提升合成层也得  消耗额外的内存和管理资源 ，

正所谓切勿提前优化.

正如MDN所说:  如果你的页面在性能方面没什么问题，则不要添加 will-change 属性来榨取一丁点的速度。 will-change 的设计初衷是作为最后的优化手段，用来尝试解决现有的性能问题.

参考

前端性能优化之 Composite[3]

关键转译路径 Critical Rendering Path[4]

will-change[5]

坚持仅合成器的属性和管理层计数[6]

最后

如果喜欢本篇文章，可以关注的微信公众号，如果不嫌烦，还可以把它添加到桌面😀。

References

[1] csstriggers: 

[2] csstriggers: 

[3] 前端性能优化之 Composite: 

[4] 关键转译路径 Critical Rendering Path: 

[5] will-change: 

[6] 坚持仅合成器的属性和管理层计数: