码迷,mamicode.com
首页 > 其他好文 > 详细

浏览器页面加载过程

时间:2020-07-12 14:04:15      阅读:64      评论:0      收藏:0      [点我收藏+]

标签:mod   ip地址   zha   思考   用户   影响   开始   执行   发送   

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

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

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

加载资源的形式
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里面的东西出来前就要加载完.
https://www.cnblogs.com/zhaowy/p/8435751.html

浏览器页面加载过程

标签:mod   ip地址   zha   思考   用户   影响   开始   执行   发送   

原文地址:https://www.cnblogs.com/gxw123/p/13288145.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!