月度存档: 三月 2019

关于CSS中@import阻塞的探索

之前都知道css的link在页面会柱塞页面渲染,但是css还有一种引入方式 @import

<style>   

@import url("CSS文件");   
</style>  

可以用style标签内嵌的方式引入,如果这个css文件有延迟,会阻塞渲染吗?

做一个实验看看 [demo] 

现象:1. 页面2秒后显示红色

         2. 尽管import的是蓝色在后面,div显示红色

结论:1.import引入的css也会阻塞页面渲染

         2.improt的css的权重总是比link引入的低

宏任务与微任务

//请写出输出内容
async function async1() {
    console.log('async1 start');
    await async2();
    console.log('async1 end');
}
async function async2() {
	console.log('async2');
}

console.log('script start');

setTimeout(function() {
    console.log('setTimeout');
}, 0)

async1();

new Promise(function(resolve) {
    console.log('promise1');
    resolve();
}).then(function() {
    console.log('promise2');
});
console.log('script end');


/*
script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout
*/

这道题属于异步变成的知识点,但是底层是有一个叫 宏任务与微任务 的队列来支持

宏观任务:主进程代码,setTimeout, setInterval, UI交互事件

微任务:常见的就是.then, yield, await

68747470733a2f2f692e6c6f6c692e6e65742f323031392f30322f30382f356335643661353238626461662e6a7067.jpeg

相当于有一个渲染过程包含2个任务队列,先执行宏任务,宏任务里面行微任务(如果有),然后触发渲染,在进入下一个宏任务。

参考资料 https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/7