前端面试知识点整理——网络_前端面试计网考点

	- [十二、websocket](#websocket_222)
	- [十三、前中后序遍历应用](#_234)
	- [十四、TCP和UDP的区别](#TCPUDP_239)
	- [十五、http如何保持状态](#http_249)
	- [十六、http1.0 和 http1.1 的区别](#http10__http11__256)
	- [十七、http1.1 和 http2.0 的区别](#http11__http20__263)
	- [十八、http常见状态码](#http_268)
一、 进程(process)和线程(thread)

进程是 CPU 资源分配的最小单位(是能拥有资源和独立运行的最小单位)。

线程是 CPU 调度的最小单位(是建立在进程基础上的一次程序运行单位)。

现代操作系统都是可以同时运行多个任务的,比如:用浏览器上网的同时还可以听音乐。
对于操作系统来说,一个任务就是一个进程,比如打开一个浏览器就是启动了一个浏览器进程,打开一个 Word 就启动了一个 Word 进程。
有些进程同时不止做一件事,比如 Word,它同时可以进行打字、拼写检查、打印等事情。在一个进程内部,要同时做多件事,就需要同时运行多个“子任务”,我们把进程内的这些“子任务”称为线程。
由于每个进程至少要做一件事,所以一个进程至少有一个线程。系统会给每个进程分配独立的内存,因此进程有它独立的资源。同一进程内的各个线程之间共享该进程的内存空间(包括代码段,数据集,堆等)。

二、 浏览器属于一种多进程的架构

例如,我们默认打开一个tab页面,就会新建一个进程,不同的tab页面是不同的进程,因此单个tab页面的崩溃是不会影响到整个浏览器的。 可以充分利用现代CPU多核的优势,但是相应的,内存和CPU的资源消耗会更大。

浏览器的主要进程和职责:
在这里插入图片描述

主进程:负责浏览器界面的显示与交互。各个页面的管理,创建和销毁其他进程。网络的资源管理、下载等。
第三方插件进程:每种类型的插件对应一个进程,仅当使用该插件时才创建。
GPU进程:最多只有一个,用于3D绘制
渲染进程(浏览器内核):内部是多线程的。主要负责页面渲染,脚本执行,事件处理等。
在这里插入图片描述

  1. GUI渲染线程:负责渲染界面,解析html、css,构建dom树和render树,布局和绘制。重绘和回流时,该线程会执行
  2. JS引擎线程:解析js代码
    注意:GUI渲染线程和JS引擎线程是互斥的。
    问:为什么js是单线程的?
    答:如果是多线程就会出现UI操作的冲突,例如,假设存在两个线程同时处理一个dom,一个负责修改一个负责删除,那么这时候就需要浏览器来裁决如何生效哪个线程执行的结果。这其实可以使用锁来解决,但是为了避免因为引入锁带来更大的复杂性,js在最初就选择了单线程。
  3. 事件触发线程、定时器触发线程、异步http请求线程:我的理解是他们都是在事件准备好的时候把事件放入任务队列当中,等待js引擎来执行,可以说是用来辅助js引擎工作的

浏览器渲染流程:

  1. 解析 HTML 文件,构建 DOM 树,同时浏览器主进程负责下载 CSS 文件
  2. CSS 文件下载完成,解析 CSS 文件成树形的数据结构
### 滴滴前端第三轮面试可能的技术考察点 滴滴作为一家领先的互联出行平台,其前端开发岗位通常会注重候选人对核心前端技术的理解以及实际项目的应用能力。以下是基于行业经验及相关资料整理的滴滴前端方向第三轮面试可能涉及的主要技术和问题: #### 1. **深入理解框架原理** 面试者需要掌握主流前端框架的核心机制及其底层实现方式。例如 Vue 或 React 的响应式系统、组件化架构的设思路等。 - 可能提问:Vue 中如何实现数据双向绑定?React Fiber 架构的作用是什么? 这些问题是评估候选人在框架层面是否有深刻认识的关键所在[^1]。 #### 2. **性能优化与工程实践** 性能优化是企业级项目中的重要环节,尤其是对于像滴滴这样的高并发场景下的产品来说更为关键。 - 关键知识点包括但不限于 Webpack 打包策略调整 (Tree Shaking, Code Splitting),图片懒加载处理方法,减少重绘回流操作技巧等方面的内容[^4]。 #### 3. **网络协议与浏览器工作原理** HTTP/HTTPS 协议细节、DNS 解析流程、TCP 握手过程等内容属于高频考点之一。此外还需要熟悉现代浏览器渲染引擎的工作机理——从 DOM 树构建到 CSSOM 结合再到最终绘制页面的过程都应有所涉猎[^2]。 #### 4. **设模式的应用** 工厂模式、单例模式等经典软件设模式在前端领域也有广泛的实际应用场景。比如 Webpack 使用了大量工厂模式来创建不同类型的模块实例;而某些复杂业务逻辑则可以通过观察者模式或者发布订阅模式来进行解耦[^3]。 #### 5. **算法与数据结构基础** 尽管不是所有公司都会特别强调这一部分,但对于顶尖科技企业的高级职位而言仍然是不可或缺的能力项。常见的有字符串匹配算法(KMP,Rabin-Karp)、图论最短路径算(Dijkstra,Floyd-Warshall)等问题解答练习可以帮助提升这方面实力水平。 ```javascript // 示例代码:KMP 字符串匹配算法简单实现 function kmpSearch(text, pattern){ let lps = computeLPSArray(pattern); var i=0; // index for text[] var j=0; // index for pattern[] while(i<text.length){ if(pattern[j]==text[i]){ j++; i++; if(j==pattern.length){ console.log("Found pattern at index "+(i-j)); j=lps[j-1]; } }else{ if(j!=0){ j=lps[j-1]; }else{ i=i+1; } } } } function computeLPSArray(pat){ var len=0; var lps=new Array(pat.length).fill(0); var i=1; while(i<pat.length){ if(pat[i]==pat[len]){ len++; lps[i]=len; i++; }else{ if(len !=0 ){ len=lps[len-1]; }else{ lps[i]=0; i++; } } } return lps; } ``` #### 6. **分布式系统的初步认知** 随着微服务架构日益普及,即使是专注于客户端工作的开发者也需要具备一定的后台思维模式转变准备。了解 RESTful API 设原则、GraphQL 查询语言特点对比分析等相关概念有助于更好地完成前后端协作任务。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值