金三银四求职季,前端面试题小梳理(HTML、CSS、JS)

好久没写学习记录，最近太多事，又到一年求职季，都说金三银四求职季，自己也做一下最近学习的一些前端面试题梳理，还是个小白，写的不对请指正，不胜感激。

_HTML篇

html语义化
　　用语义化的代码标签书写，便于开发者阅读同时对搜索引擎的查询也更友好。

例如不滥用div；p标签等，段落使用P，表头使用thead包裹，内容使用tbody，尾部使用tfoot。

需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）等等

css篇

盒模型
　　ie盒模型：怪异模式；box-sizing：border-box
　　标准模型：标准模式；box-sizing：content-box

css reset和normalize.css的区别
　　都是重置浏览器css样式，reset几乎为所有html标签重置样式，normalize保持了许多样式
normalize修复了常见的桌面端和移动端的bug，reset有大量的继承链，normalize模块化，reset较normalize文档丰富

居中方法

　　水平居中 ：①text-algin: center,

　　　　　 　　②margin: 0 auto //需要设置父级宽度,

　　垂直居中：①line-height: 高度,

　　　　   　　 ②position: absolute, top: 50%, margin-top: -50px,//已知宽度的一半

　　　　   　　③display: flex,flex-direction: colum, justify-content: center

　　　　 　　 ④父元素设置display: table,

　　　　　　　子元素设置vertical-algin:center,text-algin:center,display:table-cell

css优先级
　　!important > id > class > 标签 > *；权值相同时，靠近元素的样式优先级高 顺序为内联样式表（标签内部）> 内部样式表（当前文件中）> 外部样式表（外部文件中）

清除浮动
　　目前用的最多的伪类清除

clearfix:after {
    content: '';
    display: block;
    height:0;
    overflow: hidden;
    clear: both;
}
clearfix {
    zoom: 1
}

自适应布局
　　使用flex布局
　　左侧浮动或者绝对定位，然后右侧margin撑开
　　使用div包含，然后靠负margin形成bfc布局

写一个三角形
头朝上： 

{
     0;
    height: 0;
    border-bottom: 140px solid red;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
}

头朝下：

 {
     0;
    height: 0;
    border-top: 140px solid red;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
}

头朝右：

 {
     0;
    height: 0;
    border-left: 140px solid red;
    border-top: 70px solid transparent;
    border-bottom: 70px solid transparent;
}

头朝左：

 {
     0;
    height: 0;
    border-right: 140px solid red;
    border-top: 70px solid transparent;
    border-bottom: 70px solid transparent;
}

link @import导入css
　　link可以一边加载一边解析，后者需要等页面载入了才能加载
　　link无兼容问题，后者不兼容低版本浏览器

动画 animation
　　太多了，不做赘述

Javascript篇

let，const使用
　　都是在es6提出，有块级作用域，使用不当会形成暂时性死区。例如

console.log(x)
let x = 2

　　这么使用会直接报错，因为在未声明前使用了变量X，要注意let，const不和var一样，并不存在变量提升。使用前要先声明

而且const在声明时需要先赋值，不然会报错，而且它不允许声明后修改变量。二者都是在声明后不允许重复声明同一个变量

数组求和，数组长度为100，求数组中所有项的和

　　有很多方法，这里我使用es6中的reduce方法

var arr2 = Array.from(new Array(100), (num,index) =>{
      return index 
})//创建长度100的数组

var result = arr2.reduce((a, b) => {return a + b}) //4950

reduce接收2个参数，第一个参数a是前面两个数的和，b是第3个数，依次类推。此方法对于数组求和求乘积在方便不过。

数组去重，数组长度为100，对数组去重

　　方法很多，例如循环判断，返回新数组之类等等，这里我使用es6的new Set方法

var arr1 = Array.from(new Array(50), (num,index) =>{
    return index 
})
var arr2 = Array.from(new Array(50), (num,index) =>{
    return index 
})
arr1 = arr1.concat(arr2) //先创建两个个数组长度是50，然后合并

arr1 = new Set(...[arr1])//去重只需要下面一行代码

　　去重返回得到的set结构是es6的提供的数据结构。它类似于数组，但是成员的值都是唯一的，没有重复的值。结束后再转换成数组就可以了。

也可以简写成下面这样

arr1 = Array.from(new Set(...[arr1], ...[arr2]))

