浏览器原理篇

1.什么是XSS、CSRF,怎么预防？

（1）XSS(跨站脚本攻击)：攻击者将恶意代码植入到浏览器页面中，盗取存储在客户端的Cookie；

​ XSS分为：①存储型：论坛发帖、商品评论、用户私信；

​ ②反射型：网站搜索，跳转等；

​ ③DOM型：属于浏览器端JS自身漏洞，盗取用户数据后发送到攻击者网站；

​ XSS预防：从攻击者角度出发，XSS攻击包括 攻击者提交的恶意代码、浏览器执行的恶意代码；作为开发者，应尽量将不可行的数据作为html插入到页面上，尽量使用textContent、setContent; 如果是Vue/React技术栈，应在render渲染阶段避免innerHTML、outHTML。

（2）CSRF(跨站请求伪造)：攻击者诱导受害者进入第三方网站，利用受害者在被攻击网络获取的Cookie，冒充受害者进入攻击网站。

​ 攻击原理：①.用户浏览并登录信任网站A；

​ ②.验证通过，咋浏览器产生cookie；

​ ③.用户在没有登录A网站的情况下，访问第三方网站B;

​ ④.第三方网站伪造访问受信任网站请求；

​ ⑤.三方网站伪造访问受信任网站请求；

​ CSRF的预防：

​ ①Token验证（常用）：服务器给用户发送一个随机数Token，用户提交的表单中带着这个Token，服务器对Token进行验证，不合法则拒绝请求。 但是存在一个问题，需要给所有的请求都添加Token，操作比较繁琐。

​ ②隐藏令牌：把token隐藏在http头部，和token验证没什么区别，只是使用方式不同。

​ ③Referer验证： 只接受本站请求，服务器才做响应。

2.进程和线程的区别

进程：资源分配的最小单位；

线程：CPU调度的最小单位；

当浏览器创建一个Tab标签页的时候，就相当于创建了一个进程，一个进程包含多个线程，比如 浏览器渲染线程、JS引擎线程、HTTP请求线程，当发送一个请求的时候，其实就创建了一个线程，请求结束，线程销毁。

3.JS单线程有什么好处？

①节省内存。②节省上下文切换时间。③没有锁的问题。

JS在运行的时候可能会阻止UI渲染，这是因为JS可以修改DOM；如果在JS执行的时候UI线程还在工作，就会导致不能安全的渲染UI。

4.死锁产生的原因？

死锁是由于多个进程在远行过程中 因剥夺资源 照成的。

产生死锁的必要条件：互斥、请求和保持、不剥夺、环路等待。

预防死锁的方法：资源一次性分配；只要有一个资源得不到分配；不分配其他资源、可剥夺资源；资源有序分配。

5.对浏览器缓存进制的理解

​ 将网络资源存储在本地 memory cache(内存缓存)、disk cache(磁盘缓存)中，首次访问网站，浏览器会先在内存中查找，如果内存中没有，就去磁盘中查找，如果磁盘中还是没有，才进行网络请求。

​ 强缓存(Ctrl+F5)：如果缓存资源有效，直接使用缓存资源；如果缓存资源无效，则向服务器发送请求。

​ 协商缓存(Ctrl)：如果缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器来决定是否使用缓存。

6.Script标签中defer 和 async 的区别

async表示后续文档与JS脚本是异步加载的，多个带有async属性的标签不能保证加载的顺序；

defer表示JS脚本需要等待文档加载完成之后再加载，多个带有defer属性的标签会按顺序执行。

7.link 和 improt 的区别

link 不仅能引入CSS ，还能引入 RSS；import只能引入CSS；

link 引入的CSS在页面加载时同时加载；import 引入CSS需要等待文档加载完成后再加载；

link 可以通过操作JS操作DOM来改变样式；import却不行；

8.浏览器本地缓存方式及使用场景

Cookie：①结合Session使用，将SessionID存储到Cookie。②统计页面点击次数。

LocalStorage:①网站换皮肤。②不常变动的个人信息。

SessionStorage:只有在同一浏览器的同一窗口才能共享，更严格。①游客登录信息，临时浏览记录，网站关闭、销毁。

9.什么是浏览器同源策略？什么是跨域，怎么解决跨域？

同源指的是协议、域名、端口一致，只有路径不同，用于隔离潜在文件的安全机制。

跨域指的是协议、域名、端口不一致的服务器，资源会发起一个跨域的http请求。

解决跨域方式：

①JosnP:

②CORS(跨域资源共享)：是一个系统，由一系列传输的http组成，浏览器根据http头判断是否阻止JS代码获取跨域请求。

③naginx代理：

④node.js 中间件代理：

10.什么是事件？事件模型有哪些？

用户操作网页的Click、move 文档加载、窗口滚动、大小调整、鼠标事件。

①原始事件模型：onclick()同类型事件只能绑定一次，只支持冒泡。

②IE事件模型：处理阶段、冒泡阶段。

③标准事件模型：捕获阶段、处理阶段、冒泡阶段。

11.同步和异步的区别？

当一个进程在执行某个请求的时候，如果这个请求需要等待一段时间才能返回，

同步的话，这个进程会一直等待下去，知道消息返回才向下执行；

异步的话，这个进程不会一直等待下去，继续向下执行，当消息返回时，系统再通知进程进行处理。

12.宏任务和微任务有哪些？

宏任务：setTimeout、setInterval、dom事件、Ajax回调

微任务：promise、node中的Process.nextTick

13.V8浏览器回收机制

新生代算法：主要通过saverge算法，将内存一分为二，使用状态的空间为from空间，闲置状态的空间为To空间。

老生代算法：主要通过标记清除回收算法。

14.什么是内存泄露？

①程序未能释放已经不再使用的内存。

②不合理使用闭包，导致变量一直留在内存中。

③设置setInterval 定时器，忘记取消。

15.懒加载和预加载的区别？

懒加载：延迟加载、按需加载。

预加载：提前加载甚至不加载，用的时候再从缓存总取资源。

16.防抖和节流？

防抖：固定时间后再执行，如果再固定时间内重复触发，则取最后一次。

节流：固定时间内只执行一次，如果再固定内重复触发，则重新计时。

应用场景：

​ 防抖：注册功能手机号、邮箱验证，等待用户输入完在验证。

​ 节流：拖拽事件、滚动加载，

17.回流和重绘？

产生原因：

浏览器在渲染页面时会将 HTML 和 CSS 分别解析成 DOM 树和 CSSOM 树，然后合并进行排布，再绘制成我们可见的页面。如果在操作 DOM 时涉及到元素、样式的修改，就会引起渲染引擎重新计算样式生成 CSSOM 树，同时还有可能触发对元素的重新排布（简称“重排”）和重新绘制（简称“重绘”）。

回流：渲染树中部分元素尺寸、结构发生变化时，浏览器会重新渲染。

重绘：主要发生在CSSO树上，元素样式发生变化时，浏览器就会进行重绘。

应用场景：

​ 回流：①页面首次渲染。②窗口大小变化。③元素字体、尺寸，内容。

​ 节流：①color.background ②outline.vidibilety ③border-radius、box-shadow

触发条件：

回流：

• 修改元素边距、大小

• 添加、删除元素

• 改变窗口大小

重绘：

• 设置背景图片
• 修改字体颜色
• 改变Visibility属性值