页面加载过程

从Url到页面渲染都发生了什么
掘金

从输入URL到页面展示完整流程示意图

一、加载资源的形式

html

生成Dom树

img、video等媒体资源

不会阻止Dom渲染

js、css

会阻止Dom渲染

二、加载资源的过程

构建请求

查找缓存

DNS解析

域名 ——> IP地址

建立TCP的连接

浏览器根据IP向服务器发送http请求【三次握手】

服务器处理http请求 ，并返回给浏览器

断开TCP连接

三、渲染页面的过程

根据HTML生成DOM Tree

根据CSS生成CSSOM

将DOM Tree和CSSOM整合形成Render Tree

浏览器根据Render Tree渲染页面

遇到 script 则暂停渲染，优先加载并执行

四、问题与解答

为什么css建议放在head标签

放在 head标签，这样当Dom Tree加载完成之后，
就可以和 cssom整合形式renderTree ，浏览器从而直接去完成渲染，无需再去加载css

为什么js建议放在body标签之后

• 1、js会阻塞dom渲染，因为两个共用同一个线程；
• 2、这样可以等Dom完全渲染好了，再去在js操作Dom

window.onload和DOMContentLoaded

window.addEventListener('load', function  () {
    // 页面的全部资源都加载完成，包括图片、视频等媒体
});

document.addEventListener('DOMContentLoaded', function  () {
    // Dom渲染完成即可执行，此时图片、视频等媒体资源可能还没加载完成
});