index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>css阻塞</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./css/test2.css"/>
<script>
document.addEventListener('DOMContentLoaded',function() {
console.log(document.querySelector('h2'))
})
</script>
<link rel="stylesheet" href="http://localhost:9000"/>
</head>
<body>
<h1>这是蓝色的</h1>
<h1>test</h1>
<h2>>我会被阻塞吗</h2>
</body>
</html>
test1.css
h1{
color: red;
}
h2{
color: green;
}
test2.css
h1{
color: blue;
}
h2{
color: yellow;
}
server.js
const http = require('http');
const fs = require('fs');
http.createServer((req,res)=>{
if(req.url!=='/favicon.ico'){
// 设置 cors 跨域
res.setHeader("Access-Control-Allow-Origin", "*");
// 设置 header 类型
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
// 跨域允许的请求方式
res.setHeader('Content-Type', 'text/css');
fs.readFile('../css/test1.css', (err, data)=>{
console.log(data)
setTimeout(()=>{
res.end( data )
},5000)
})
}
}).listen(9000)
测试结果
DOM 5秒之后才打印 并且script标签和link标签颠倒位置表现结果一致；
另外几个奇怪的表现如下
第一种情况 link位置不同
<!DOCTYPE html>
<html lang="en">
<head>
<title>css阻塞</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./css/test2.css"/>
<script>
document.addEventListener('DOMContentLoaded',function() {
console.log(document.querySelector('h2'))
})
</script>
</head>
<body>
<h1>这是蓝色的</h1>
<h1>test</h1>
<link rel="stylesheet" href="http://localhost:9000"/>
<h2>>我会被阻塞吗</h2>
</body>
</html>
- 页面五秒后才渲染
- 页面由无样式到变为红色
- 5s后打印DOM
第二种情况link均在body中
<!DOCTYPE html>
<html lang="en">
<head>
<title>css阻塞</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<link rel="stylesheet" href="./css/test2.css"/>
<script>
document.addEventListener('DOMContentLoaded',function() {
console.log(document.querySelector('h2'))
})
</script>
<h1>这是蓝色的</h1>
<h1>test</h1>
<link rel="stylesheet" href="http://localhost:9000"/>
<h2>我会被阻塞吗</h2>
</body>
</html>
- 页面开始显示蓝色 h2内容不会渲染（火狐浏览器表现为h2内容渲染，谷歌不会）
- 5s后变为红色 h2内容渲染
- 5s 后打印DOM
