前端常见面试题

1.vue的特点是什么

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

2.vue父与子如何传值

Vue父组件传给子组件

第一步:父组件在引用组件是，通过属性绑定(v-bind: ) 的形式，把需要传递给子组件的数据，传递到子组件内部，供子组件使用
第二步:把父组件传递过来的数据，在props数组中定义一下
1.组件中的所有props 中的数据，都是通过父组件传递给子组件的
2. props中的数据都是只读的，无法重新赋值
第三步:在该子组件中使用props数组中定义好的数据

Vue子组件给父组件传值需要使用自定义事件

流程:
1.子组件创建并监听自定义事件，
2.在事件函数里面执行emiti函数，通过emit把想传的值传给父组件
3.父组件在子组件上监听emit定义的事件名称并绑定自身的函数，在函数的参数中接收子组件传递的参数。

3.v-show和v-if指令的共同点和不同点?

共同点：

v-if 和 v-show 都是动态显示DOM元素。

区别：

1、编译过程： v-if 是 真正 的 条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-show 的元素始终会被渲染并保留在 DOM 中。
v-show 只是简单地切换元素的 CSS 属性display。
2、编译条件： v-if 是惰性的：如果在初始渲染时条件为假，则什么也不做。直到条件第一次变为真时，才会开始渲染条件块。
v-show不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
3、性能消耗： v-if有更高的切换消耗。
v-show有更高的初始渲染消耗。
4、应用场景： v-if适合运行时条件很少改变时使用。
v-show适合频繁切换。

4.vue当中的指令和它的用法?

1. v-if：根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。
2. v-show：根据表达式之真假值，切换元素的 display CSS 属性。
3. v-for：循环指令，基于一个数组或者对象渲染一个列表，vue 2.0以上必须需配合 key值 使用。
4. v-bind：动态地绑定一个或多个特性，或一个组件 prop 到表达式。
5. v-on：用于监听指定元素的DOM事件，比如点击事件。绑定事件监听器。
6. v-model：实现表单输入和应用状态之间的双向绑定
7. v-pre：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
8. v-once：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

5.vue-loader是什么?使用它的用途有哪些?

它就是webpack的一个加载器，主要作用就是解析和转换.vue文件，提取vue中的逻辑代码，style样式和html模板，再分别交给对应的loader去处理，
简单来说，就是把你写的vue代码转换成浏览器能识别的，然后还包含了一些打包和编译的功能

用途

template

1. 默认语言 HTML
2. 每个.vue文件最多包含一个
3. 内容被提取为成字符串，可以加jade(简化代码的书写方式),

script

1. 默认语言 JS
2. 每个文件最多包含一个
3. 可以写es6

style

1. 默认语言 css
2. 一个vue文件可以包含多个style标签
3. 可以写scss和less,还能用stylus写样式

6.axios是什么?怎么使用?

Axios是一个基于promise的HTTP库，类似于jQuery的ajax，用于http请求。可以应用于浏览器端和node.js，既可以用于客户端，也可以用于node.js编写的服务端。

1. 在脚手架使用

npm install axios

2. 在脚手架的main.js中配置

import axios from 'axios'
//配置访问服务器基础路径
axios.defaults.baseURL="服务器地址";
//保存session信息
axios.defaults.withCredentials=true;
//将axios注册到vue中
Vue.prototype.axios=axios;

3. 利用qs发送axios请求

axios.post("url",Qs.stringify({参数:值,参数:值}))
.then(res=>{....})

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

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

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

单页面的优点：

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

单页面缺点：

1. 不利于seo
2. 导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）
3. 初次加载时耗时多
4. 页面复杂度提高很多

8.npm install常用的-S.-D、-g有什么区别?

npm i module_name -S 即 npm install module_name --save写入dependencies，发布到生产环境

npm i module_name -D 即 npm install module_name --save-dev 写入devDependencies，发布到开发环境

npm i module_name -g 即 global全局安装(命令行使用)

npm i module_name 即 本地安装(将安装包放在./node_modules下)
注:使用npm install(简写npm i) ---->使用cnpm更快!

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

MVM分为Model、View、ViewModel三者。

