1.首先在浏览器中输入URL
2.查找缓存:浏览器先查看浏览器缓存-系统缓存-路由缓存中是否有该地址页面,如果有则显示页面内容。如果没有则进行下一步。
3.DNS域名解析:浏览器向DNS服务器发起请求,解析该URL中的域名对应的IP地址。DNS服务器是基于UDP的,因此会用到UDP协议。
4.建立TCP连接:解析出IP地址后,根据IP地址和默认80端口,和服务器建立TCP连接
5.发起HTTP请求:浏览器发起读取文件的HTTP请求,,该请求报文作为TCP三次握手的第三次数据发送给服务器
6.服务器响应请求并返回结果:服务器对浏览器请求做出响应,并把对应的html文件发送给浏览器
7.关闭TCP连接:通过四次挥手释放TCP连接
8.浏览器渲染:客户端(浏览器)解析HTML内容并渲染出来,浏览器接收到数据包后的解析流程为:
8.1构建DOM树:词法分析然后解析成DOM树(dom tree),是由dom元素及属性节点组成,树的根是document对象
8.2构建CSS规则树:生成CSS规则树(CSS Rule Tree)
8.3构建render树:Web浏览器将DOM和CSSOM结合,并构建出渲染树(render tree)
8.4布局(Layout):计算出每个节点在屏幕中的位置
8.5绘制(Painting):即遍历render树,并使用UI后端层绘制每个节点。
导航
统计
- 随笔 - 89
- 文章 - 2
- 评论 - 3
- 阅读 - 29357
学习如逆水行舟,不进则退。
分类:
面试集锦
搜索
最新随笔
- 1.error:0308010C:digital envelope routines::unsupported
- 2.记录 小程序调用前置摄像头的数据获取及简单配置
- 3.记录小程序 errno":600001,"errMsg":"request:fail -118 报错问题
- 4.element-ui el-tabs 和 el-table混合使用的问题
- 5.JS n秒只能调用一次
- 6.element picker-options控制时间只能选取指定范围日期
- 7.element dialog 垂直水平居中显示
- 8.Vue组件中的父子传参,子父传参,兄弟传参,以及事件总线
- 9.浏览器返回禁用,浏览器页签更改刷新列表
- 10.监听浏览器页面被激活事件
积分与排名
- 积分 - 29466
- 排名 - 55684
随笔分类 (17)
随笔档案 (89)
- 2024年3月(1)
- 2023年9月(2)
- 2023年3月(1)
- 2023年2月(9)
- 2023年1月(2)
- 2022年12月(8)
- 2022年11月(3)
- 2022年10月(5)
- 2022年9月(29)
- 2022年8月(25)
- 2022年7月(4)
文章档案 (2)
最新评论
- 1. Re:tinymce富文本编辑器的简单使用及OSS直传
- @灰色的蓝猫 抱歉这么晚回复你,最近没有登录博客园。导致好几条留言都没来得及回复,忘见谅...
- --苏舒
- 2. Re:tinymce富文本编辑器的简单使用及OSS直传
- @灰色的蓝猫 我没有遇见过这个问题,不过你可以参考 这个,官方网站那边如果报你这个错误的话,说是识别不到 文件 或 文件流...
- --苏舒
- 3. Re:tinymce富文本编辑器的简单使用及OSS直传
- 我粘贴图片上传时会报_getFileSize requires Buffer/File/String 但我使用本地方法把blobInfo.blob()转成URL是能访问的,为什么OSS会识别错误呢? ...
- --灰色的蓝猫
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用