前端练习八股整理-浏览器原理

浏览器原理

一、从输入URL开始到我们看到页面都发生了什么，越具体越好。

1.剖析URL：分析须要利用的传输协媾和请求资源的路径。假如输入的URL的协议名或主机名不合法，内容传给搜索引擎。假如有非法字符，先辈行转义。
2.缓存判断：假如请求的资源在缓存里且没有失效则直接利用，否则向服务器发起新请求。
3.DNS剖析：（获取域名的IP地址）起首判断本地服务器缓存是否有该域名的IP，然后向本地DNS服务器发起请求，缓存里也没有的话向根域名服务器发起请求，得到顶级域名服务器的地址后再发起请求，得到权势巨子域名服务器后再发起请求得到IP，本地DNS服务器把IP返回给用户。用户->本地DNS域名服务器（递归请求），本地DNS服务器->各级域名服务器（迭代请求）。
4.获取MAC地址：将IP地址与本机子网掩码相与，判断是否有与请求主机再同一个子网里，假如是，用ARP获取MAC地址；否则，请求转发给网关代为转发，此时同样用ARP获取MAC地址，目标MAC地址为网关的地址。
5.TCP三次握手：起首客户端向服务器发送一个SYN（Synchronize Sequence Numbers，同步序列号）连接请求报文段和一个随机序号，服务端收到请求后向客户端发送一个SYN ACK报文段和一个随机序号，确认连接请求。客户端收到确认应答后，进入连接建立的状态，同时向服务器发送一个ACK确认报文段，服务器端收到确认后也进入连接建立状态。
6.HTTPS握手：（TLS四次握手）起首由客户端向服务器端发送利用协议的版本号、一个随机数和可利用的加密方法。服务器端收到后，确认加密的方法，发送一个随机数和自己的数字证书。客户端先查抄数字证书是否有效，有效的话生成一个随机数，并用证书中的公钥对随机数加密后发给服务器端，另有一个前面全部内容的hash值供服务器查验。服务器端利用私钥对数据进行解密，同时向客户端发送一个前面全部内容的hash值供查验。这时间双方都有了三个随机数，按照之前约定的方法将三个随机数生成一把私钥，以后通讯前用这个私钥将数据加密后再传输。
7.返回数据：当前页面请求发到服务端后，服务端会返回一个html文件。
8.页面渲染：起首根据HTML文件构建DOM树，根据css创建CSSOM树，碰到script标签要注意（没有defer或async属性的话会造成页面渲染的阻塞）。用DOM树和CSSOM树构建渲染树，根据渲染树进行布局。末了用浏览器的UI接口对页面进行绘制，页面就表现出来了。
9.TCP四次挥手：客户端认为数据发送完成，向服务器发送连接释放请求。服务端担当请求，告诉应用层要释放TCP连接，然后发送ACK包，进入CLOSE_WAIT状态。表明客户端到服务端的连接已经释放不再担当客户端数据（服务端仍可以发送）。服务器端发送完毕后向客户端发送链接释放请求，进入LAST_ACK状态。客户端收到请求，发送确认应答，进入TIME_WAIT状态。该状态持续2MSL时间，这段时间内没有收到服务端的重发请求的话，进入CLOSED状态。服务端收到确认应答后也进入CLOSED状态。
二、浏览器缓存策略

1.强缓存：不须要向服务器发送请求，直接试用本地缓存。
通过HTTP响应头中的Cache-Control（以秒为单位表示资源有效期）【优先级更高】、Expires（指定资源的绝对逾期时间）控制。
2.协商缓存：须要向服务器发送请求验证资源是否有效。返回304用本地缓存，返回200更新资源。
通过HTTP响应头：last-Modified/if-Modified-Since:基于文件末了修改时间；ETag/If-None-Match:基于文件内容哈希值
最佳实践：HTTP：协商缓存；CSS、JS、图片：强缓存；API请求：看业务需求。
内存缓存：频仍访问、实时处理、临时数据
硬盘缓存：不频仍反问、大容量数据、持久化存储
三、XSS攻击

XSS攻击指的是跨站脚本攻击，是一种代码注入攻击。
反射型 XSS 跟存储型 XSS 的区别是：存储型 XSS 的恶意代码存在数据库⾥，反射型 XSS 的恶意代码存在 URL ⾥。
DOM 型 XSS 跟前两种 XSS 的区别：DOM 型 XSS 攻击中，取出和执⾏恶意代码由浏览器端完成，属于前端JavaScript ⾃身的安全毛病，⽽其他两种 XSS 都属于服务端的安全毛病。
四、如何防御XSS攻击