1. Model:代表数据模型，数据和业务逻辑都在Model层中定义;
2. View:代表U视图，负责数据的展示;
3. ViewModel:负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作;
   Model和view并无直接关联，而是通过viewModel来进行联系的，Model和viewNode1之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发view层的刷新，view中由于用户交互操作而改变的数据也会在Mode1中同步。

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

MVC模式（Model-View-Controller）

三个基本部分：模型 （Model）、视图（View）和控制器（Controller）

• （控制器Controller）- 负责转发请求，对请求进行处理。
• （视图View） – 界面设计人员进行图形界面设计。

• （模型Model） – 程序员编写程序应有的功能（实现算法等等）、数据库专家进行数据管理和数据库设计(可以实现具体的功能)。

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

1、减少 HTTP 请求数量

在浏览器与服务器进行通信时，主要是通过 HTTP 进行通信。浏览器与服务器需要经过三次握手，每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限（不同浏览器允许并发数），一旦 HTTP 请求数量达到一定数量，资源请求就存在等待状态，这是很致命的，因此减少 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、减少重排（Reflow）

基本原理：重排是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证 DOM 树上的所有其它结点的visibility属性，这也是Reflow低效的原因。如果Reflow的过于频繁，CPU使用率就会急剧上升。

减少Reflow，如果需要在DOM操作时添加样式，尽量使用 增加class属性，而不是通过style操作样式。

5、减少 DOM 操作

6、图标使用 IconFont 替换

11.vue中样式绑定语法

1.对象方法v-bind:class=" { 'orange ' :isRipe， 'green ':isNotRipe}”
2.数组方法v-bind: class=" [class1,c1ass2]"
3.行内v-bind : style="{color : color , fontsize:fontsize 'px '}”

12、如何避回调地狱?

1.promise

promise只有两个状态resolve和reject

如果已经有了状态(resolve或者reject)，则立刻调用回调函数

在异步事件状态pendding->resolve回调成功时，通过调用resolve函数返回结果；当异步操作失败时，回调用reject函数显示错误信息。

New Promise( function(resolve, reject) {...} /* executor */  );

调用then方法获取执行结果

promise.then((resolve) => {
        console.log(resolve);
}, (err) => {
        console.log(err);
});

2.async/await 方案

关键字：async：async关键字用于修饰function

关键字：await：：await关键字只能在async函数中才能使用

async function fn(){
    await sayhello();
    return 0;
}

async表示函数里有异步操作，

await表示让出当前线程,紧跟在后面的表达式需要等待结果。返回值是 Promise

async函数内部return语句返回的值，会成为then方法回调函数的参数。

3.模块化:将回调函数转换为独立的函数

4.使用流程控制库，例如[aync]

13、使用NPM有哪些好处?

1、通过NPM，你可以安装和管理项目的依赖，并且能够指明依赖项的具体版本号。

2、对于Node应用开发而言，你可以通过package.json文件来管理项目信息，配置脚本，以及指明依赖的具体版本

3、npm install xx -S：发布到生产环境

 npm install -D的命令含义：发布到开发环境

4、npm uninstall xx是：卸载npm包

5、项目转换的时候，不会把node_modules包发过去，那么你拿到没有nodeModules目录的项目怎么让它跑起来(npm install安装所有的依赖)

  初始化：npm init -y

14、简述每个周期具体适合哪些场景

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

created（）被创建 data 和 methods都已经被初始化好了，可以调用了

beforeMount() 挂载前 在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的

mounted（）已挂载 Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行

beforeupdate（）更新前 页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步

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

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

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

15、一次完整的HTTP事务是怎样的一个过程?

基本流程:
a.域名解析
b.发起TCP的3次握手
C.建立TCP连接后发起http请求
d.服务器端响应http请求,浏览器得到htm|代码
e.浏览器解析html代码，并请求html代码中的资源
f.浏览器对页面进行渲染呈现给用户

16、写一个function,清除字符串前后的空格。(兼容所有浏览器)

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

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

// 方法一：
var arr1 =[1,2,2,2,3,3,3,4,5,6],
    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

18、一般来说是针对不同的浏览器写不同的CSS,就是CSS Hack。

IE浏览器Hack一般又分为三种，条件Hack、属性级Hack、选择符Hack

