1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 浏览器页面加载过程

浏览器页面加载过程

时间:2020-09-02 08:30:38

相关推荐

浏览器页面加载过程

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

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

2.window.onload和DOMContentLoaded的区别

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

对于第一点,首先要明白几点:

加载资源的形式

1.输入url(或跳转页面)加载html,比如输入网址跳转至页面

2.加载html的静态资源,比如<script>、<img>、<link>等加载资源加载一个资源的过程

1.浏览器根据DNS服务器得到域名的IP地址

2.向这个IP的机器发送http(s)请求

3.服务器收到,处理并返回http请求,比如返回图片或html代码等

4.浏览器得到返回内容浏览器渲染页面的过程

1.根据HTML结构生产DOM Tree(只是一个DOM结构,没有样式)

2.根据CSS生产CSSOM(CSS Object model)(只是一个样式结构)

3.将DOM和CSSOM整合成RenderTree(渲染树)

4.根据RenderTree开始渲染和展示

5.遇到<script>时,会执行并阻塞渲染(遇到JS会阻塞渲染,因为JS有权利改变DOM结构,所以得规定先后顺序)

思考:为何要把css放在head中?

如果不把css放在head中,会导致多次渲染,严重影响用户体验同时会损耗性能。CSS一定要放在head中,等body里面的东西出来前就要加载完.

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。