网页的加载和渲染

• 从输入 url 到渲染出页面的整个过程（无标准答案）

• window.onload 和 DOMContentLoaded 的区别

网页是如何加载并渲染的

加载页面的形式

• html 代码
• 媒体文件，如图片、视频等
• JavaScript、css

加载资源的过程

• DNS解析：域名 -> IP地址（在不同的地域，相同域名（如百度）解析得到不同的IP，使得访问更快）
• 浏览器根据 IP 地址向服务器发起 http 请求
• 服务器处理http请求，并返回给浏览器

渲染页面的过程

• 根据 html 代码生成 DOM Tree
• 根据 CSS 代码生成 CSSOM（css对象模型）
• 将 DOM Tree 和 CSSOM 整合形成 Render Tree（渲染树）
• 根据 Render Tree 渲染页面
• 遇到 <script> 则暂停渲染，优先加载并执行 JS 代码，完成再继续渲染
• 直至把 Render Tree 渲染完成

注意事项

• css 代码一般都写在 head        --便于一次构建CSSOM ，避免重复操作
• script 标签建议放在 body末尾        --JS代码会优先执行，阻断渲染，所以最好等Render Tree构建好，再执行JS代码
• img标签不会阻塞DOM渲染

---

Window.onload 和 DOMContentLoaded 的区别

    window.addEventListener('onload',()=> {
        // 等所有资源加载完才能执行，包括图片、视频等
    })
    document.addEventListener('DOMContentLoaded',() => {
        // DOM 渲染完即可执行，此时图片、视频等资源可能还在加载
    })