web前端开发面试题

#面试题

1、vue的特点是什么？2、vue中父子组件如何传值父传子子传父3、v-show和v-if指令的共同点和不同点？4、说出几种vue当中的指令和它的用法？5、vue-loader是什么？使用它的用途有哪些？6、axios是什么？怎么使用？7、单页面应用和多页面应用区别及优缺点8、简述一下 vue 常用的修饰符和作用？9、谈谈你对MVVM开发模式的理解10、前端如何优化网站性能？11、vue中样式绑定语法12、简述vue中每个生命周期具体适合哪些场景？（重要，查资料）13、如何避免回调地狱？14、使用NPM有哪些好处？15、一般来说是针对不同的浏览器写不同的CSS，就是CSS Hack16、如何消除一个数组里面重复的元素？17、写一个function，清除字符串前后的空格。（兼容所有浏览器）18、一次完整的HTTP事务是怎样的一个过程？19、页面跳转20、常用的es6的功能21、link和@import的区别22、cookies，sessionStorage 和 localStorage 的区别？23、 -D和-S的区别一、CSS面试题1.盒模型2.CSS选择器和继承3.CSS新特性4 px和em的区别二、JavaScript面试题1.JavaScript数据类型2.JavaScript强制转换和隐式转换3.JavaScript事件流模型4.BOM对象有哪些，列举window对象?5.简述Ajax以及基本步骤6.http请求状态码7.GET和POST的区别，何时使用POST?8. js字符串操作函数9.怎样添加、删除、移动、复制、创建和查找节点?10.写出三个使用this的典型应用11.数组中常用方法

1、vue的特点是什么？

国人开发的一个轻量级框架。双向数据绑定，在数据操作方面更为简单。视图、数据、结构分离，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作。组件化，方便封装和复用虚拟DOM：dom操作是非常耗费性能的，不再使用原生的dom操作节点，极大解放dom操作

2、vue中父子组件如何传值

下面链接描述的详细

链接地址

父传子

父组件在引用子组件时，通过属性绑定（v-bind:）也可以缩写为（:），把需要传递给子组件的数据，传递到子组件内部，供子组件使用。在子组件里面定义一个props来存储父组件给子组件的值，子组件中的props只能读不能写，props是一个数组，数组里面值的命名要和上面属性绑定的名字一致。在子组件中就可以使用props里面的数据了

子传父

使用监听的方式

在子组件中，利用$emit触发父组件传递过来的方法的时候，可以将子组件的数据当做参数传递给父组件

3、v-show和v-if指令的共同点和不同点？

共同点：都能控制元素的显示和隐藏。

不通电：实现本质方法不同。

v-show本质就是通过控制css中的display设置为none，控制隐藏，只会编译一次；v-if是动态的向DOM树内添加或者删除DOM元素，若初始值为false，就不会编译了。而且v-if不停的销毁和创建比较消耗性能。

总结：如果要频繁切换某节点，使用v-show（切换开销比较小，初始开销较大）。如果不需要频繁切换某节点使用v-if（初始渲染开销较小，切换开销较大）

4、说出几种vue当中的指令和它的用法？

v-model双向数据绑定；v-for循环；v-if v-show显示与隐藏；v-on事件；v-once只绑定一次。

5、vue-loader是什么？使用它的用途有哪些？

vue文件的一个加载器，将template/js/style转换成js模块。

用途：js可以写es6、style样式可以scss或less、template可以加jade

6、axios是什么？怎么使用？

详细介绍链接

axios是请求后台资源的模块。

安装axios

npm install axios

// 设置请求路径的基准地址axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'//将axios作为vue类的原型对象上的一个属性Vue.prototype.$http=axios

npm install axios --save装好，js中使用import进来，然后.get或.post。返回在.then函数中如果成功，失败则是在.catch函数中。

7、单页面应用和多页面应用区别及优缺点

单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载必须的 html、js、css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后再交互的时候由路由程序动态载入。

多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新。

单页面的优点：用户体验好、快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小；前后端分离；页面效果会比较炫酷（比如切换页面内容时的转场动画）。

单页面缺点：不利于seo；导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览）

8、简述一下 vue 常用的修饰符和作用？

.stop：等同于JavaScript中的event.stopPropagation()，放置事件冒泡；