"..."是扩展操作符，可以了解一下，vue中一些有用到。

求一个数组中每个项的平方，并返回

　　可以直接循环数组，然后乘于他自身，不过es6给我们提供了更方便快捷的方法，就是map()。接下来我们使用这个方法来完成问题

var arr1 = Array.from(new Array(50), (num,index) =>{
    return index 
})
arr1 = arr1.map((x) => {return x *x })

什么是立即执行函数？为什么使用立即执行函数？

(function fn() {
    console.log(123)
})() //第一种

(function fn() {
    console.log(123)
}())//第二种

需要传入参数的话也是一样的调用，使用立即执行函数是防止变量污染全局，执行完自行销毁

什么是事件捕获，什么是事件冒泡

　　这个之前我简单写过一篇随笔，不知道能不能解答疑惑。冒泡捕获，没毒使劲戳

正则匹配空格，匹配字符

　　这个也有一篇小文，都是练习题，我的正则也不好呀。正则题，正则元字符，可以稍微看一下。

判断字符串是不是回文字符串

　　首先了解什么是回文字符串，即是一个正读和反读都一样的字符串，比如“level”或者“noon”等等就是回文串，那么怎么判断呢，其实也很简单

function fn(str) {
  var str1 = str.split('').reverse().join('')
  return str == str1
}

将字符串拆分成数组，翻转一遍再重新合并，返回布尔值就可以了。

JS数据类型

　　1.number;  2.string;  3.boolean;  4.undefined;  5.null;  6.symbol(es6新增)；7.Object（复杂类型）

让我们来看一下第6个，es6新增的数据类型是什么。其表示独一无二的值。

// 没有参数
var a = Symbol();
var b = Symbol();

a === b // false

// 有参数
var a = Symbol("biu");
var b = Symbol("biu");

a === b // false

可以看出独一无二的话那么就意味着Symbol值可以作为标识符，用于对象的属性名，就可以保证不会出现同名的属性了。这对于一个对象由多个模块构成的情况很有用，能防止某一个键名被不小心改写或覆盖。由于用的不多，并没有做很深的探讨。

promise的用法

var promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

使用

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

重绘与回流
　　回流必定重绘，重绘不一定回流。重绘只是修改页面上color，background-color等，不改变布局
　　回流改变了布局，导致页面dom树重新排列
　　减少回流：
　　　　css：tranfrom代替top
　　　　　　减少内联样式，减少样式多层嵌套
　　　　　　position代替动画
　　　　　　visibility代替diplay：none
　　　　　　减少table布局
　　　　js：
　　　　　　减少修改dom结构，不可避免的修改尽量在一次修改完

　　　　　　避免频繁读取会引发回流/重绘的属性

可以去了解一下算法，比如二分查找、快速排序，递归等等。之前记录过两个，不过现在也忘得差不多

更多的了解es6的一些新方法，比如文中未提及的解构赋值、proxy等等

HTTP篇

三次握手，四次挥手（借用网上的叙述，形象生动）

　　例如A、B通信，三次握手：
　　　　A：你好，我来了
　　　　B：收到
　　　　A：那么开始连接
　　四次挥手：
　　　　A：我要关闭了
　　　　B：稍等，还有一个包
　　　　B：可以关闭
　　　　A：你关闭吧，不用回复
　　　　等待2ms，无反应关闭

http常见状态码

　　2开头 （请求成功）表示成功处理了请求的状态代码。200 （成功） 服务器已成功处理了请求，204 （无内容） 服务器成功处理了请求，但没有返回任何内容

　　3开头 （请求被重定向）表示要完成请求，需要进一步操作。301 （永久移动）

　　4开头 （请求错误）这些状态代码表示请求可能出错。403 （禁止） 服务器拒绝请求。 404 （未找到） 服务器找不到请求的网页

　　5开头（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误

get、post的区别

　　搜索出来很多看似标准答案，当你看到这个问题是不是觉得很简单，随便都能答上来，下面是w3c提供的说法

　　　　GET在浏览器回退时是无害的，而POST会再次提交请求。

　　　　GET产生的URL地址可以被Bookmark，而POST不可以。

　　　　GET请求会被浏览器主动cache，而POST不会，除非手动设置。

　　　　GET请求只能进行url编码，而POST支持多种编码方式。

　　　　GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。

　　　　GET请求在URL中传送的参数是有长度限制的，而POST么有。

