2021新出炉前端面试题系列一

1. 简单请求和复杂请求

axios都是复杂请求，ajax可以是简单请求

   根本区别在于：是否触发cors的预检请求
   
   简单请求：
   1、请求方法：get、post、head；
   2、http的头信息不超过以下几个字段：
     - Accept
     - Accept-Language
     -   Content-Language
     -   Last-Event-ID
     -   Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
   复杂请求：非简单请求就是复杂请求。
   复杂请求在正式请求前都会有预检请求（options请求），用于向服务器请求权限信息。
复制代码

2. 事件穿透

什么是事件穿透：

页面俩元素A和B,B在A的上面.在B的上面注册了touchstart事件,回调函数中是让B元素隐藏.
当我们点击B元素的时候,除了B被隐藏外,A的click事件也被触发了.这是因为在移动端浏览器中,
事件执行顺序是 `touchstart` => `touchmove` => `touchend` => `click`，
click是有300ms的延迟.当B的touchstart事件触发后,B被隐藏了,300ms之后,
浏览器触发了click事件,此时的事件已经被派发到了A元素身上.
复制代码

解决事件穿透的方案：

1、event.preventDefault()阻止默认行为；

2、使用pointer-events属性

先设置下层元素的 pointer-events 为 none,然后设置一个定时器,在一定的时间后将下层元素的属性值改为auto 即可。

3、touch-action: manipulation
浏览器只允许进行滚动和持续缩放操作。任何其它被auto值支持的行为不被支持。启用平移和缩小缩放手势，但禁用其他非标准手势，例如双击以进行缩放。 禁用双击可缩放功能可减少浏览器在用户点击屏幕时延迟生成点击事件的需要。

4、在vue项目中怎么处理

click.stop(修饰符)
//阻止单击事件继续传播 
<a v-on:click.stop="doThis"></a>
复制代码

3. 301和302的区别

   301是永久重定向   
   302是临时重定向
复制代码

4. 伪类和伪元素的区别

根本区别在于：它们是否创建了新元素。

伪元素：不存在在dom文档中，是虚拟的元素，是创建新的元素，代表某个元素的子节点。

举个?：e:before e:after e:selection e:placeholder

伪类：存在dom文档中，逻辑上存在于文档树中无须标识。

举个?：e:link e:not e:hover e:focus e:target e:active e:disabled

5. import和required区别

 import最后会通过babel转化为es5的require

1、规范不同
   require是commonjs规范
   import是es6的语法标准
2、调用不同
   require是运行时调用
   import是编译时调用
3、本质不同
   require本质上是赋值的过程
   import本质上是解构的过程
复制代码

6. 点击一个按钮会触发什么事件？怎么判断是执行事件冒泡还是事件捕获？

 by the way,面试官一上来第一个问题，满脸问号？？？，这是问的啥，（dom事件流的三个阶段）。
 1、捕获阶段
    事件从Document节点自上而下向目标节点传播的阶段；
 2、目标阶段
    真正的目标节点正在处理事件的阶段；
 3、冒泡阶段
    事件从目标节点自下而上向Document节点传播的阶段；
    
 判断冒泡还是捕获：
 addEventListener(type, listener, [useCapture])的第三个参数usCapture，
 第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；
 如果是false（不写默认是false），表示在事件冒泡阶段调用事件处理程序。
复制代码

7、http和https的区别

1、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。
2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
4、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。
复制代码

8. 请求的content-type有哪些类型，文件是以什么类型传递的

application/json;
text/plain;
multipart/form-data:表单上传文件时格式
text/xml
复制代码

9. 语义化标签的作用

1、代码结构: 使页面没有css的情况下，也能够呈现出很好的内容结构
（主要靠title标签和meta中的keywords、description）有利于SEO
2、提升用户体验： 例如title、alt可以用于解释名称或者解释图片信息，以及label标签的灵活运用。
3、便于团队开发和维护: 语义化使得代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化。
4、方便其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。

举?：<header>  <nav>  <main>  <aside>  <section>  <strong>
复制代码

先整理了一部分，后续持续更新，真实面试遇到，辛苦点个赞哈～

此时直播中英仙座的流星雨，有幸在看到了十几颗流星，许个愿持续努力，找到心仪的工作；

写到此刻，刚好音乐响起起张信哲的信仰，莫名感动，晚安～