1.从浏览器的执行来预防：纯前端，不利用服务器渲染；对插入到HTML中的代码做好充分的转义，对可能出现的恶意代码环境进行判断。
2.利用CSP(内容安全策略)：建立一个白名单。
3.对敏感信息的掩护：cookie利用http-only，脚本无法获取。也可以利用验证码避免脚本伪装用户。
五、CRSF攻击

CSRF攻击指的是跨站请求伪造攻击，攻击者诱导用户进入一个第三方网站，然后该网站向被攻击网站发送跨站请求。假如用户在被攻击网站中生存了登录状态，那么攻击者就可以利用这个登录状态，绕事背景的用户验证，假冒用户向服务器执行一些操作。CSRF 攻击的本质是利用 cookie 会在同源请求中携带发送给服务器的特点，以此来实现用户的假冒。
攻击范例：
GET 范例的 CSRF 攻击：比如在网站中的一个 img 标签里构建一个请求，当用户打开这个网站的时间就会自动发起提交。
POST 范例的 CSRF 攻击：比如构建一个表单，然后隐藏它，当用户进入页面时，自动提交这个表单。
链接范例的 CSRF 攻击：比如在 a 标签的 href 属性里构建一个请求，然后诱导用户去点击。
防范本领：
1.同源查抄 2.利用CSRF Token 3.对Cookie进行双重验证 4.在设置 cookie 属性的时间设置 Samesite ，限定 cookie 不能作为被第三方利用
六、有哪些可能引起前端安全的问题？

1.跨站脚本（XSS）：一种代码注入方式
2.iframe的滥用
3.跨站点请求伪造（CSRF）
4.恶意第三方库
七、僵尸进程和孤儿进程

僵尸进程（zombie process）：子进程比父进程先结束，而父进程又没有释放子进程占用的资源，导致子进程的进程描述符仍然生存在系统中。
孤儿进程（orphan process）：父进程退出了，而他的一个或多个子进程还在运行，那这些子进程都会成为孤儿进程。孤儿进程将被init进程（进程号为1）所收养，并由init进程对它们完成状态收集工作。
八、点击革新按钮或者按 F5、按 Ctrl+F5 （欺压革新）、地址栏回车有什么区别？

地址栏回车： 浏览器发起请求，按照正常流程，本地查抄是否逾期，然后服务器查抄新鲜度，末了返回内容。
点击革新按钮或者按 F5：浏览器直接对本地的缓存文件逾期，但是会带上 If-Modifed-Since，If-None-Match，这就意味着服务器会对文件查抄新鲜度，返回效果可能是 304，也有可能是 200。
用户按 Ctrl+F5（欺压革新）：浏览器不光会对本地文件逾期，而且不会带上 If-Modifed-Since，If-None-Match，相当于之前从来没有请求过，返回效果是 200。
九、渲染过程碰到JS文件如何处理？

构建DOM时，HTML剖析器若碰到了Javascript，会暂停文档的剖析，将控制权交给JavaScript引擎。
优化首屏加载：1.script标签放在body底部。 2.给script标签添加defer或者async属性。
（须要操作 DOM 或依赖其他脚本的代码利用 defer；独立的、不依赖 DOM 和其他脚本的代码利用 async；假如脚本之间有依赖关系，不要利用 async）
十、前端储存的方式（都是同源策略）

1.Cookie(HTML5前)：限定在4KB，可以设置逾期时间，自动包含在HTTP请求头中发送给服务器。（存储小型数据：用户的登岸状态、跟踪信息）
2.localStorage(HTML5)：巨细为5MB，键值对存储，永久储存（需手动删除）。（存储持久的用户偏好设置：主题颜色）
3.sessionStorage：巨细为5MB，仅页面会话期间有效，作用域在当前窗口/标签页有效。（会话级别数据：表单输入信息）
4.IndexedDB：没有巨细限定，可存储各种数据（包含二进制数据）。（大量结构化数据：离线应用数据）
5.Session：存在服务端上，与用户唯一的会话ID绑定，一定时间内没有活动会自动逾期。（存储用户的登录状态、购物车信息）
十一、事件是什么？事件模型？

事件是用户操作网页时发生的交互动作，比如click/move，事件除了用户触发的动作外，还可以是文档加载，窗口滚动和巨细调整。
DOM0级事件模型：直接在dom对象上注册事件名称。
IE事件模型：事件处理：起首执行目标元素绑定的监听事件；
事件冒泡： 从目标元素冒泡到document，依次查抄颠末的节点是否绑定了事件监听函数，假如有则执行。
用attackEvent来添加监听函数，可以添加多个，会按次序依次执行。
DOM2级事件模型：事件捕获：从document不停向下传播到目标元素。事件处理、事件冒泡。
用addEventListener来监听，第三个参数制动事件是否在捕获阶段执行。
十二、事件循环的原理

