web前端常见面试题

最新推荐文章于 2024-05-11 10:05:08 发布

大魔王逍遥

最新推荐文章于 2024-05-11 10:05:08 发布

阅读量139

点赞数

文章标签： javascript vue.js 前端面试 Powered by 金山文档

本文链接：https://blog.csdn.net/D_XY666/article/details/129165908

版权

服务器

简单介绍一下http和https以及他们的区别

http是超文本传输协议，是互联网上应用最广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准。

https是以安全为目标的http通道，安全基础是SSL，因此加密的详细内容就需要SSL。

http 传输的数据都是未加密的，也就是明文的，网景公司设置了 SSL 协议来对 http 协议传输的数据进行加密处理，简单来说 https 协议是由 http 和 ssl 协议构建的可进行加密传输和身份认证的网络协议，比 http 协议的安全性更高。

什么是websocket？

Websocket作用是给web端提供了与http server端之间的长连接，使服务端在建立连接的任何时候都可以主动通知web页面事件，如果没有此协议存在的话，web端需要不断地通过轮询的方式去查询一些服务端的状态。

http2.0有什么优点？

提升访问速度；

允许多路复用：http1.1浏览器在同一时间内针对同一域名下的请求有一定数量的限制，超过数量将会被阻塞；

二进制格式，将传输信息分割为更小的消息和帧，并采用二进制格式编码；

介绍一下浏览器本地储存Cookie、localStorage、sessionStorage

浏览器的本地存储主要分为Cookie、WebStorage和IndexedDB，其中WebStorage又分为localStorage（本地存储）和sessionStorage（会话存储）

Cookie、localStorage、sessionStorage都是保存在浏览器端并且是同源的。

Cookie储存容量小，只有4k左右，且数据始终在同源的http请求中携带，在浏览器和服务器之间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。

sessionStorage仅在浏览器窗口关闭前有效，localStorage始终有效。

介绍一下浏览器缓存

缓存分为强缓存和协商缓存，根据相应的header内容决定，强缓存状态码200不发送请求到服务器，直接从缓存中取，协商缓存状态码304发送请求到服务器，通过服务器来告知缓存是否可用，因为服务器上的资源不是一直固定不变的，大多数情况下会更新，这个时候如果我们还访问本地缓存，相当于资源没更新，看到的还是旧的资源，所以我们希望服务器上的资源更新了浏览器就请求新的资源，没更新就使用本地缓存，最大程度减少因网络请求而产生的资源浪费

什么是懒加载？懒加载的方式有什么？

懒加载是指一开始进入页面时不需要一次性把资源都加载完，而是按需加载，在需要的时候加载对应的资源，我们在路由中通常会定义很多不同的页面，如果不应用懒加载的话很多页面都会打包到同一个js文件中，造成进入首页时加载内容过多时间过长，影响用户体验。懒加载的主要作用时将路由对应的组件打包成一个个的js代码块，只有在这个路由被访问到的时候，才会加载对应的代码块。

Vue异步组件vue-router配置路由component：resolve=>require(“组件”,resolve)

ES6的import const 组件 = () =>import(‘组件路径’)

Webpack提供的require.ensure()

CSS

画一条0.5px的线

meta viewport方式、transform：scale 缩放

什么是flex布局？

布局的传统解决方案是基于盒模型，依赖display、position、float属性进行页面布局，它对于那些特殊布局非常不方便，于是W3C就提出了flex布局，它可以简便，完整，响应式的实现各种布局方式。

flex：1是哪三个属性的简写？分别有什么作用？

flex-grow定义项目的放大比例

flex-shrink定义项目的缩小比例当空间不足的情况下会等比例缩小

flex-basis定义在分配多余的空间里项目占据的空间

如何实现垂直居中？

定位上下左右为0 margin auto

Margin -50%

Vertical-alignmiddle

Flex布局

简单介绍一下浏览器重绘和重排

DOM的变化影响到了宽高，浏览器需要重新计算元素的几何属性，需要重新构造渲染这个过程是重排，浏览器将受到影响的部分重新绘制在屏幕上称为重绘。

如何清除浮动？

在浮动元素后使用一个带有clear：both属性的空元素

给浮动元素的容器添加overflow：hidden或overflow：auto属性

给浮动元素后面的元素添加clear属性

伪元素清除浮动

原生javascript

什么是闭包？列举一个常见的闭包

闭包就是能读取其他函数内部变量的函数，或者子函数在外调用，子函数所在的父函数的作用域不会被释放。常见的闭包：将一个函数作为另一个函数的返回值；将函数作为实参给另一个函数调用。

什么是事件委托？

不在事件的发生的dom上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素可以监听子元素上事件的触发，通过判断事件发生元素的dom类型，来做出不同的响应。

介绍一下this指向以及如何改变this指向

在不同的场景中，this的指向可能会发生变化，但是它永远指向其所在函数的真实调用者，如果没有调用者，就指向全局window

箭头函数中this指向函数作用域所用的对象

通过apply和call改变函数的this指向，他们两个函数的第一个参数都是一样的表示要改变指向的对象，第二个参数apply是数组，而call则是arg1、arg2这种形式，通过bind改变this作用域会返回一个永久改变this指向的新函数，但不会马上执行。

介绍一下垃圾回收机制

由于字符串、数组和对象没有固定大小，所以当他们大小已知的时候才能对他们进行动态的存储分配。Js每次创建字符串数组或对象时都需要分配内存来储存实体，只要动态分配了内存，最后都需要释放内存，否则容易造成系统崩溃。