　　　　对参数的数据类型，GET只接受ASCII字符，而POST没有限制。

　　　　GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。

　　　　GET参数通过URL传递，POST放在Request body中。

其实我个人认为这些回答都太官方了，有时间的话还是去看一下这些答案具体所说，面试时全部人的回答都是千篇一律，要是你突然给个耳目一新的答案是不是很加分呢。

URL到网页完全加载显示这中间发生了什么

　　一道经典的面试题，至今我也没有很懂，因为我http知识并不是很牢固，哈哈。来总结一下吧

　　　　1、浏览器的地址栏输入URL并按下回车。

　　　　2、浏览器查找当前URL是否存在缓存，并比较缓存是否过期。

　　　　3、DNS解析URL对应的IP。

　　　　4、根据IP建立TCP连接（三次握手）。

　　　　5、HTTP发起请求。

　　　　6、服务器处理请求，浏览器接收HTTP响应。

　　　　7、渲染页面，构建DOM树。

　　　　8、关闭TCP连接（四次挥手）。

然后可以针对这些点展开叙述说一下

谈一谈强缓存和协商缓存

　　缓存是一种保存资源副本以供下次请求时可以直接使用该副本的技术，当web发现该资源已经被缓存了，就会拦截请求，使用已保存的资源副本。这样可以缓解服务器端的压力，提高性能。对于网站来说缓存是提高性能的重要部分。

缓存分为两部分私有缓存和共享缓存。共享缓存能被多个用户使用，私有缓存只能用于单独用户。

强缓存 ( Cache-Control 和 Expires )

强缓存主要是响应头用于Cache-Control和Expires两个字段来控制。其中Expires是Http1.0提出的，他指定了一个绝对过期时间，Cache-Control是http1.1提出的缓存字段。两个字段同时使用的时候，后者的优先级更高。

协商缓存 ( Last-Modified 和 Etag )

　　协商缓存是浏览器去服务器端询问本次请求是使用缓存还是从浏览器重新请求新的资源，当服务器端返回请求的资源未改动，那么浏览器就会重新定位到缓存的资源副本，这种情况http状态码是304。

当浏览器重新向服务器发送请求时，会在请求头添加if-Modified-since的字段，值就是Last-Modified，如果未过期命中缓存那么就使用缓存好的资源副本，如果已过期那么就重新请求新的资源。

　　服务器端返回的报文头中带有Etag字段，浏览器接收资源时会将其存储起来，当下次浏览器向服务器端发送请求时会附带上一次存储的Etag字段，服务器端会将其做对比，如果相同则使用本地缓存的资源副本，状态码304，如果不相同就返回新的资源同时返回新的Etag字段，状态码是200。

Vue篇

谈一谈什么是MVVM

　　MVVM是Model-View-ViewModel的缩写。mvvm是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会

同步到Model中，而Model 数据的变化也会立即反应到View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

谈一谈MVVM和MVC的区别　　

　　两种设计模式区别并不大，只是MVC中的Controller变成了view-model，不再是频繁的操作dom结构，降低用户体验

组件之间的传值

　　父子组件传值：父组件向子组件传值——props，子组件向父组件传值——$emit方法

　　兄弟组件传值：bus

v-show和v-if的区别

　　v-if是使其dom重建或销毁，而v-show是使其显示或隐藏，似display：none/block。前者引起回流，后者引起重绘

<keep-alive></keep-alive>的作用是什么?

　　包裹动态组件时，会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染。

谈谈vuex的理解

　　个人的理解是全局状态管理更合适；简单的理解就是你在state中定义了一个数据之后，你可以在所在项目中的任何一个组件里进行获取、进行修改，并且你的修改可以得到全局的响应变更。

vuex有五个属性：state，getter，mutation，action，module。

　　  state存放全局可以访问的变量或者属性

 　　 mutattions是一个对象，这个对象里面可以放改变state的初始值的方法，具体的用法就是给里面的方法传入参数state或额外的参数,然后利用vue的双向数据驱动进行值的改变，用 this.$store.commit('') 方法在别的组件里面进行改变state的值

　　  vuex官方API还提供了一个actions，这个actions也是个对象变量，最大的作用就是里面的Action方法 可以包含任意异步操作，这里面的方法是用来异步触发mutations里面的方法，actions里面自定义的函数接收一个context参数和要变化的形参

this.$store.dispatch('')方法来更改状态

待续，持续更新