JavaScript是一门单线程的语言，实现单线程非阻塞的方法就是事件循环。
js的任务分为同步任务和异步任务，其中同步任务都是宏任务，异步任务分为宏任务和微任务。
1.起首执行同步代码，这是宏任务。
2.执行过程中，将异步任务中的微任务参加微任务队列末了执行，异步任务中的宏任务参加下一轮的宏任务队列执行。
3.执行完全部同步代码，执行异步代码的微任务，如有须要会渲染页面。
4.进行下一轮Event Loop，先执行异步代码的宏任务。
常见的微任务：
1.Promise.then()、async/await中的异步操作
2.MutationObserver回调（浏览器环境）
3.queueMicrotask：添加的微任务
4.process.nextTick(Node.js特有，优先级最高)
常见的宏任务：(宏任务时间粒度比较大，执行的时间间隔不能精确控制，不太符合一些高实时性的需求)
1.setTimeout/setInterval回调
2.UI渲染
3.I/O操作（文件读写、网络请求）
4.postMessage、MessageChannel消息通道
5.setImmediate（Node.js特有）
6.事件回调（如click、scroll等DOM事件）
7.requestAnimationFrame（浏览器特有）
以下图片出自白哥学前端：

十三、浏览器跨域和服务器跨域

跨域是指浏览器的同源策略限定了差别源之间的交互，当一个网页尝试从与其差别的源（域名、协议或端口）加载资源时，就会碰到跨域。
办理方案：
1.CORS（跨域资源共享）【最常用】
在服务端设置响应头
（Node.js示例）

1. app.use((req, res, next) => {
2.   res.setHeader('Access-Control-Allow-Origin', 'https://example.com');
3.   res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
4.   res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
5.   res.setHeader('Access-Control-Allow-Credentials', 'true');
6.   
7.   // 处理预检请求
8.   if (req.method === 'OPTIONS') {
9.     return res.sendStatus(200);
10.   }
11.   next();
12. });

复制代码

2.代理服务器【开发常用】
开发环境配置代理（Vue CLI）

1. // vue.config.js
2. module.exports = {
3.   devServer: {
4.     proxy: {
5.       '/api': {
6.         target: 'http://backend-server.com',
7.         changeOrigin: true,
8.         pathRewrite: {
9.           '^/api': ''
10.         }
11.       }
12.     }
13.   }
14. }

复制代码

Nginx反向代理配置

1. server {
2.   listen 80;
3.   server_name example.com;
4.   
5.   location /api/ {
6.     proxy_pass http://backend-server.com/;
7.     proxy_set_header Host $host;
8.     proxy_set_header X-Real-IP $remote_addr;
9.   }
10. }

复制代码

3.JSONNP（仅限GET请求）
前端实现：

1. function jsonp(url, callbackName, callback) {
2.   const script = document.createElement('script');
3.   script.src = `${url}?callback=${callbackName}`;
4.   window[callbackName] = callback;
5.   document.body.appendChild(script);
6. }
8. // 使用
9. jsonp('http://other-domain.com/api', 'handleData', (data) => {
10.   console.log(data);
11. });

复制代码

服务端响应：

1. // 需返回JavaScript函数调用
2. app.get('/api', (req, res) => {
3.   const callbackName = req.query.callback;
4.   const data = { message: 'Hello JSONP' };
5.   res.send(`${callbackName}(${JSON.stringify(data)})`);
6. });

复制代码

4.websocket包（浏览器端不受同源策略限定，可在服务器端分析origin）

1. const socket = new WebSocket('ws://other-domain.com/socket');
3. socket.onmessage = (event) => {
4.   console.log('Received:', JSON.parse(event.data));
5. };

复制代码

总结：
1.开发环境：利用代理服务器（如Vue CLI/webpack-dev-server代理配置）
2.生产环境：
同域名部署：前后端利用相同域名（前端example.com，后端example.com/api）
跨域名部署：配置CORS + 可能须要反向代理
3.第三方API：优先利用官方提供的JS SDK（通常已处理跨域问题）
十四、预检请求

预检请求（Preflight Request）是 CORS（跨域资源共享）机制中的一种特殊范例的 HTTP 请求，用于在实际请求之前询问服务器是否答应跨域请求。这是浏览器为了确保跨域请求的安全性和兼容性而自动发起的一种机制。
触发条件：
1.请求方法不是 GET、HEAD 或 POST。
2.请求中包含自定义的 HTTP 头信息（如 Authorization、Content-Type 等非简单头部字段）。
3.请求的 Content-Type 不是以下范例之一：application/x-www-form-urlencoded、multipart/form-data、text/plain。
流程：1.服务器发送OPTIONS请求2.服务器响应3.浏览器处理响应（不答应的话浏览器会报错）

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。