登录
注册
开源
企业版
高校版
搜索
帮助中心
使用条款
关于我们
开源
企业版
高校版
私有云
模力方舟
AI 队友
登录
注册
12月21日就在北京,来看大模型推理 + 国产硬件生态 + 开源社区分享,一起搞技术、聊开源、领福利~~
代码拉取完成,页面将自动刷新
捐赠
捐赠前请先登录
取消
前往登录
扫描微信二维码支付
取消
支付完成
支付提示
将跳转至支付宝完成支付
确定
取消
Watch
不关注
关注所有动态
仅关注版本发行动态
关注但不提醒动态
3
Star
45
Fork
21
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
分支
未关联
未关联
master
开始日期   -   截止日期
-
置顶选项
不置顶
置顶等级:高
置顶等级:中
置顶等级:低
优先级
不指定
严重
主要
次要
不重要
参与者(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 帐号,请先登录后再操作。
立即登录
没有帐号,去注册