【计网修炼手册】浏览器

本文涉及的产品
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 《计算机组成原理》、《数据结构与算法》、《操作系统》、《计算机网络》不仅是大学信息科学与工程学院的核心课程,也是计算机考研专业基础综合408的考试内容。学习这些内容可能不见得像学习Java和GO一样能让你迅速找到工作,但他们作为计算机世界的基石是需要认真掌握的,这些知识是源源不断的技术浪潮中不会被淘汰的知识。

常见浏览器内核的种类。

Trident:IE6、IE7、IE8、IE9、IE10、360 浏览器和猎豹浏览器。
Gecko:firefox 浏览器。
Blink:opera 浏览器。
Webkit:sarfari 和 chrome 浏览器。

浏览器内核中的线程。

内核主要分成五部分:

GUI 渲染线程:负责渲染浏览器界面,解析 HTML,CSS,构建渲染树,布局和绘制等。当界面需要重绘或回流时,该线程就会执行。注意,GUI 渲染线程与 JS 引擎线程是互斥的,

JS 引擎线程:解析和执行 javascript。

事件触发线程:归属于浏览器而不是 JS 引擎,用来控制事件循环。

定时器触发线程:setInterval 与 setTimeout 所在线程。浏览器定时计数器并不是由 JavaScript 引擎计数的,因此通过单独线程来计时并触发定时(计时完毕后,添加到事件队列中,等待 JS 引擎空闲后执行)。

异步 http 请求线程:在 XMLHttpRequest 在连接后是通过浏览器新开一个线程请求,将检测到状态变更时,如果设置有回调函数,异步线程就产生状态变更事件,将这个回调再放入事件队列中,再由 JavaScript 引擎执行。

浏览器的渲染流程。

接收到文档后,渲染引擎会对 HTML 文档进行解析生成 DOM 树、对 CSS 文件进行解析生成布局树;同时执行页面中的 JavaScript 代码;最终根据 DOM 树和布局树,计算样式生成渲染树,渲染树中,只会包含即将显示在页面中的元素及其样式信息(如 head 元素、display 为 hidden 的元素就不会包含在渲染树中);根据渲染树需要进行布局来计算每个元素在页面上的位置;

接下来渲染引擎开始进行绘制(paint),这一步分为若干阶段:
1、根据渲染树绘制每层的各个元素。
2、栅格化绘制出的图像(将渲染树中的节点转换成屏幕上的实际像素)
3、显示在屏幕上。
每一层的绘制是由浏览器来完成的;最后的合成是由 GPU 来完成;而栅格化过程取决于浏览器的设置,chrome 默认开启 GPU 栅格化,否则由 CPU 进行。

浏览器从输入请求到呈现页面的过程。

1、URL 解析
2、DNS 查询
3、TCP 连接
4、处理请求
5、接受响应
6、渲染页面

localstorage、sessionstorage 的区别,以及使用场景。

localStorage:生命周期是永久的,关闭页面或浏览器之后 localStorage 中的数据也不会消失。localStorage 除非主动删除数据,否则数据永远不会消失(只会存储 string)。

sessionStorage:生命周期是在仅在当前会话下有效。sessionStorage 引入了一个“浏览器窗口”的概念,sessionStorage 是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭,即使刷新页面或者进入同源另一个页面,数据依然存在。但是 sessionStorage 在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面,sessionStorage 也是不一样的。

使用方法:

window.localStorage
window.sessionStorage

API:

setItem(key, value) // 保存数据,以键值对的方式储存信息。
getItem(key) // 获取数据,将键值传入,即可获取到对应的 value 值。
removeItem(key) // 删除单个数据,根据键值移除对应的信息。
clear() // 删除所有的数据
key(index) // 获取某个索引的 key
目录
相关文章
|
Web App开发 JavaScript 前端开发
【必备】史上最全的浏览器 CSS & JS Hack 手册
  浏览器渲染页面的方式各不相同,甚至同一浏览器的不同版本(“杰出代表”是 IE)也有差异。因此,浏览器兼容成为前端开发人员的必备技能。如果有一份浏览器 Hack 手册,那查询起来就方便多了。这篇文章就向大家分享 Browserhacks 帮我们从网络上收集的各个浏览器特定的 CSS & JavaS...
1105 0
|
Web App开发 移动开发 JavaScript
HTML5 标签、事件句柄属性以及浏览器兼容情况速查手册
  随着主流浏览器对 HTML5 的不断支持和完善,越来越多的开发者开始使用 HTML5 来开发各种功能强大的 Web 应用程序,HTML5 正引领互联网新革命。为了方便大家更好的学习 HTML5,今天这篇文章向大家分享三份非常有用的速查手册,分别是:标签速查手册、事件句柄属性速查手册和浏览器支持情况速查手册,希望能帮助到您。
1108 0
|
20天前
|
JSON 移动开发 JavaScript
在浏览器执行js脚本的两种方式
【10月更文挑战第20天】本文介绍了在浏览器中执行HTTP请求的两种方式:`fetch`和`XMLHttpRequest`。`fetch`支持GET和POST请求,返回Promise对象,可以方便地处理异步操作。`XMLHttpRequest`则通过回调函数处理请求结果,适用于需要兼容旧浏览器的场景。文中还提供了具体的代码示例。
在浏览器执行js脚本的两种方式
|
18天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端大模型入门:Transformer.js 和 Xenova-引领浏览器端的机器学习变革
除了调用API接口使用Transformer技术,你是否想过在浏览器中运行大模型?Xenova团队推出的Transformer.js,基于JavaScript,让开发者能在浏览器中本地加载和执行预训练模型,无需依赖服务器。该库利用WebAssembly和WebGPU技术,大幅提升性能,尤其适合隐私保护、离线应用和低延迟交互场景。无论是NLP任务还是实时文本生成,Transformer.js都提供了强大支持,成为构建浏览器AI应用的核心工具。
477 1
|
1月前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
126 0
|
2月前
|
JavaScript 前端开发
js之浏览器对象|28
js之浏览器对象|28
|
3月前
|
机器学习/深度学习 人工智能 前端开发
【人工智能】利用TensorFlow.js在浏览器中实现一个基本的情感分析系统
使用TensorFlow.js在浏览器中进行情感分析是一个非常实用的应用场景。TensorFlow.js 是一个用于在JavaScript环境中训练和部署机器学习模型的库,使得开发者能够在客户端直接运行复杂的机器学习任务。对于情感分析,我们可以使用预先训练好的模型来识别文本中的积极、消极或中性情感。
110 4
【人工智能】利用TensorFlow.js在浏览器中实现一个基本的情感分析系统
|
3月前
|
机器学习/深度学习 存储 前端开发
实战揭秘:如何借助TensorFlow.js的强大力量,轻松将高效能的机器学习模型无缝集成到Web浏览器中,从而打造智能化的前端应用并优化用户体验
【8月更文挑战第31天】将机器学习模型集成到Web应用中,可让用户在浏览器内体验智能化功能。TensorFlow.js作为在客户端浏览器中运行的库,提供了强大支持。本文通过问答形式详细介绍如何使用TensorFlow.js将机器学习模型带入Web浏览器,并通过具体示例代码展示最佳实践。首先,需在HTML文件中引入TensorFlow.js库;接着,可通过加载预训练模型如MobileNet实现图像分类;然后,编写代码处理图像识别并显示结果;此外,还介绍了如何训练自定义模型及优化模型性能的方法,包括模型量化、剪枝和压缩等。
53 1
|
3月前
|
编解码 JavaScript 前端开发
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
116 1

相关实验场景

更多
下一篇
无影云桌面