前端面试题

前端面试题

目前没有做分类，后面会修改，如有不足之处请您指正

一、怎样实现一个元素居中

1. 正常流布局（利用负外边距）
2. 利用position定位（利用负外边距）
3. 利用positon定位和css3中transform(-50% -50%)，自身移动一半
4. 利用flex定位，设置横向和竖向定位 justify-content: center;align-items: center;
5. 通过js计算得出

二、前端储存有哪些，有什么区别

前端储存有cookien sessionStorage 和localstorage

1. 相同点：都是储存在客户端
2. 不同点：
   • 大小不一样：cookie不能超过4K，其他比cookie大，可达5M左右
   • 有效时间不一样：cookie过期时间之前有效，sessionStorage在浏览器窗口关闭后删除，localStorage主动删除才会消失
   • 数据与服务器之间的交互方式：cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端；sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

三、get和post有什么区别

1. 没有任何前提和不使用任何规范下，http协议并没有规定请求方法必须是什么，但随意的请求方法服务器可能无法识别，只是请求头中的一个字符串，get和post具有相同的语法，只有语义不同，get是获取数据，post是提交数据。

2. 实际上在浏览器中就会有各种不同；

   因为get请求不读请求体，业务数据从path的search或者hash中获取，而post请求读取请求体，业务数据从请求体中获取所以产生这种区别

   • get参数是放在地址栏中，post是在放在请求体重
   • get房子啊地址栏中所以安全性比较差
   • get在地址栏中所以会有大小限制（Google(chrome)：URL最大长度限制为8182个字符。），post是无限的
   • GET请求后，按后退按钮、刷新按钮⽆影响，post数据会被重新提交。
   • GET编码类型：application/x-www-form-url，post的编码类型：有很多种。 encodeapplication/x-www-form-urlencoded multipart/form-data
   • GET历史参数会被保留在浏览器⾥，psot不会保存在浏览器中的。

四，你知道的状态码有哪些？

1. 1xx：服务器接收到请求，但是还需要浏览器继续操作
2. 2xx: 各种成功

 - 200 ：一切正常

3. 3xx：重定向

• 301：资源永久重定向
• 302：资源临时重定向你的请求我收到了，但是呢，你要的东西不在这个地址了，我已经永远的把它移动到了一个新的地址，麻烦你取请求新的地址，地址我放到了请求头的Location中了
• 304：文档内容未被修改。你的请求我收到了，你要的东西跟之前是一样的，没有任何的变化，所以我就不给你结果了，你自己就用以前的吧。啥？你没有缓存以前的内容，关我啥事

4. 4xx ：各种错误

• 400：语义有误，当前请求无法被服务器理解。你给我发的是个啥啊，我听都听不懂
• 403 ：服务器拒绝执行。你的请求我已收到，但是我就是不给你东西
• 404 ：资源不存在。你的请求我收到了，但我没有你要的东西

5. 5xx ：服务器端发生错误

• 500 ：服务器内部错误。你的请求我已收到，但这道题我不会，解不出来，先睡了

六、怎样解决跨域问题

​ 问：什么是跨域 —> 协议，域名，端口号，只要有一个不一样就算跨域

1. 浏览器和服务器之间的跨域

• jsonp : 不是w3c标准里的,原理： script标签身上的src属性是不受同源策略的限制的,src=“http://www.baicu.com?”.
• 服务器代理
• CORS >>> cross-origin resource sharing 跨域资源共享,后端来设置一个响应头 access-control-allow-origin: ‘http://www.duyiedu.com’,浏览器先发出请求到服务器 返回的过程中 判断是否是同源

2. 服务器和服务器之间跨域
   • iframe
   • document.domain >>> j基础域名相同的页面可以跨域例如：id.qq.com 和 qq.com
3. 后端配合前端
   • jsonp（正常的情况，返回的数据都是JSON格式。JSONP是⼀种特殊的格式。）
   • 后端设置Access-Control-Allow-Origin属性以⽀持跨域。
4. 后端不配合前端跨域
   • frame（只能显示，不能控制）
   • 通过后端代理（自己的后端）

七、对比一下CommonJS和ES Module

1. commonjs是社区模块化标准，只有nodejs支持，ESmodule是官方模块化标准nodejs和浏览器都支持；
2. commonjs是动态模块化标准，意味着依赖关系是在运行过程中确定的，在导入导出模块时候不受书写位置限制的；而ESmodule是静态模块化标准，在代码运行之前需要确定依赖关系，因此要将依赖写在文件最顶层；
3. commjs本质是运行在一个函数中的，一个可函数访问到其他的参数，如：exports、module、__dirname等；
4. this的指向不同，commonjs指向的是exports；
5. CommonJS和ES Module都使用了缓存，保证每个模块仅执行一次

八、怎样理解JS异步