.prevent：等同于JavaScript中的even.preventDefault()，放置执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）；

.capture：与事件冒泡的方向相反，事件捕获由内到外；

.self：只会触发自己范围内的事件，不包含子元素；

.once：只会触发一次。

9、谈谈你对MVVM开发模式的理解

MVVM分为Model、View、ViewModel三者。

Model：代表数据模型，数据和业务逻辑都在Model层中定义；View：代表UI视图，负责数据的展示；ViewModel：负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作；

Model和View并无直接关联，而是通过ViewModel来进行联系的，Model和ViewModel之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发View层的刷新，View中由于用户交互操作而改变的数据也会在Model中同步。

这种模式实现了Model和View的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作。

10、前端如何优化网站性能？

减少 HTTP 请求数量

在浏览器与服务器进行通信时，主要是通过 HTTP 进行通信。浏览器与服务器需要经过三次握手，每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限（不同浏览器允许并发数），一旦 HTTP 请求数量达到一定数量，资源请求就存在等待状态，这是很致命的，因此减少 HTTP 的请求数量可以很大程度上对网站性能进行优化。
可以通过精灵图、合并css和js文件。懒加载等方式来减少http请求。

CSS Sprites
国内俗称CSS精灵图，这是将多张图合并成一张图片达到减少HTTP请求的一种解决方案，可以通过CSS的background属性来访问图片内容。这种方案同时还可以减少图片总字节数。

合并CSS和JS文件
现在前端有很多工程化打包工具，如：grunt、gulp、webpack等。为了减少HTTP请求数量，可以通过这些工具再发布前将多个CSS或者多个JS合并成一个文件。

采用 lazyLoad
俗称懒加载，可以控制网页上的内容在一开始无需加载，不需要发请求，等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。

控制资源文件加载优先级

浏览器在加载HTML内容时，是将HTML内容从上至下一次解析，解析到link或者script标签就会加载href或者src对应链接内容，为了第一时间展示页面给用户，就需要将CSS提前加载，不要受JS加载影响。
一半情况下都是CSS在头部，JS在底部

利用浏览器缓存

浏览器缓存是将网络资源存储在本地，等待下次请求该资源时，如果资源已经存在就不需要到服务器重新请求该资源，直接在本地读取该资源。

减少 DOM 操作（vue这种减少操作DOM）

图标使用 IconFont 替换 image 标签

11、vue中样式绑定语法

1、对象方法v-bind:class="{'orange':isRipe,'green':isNotRipe}"2、数组方法v-bind:class="[class1,class2]"3、行内v-bind:style="{color:color,fontSize+'px'}"

12、简述vue中每个生命周期具体适合哪些场景？（重要，查资料）

beforeCreate：在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化。不能再这个阶段使用data中的数据和methods中的方法

create：data和methods都已经被初始化好了，如果要调用methods中的方法操作data中的数据，最早可以再这个阶段中操作

beforeMount：执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂在到页面中，此时，页面还是旧的。

mounted：执行到这个钩子的时候，就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。如果我们想要通过插件操作页面上的DOM节点，最早可以再和这个阶段中进行

beforeUpdate：当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的，页面还没有和最新的数据保持同步

updated：页面显示的数据和data中的数据已经保持同步了，都是最新的

beforeDestory：Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的data和methods，指令，过滤器…都是处于可用状态。还没有真正被销毁

destroyed：这个时候上所有的data和methods，指令，过滤器…都是处于不可用状态。组件已经被销毁了。

13、如何避免回调地狱？

模块化：将回调函数转换为独立的函数使用流程控制库，例如[aync]使用Promise使用aync/await

14、使用NPM有哪些好处？

通过NPM，你可以安装和管理项目的依赖，并且能够指明依赖项的具体版本号。对于Node应用开发而言，你可以通过package.json文件来管理项目信息，配置脚本，以及指明依赖的具体版本npm install xx -S和npm install -D的命令含义 -S 是运行 -D是开发依赖npm uninstall xx是什么意思项目转换的时候，不会把node_modules包发过去，那么你拿到没有nodeModules目录的项目怎么让它跑起来（你怕吗 install 安装所有的依赖）

15、一般来说是针对不同的浏览器写不同的CSS，就是CSS Hack

