前端面试题汇总

有不同答案或者有误的，请各位大佬纠正哈~

1. 给你一个需求，你要如何实现它？

参考内容：
https://blog.csdn.net/meng_lemon/article/details/98379672?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-7.baidujs&dist_request_id=1328741.25258.16168997356161239&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-7.baidujs

2. margin和padding的区别？
   

margin是外边距 padding是内边距
https://blog.csdn.net/timtian008/article/details/52536174?utm_source=app&app_version=4.5.5

3. display和visibility的区别？

display：none不占据空间 隐藏元素，在页面但是不保留位置 （回流+重绘）
visibility：hidden 隐藏元素，保留位置 （重绘）
回流和重绘是什么意思？
https://blog.csdn.net/qq_45092792/article/details/96965245?utm_source=app&app_version=4.5.5

4. 闭包是什么？

闭包就是在一个函数里面创建另一个函数。
内函数可以访问外函数的变量，因为内部函数的作用域链中包含了外函数的作用域。

5. Websocket了解多少？

1）HTML5出的协议
2）持久化协议
HTTP协议遵循一个require一个response的原则，只能客服端主动向服务端发送请求，服务端才能响应信息。
但是websocket是一个require多个response，客户端发送请求，跟服务端说我要建立websocket协议，有消息要告诉我（客户端）。服务端每次有新消息都会主动推送给客服端。

6. 如何适配分辨率？

一：响应式布局
(1)CSS3 @media 查询
针对不同的媒体类型定义不同的样式
如果文档宽度小于 300 像素则修改背景颜色(background-color):
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
https://www.runoob.com/cssref/css3-pr-mediaquery.html
1.根据不同的分辨率，引入不同的css样式表
2.在同一个css样式表中，根据不同的分辨率，写不同的css样式
(2)根据不同的分辨率，加载不同的CSS样式文件
但是这种办法不太友好，需要写多个CSS样式文件
二：自适应布局
网上解释：
1.什么是响应式布局
响应式布局就是实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。换句话说就是一个网站能够兼容多个终端，而不是为了每一个终端做一个特定的版本。
2.什么是自适应式布局：
自适应布局就是指能使网页自适应的显示在不同大小终端设备上的新网页设计方式及技术，它需要开发多套界面来适应不同的终端。
响应式布局看作是流式布局和自适应布局设计理念的融合。
https://www.cnblogs.com/yanayana/p/7066948.html

7. JS事件在触发时会经历哪些阶段？

捕获阶段：为某个元素绑定事件时，事件触发前会经历事件捕获阶段。
目标阶段：当事件从最外层一层层向下传递到目标节点的时候，最后在目标节点触发事件。
冒泡阶段：事件从目标元素向外一层一层传递至最外层元素

8. 浏览器在加载外链的JS脚本时，会阻塞页面渲染吗？

首先来了解一下页面的加载和渲染过程：
(1)浏览器通过HTTP协议请求服务器，获取HMTL文档并开始从上到下解析，构建DOM；
(2)在构建DOM过程中，如果遇到外联的CSS和js，则暂停文档解析，创建新的网络连接，并开始下载CSS和JS；
(3)CSS下载完成后，构建CSSDOM；JS下载完成后，解释并执行，然后继续解析文档构建DOM
(4)完成文档解析后，将DOM和CSSDOM进行关联和映射，最后将视图渲染到浏览器窗口
在这个过程中，脚本文件的下载和执行是与文档解析同步进行，也就是说，它会阻塞文档的解析，如果控制得不好，在用户体验上就会造成一定程度的影响。
在script中声明两个不太常见的属性：defer和async：
defer：用于开启新的线程下载脚本文件，并在文档解析完成后执行js。只适用于外联脚本
async：HTML5新增属性，用于异步下载js，下载完毕立即解释执行代码。只适用于外联脚本
多个脚本定义属性，不能保证顺序

9. XSS跟CSRF的攻击原理？

XSS–跨站脚本攻击(Cross Site Scripting);
当用户浏览此网页时，脚本就会在用户的浏览器上执行，进而达到攻击者的目的。比如获取用户的 Cookie、导航到恶意网站、携带木马等。
CSRF–跨站请求伪造（Cross-site request forgery）；
所有的输入都是有害的，我们要对所有的输入在客户端进行校验。对输入进行过滤，对输出进行编码
查看这篇文章吧，写得挺详细的
https://blog.csdn.net/zl834205311/article/details/81773511?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522161780354616780266239122%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=161780354616780266239122&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_allfirst_rank_v2~rank_v29-5-81773511.first_rank_v2_pc_rank_v29&utm_term=XSS%E8%B7%9FCSRF%E7%9A%84%E6%94%BB%E5%87%BB%E5%8E%9F%E7%90%86

10.什么是虚拟DOM？

虚拟DOM 表现为一个 Object对象。操作DOM的代价仍旧是昂贵的，频繁操作还是会出现页面卡顿，影响用户的体验。
虚拟 DOM 最大的优势在于抽象了原本的渲染过程，实现了跨平台的能力。
diff 算法，减少 JavaScript 操作真实 DOM 的带来的性能消耗。