//1、条件Hack
<! --[if IE]>
<style>
.test{color : red; }</style>
<! [endif]-->

// 2、属性Hack
.test{
color : #0909;  /*t For IE8+*/
*color : #f00;  /*For IE7 and earlier */
_color : #ff0;  /*For IE6 and earlier */}

//3、选择符Hack
 *htm1 .test{color : #090; }   /*iFor IE6 and earlier * /
 *+ html .test{color : #ff0;}  /*For IE7*/

19、常用的es6的功能

箭头函数 promise this 指向 解构赋值

20、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不支持。

21、请描述一下cookies,sessionstorage和localStorage的区别?

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）

cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递

sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

存储大小

cookie数据大小不能超过4k
sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大

有期时间：

localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
sessionStorage 数据在当前浏览器窗口关闭后自动删除
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

22、VUE事件修饰符

   <!--阻止事件冒泡.stop-->
    <div id="div1" class="stop" @click.stop="event1(1)">
    
    <!--使用事件捕获模式.capture-->
    <div id="div4" class="stop" @click.capture="event1(4)">
    
    <!--事件只作用本身.self，类似于已阻止事件冒泡-->
    <div id="div7" class="stop" @click.self="event1(7)">
    
    <!--阻止浏览器默认行为.prevent-->
    <a href="https://github.com/dk-lan" target="_blank" @click.prevent="prevent">dk's github</a>
    
    <!--只作用一次.once-->
    <a href="https://github.com/dk-lan" target="_blank" @click.once="prevent">dk's github</a>
    
    <!--修饰符可以串联.click.prevent.once-->
    <a href="https://github.com/dk-lan" target="_blank" @click.prevent.once="prevent">

23、npm命令（部分）

• npm install 安装模块
• npm uninstall 卸载模块
• npm update 更新模块
• npm outdated 检查模块是否已经过时
• npm ls 查看安装的模块
• npm init 在项目中引导创建一个package.json文件
• npm help 查看某条命令的详细帮助
• npm root 查看包的安装路径
• npm config 管理npm的配置路径
• npm cache 管理模块的缓存
• npm start 启动模块
• npm stop 停止模块
• npm restart 重新启动模块
• npm test 测试模块
• npm version 查看模块版本
• npm view 查看模块的注册信息
• npm adduser 用户登录
• npm publish 发布模块
• npm access 在发布的包上设置访问级别
• npm package.json的语法

CSS面试题

1、介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的?

• 标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin
• 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin

IE盒模型和W3盒模型的区别：

（1）IE盒模型的width包含：content+border+padding

（2）W3C盒模型的width只包含：content

（3）用来控制元素的盒子模型的解析模式，默认为content-box
（4）context-box: W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽
（5）border-box:IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽

2、 CSS选择器有哪些?哪些属性可以继承?

CSS选择符：

1. id选择器(#myid)
2. 类选择器(.myclassname)
3. 标签选择器(div, h1, p)
4. 相邻选择器(h1 + p)
5. 子选择器（ul > li）
6. 后代选择器（li a）
7. 通配符选择器（*）
8. 属性选择器（a[rel=”external”]）
9. 伪类选择器（a:hover, li:nth-child）

可以继承的：

1. 字体相关：font-family、font-style、font-size、font-weight 等；

2. 文本相关：text-align、text-indent、text-decoration、text-shadow、letter-spacing、word-spacing、white-space、line-height、color 等；

3. 列表相关：list-style、list-style-image、list-style-type、list-style-position 等；

4. 其他属性：visibility、cursor 等；

   不能继承的：

5. border

6. padding

7. margin

8. width

9. height

3、CSS3有哪些新特性?

1. CSS3实现圆角（border-radius），阴影（box-shadow），边框图片border-image

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

强制文本换行（word-wrap），线性渐变（linear-gradient）

3. 旋转,缩放,定位,倾斜：transform:rotate(90deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);

4. 增加了更多的CSS选择器、多背景、rgba()；

5. 在CSS3中唯一引入的伪元素是 ::selection ；

6. 媒体查询(@media)，多栏布局（flex）

4、px和em的区别

px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。
. height

未完待续…如果用不完整/不准确的可以告诉我哦！