前端面试汇总

站长

2022年09月24日 16:36 · 阅读数 38

1什么是w3c标准w3c标准不是单一的标准而是一系列标准的集合。主要包括，结构，表现，行为3部分结构标准的要求1要有文档类型声明2定义语言编码3标签字母小写，4标签要闭合，5不能随意嵌套。6图片要添加alt属性7特殊符号用编码表示Css要求数量单位不能省略Javascript要求变量声明规范变量声明可以以数字字母下划线开头，不能使用关键字保留字2 javascript数据类型有哪些Javascript 数据类型可以分为两大类基础数据类型引用型数据类型基础数据类型包括，字符串，布尔数字 undefined null symbol引用数据类型包括内置对象，window对象document文档对象模型对象，内置对象，自定义对象等。3原生ajax分为几步实现手写ajax1实例化xhr对象Var xhr = new XMLHttpRequest()2设置请求行Xhr.open(method,url,async)method请求方法，url请求路径，async是否异步3设置请求头如果为get无需设置Xhr.setRequetHeader()如设置请求方法未post 则设置 Content-Type属性常见如下application/jsonapplication/x-www-form-urlencodedmultipart/form-data 4设置请求体Xhr.send(data)如请求方式为get不用设置data如Content-type="application-json"转为data JSON.stringify(data)如Content-Type="application/x-www-form-urlencoded"转为 xhr.send(qs.stringify(data))5监听请求状态Xhr.onreadystatechange = function(){if(xhr.readyState === 4){ //代表准备好从服务器返回数据

if(xhr.status === 200){}真实返回

}}4http相关常见的请求方式GET：用于请求访问已经被URI（统一资源标识符）识别的资源，可以通过URL传参给服务器POST：用于传输信息给服务器，主要功能与GET方法类似，但一般推荐使用POST方式。PUT：传输文件，报文主体中包含文件内容，保存到对应URI位置。HEAD：获得报文首部，与GET方法类似，只是不返回报文主体，一般用于验证URI是否有效。DELETE：删除文件，与PUT方法相反，删除对应URI位置的文件。OPTIONS：查询相应URI支持的HTTP方法

post，get请求有什么区别get更适合获取post适合上传get 参数放在请求行中的uri中传递 ?a=123&b=456post参数放在请求体中传递get传递的内容较少post传递内容较多get只能传递ASCII字符所以传递中文可能乱码post无限制get安全性低post安全性相对较高get会缓存post不会缓存

常见的状态状态码1xx：相关信息2xx：操作成功3xx：重定向4xx：客户端错误5xx：服务器错误GET: 200 OKPOST: 201 CreatedPUT: 200 OKPATCH: 200 OKDELETE: 204 No Content400 Bad Request：服务器不理解客户端的请求，未做任何处理。401 Unauthorized：用户未提供身份验证凭据，或者没有通过身份验证。403 Forbidden：用户通过了身份验证，但是不具有访问资源所需的权限。404 Not Found：所请求的资源不存在，或不可用。405 Method Not Allowed：用户已经通过身份验证，但是所用的 HTTP 方法不在他的权限之内。410 Gone：所请求的资源已从这个地址转移，不再可用。415 Unsupported Media Type：客户端要求的返回格式不支持。比如，API 只能返回 JSON 格式，但是客户端要求返回 XML 格式。422 Unprocessable Entity ：客户端上传的附件无法处理，导致请求失败。429 Too Many Requests：客户端的请求次数超过限额500 Internal Server Error：客户端请求有效，服务器处理时发生了意外。503 Service Unavailable：服务器无法处理请求，一般用于网站维护状态。以下要记住 POST返回201状态码，表示生成了新的资源；DELETE返回204状态码，表示资源已经不存在。301永久重定向 302 307临时重定向404资源不存在 403没有权限 500服务端报错 503服务器维护http特点无状态无状态协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息。状态协议解决办法：通过1、Cookie 2、通过Session会话保存。无连接无连接,限制每次连接只处理一个请求,服务器处理完客户的请求,并收到用户的应答后就断开连接。节省带宽TCP 三次握手和四次挥手建立链接小明给小红打电话，接通了后，小明说喂，能听到吗，这就相当于是连接建立。小红给小明回应，能听到，你能听到我说的话吗，这就相当于是请求响应。小明听到小红的回应后，好的，这相当于是连接确认。在这之后小明和小红就可以通话/交换信息了。四次挥手在连接终止阶段使用四次挥手，连接的每一端都会独立的终止。下面我们来描述一下这个过程。小明对小红说，我所有的东西都说完了，我要挂电话了。小红说，收到，我这边还有一些东西没说。经过若干秒后，小红也说完了，小红说，我说完了，现在可以挂断了小明收到消息后，又等了若干时间后，挂断了电话。一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么？1、首先，在浏览器地址栏中输入url2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。3、在发送http请求前，需要域名解析(DNS解析)，解析获取相应的IP地址。4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。5、握手成功后，浏览器向服务器发送http请求，请求数据包。6、服务器处理收到的请求，将数据返回至浏览器7、浏览器收到HTTP响应8、四次挥手断开链接。9、浏览器渲染，读取页面内容，解析html源码10、生成dom树调用js解析器应用样式。5 script标签中的 defer async DOMContentLoadedhtml5之前js代码同步执行 DOMContentLoaded htm5新window新事件 HTML 文档被加载和解析完成执行渲染树合并之前script 标签中新增两个属性 defer asyncdefer 延迟渲染不会阻塞dom渲染按顺序 DOMContentLoaded后执行async 异步渲染不会阻塞dom渲染谁先有结果先执行谁 DOMContentLoaded 先执行不依赖async相同点都不会阻塞html dom渲染解析5 前端性能优化资源方面，对资源进行优化不依赖webpack1减少累赘代码代码模块化开发复用率高2减少http请求3减少dom操作用css动画代替js6documentFragment 文档碎片。5防抖和节流3CDN将静态资源托管到内容分发网络4图片懒加载预加载图片转为base64 将图片转为自体图标服务端渲染Webpack优化1构建打包速度的方式 1优化Loader的文件搜索范围 cache-loader 进行缓存 2 happyplugin 开启多线程构建3 DllPlugin特定的库提前打包引用 4代码压缩和抽离 css代码抽离 css-minimizer-webpack-plugincss代码压缩 mini-css-extract-pluginjavascript uglifyjs-webpack-plugin代码压缩 splitChunks进行bundle.js分割javascript SplitChunksPlugin 插件提取公共第三⽅库javascript tree-shaking构建体积的优化方式1 按需加载 import('./') 路由懒加载异步组件的使用2 tree-shaking3 代码压缩和抽离 css代码抽离 css-minimizer-webpack-plugincss代码压缩 mini-css-extract-pluginjavascript uglifyjs-webpack-plugin代码压缩 splitChunks进行bundle.js分割javascript SplitChunksPlugin 插件提取公共第三⽅库javascript tree-shakingvue3和vue2有哪些区别1响应式原来发生变化 vue2 Object.definePropoty()实现 vue3 proxy实现实现了对象的深度响应式比如修改对象的子对象，修改数组的下标 lenth等都能触发响应式的更新2声明周期钩子名称发生变化将destroyed 修改为 unmounted3新增内置组件teleport suspense4多种使用方式 composition API options API 5异步组件的写法 defineAsyncComponent6多事件的机制7根实例创建创建方法 vue2.0 new Vue() createdApp() 插件注册 app.use() filter .sync移除eimits 新增组件多个根节点