从Url到页面渲染都发生了什么
掘金
image.png
从输入URL到页面展示完整流程示意图

一、加载资源的形式

html

生成Dom树

img、video等媒体资源

不会阻止Dom渲染

js、css

会阻止Dom渲染

二、加载资源的过程

image.png

构建请求

查找缓存

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

  1. window.addEventListener('load', function () {
  2. // 页面的全部资源都加载完成,包括图片、视频等媒体
  3. });
  4. document.addEventListener('DOMContentLoaded', function () {
  5. // Dom渲染完成即可执行,此时图片、视频等媒体资源可能还没加载完成
  6. });