【面试常问】输入url后页面会遇到的问题

25
五月
2021

文章目录

  • 前言
  • 一、输入url后的各部分的反应
  • 二、浏览器接收到http响应后渲染页面
  • 三、css文件要放在body头部,而js文件则是放在尾部
    • 1.css的角度
    • 2.js的角度
    • 3.css放置的位置造成的不同结果


前言

从输入url网址到域名解析一直再到页面渲染成功涉及到的知识过于庞大,本文不做详细介绍,只讲一些小编在这个过程中遇到的问题


提示:以下是本篇文章正文内容,下面案例可供参考

一、输入url后的各部分的反应

1、输入网址:
如:www.4399.com
2、DNS解析:
将你输入的网址解析为计算机能够识别的ip地址

• 3、浏览器会与服务器建立tcp连接:
这里会涉及到tcp的三次握手四次挥手,建立起可靠的连接
• 4、客户端发送HTPP请求:
http请求中包括请求行、请求头、请求体

• 5、服务器处理请求
服务器对tcp连接进行处理,对http协议进行解析,按照报文格式封装成http request对象供上层使用。
• 6、服务器响应请求
http响应也是和http请求一样,都是由请求行、请求头、请求体构成。
• 7、浏览器展示HTML

二、浏览器接收到http响应后渲染页面

1. DOM构造

通过html解析器解析构建为一颗DOM树。

2. CSSOM树

接着将接收到的css代码(如果有的话),通过css解析器构建出样式表规则将这些规则分别放到对应的DOM树节点上,得到一颗带有样式属性的DOM树。

3. 布局计算

渲染树构建完成以后,浏览器计算所有元素大小和绝对位置

4. 渲染

布局计算完成后,浏览器在页面渲染元素。经过渲染引擎处理后,整个页面就显示出来


总的来说是从html-css-js,这也就有了另外一个问题:css文件引用为什么要放在body头部,而js文件则是放在尾部

三、css文件要放在body头部,而js文件则是放在尾部

前面讲到了,页面的渲染是从DOM树的构建再到CSS将DOM树进行装饰使其变为一颗有属性的DOM树。

1.css的角度

外联的css放在何处都不会影响html的解析,但是会影响html的渲染,就比如说如果css放在尾部的话,html会立即显示出来,但因为css在尾部,这就会导致显示出来的html没有装饰,只是一颗没有叶子的树干。

2.js的角度

因为js是单线程的,这也就意味着在没有异步的情况下,如果将js放在头部的话就会导致html的解析会被阻断,如果js的加载时间过长就会导致网页失去响应,浏览器就会出现“假死现象”,这就是“阻塞效应”。

3.css放置的位置造成的不同结果

css放在body标签尾部时:
DOM树构建完成之后便开始构建Render树, 并计算布局渲染网页, 等加载解析完css之后, 开始构建CSSOM树, 并和DOM树重新构建Render树, 重新计算布局渲染网页
css放在head标签中时:
先构建CSSOM树, 于此同时构建DOM树, CSSOM树和DOM树都构建完毕之后开始构建Render树, 计算布局渲染网页


码字不易~, 各位看官要是看爽了,可不可以三连走一波,点赞皆有好运!,不点赞也有哈哈哈~~~

TAG

网友评论

共有访客发表了评论
请登录后再发布评论,和谐社会,请文明发言,谢谢合作! 立即登录 注册会员