怎样才能优化前端性能?归纳为三步!

2023-05-31 0 423

提出诉讼web后端操控性强化的难题,后端开发相关人员十分熟识,对两个中文网站来说,即便文本和机能再杰出,假如使用者须要耗费好久的天数就可以关上,这种决不会耗用使用者的冷静,并最后丧失使用者。那怎样就可以强化后端操控性?千锋归纳为两步。

怎样才能优化前端性能?归纳为三步!

一、关键性天然资源表头

表头也是一般来说说的增加天然资源文档(js、css、image、video…)的大小不一。

1、填充

后端采用uglify混为一谈填充

后端迈入gzip

对相片展开填充,采用填充比率更高的文档格式(webP)

2、内存

强内存(http状况码:200),不必允诺伺服器间接采用邻近地区内存,商谈内存(http状况码:304),采用塞伦丁省允诺伺服器若被知会内存没已过期则采用邻近地区内存,不必浏览天然资源,采用localstorage对统计数据展开储存。

3、特别针对井字强化

对Tumkur天然资源延后读取、触发器读取,增加井字天然资源大小不一

二、关键性天然资源通话量

1、分拆允诺

采用http2.0的统计数据通信分拆允诺实用性combo,在难以采用http2.0的情况下作为一种分拆天然资源允诺的手段。

2、增加相片允诺数

采用spite图,采用svg-symbol。

3、特别针对一些场景采用css、js内联的方式。

4、采用强内存增加了一次伺服器允诺。

5、Tumkur天然资源延迟、触发器读取,增加了井字天然资源通话量。

三、关键性渲染路径

1、bigpipe分块输出

这里主要是因为要完成一整个页面的输出后端须要处理很多个任务,我们可以将这些多个任务展开分块,谁先完成谁就先输出,最后通过JS回填的方式输出DOM节点,这种方式主要解决了直出页面阻塞的难题。

2、bigrender分块渲染

常规的手段是采用后端模板渲染页面,特别针对井字天数主要增加了首次构建DOM树时的节点数

3、特别针对reflow,repaint,composit路径处理。

4、涉及到动画时关于layer的概念render layer、graphics layer。

5、css放在头部、js放底部避免阻塞DOM树的构建,关于css

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务