【剑指offer】输入网址按回车后，浏览器发生了什么？

最新推荐文章于 2024-08-13 09:40:14 发布
最新推荐文章于 2024-08-13 09:40:14 发布
阅读量110 收藏
点赞数
分类专栏： 剑指offer 文章标签： javascript html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_50963520/article/details/114195873
版权

【剑指offer】输入网址按回车后，浏览器发生了什么？

一、DNS域名解析及安全性检测

  1. 当你在浏览器URL地址栏输入内容时，浏览器进程的UI线程会捕捉你输入的内容。
  • 如果输入的是一个网址：UI线程会启动一个网络线程来请求DNS进行域名解析，接着开始连接服务器获取数据
  • 如果输入的是一串关键词：就会使用默认配置的搜索引擎来查询
  1. 当网络线程获取到数据后会通过SafeBrowsing来检测站点是否是恶意站点。
  • 如果是，则会显示一个警告页面，告诉你这个站点有安全问题，浏览器会阻止你的访问，当然你也可以强行继续访问
    SafeBrowsing是谷歌浏览器内置的站点安全系统，通过改站点的数据来判断是否安全。比如通过查看该站点的IP是否在谷歌的黑名单中。
  1. 当返回数据准备完毕，并且通过安全检测后，网络线程会通知UI线程我就要准备好了。UI线程会创建一个渲染器进程来渲染页面

二、渲染过程

  1. 浏览器进程中的网络线程请求到获取到HTML数据后，通过IPC（进程间通信管道）将数据传给渲染器进程。

渲染器进程的主线程

  1. 渲染器主线程将HTML解析构造DOM树，然后进行CSS样式计算。
  • 在解析HTML时会遇到引入一些额外的资源
  • 如果是图片、CSS等资源，需要通过网络或从缓存中加载，这些资源不会阻塞HTML的解析，因为他们不会影响DOM树的生成
  • 如果是js文件，则会停止HTML解析，而去执行JS代码
  1. 根据DOM树和CSS样式计算，生成layout Tree（记录DOM元素位置，不与DOM树一一对应）
  2. 通过遍历layout Tree生成绘制顺序表
  3. 接着遍历layout Tree 生成Layer Tree
  4. 主线程将Laye(图层) Tree 和绘制顺序信息一起传给合成器线程

合成器线程

  1. 合成器线程按规则进行分图层，并把图层分为更小的图块（tiles）传给栅格线程
  2. 栅格线程进行栅格化，并把图块存储在GPU内存中
  3. 栅格化完成后，合成器线程会获得栅格线程传过来的“draw quads”图块信息（记录图块在内存中存储位置，以及在页面中的显示位置），根据这些信息，合成器线程合成了一个合成器帧（由页面可视区的所有图块信息组成）。
  4. 合成器线程将该合成器帧通过IPC（进程间通信管道）传回给浏览器进程。
  5. 浏览器进程再传到GPU进行渲染，之后就呈现再屏幕上了