IE浏览器Hack一般又分为三种，条件Hack、属性级Hack、选择符Hack（详细参考CSS文档：css文档）。例如：

// 1、条件Hack// 2、属性Hack.test{color:#090; /* For IE8+ */*color:#f00; /* For IE7 and earlier */_color:#ff0; /* For IE7 and earlier */}// 3、选择符Hack*html .test{color:#090;} /* For IE6 and earlier */* + html .test{color:#ff0;} /* For IE7 */

16、如何消除一个数组里面重复的元素？

var arr1 = [1,2,2,2,3,3,3,4,5,6],var arr2 = [];for(var i = 0,len = arr1.length;i<len;i++){if(arr2.indexOf(arr1[i])<0{arr2.push(arr1[i])})}document.write(arr2); // 1,2,3,4,5,6

17、写一个function，清除字符串前后的空格。（兼容所有浏览器）

function trim(str){if(str&typeof str === "string"){return str.reqlace(/(^s*)|(s*)$/g,""); //去除前后空白符}}

18、一次完整的HTTP事务是怎样的一个过程？

基本流程：

域名解析发起TCP的3次握手建立TCP连接后发起http请求服务器端响应http请求，浏览器得到html代码浏览器解析html代码，并请求http代码中的资源浏览器对页面进行渲染呈现给用户

19、页面跳转

methods:{logout(){window.localStorage.clear()this.$router.push('/login')}}

20、常用的es6的功能

此题是一道开放题，可以自由回答。但要注意像let这种简单的用法就别说了，说一些经常用到并有一定高度的新功能

ES6

像module、class、promise等，尽量讲的详细一点。

let/const

结构赋值 let {a,b,c}= [123]

箭头函数

模块化 model.exports import

promise new一个promise成功resolve 失败 reject .then .catch

21、link和@import的区别

两者都是外部引用 CSS 的方式，但是存在一定的区别：

link是XHTML标签，除了能够加载CSS，还可以定义RSS等其他事务；而@import属于CSS范畴，只可以加载CSS。link引用CSS时，在页面载入时同时加载；@import需要页面完全载入以后再加载。link是XHTML标签，无需兼容问题；@import则是在CSS2.1提出的，低版本的浏览器不支持。link支持使用JavaScript控制DOM改变样式；而@import不支持

22、cookies，sessionStorage 和 localStorage 的区别？

cookie 是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
cookie 数据始终在同源的http请求中携带（即使不需要），即会在浏览器和服务器间来回传递。
sessionStorage 和 localStorage 不会自动把数据发送给服务器，仅在本地保存。

存储大小：
cookie数据大小不能超过4k。
sessionStorage 和 localStorage 有大小的限制，比 cookie 大得多，达到5M或更大
有效时间：
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

23、 -D和-S的区别

pm install name -save-dve 简写（npm install name -D）自动把模块和版本号添加到devdependencies。开发环境

npm install name -save 简写（npm install name -S）自动把模块和版本号添加到dependencies。

生产环境

一、CSS面试题

1.盒模型

标准盒模型：宽度= 内容(content)+border+margin+padding

IE盒模型：宽度 = 内容(content+border+padding)+margin

box-sizing用来控制元素的盒子模式默认为content-box

content-box ： W3C标准盒模型元素宽高是content宽高border-box ： IE盒子模型元素的宽高属性指的是border+padding+content

2.CSS选择器和继承

id选择器类选择器标签选择器相邻选择器(h1+p) 子选择器(ul>li) 后代选择器通配符

属性选择器(a[rel=“external”]) 伪类选择器(a:hover ,li:nth-child)

可继承属性：

字体相关：font-family、font-style、font-size、font-weight 等；文本相关：text-align、text-indent、text-decoration、text-shadow、letter-spacing、word-spacing、white-space、line-height、color 等；列表相关：list-style、list-style-image、list-style-type、list-style-position 等；其他属性：visibility、cursor 等；

不可继承属性：

border padding margin width height

3.CSS新特性

background-image

background-origin(content-box/padding-box/border-box)

相对于内容框来定位背景图像相对于内容内边距边框

background-size

background-repeat

word-wrap (对长的不可分割单词换行)

允许长单词换行到下一行只在允许的断字点换行

word-wrap: break-word 在长单词或 URL 地址内部进行换行

文字阴影:text-shadow: 5px 5px 5px #FF0000;(水平阴影，垂直阴影，模糊距离，阴影颜色)

font-face属性:定义自己的字体

圆角(边框半径): border-radius

边框图片: border -image: url(border.png) 30 30 round

包围元素的边框平铺(repeated)、铺满(rounded)或拉伸(stretched)

盒阴影:box-shadow: 10px 10px 5px #888888

媒体查询:定义两套css，当浏览器的尺寸变化时会采用不同的属性

<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)"><link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">

@media screen and (max-width:480px){.ads {display:none;}}@media (min-width: 640px) and (max-width: 767px) {.category a{font-size: 2.5rem;//25px 在bootstrap框架下}

4 px和em的区别

PX实际上就是像素，用PX设置字体大小时，比较稳定和精确。如果改变浏览器缩放那么布局就会被打乱 EM就是根据<body>的“font-size”来缩放字体的大小。进行任何元素设置，都有可能需要知道他父元素的大小。 16px = 1em Rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个参考值。

二、JavaScript面试题

1.JavaScript数据类型

alert(``typeof` `null``); ``// objectalert(``typeof` `undefined); ``// undefinedalert(``typeof` `NaN); ``// numberalert(NaN == undefined); ``// falsealert(NaN == NaN); ``// falsevar` `str = ``"123abc"``;alert(``typeof` `str++); ``// numberalert(str); ``// NaN

2.JavaScript强制转换和隐式转换

例举至少3种强制类型转换和2种隐式类型转换?

强制类型转换：明确调用内置函数，强制把一种类型的值转换为另一种类型。强制类型转换主要有：Boolean、Number、String、parseInt、parseFloat

隐式类型转换：在使用算术运算符时，运算符两边的数据类型可以是任意的，比如，一个字符串可以和数字相加。之所以不同的数据类型之间可以做运算，是因为 JavaScript 引擎在运算之前会悄悄的把他们进行了隐式类型转换。隐式类型转换主要有：+、–、==、!

3.JavaScript事件流模型

事件流描述的是从页面中接收事件的顺序。 DOM 结构是树形结构，当页面中的某一个元素触发了某个一个事件，事件会从最顶层的 window 对象开始，向下传播到目标元素，途径的祖先节点都会触发对应的事件，如果当前节点的该事件绑定了事件处理函数的话，则会执行该函数当事件达到目标元素并执行绑定函数（如果有绑定的话）后，事件又会向上传播到 window 元素，途径的祖先节点都会触发对应的事件（如果绑定事件处理函数的话）

事件流包含三个阶段：

事件捕捉阶段

处于目标阶段

事件冒泡阶段

事件捕捉阶段：事件开始由顶层对象触发，然后逐级向下传播，直到目标的元素；

处于目标阶段：处在绑定事件的元素上；

事件冒泡阶段：事件由具体的元素先接收，然后逐级向上传播，直到不具体的元素；

4.BOM对象有哪些，列举window对象?

window 对象，是 JS 的最顶层对象，其他的 BOM 对象都是 window 对象的属性；document 对象，文档对象；location 对象，浏览器当前URL信息；navigator 对象，浏览器本身信息；screen 对象，客户端屏幕信息；history 对象，浏览器访问历史信息；

5.简述Ajax以及基本步骤

AJAX即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

初始化ajax对象连接地址，准备数据发送请求接收数据（正在接收，尚未完成）接收数据完成

//初始化ajax对象var xhr = new XMLHttpRequest();//连接地址，准备数据xhr.open(“方式”,”地址”,是否为异步);//为引擎对象绑定监听时间xhr.onreadystatechange = function(){}//发送数据xhr.send();

6.http请求状态码

200：请求已成功，请求所希望的响应头或数据体将随此响应返回。302：请求的资源临时从不同的 URI 响应请求。由于这样的重定向是临时的，客户端应当继续向原有地址发送以后的请求。只有在 Cache-Control 或 Expires 中进行了指定的情况下，这个响应才是可缓存的。在其他地址发现了请求数据304：如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个状态码。304 响应禁止包含消息体，因此始终以消息头后的第一个空行结尾。客户端已经执行了GET，但文件未变化403：服务器已经理解请求，但是拒绝执行它。请求不允许404：请求失败，没有发现文件、查询或URl500：服务器产生内部错误

7.GET和POST的区别，何时使用POST?

GET和POST的区别:

GET:一般用于查询数据，使用URL传递参数，由于浏览器对地址栏长度有限制，所以对使用get方式所发送信息的数星有限制，同时浏览器会记录（历史记录，缓存）中会保留请求地址的信息，包括地址后面的数据。get只能发送普通格式(URL编码格式)的数据。

POST:一般用于向服务器发送数据，对所发送的数据的大小理论上是没有限制，浏览器会缓存记录地址，但是不会记录post提交的数据。post可以发送纯文本、URL编码格式、二进制格式的字符串，形式多样。

在以下情况中，请使用POST请求:

1.以提交为目的的请求（类似语义化，get表示请求，post表示提交);

2.发送私密类数据(用户名、密码)(因为浏览器缓存记录特性);

3.向服务器发送大量数据（数据大小限制区别);

4.上传文件图片时（数据类型区别);

