文档

dom.spec.whatwg.org/#parsing

考虑几个字节流到输出流的问题

网络获取是chunk获取【分段获取】,那对于浏览器来说是否是获取到所有资源后在统一进行解析？
压缩的风险是什么?
想"白嫖"cdn时,js和图片有区别不?找个git平台可以不?
Meta信息可以修改编码,http也有,他们的区别是什么?
....

本文不解释,直接上现象

content-type决定了那个解析器 : text/html - byte/1.js

显然,这种解析规则跟html是不一样的

content-type决定了使用哪种解析器

注：同样包含决定使用哪个解析器的还有标签

思考题

考虑下如何"白嫖"cdn或者建站?
考虑下如何"反白嫖"

分段传输 - byte/1.html

限下流,速度降低,可看到如下页面

解析是可以分段的,这并不复杂,但会包含一个笼统的特点,普通的html标签可以不闭合【script/style等特殊的不行】

我们在看cdn【js/css】，小说或者图片时,很容易遇见一段一段的现象

思考题

如果是你,你会怎么设计以下实现

javascript 复制代码

 // 页面显示: <div>123</div>
document.write("<div>123")
 // 页面显示: <div>123456</div>
document.write("456")
 // 页面显示: <div>123456789</div>
document.write("789</div>")

标签可以不闭合 - byte/2.js

如果1s发送1段内容,那么浏览器会如何渲染？

javascript 复制代码

const express = require('express');
const fs = require('fs');
const app = express();

app.get('/1', (req, res) => {
    const text = fs.readFileSync("2.html","utf-8")
  
    const arr = text.split("\r\n")
    arr.forEach((txt,i)=>{
        setTimeout(()=>{
            res.write(txt)
        },i*1000)
    })

    setTimeout(()=>{
        res.end()
    },arr.length*1000)
    
});
    

app.listen(3000)

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>11111111
         22222222
         33333333
         44444444
         55555555
    </div>
</body>
</html>

标签可以不闭合,一般没啥问题,但考虑下,比如"严格"限制闭合标签,可能会产生的问题,当然,对于现在的网络环境而言并不复杂【至少国内是】

注：这也是比较老的一个点,以前table中包含tbody,浏览器解析时,必须遇见/tbody才会解析里面的内容,所以会分割很多个tbody用于加速显示,现在无所谓了