JS面试—页面加载和渲染过程

目录

一、题目

1、从输入url到得到html的详细过程

2、window.onload和DOMContentLoaded的区别

二、知识点

2.1 加载资源的形式

2.2 加载一个资源的过程

2.3 浏览器渲染页面的过程

---

一、题目

1、从输入url到得到html的详细过程

• 浏览器根据DNS服务器得到域名的IP地址（域名解析）
• 向这个IP的服务器发送http请求
• 服务器收到，处理并返回http请求
• 浏览器得到返回内容

2、window.onload和DOMContentLoaded的区别

window.addEventListener('load',function(){
    //页面的全部资源加载完才会执行，包括图片，视频
})
window.addEventListener('DOMContentLoaded',function(){
    //DOM 渲染完即可执行，此时图片，视频换坑能没有加载完成
})

二、知识点

2.1 加载资源的形式

• 输入url（或跳转页面）加载html

http://coding.m.imooc.com

• 加载html中的静态资源

<script src="/static/js/jquery.js"></script>

2.2 加载一个资源的过程

• 浏览器根据DNS服务器得到域名的IP地址（域名解析）
• 浏览器通过TCP/IP与服务器进行连接
• 向这个IP的服务器发送http请求
• 服务器收到，处理并返回http请求
• 浏览器得到返回内容

2.3 浏览器渲染页面的过程

结构——样式——整合

• 根据HTML结构生成DOM Tree
• 根据CSS生成CSSOM
• 根据DOM和CSSOM整合形成RenderTree
• 根据RenderTree开始渲染和展示
• 遇到<script>时，会执行并阻塞渲染    因为js有权利改变DOM结构，避免冲突从上到下执行

为什么要把CSS放在head中？

先加载默认，又加载样式，用户体验差，性能体验差

为什么要把script放在body最下面？

不会阻塞HTML结构渲染，可以拿到所有的HTML