8. js字符串操作函数

concat()-将两个或多个字符的文本组合起来，返回一个新的字符串。

indexOf()-返回字符串中一个子串第一处出现的索引。如果没有匹配项，返回-1。

charAt()-返回指定位置的字符。

lastlndexOf()-返回字符串中一个子串最后一处出现的索引，如果没有匹配项，返回-1。

substr()函数–返回从string的startPos位置，长度为length的字符串

slice()-提取字符串的一部分，并返回一个新字符串。

replace()-用来查找匹配一个正则表达式的字符串，然后使用新字符串代替匹配的字符串。

split()-通过将字符串划分成子串，将一个字符串做成一个字符串数组。

length-返回字符串的长度，所谓字符串的长度是指其包含的字符的个数。

toLowerCase()-将整个字符串转成小写字母。

toUpperCase()-将整个字符串转成大写字母。

join() 方法用来将数组转换为字符串

9.怎样添加、删除、移动、复制、创建和查找节点?

1)创建新节点

createElement() //创建一个具体的元素

2)添加、移除

appendChild() //添加

removeChild() //移除3)查找

document.getElementsByTagName() //通过标签名称获取的是数组

document.getElementsByName() //通过元素的Name属性的值

document.getElementByld() //通过元素ld，唯—性

document.querySelector(’#id’) 查找元素唯—性

document.querySelectorAll(’#id’) 查找元素获取的是数组

10.写出三个使用this的典型应用

1.html元素事件属性中使用

<input type="button"οnclick="showInfo(this);" value="点击一下”/>

2.构造函数

function Animal (name, co1or) {this.name = name;this.color = color ;}

input点击获取值

<input type="button" id="text" value="点击一下”/><script type="text /javascript ">var btn = document.getElementById("text");btn.onc1ick = function( {alert(this.value); //此处的this是按钮元素}</script>

11.数组中常用方法

push() 后增unshift() 前增pop() 后删shift() 前删splice() 修该删除 splice(index,length) 表示从index开始删除length个元素，并从index开始新增元素1~N，返回被删除的元素组成的数组 concat() 拼接 concat() 方法用来合并两个或多个数组a.count(b)slice() 剪切 slice(startIndex,endIndex) 返回从startIndex开始(包括)，到endIndex(不包括)之间的原属组成的数组返回新数组，不改变原数组join() 数组转字符串 console.log(a.join(’,’)) sort() 排序reverse() 颠倒顺序 a.reverse() indexOf()和lastIndexOf() 查找某元素在数组中的位置，若存在，则返回第一个位置的下标,否则返回-1 filter() 过滤filter() 方法返回数组中满足条件的元素组成的新数组，原数组不变map() 格式化数组根据需求格式化原数组，返回格式化后的数组。原数组不变every() 对数组的每一项都运行给定的函数，若每一项都返回 ture,则返回 true some() 对数组的每一项都运行给定的函数，若存在一项或多项返回 ture,则返回 true forEach() 数组遍历

ES6新增方法

find()

找到数组中第一次满足条件的元素，并返回，若找不到则返回undefined。不改变原数组。

findIndex()方法

findIndex()的作用同indexOf()，返回第一个满足条件的下标，并停止寻找。