登录
注册
开源
企业版
高校版
搜索
帮助中心
使用条款
关于我们
开源
企业版
高校版
私有云
模力方舟
AI 队友
登录
注册
代码拉取完成,页面将自动刷新
捐赠
捐赠前请先登录
取消
前往登录
扫描微信二维码支付
取消
支付完成
支付提示
将跳转至支付宝完成支付
确定
取消
Watch
不关注
关注所有动态
仅关注版本发行动态
关注但不提醒动态
3
Star
47
Fork
23
DreamCoders
/
CoderGuide
代码
Issues
1169
Pull Requests
0
Wiki
统计
流水线
服务
JavaDoc
PHPDoc
质量分析
Jenkins for Gitee
腾讯云托管
腾讯云 Serverless
悬镜安全
阿里云 SAE
Codeblitz
SBOM
开发画像分析
我知道了,不再自动展开
更新失败,请稍后重试!
移除标识
内容风险标识
本任务被
标识为内容中包含有代码安全 Bug 、隐私泄露等敏感信息,仓库外成员不可访问
浏览器从输入url到渲染页面,发生了什么?
待办的
#IAG9NU
陌生人
拥有者
创建于
2024-07-29 16:06
<p style="text-align: start;"><span style="color: rgb(254, 44, 36);"><strong>这玩意一定要说全了装逼</strong></span></p><p style="text-align: start;"><strong>用户输入阶段</strong><br>合成 URL:浏览区会判断用户输入是合法 URL,比如用户输入的是搜索的关键词,默认的搜索引擎会合成新的,如果符合url规则会根据url协议,在这段内容加上协议合成合法的url<br><br><strong>查找缓存</strong><br>网络进程获取到 URL,先去本地缓存中查找是否有缓存资源,如果有则拦截请求,直接将缓存资源返回给浏览器进程;否则,进入网络请请求阶段;<br><br><strong>DNS 解析:</strong><br>DNS 查找数据缓存服务中是否缓存过当前域名信息,有则直接返回;否则,会进行 DNS 解析返回域名对应的 IP 和端口号,如果没有指定端口号,http 默认 80 端口,https 默认 443。如果是 https 请求,还需要建立 TLS 连接;<br><br><strong>建立 TCP 连接:</strong><br>TCP 三次握手与服务器建立连接,然后进行数据的传输;(三次握手开喷)</p><p style="text-align: start;"><strong>发送 HTTP 请求:</strong><br>浏览器首先会向服务器发送请求行,它包含了请求方法、请求 URI 和 HTTP 协议的版本;另外还会发送请求头,告诉服务器一些浏览器的相关信息,比如浏览器内核,请求域名;</p><p style="text-align: start;"><strong>服务器处理请求:</strong><br>服务器首先返回响应行,包括协议版本和状态码,比如状态码 200 表示继续处理该请求;如果是 301,则表示重定向,服务器也会向浏览器发送响应头,包含了一些信息;</p><p style="text-align: start;"><strong>页面渲染:</strong></p><p style="text-align: start;">查看响应头的信息,做不同的处理,比如重定向,存储cookie 看看content-type的值,根据不同的资源类型来用不同的解析方式</p><p style="text-align: start;"><br><span style="color: rgb(254, 44, 36);"><strong>浏览器渲染原理直接开干.....</strong></span></p><p style="text-align: start;">浏览器将获取的HTML文档解析成DOM树。<br>处理CSS标记,构成层叠样式表模型CSSOM(CSS Object Model)。<br>将DOM和CSSOM合并为渲染树(rendering tree),代表一系列将被渲染的对象。<br>渲染树的每个元素包含的内容都是计算过的,它被称之为布局layout。浏览器使用一种流式处理的方法,只需要一次绘制操作就可以布局所有的元素。<br>将渲染树的各个节点绘制到屏幕上,这一步被称为绘制painting。</p><p style="text-align: start;"><strong>断开 TCP 连接:</strong></p><p style="text-align: start;">数据传输完成,正常情况下 TCP 将四次挥手断开连接。但是如果浏览器或者服务器在HTTP头部加上 Connection: keep-alive,TCP 就会一直保持连接。</p>
<p style="text-align: start;"><span style="color: rgb(254, 44, 36);"><strong>这玩意一定要说全了装逼</strong></span></p><p style="text-align: start;"><strong>用户输入阶段</strong><br>合成 URL:浏览区会判断用户输入是合法 URL,比如用户输入的是搜索的关键词,默认的搜索引擎会合成新的,如果符合url规则会根据url协议,在这段内容加上协议合成合法的url<br><br><strong>查找缓存</strong><br>网络进程获取到 URL,先去本地缓存中查找是否有缓存资源,如果有则拦截请求,直接将缓存资源返回给浏览器进程;否则,进入网络请请求阶段;<br><br><strong>DNS 解析:</strong><br>DNS 查找数据缓存服务中是否缓存过当前域名信息,有则直接返回;否则,会进行 DNS 解析返回域名对应的 IP 和端口号,如果没有指定端口号,http 默认 80 端口,https 默认 443。如果是 https 请求,还需要建立 TLS 连接;<br><br><strong>建立 TCP 连接:</strong><br>TCP 三次握手与服务器建立连接,然后进行数据的传输;(三次握手开喷)</p><p style="text-align: start;"><strong>发送 HTTP 请求:</strong><br>浏览器首先会向服务器发送请求行,它包含了请求方法、请求 URI 和 HTTP 协议的版本;另外还会发送请求头,告诉服务器一些浏览器的相关信息,比如浏览器内核,请求域名;</p><p style="text-align: start;"><strong>服务器处理请求:</strong><br>服务器首先返回响应行,包括协议版本和状态码,比如状态码 200 表示继续处理该请求;如果是 301,则表示重定向,服务器也会向浏览器发送响应头,包含了一些信息;</p><p style="text-align: start;"><strong>页面渲染:</strong></p><p style="text-align: start;">查看响应头的信息,做不同的处理,比如重定向,存储cookie 看看content-type的值,根据不同的资源类型来用不同的解析方式</p><p style="text-align: start;"><br><span style="color: rgb(254, 44, 36);"><strong>浏览器渲染原理直接开干.....</strong></span></p><p style="text-align: start;">浏览器将获取的HTML文档解析成DOM树。<br>处理CSS标记,构成层叠样式表模型CSSOM(CSS Object Model)。<br>将DOM和CSSOM合并为渲染树(rendering tree),代表一系列将被渲染的对象。<br>渲染树的每个元素包含的内容都是计算过的,它被称之为布局layout。浏览器使用一种流式处理的方法,只需要一次绘制操作就可以布局所有的元素。<br>将渲染树的各个节点绘制到屏幕上,这一步被称为绘制painting。</p><p style="text-align: start;"><strong>断开 TCP 连接:</strong></p><p style="text-align: start;">数据传输完成,正常情况下 TCP 将四次挥手断开连接。但是如果浏览器或者服务器在HTTP头部加上 Connection: keep-alive,TCP 就会一直保持连接。</p>
评论 (
0
)
登录
后才可以发表评论
状态
待办的
待办的
进行中
已完成
已关闭
负责人
未设置
标签
Html/JS/CSS
未设置
标签管理
里程碑
未关联里程碑
未关联里程碑
Pull Requests
未关联
未关联
关联的 Pull Requests 被合并后可能会关闭此 issue
分支
未关联
分支 (
-
)
标签 (
-
)
开始日期   -   截止日期
-
置顶选项
不置顶
置顶等级:高
置顶等级:中
置顶等级:低
优先级
不指定
严重
主要
次要
不重要
参与者(1)
1
https://gitee.com/DreamCoders/CoderGuide.git
git@gitee.com:DreamCoders/CoderGuide.git
DreamCoders
CoderGuide
CoderGuide
点此查找更多帮助
搜索帮助
Git 命令在线学习
如何在 Gitee 导入 GitHub 仓库
Git 仓库基础操作
企业版和社区版功能对比
SSH 公钥设置
如何处理代码冲突
仓库体积过大,如何减小?
如何找回被删除的仓库数据
Gitee 产品配额说明
GitHub仓库快速导入Gitee及同步更新
什么是 Release(发行版)
将 PHP 项目自动发布到 packagist.org
评论
仓库举报
回到顶部
登录提示
该操作需登录 Gitee 帐号,请先登录后再操作。
立即登录
没有帐号,去注册