JS是一个单线程的语言，意味着宿主仅为其分配了一个执行线程。
而在实际的开发中，JS有时需要执行一些耗时的操作，比如等待一个DOM事件发生、等待网络通信完成、等待计时结束等等。如果在执行线程上去等待，就浪费线程的宝贵执行时间，阻塞后续操作。更可怕的是，由于浏览器的GUI线程和JS执行线程是互斥的，这就导致浏览器界面会因为JS的等待处于卡死状态。
因此，JS通过异步来解决这个问题，当需要等待的时候，通知宿主的其他线程去做处理，执行线程则继续后续执行。当其他线程完成处理后，会发出通知，此时执行线程转而去执行事先定义好的回调函数即可。
异步的方式充分了解放了执行线程，让执行线程可以毫无阻塞的运行，也就避免了浏览器宿主因为等待操作完成出现的卡死现象。

九、在浏览器地址栏中输入一个页面地址，按下回车键后发生了什么？

1. URL解析：浏览器对输入的网址做初步检测 > 将地址补齐，默认使用http
2. DNS查询：首先看浏览器缓存>本机host文件>家里路由器>上一级路由城市路由
3. TCP连接：
4. 处理请求：服务器接收到请求，将一个HTML页面代码组装到消息体中，响应给浏览器
5. 接受响应：浏览器拿到服务器的响应后，丢弃掉当前页面，开始渲染消息体的html代码。浏览器之所以直到这是一个html代码，是因为服务器的响应头指定了消息类型为text/html
6. 渲染页面：浏览器在渲染页面的过程中，发现有其他的嵌入资源，如CSS、JS、图片等，浏览器使用不阻塞渲染的方式，重新向服务器发送对该资源的请求，拿到响应结果后根据Content-Type做相应处理，当所有的资源都已下载并处理后，浏览器触发window.onload事件

十、五层网络模型

应用层(Http协议，DNS协议)—>运输层(TCP协议、UDP协议)—>网络层(IP协议、)—>数据联络层(mac地址)—>物理层(是用什么介质)

十一、vue3做了那哪些优化

1. 静态提升：将没有添加动态数据节点(不是组件),在render函数编译中，添加到顶部，不需要每次重新加载rander函数的时候生成虚拟节点；
2. 字符串预处理化：将连续超过20个静态节点编程字符串提升到render函数顶部；
3. 事件函数处理：例如@click=“handleClick”，因为函数handleClick并不会变化，所以使用缓存将函数存到变量中，当再次运行render函数时候，先查看是否有事件函数缓存;
4. Block Tree:vue在新旧两棵树进行对比时候，vue只会对比使用到动态数据的节点进行比较；
5. PlaceFlag：在新旧两棵树进行对比动态节点时候，vue在render函数中会记载相关的动态数据进行标记，例如：
   {{name}}
   ,里面会记载：3 /* text class*/，vue在后面更新时候只会更改text和class；

十二、阐述一下对vue虚拟dom的理解

1. 虚拟DOM本质就是一个js描述对象，主要用于描述视图的界面结构；
2. 在vue中，每一个组件中都会有一个render函数，每一个render函数都会生成一个虚拟DOM树，就代表一个组件就可以生成一棵虚拟DOM树；
3. 因为数据的更新，删除，添加都会导致render函数的重新渲染，都会重新生成虚拟DOM树，如果使用真实的DOM更新，删除，添加都会极大的消耗性能，使用虚拟DOM就大大降低渲染效率；
4. .在一个组件实例首次被渲染时，它先生成虚拟dom树，然后根据虚拟dom树创建真实dom，并把真实dom挂载到页面中合适的位置，此时，每个虚拟dom便会对应一个真实的dom。 如果一个组件受响应式数据变化的影响，需要重新渲染时，它仍然会重新调用render函数，创建出一个新的虚拟dom树，用新树和旧树对比，通过对比，vue会找到最小更新量，然后更新必要的虚拟dom节点，最后，这些更新过的虚拟节点，会去修改它们对应的真实dom。这样一来，就保证了对真实dom达到最小的改动。
5. vue框架中有一个compile模块，它主要负责将模板转换为render函数，而render函数调用后将得到虚拟dom。
   编译的过程分两步： 将模板字符串转换成为AST和 将AST转换为render函数
   如果使用传统的引入方式，则编译时间发生在组件第一次加载时，这称之为运行时编译。
   如果是在vue-cli的默认配置下，编译发生在打包时，这称之为模板预编译。
   编译是一个极其耗费性能的操作，预编译可以有效的提高运行时的性能，而且，由于运行的时候已不需要编译，vue-cli在打包时会排除掉vue中的compile模块，以减少打包体积
   模板的存在，仅仅是为了让开发人员更加方便的书写界面代码
   vue最终运行的时候，最终需要的是render函数，而不是模板，因此，模板中的各种语法，在虚拟dom中都是不存在的，它们都会变成虚拟dom的配置

十三、对vue中v-model的理解

1. v-model本质是一个语法糖，一般用在表单元素和自定义组件上
2. 如果使用在表单元素上展开写法取决于具体的元素，例如普通的文本框会生成属性value和事件input；用于多选框或者当选会生成value和change事件；
3. 如果使用在自定义组件上，会生成value属性和input事件；
4. 在vue3中v-model使用在自定义组件上：将value改为modelValue，input改为update:modelValue

十四、