秋招面试—浏览器原理篇
浏览器原理篇
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属性值