金三银四求职季,前端面试题小梳理(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布局

写一个三角形
头朝上： 

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

头朝下：

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

头朝右：

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

头朝左：

 {
    width: 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知识并非很牢固，哈哈。来总结一下吧

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

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

　　　　三、DNS解析URL对应的IP。

　　　　四、根据IP创建TCP链接（三次握手）。

　　　　五、HTTP发起请求。

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

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

　　　　八、关闭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('')方法来更改状态

 

待续，持续更新