首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

JS阻塞渲染,这么多年我理解错啦?

在中文社区,这么多年一直流传一个说法: JS线程负责执行JS,GUI渲染线程负责渲染,这两者是互斥的,所以JS执行时会阻塞渲染。 但随着Dev Tools使用的增多,逐渐开始怀疑以上说法。...Recaculate Style 解析完DOM树(蓝色Parse HTML)后,下一个任务是紫色Recaculate Style: 他负责将HTML中的CSS样式(外联、内联)输出为styleSheets...,styleSheets有两个作用: 可以与DOM树结合为页面带来样式 JS可以操作styleSheets改变页面样式 我们可以从控制台打印document.styleSheets直观感受他的存在:...Layout 有了DOM树与styleSheets,接下来需要为视图中可见部分生成一棵树(比如display: none部分就不需要在这棵树中显示)。...可以发现,具体的绘制操作是交由合成线程完成,他与JS所在线程(主线程)并不是互斥的。 JS为啥阻塞渲染 我们现在知道,JS执行与Paint任务都发生在主线程。

1.7K41

js如何动态选择和操作 CSS 伪元素,例如 ::before 和 ::after

它不存在于文档中,所以js无法直接操作它。而jQuery的选择器都是基于DOM元素的,因此也并不能直接操作伪元素。 哪些是伪元素 :first-letter:向文本的第一个字母添加特殊样式。 ....addClass('green'); 2、使用CSSStyleSheet的insertRule来为伪元素修改样式: // html代码 测试测试 //js...代码,支持IE document.styleSheets[0].addRule('.red::before','content: "red";color: red;'); //支持非IE的现代浏览器 document.styleSheets...[0].insertRule('.red::before { content: "red";color: red; }', 0); addRule说明: document.styleSheets[0]....addRule('.className'或‘#ID’ +‘::after’,css样式字符串拼接). 3、在标签中插入 // HTML代码 测试测试 //js

5.1K20

h5新功能data-*,好好利用,还能做数据双向绑定

标题是data-,但是这里主要讲伪元素,看明白就知道了 1、jQuery Selectors 获取伪元素的属性值 虽然JS里没有可以直接操作伪元素的选择符,然而获取其CSS属性的方法还是有的。...js语法实例(完整DEMO在线链接): var div=document.querySelector('div');var fontSize=window.getComputedStyle(div,':...方法熟悉 ---- 更改伪元素的属性值 window.getComputedStyle方法虽然可以获取到伪元素的属性值,然而根据该方法名字也知道其只能获取CSS样式,并无法更改css属性,那么如果想要用js...思路有以下几个: js更改data-*属性值来更改伪元素的content值 创建多个class,通过切换class来达到改变样式的目的 利用CSSStyleSheet的insertRule方法来添加样式...(需要注意的是虽然styleSheets方法返回的结果把link标签引进的外部样式也算进去了,但是非IE浏览器没办法获取到他们的cssRules属性,只有内嵌的style标签内的元素可以被获取到) document.styleSheets

1.7K40

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券