什么是跨域？如何实现跨域？

跨域是指由于同源策略，浏览器不能执行其他网站的脚本，是浏览器对js实行的安全限制，只要协议、域名、端口任何一个不同，都被当作不同的域，跨域就是避开浏览器的安全限制

PS：同源策略是一个重要的安全策略，用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互，它能帮助阻挡恶意文档减少被攻击的媒介。

实现跨域的方式：

Jsonp

Iframe

服务端设置请求头如需cookie则前后端都需要设置

代理服务器

有哪些继承实现方式？

原型链继承、构造继承、实例继承、拷贝继承、组合继承

介绍一下Promise

Promise是一个对象，保存着未来将要结束的事件，对象的状态不受外部影响，promise对象代表着一个异步操作，它有三种状态，pending、fulfilled、rejected，只有异步操作的结果才能改变状态，一旦从进行状态变成其他状态就不能再进行改变了

两个参数 resolve，reject

两个过程 pending-fulfilled：resolved已完成

pending-rejected： rejected 已拒绝

介绍一下Webpack

Webpack是一个静态模块打包器，当webpack处理应用程序时，会递归构建一个包含应用程序需要的每个模块的依赖关系图，然后将这些模块打包成一个或多个包

Webpack打包过程：初始化编译参数-开始编译-确定入口-编译模块-完成模块编译-输出资源

Loader是webpack提供的一种处理多种文件格式的机制，因为webpack只认识js和json，所以loader相当于翻译官，对其他资源类型进行预处理。

Plugin的目的是解决loader无法实现的问题，当plugin加载后，在webpack构建的某个时间节点就会触发plugin功能，帮助webpack做一些事情，实现webpack的功能扩展，比如html-webpack-plugin 处理html资源，默认创建一个空的html，自动引入打包输出的所有资源；mini-css-extract-plugin 可以将打包完的js文件中的css抽出来；clean-webpack-plugin 打包的时候自动删除上一次的包等等。

简单说一下Ajax的实现过程

Ajax创建异步对象XMLHttpRequest

操作XMLHttpRequest对象

1、设置请求参数（请求方式、请求页面相对路径，是否异步）

2、设置回调函数，一个处理服务器响应的函数，使用onReadyStateChange

3、获取异步对象的readyState属性，该属性存有服务器响应的状态信息，每当readyState改变时，onReadyStateChange函数就会被执行

4、判断响应报文的状态，200说明服务器正常运行并返回响应数据

5、读取响应数据，可以通过responseText属性来取回服务器返回的数据

介绍一下js的执行机制

js的特点是单线程，因为js是为了处理页面中的交互以及操作dom诞生的，比如对某个dom元素进行添加和删除，不能同时操作，需要先添加再删除。单线程导致了所有任务需要排队进行，一个任务结束，才会执行下一个任务，于是js出现了同步任务和异步任务，js的执行机制是事件循环，就是先执行执行栈中的同步任务，将异步任务提交给对应的异步进程处理，处理完毕的回调函数放入任务队列中，一旦执行栈中的所有同步任务执行完毕，就会按次序读取任务队列中的异步任务，被读取的异步任务结束等待状态，推入主线程开始执行。

PS：异步任务的队列顺序是先执行微任务队列，再执行宏任务队列，promiss里的resolve和reject属于微任务，setTimeout属于宏任务。

Vue

vue中如何实现祖孙组件传值？

祖传孙 $attrs属性（没有在props中声明要接受的一些属性）

孙传祖 $listeners

$nextTick有什么作用？

Vue中更新dom是异步的，所以在vue的生命周期中操作dom时逻辑一定要在dom挂载后才能进行操作。$nextTick的作用是在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。

Vue路由的实现（hash模式和 history模式）

hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取；

特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。

history模式： history 模式下，前端的 URL 必须和实际向后端发起请求的URL 一致，history采用HTML5的新特性；且提供了两个新方法：pushState()，replaceState()可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。

Vue的双向绑定原理

Vue的数据双向绑定是通过数据劫持结合发布者-订阅者模式来实现的。通过Object.defineProperty()这个方法重新定义了对象获取属性值(get)和设置属性值(set)。

简单说一下v-model

v-model是一则语法糖，相当于v-bind:value=”xxx”和@input，意思是绑定了一个value属性的值，子组件可以对value属性进行监听，通过$emit(“value”,xxx)的方式通知父组件。

什么是单向数据流

单向数据流是vue的特性，指数据一般从父组件传到子组件，子组件没有权利直接修改。子组件从props中直接获取的数据，只能请求父组件修改数据再传给子组件，父组件属性值的更新会下行流动到子组件中。

介绍一下MVVM和MVC

mvc是一种代码架构设计模式，前端的主要作用是将视图和数据模型分离

M model数据层

V view视图层

Ccontroller 控制视图层和数据层的关联，主要通过监听dom事件

MVVM 本质上是MVC 的改进版，最大的区别是mvc是单向的，而mvvm是双向并且是自动的，也就是数据变化自动同步视图，视图变化自动同步数据。

什么是虚拟Dom？

虚拟dom是相对于浏览器所渲染出来的真实dom的，在这之前我们要改变页面所展示的内容，只能通过遍历dom树的方式获取到需要的dom节点来进行样式行为或结构的修改，这种方式相当耗费计算资源，因为每次查询dom几乎都要遍历整个dom树，虚拟dom建立了一个与dom树对应的js对象，以对象嵌套的方式来表示dom树，使每次对dom的修改变成了对js对象的修改，这样性能开销会得到提升。