【内推字节】欢迎简历chengxinsong@bytedance.com

前端页面渲染优化

一、减少阻塞

1、JS阻塞

(1)当html解析遇到js会先下载和执行js文件,这是为了防止js操作了dom等情况的发生。但我们作为操作者,可以人为的指定,那些元素可以延迟加载。

(2)为script标签指定 async 或 defer来延迟脚本。

(3)defer则会在下载完成并且整个文档解析完成、DOMContentLoaded事件被触发前开始执行

2、css阻塞

(1)css会阻塞html进行渲染,但是为了界面没有任何样式的展现在用户面前,因此我们需要将css提前


二、减少渲染次数

1、避免回流与重绘

(1)对于一些不在用户视图内的元素,我们可以在展示的时候先不进行渲染,直到该元素出现在了视图内再进行渲染。

(2)懒加载包括对图片或者dom元素的加载和渲染


三、提高渲染效率

1、减少dom节点的操作

(1)浏览器的渲染引擎和js引擎是分离的,可以想象在js引擎和渲染引擎之间进行”跨界交流“并不简单,这个开销很大,所有我们要尽量避免这种操作。

2、利用事件循环和异步更新

js的另一个特点是非阻塞,这是如何实现的那,这就要说到EventLoop(事件循环)


文章转载:总结
感谢你的阅读,本文由 sau交流学习社区 版权所有。
如若转载,请注明出处:sau交流学习社区-power by saucxs(程新松)(/page/543.html)
交流咨询
    官方QQ群
    群号663940201,欢迎加入!
    sau交流学习社区交流群

微信群
欢迎加入微信群
微信公众号
欢迎关注微信公众号

图文推荐

微信群
saucxs聊天机器人
saucxs
hi ,欢迎来到sau交流学习社区,欢迎与我聊天,问我问题哦!