m0_50963520
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
三次握手及其问题（访问浏览器url，按下回车后发生了什么）
m0_52828963的博客
04-06 178
当你在浏览器地址栏输入一个URL后回车，将会发生的事情？ 当我们在浏览器的地址栏输入 www.cnblogs.com ，然后回车，回车到看到页面到底发生了什么呢？ 域名解析 --> 发起TCP的3次握手 --> 建立TCP连接后发起http请求 --> 服务器响应http请求，浏览器得到html代码 --> 浏览器解析html代码，并请求html代码中的资源（如js、css、图片等） --> 浏览器对页面进行渲染呈现给用户 一、域名解析# 首先Chrome浏览器会解析www.c
用户输入URL回车之后，浏览器到底做了什么？
qq_38435906的博客
10-08 1005
URL，它的组成： 协议 服务器地址（域名或IP+端口） 路径 文件名 比如：https://www.baidu.com/index.html 其中 https://是一种协议 当然，HTTP也是 ftp也是... www.baidu.com是服务器地址，当然你知道百度的IP也可以,例如我用ping命令得到百度的ip 14.215.177.39，那么我可以用http://14....
当你在浏览器地址栏输入一个URL后回车，将会发生的事情？
06-05
作为一个软件开发者，你一定会对网络应用如何工作有一个完整的层次化的认知，同样这里也包括这些应用所用到的技术：像浏览器，HTTP，HTML，网络服务器，需求处理等等。
1.《剑指Java面试-Offer直通车》--计算机网络
weixin_35821291的博客
01-12 556
一、网络基础知识讲解 OSI开放式互联参考模型 第1层 物理层 首先解决两台物理机之间的通信需求，具体就是机器A往机器B发送比特流，机器B能收到比特流。 主要作用是传输比特流（0101二进制数据），将比特流转化为电流强弱传输，到达目的后再转化为比特流，即常说的数模转化和模数转换。这层数据叫做比特。网卡工作在这层。 第2层 数据链路层 【封装成帧、透明传输、差错检测】 封装成帧：在数据前后添加首部和尾部，使用帧定界符。（SOH、EOT），数据部分小等于MTU 透明传输：为了.
剑指Java面试-Offer直通车--计算机网络
weixin_43271235的博客
06-26 545
前言：以下相关内容多为图片，参考链接、附上少量文字解释，以便整理脉络，以作复习巩固之用。若需详细了解，请进入原博主链接。如有错误，敬请指出，谢谢。 参考链接：《剑指Java面试-Offer直通车》–计算机网络 一、网络基础知识讲解 OSI开放式互联参考模型 二、Socket Socket简介 Socket通信流程 三、TCP三次握手，必考 IP数据包、成对端口 传输控制协议TCP简介： 1）面向连接的、可靠的、基于字节流的传输层通信协议 2）将应用层的数据流分割成报文段并发送给目标节点的TCP
剑指offer-Java代码_java_剑指offer_
09-30
《剑指Offer》是一本备受推崇的编程面试指南，尤其对于Java开发者来说，它提供了大量精心设计的面试题目，旨在帮助求职者提升编程技能和解决问题的能力。这本书的Java代码实现和文字说明是深入理解问题解决方案的...
剑指offer笔试及源程序
10-31
《剑指offer笔试及源程序》是一份针对IT求职者极具价值的资源，它涵盖了名企面试中常见的编程题目，并提供了详细的源代码解析。这份资料旨在帮助应聘者提升编程技能，增强解决实际问题的能力，从而在面试中脱颖而出...
牛客网剑指offer——Java题解.pdf
09-07
剑指offer Java题解 本资源总结了牛客网剑指offer Java题解的关键知识点，涵盖了Java基本概念、数据结构和算法等方面的知识。 JZ1 二维数组中的查找 * 题目描述：在一个二维数组中查找指定的整数。 * 解题思路：...
剑指offer算法python版
12-22
大家都知道斐波那契数列，现在要求输入一个整数n，请你输出斐波那契数列的第n项（从0开始，第0项为0）。n<=39 解题思路：找规律 设函数f(n) 当 n=0时 f(0) =0 当 n=1时 f(1) =1 当 n=2时 f(2) =1 当 n=3时 f(3) =...
Python《剑指offer》算法实现-按之字形顺序打印二叉树
12-25
# Python实现《剑指offer》 部分代码自己添加了一些测试用例, 或者自己添加了一些功能 1. 初级程序员注重算法和数据结构 2. 事先做好准备,对工作有热情 3. 面试过程放松。不要急于写代码,了解清楚所要解决的问题,...
Arco Design for Vue 3 - 快速上手指南与实战技巧
qq_42072014的博客
08-11 493
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
Electron学习与总结
song854601134的博客
08-12 186
组成，‌其中Chromium负责渲染和显示Web页面，‌而Node.js则提供了主进程的功能，‌包括管理应用程序的生命周期、‌创建和控制浏览器窗口以及与操作系统交互。，‌Electron使得开发者能够保持JavaScript代码库的一致性，‌从而轻松地创建跨平台的应用程序，‌而无需具备本地开发经验。Electron的核心是由。
牛客JS题（三十四）监听对象
不起眼小菜菜的博客
08-10 417
注释很详细，直接上代码……
【Markdown】Markdown 中的语言简称
EleganceJiaBao的博客
08-12 879
以下是常见编程语言、脚本语言、标记语言等在 Markdown 中的语言简称以及相应的示例：
【Vue3】图片未加载成功前占位
菜就多练
08-08 349
原生img标签可以通过自定义指令解决< template > < img class = " image_item-img " v-preload = " ' loading' " src = " https://xx " alt = " 加载失败 " /> < script setup > import {reactive } from 'vue' // 自定义图片占位 const vPreload = {
Ant-Design-Vue快速上手 指南+排坑（下）
Dingdangr的博客
08-10 466
确保你正确定义了校验规则。Ant Design Vue 3.x 及以上版本推荐使用Form.Item的rules属性来定义校验规则，这是一个数组，可以包含多个校验项。html复制代码label="用户名":rules="[{ required: true, message: '请输入用户名!' }, { min: 3, message: '用户名至少为3个字符!' }]"如果 Ant Design Vue 提供的校验规则不满足你的需求，你可以自定义校验规则。
Vue 中 app.config 相关配置项介绍与案例
最新发布
前端基地
08-13 653
本博文展开了细致且全面的阐述，对 app.config 、app.config.errorHandler 、app.config.warnHandler 、app.config.performance 、app.config.compilerOptions 、app.config.globalProperties 以及 app.config.optionMergeStrategies 进行了深入剖析。不仅清晰明了地介绍了它们的功能和特性，还通过丰富多样的实际案例展开了详尽的分析。
基于微信小程序的心理测评平台设计与实现
No_Name_Cao_Ni_Mei的博客
08-12 391
本文旨在设计与实现一个基于微信小程序的心理测评平台。该平台将提供心理测评问卷、分析报告和个性化建议等功能，旨在帮助用户了解自身心理状况并提供适当的改善方案。该平台将采用微信小程序作为开发平台，具备跨平台、便捷性等优势，能够满足用户在手机应用中进行心理测评的需求。本平台主要分为用户端和管理员端两个模块。用户端提供注册、登录、心理测试问卷填写等功能，同时可以生成个人心理分析报告和个性化建议。管理员端可以管理测试问卷、生成报告和建议，并管理用户信息和反馈意见。
剑指Offer编程题目与Java代码大全
"《剑指Offer》是一本经典的面试宝典，由LeetCode作者郭霖编著，旨在帮助求职者提升编程技能，应对技术面试。该书提供了丰富的编程题目，涵盖多种核心的IT知识点，包括但不限于数据结构、算法、设计模式、性能优化等...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值