阻塞渲染问题
文章目录
浏览器渲染机制:解析DOM
生成DOM Tree
,解析CSS
生成CSSOM Tree
,两者结合生成render tree
渲染树,最后浏览器根据渲染树渲染至页面。
1.测试
搭建一个服务器,目的是为了返回css
样式和js
脚本,并且让服务器根据传递的参数,固定延时返回数据。
目录结构如下,其中index.js
和style.css
就是用于返回的数据,app.js
为服务器启动文件,index.html
是用来测试案例的文件,剩余文件或文件夹可以忽略。
├── static
│ ├── index.js
│ ├── style.css
│ ├── color.js
├── app.js
├── index.html
├── package.json
├── node_modules/
static目录下的内容:
//static/color.js
var p = document.querySelector('p');
var style = window.getComputedStyle(p, null);
console.log(style.color);
// static/index.js
var h1 = document.querySelector('h1');
console.log(h1);
// static/style.css
p {
color: lightblue; }
app.js:
// app.js
const express = require('express')
const fs = require('fs')
const app = new express()
const port = 3000
const sleepFun = time => {
return new Promise(res => {
setTimeout(() => {
res()
}, time)
})
}
const filter = (req, res, next) => {
const {
sleep } = req.query || 0
if (sleep) {
sleepFun(sleep).then(() => next())
} else {
next()
}
}
app.use(filter)
app.use('/static/', express.static('./static/'))
app.get('/', function (req, res, next) {
fs.readFile('./index.html', 'UTF-8', (err, data) => {
if (err) return
res.send(data)
})
})
app.listen(port, () => {
console.log(`app is running at h