web前端开发面试题

---

1、vue的特点是什么？

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

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

下面链接描述的详细

链接地址

父传子

1. 父组件在引用子组件时，通过属性绑定（v-bind:）也可以缩写为（:），把需要传递给子组件的数据，传递到子组件内部，供子组件使用。
2. 在子组件里面定义一个props来存储父组件给子组件的值，子组件中的props只能读不能写，props是一个数组，数组里面值的命名要和上面属性绑定的名字一致。
3. 在子组件中就可以使用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、前端如何优化网站性能？

1. 减少 HTTP 请求数量

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

   可以通过精灵图、合并css和js文件。懒加载等方式来减少http请求。

   CSS Sprites

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

   合并CSS和JS文件

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

   采用 lazyLoad

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

2. 控制资源文件加载优先级

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

   一半情况下都是CSS在头部，JS在底部

3. 利用浏览器缓存

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

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

5. 图标使用 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有哪些好处？

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

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

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

// 1、条件Hack
<!--[if IE]>
	<style>
		.test{color:red;}
	</style>
<![endif]-->
// 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事务是怎样的一个过程？

基本流程：

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

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 的方式，但是存在一定的区别：

1. link是XHTML标签，除了能够加载CSS，还可以定义RSS等其他事务；而@import属于CSS范畴，只可以加载CSS。
2. link引用CSS时，在页面载入时同时加载；@import需要页面完全载入以后再加载。
3. link是XHTML标签，无需兼容问题；@import则是在CSS2.1提出的，低版本的浏览器不支持。
4. 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``); ``// object
alert(``typeof` `undefined); ``// undefined
alert(``typeof` `NaN); ``// number
alert(NaN == undefined); ``// false
alert(NaN == NaN); ``// false
var` `str = ``"123abc"``;
alert(``typeof` `str++); ``// number
alert(str); ``// NaN

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

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

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

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

3.JavaScript事件流模型

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

事件流包含三个阶段：

• 事件捕捉阶段

• 处于目标阶段

• 事件冒泡阶段

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

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

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

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

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

5.简述Ajax以及基本步骤

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

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

//初始化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：请求失败，没有发现文件、查询或URl
• 500：服务器产生内部错误

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 ;
}

3. 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()，返回第一个满足条件的下标，并停止寻找。

  ​