前端一年至三年工作经验必知

1.防抖（设定一个时间，如果在这个时间范围内再次触发，时间又重新计时），节流（设定一个时间，时间内只能触发一次，时间结束才能触发第二次）

优质解释：https://segmentfault.com/a/1190000018428170

2.深拷贝和浅拷贝

分清楚基本数据类型和引用数据类型

注意：Object.assign、slice、concat是浅拷贝

【JS】深拷贝与浅拷贝的区别，实现深拷贝的几种方法 - 听风是风 - 博客园 https://www.jianshu.com/p/d5f572dd3776

3. call apply bind

call一个一个 apply 数组

数组之间追加\获取数组中的最大值和最小值\验证是否是数组（前提是toString()方法没有被重写过）\类（伪）数组使用数组方法

4.promise的原理理解还需要进一步、promise retry的书写需要找个时间自己测试下

5.箭头函数和普通函数的区别 6点

箭头函数是匿名函数，不能作为构造函数，不能使用new

箭头函数不绑定arguments，取而代之用rest参数...解决

箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值

箭头函数通过 call() 或 apply() 方法调用一个函数时，只传入了一个参数，对 this 并没有影响。

箭头函数没有原型属性

箭头函数不能当做Generator函数,不能使用yield关键字

箭头函数的 this 永远指向其上下文的 this ，任何方法都改变不了其指向，如 call() , bind() , apply()
普通函数的this指向调用它的那个对象

6.var与let、const 6点

一、var声明的变量会挂载在window上，而let和const声明的变量不会：

二、var声明变量存在变量提升，let和const不存在变量提升

三、let和const声明形成块作用域

四、同一作用域下let和const不能声明同名变量，而var可以

五、暂存死区

六、const

1、一旦声明必须赋值,不能使用null占位。 2、声明后不能再修改 3、如果声明的是复合类型数据，可以修改其属性

`7.浏览器中的事件循环机制`

1.浏览器中5种线程机制

定时器触发器、事件触发器、GUI渲染、http请求、js引擎

注意：1.js引擎和GUI渲染互斥，js运行时间过长会导致页面阻塞；2.定时器、事件触发器、htpp请求都是把回调放入任务队列等待js引擎来处理

HTML提出了web-worker-api,主要为了解决页面阻塞问题，但是没有改变js是单线程的本质

宏任务（8个）和微任务（promise.then、nextTicket）（4个）

2.javascript事件循环机制

3.浏览器端，每执行一个宏任务后就去执行一个微任务

4.浏览器和 Node 环境下，microtask 任务队列的执行时机不同

Node 端，microtask 在事件循环的各个阶段之间执行
浏览器端，microtask 在事件循环的 macrotask 执行完之后执行

`8.首屏加载优化`

简单总结为（8）种

1.代码足够简洁，减少冗余

2.减少资源的引入量，不要为了某些特效而引入一大堆js和css文件

3.图片使用懒加载

4.CDN内容分发网络

5.webpack合理打包

6.http2.0，nginx配置文件listen 443 ssl改成listen 443 ssl http2

7.缓存机制

8.无模块化js按需加载。有时候引入的第三方插件不能被webpack优化按需加载，或者没有提供模块化加载（只能同script标签引入）

9.对象作为Object可以调用Object上的哪些操作

create 创建一个对象
defineProperty 定义一个对象的一个属性

Object.defineProperty(obj, "newDataProperty", {value: 101,writable: true,enumerable: true,configurable: true
});

注意：  1.第一个参数必须为对象2.descriptor 不能同时具有 （value 或 writable 特性）（get 或 set 特性）。3.configurable 为false 时，不能重新修改装饰器

defineProperties 定义多个属性

keys 遍历可枚举的属性，只包含对象本身可枚举属性，不包含原型链可枚举属性

values 遍历可枚举的属性值，只包含对象本身可枚举属性值，不包含原型链可枚举属性值

Object.assign( target, source, source1 ) 方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。拷贝的属性是有限制的，只拷贝源对象的自身属性（不拷贝继承属性），也不拷贝不可枚举的属性（enumerable: false）
getPrototypeOf 获取指定对象的原型（内部[[Prototype]]属性的值）
setPrototypeOf 设置一个指定的对象的原型

10.computer和watch之间的区别

computer适用于一个变量由其他变量计算组合得来（比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化）不在data里面定义，直接在computer里面定义

watch适用于监听一个变量来处理一些业务逻辑（watch一般用于监控路由、input输入框的值特殊处理等等，它比较适合的场景是一个数据影响多个数据）必须在data里面定义了的才能监听，只能监听单个变量或者整个对象

11.字符传常规操作

字符串截取

str.substring(indexStart, [indexEnd]) 返回一个索引和另一个索引之间的字符串

str.substr(start, [length]) 返回从指定位置开始的字符串中指定字符数的字符

str.slice(beginIndex[, endIndex])

12.数组常规操作

array.splice(index,howmany,item1,.....,itemX) 方法用于添加或删除数组中的元素。注意：这种方法会改变原始数组。

13.computed 与 watch 、 created 与 mounted 彼此的关联与顺序

computed -> created -> mounted

而 watch 与 computed 的区别，最关键的是watch需要监听值的变化而改变，但是computed从一开始就可以达到和某个值关联起来。

14.html5新加了什么

1. 语义化标签
2. 增强型表单（1）新的表单输入类型（2）新表单元素（3）新表单属性
3. 视频和音频
4. Canvas绘图（图形、路径、文本、渐变、图像）
5. SVG绘图（与Canvas的区别）
6. 地理定位
7. 拖放API
8. Web Worker 完整的Web Worker实例
9. Web Storage
10. Web Socket

HTML5新增特性 - sarah_wen - 博客园

15.css3新特性

transform变换效果
transition过渡效果
animation动画效果
阴影 box-shadow
border-image
弹性布局 Flex
栅格布局 grid
媒体查询
盒模型定义

渐变 Gradients

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

16.reduce map filter forEarch every some

reduce() 是数组的归并方法，与forEach()、map()、filter()等迭代方法一样都会对数组每一项进行遍历，但是reduce() 可同时将前面数组项遍历产生的结果与当前遍历项进行运算，这一点是其他迭代方法无法企及的

17.js类型转换

分为显式转换和隐式转换

显式转换指得是通过js提供的转换方法有目的的去转换（6种方法）

Number parseInt parseFloat toString String Boolean

隐式转换是指做某些操作时候，需要自动先转换类型才能进行判断(7种)

1.isNaN 2.递增递减操作符（包括前置和后置）、一元正负符号操作符 3.加法运算操作符 4.乘除、减号运算符、取模运算符 5.逻辑操作符（!、&&、||） 6.关系操作符（<, >, <=, >=）7. 相等操作符（==）

18.执行上下文和作用域

执行上下文指的是执行时候this的指向的区域，在函数运行的时候才明确，遵循着先进后出的原则。对象调用的函数的执行上下文就是当前对象

作用域指的是变量可作用的区域，在函数定义的时候就已经确定了，当前作用域如果不存在该变量还会沿着作用域链去寻找，直到找到全局作用域为止

同一个作用域下，对同一个函数的不同的调用会产生不同的执行上下文环境，继而产生不同的变量的值，所以，作用域中变量的值是在执行过程中确定的，而作用域是在函数创建时就确定的。

作用域是静态观念，执行上先文是动态的

19.函数的3种声明方式

函数声明式：存在函数提升，可以先调用再声明

函数表达式：不存在变量提升，可以在表达式后面直接加括号调用

20.git相关操作

git clone git add . git commit -m ' ' git pull git push

$ git config --global user.name "wirelessqa"
$ git config --global user.email wirelessqa.me@gmail.com

git revert HEAD

git revert xxxxxx(id)

21.块级元素和行内元素

块级元素

总是在新行上开始；
高度，行高以及外边距和内边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度。
它可以容纳内联元素和其他块元素

行内元素

和其他元素都在一行上；
高，行高及外边距和内边距不可改变；
宽度就是它的文字或图片的宽度，不可改变
内联元素只能容纳文本或者其他内联元素

22.重绘和回流

重绘改变当前节点外观，不会影响布局

回流会改变布局或者几何属性

下面几个原因可能会导致性能问题

改变 window 大小
改变字体
添加或删除样式
文字改变
定位或者浮动
盒模型

减少重绘和回流

使用 translate 替代 top
使用 visibility替换 display: none，因为前者只会引起重绘，后者会引发回流
不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局
动画实现的速度的选择，动画速度越快，回流次数越多，也可以选择使用
CSS 选择符从右往左匹配查找，避免 DOM 深度过深
将频繁运行的动画变为图层，图层能够阻止该节点回流影响别的元素。比如对于 video标签，浏览器会自动将该节点变为图层

23.__proto__ prototype constructor

24.浏览器内核

主要认知5种 IE内核 webkit内核 blink firfox自家的内核

safari是第一个使用webkit内核的浏览器，chorme把webkit发扬光大，后面自己开发了blink内核。国内很多浏览器都是双内核，兼容IE内核和跟随谷歌脚步。百度浏览器只用了IE内核

25.es6和es5的区别（5点）

1.新增let、const概念，增加块级作用域

2.模板字符串书写更加简单

3.函数指向，箭头函数指向的是其声明时候的上下文，而不是调用时候的对象

4.创建对象，class语法糖，结构清晰明了

5.async await

26.promise.all promise.race

Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。

顾名思义，Promse.race就是赛跑的意思，意思就是说，Promise.race([p1, p2, p3])里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。

27.快速排序、插入排序、选择排序

快速排序

var quickSort = function(arr) {if (arr.length <= 1) { return arr; }var pivotIndex = Math.floor(arr.length / 2);   //基准位置（理论上可任意选取）var pivot = arr.splice(pivotIndex, 1)[0];  //基准数var left = [];var right = [];for (var i = 0; i < arr.length; i++){if (arr[i] < pivot) {left.push(arr[i]);} else {right.push(arr[i]);}}return quickSort(left).concat([pivot], quickSort(right));  //链接左数组、基准数构成的数组、右数组
};

插入排序

1.请简述下http和https两者

2.请说下浏览器事件循环机制（可延伸至node上的事件循环机制）

3.请介绍下跨域和跨域的解决方式

4.请简单介绍下javascrpit的垃圾回收机制

5.你平时如何对前端页面的性能进行优化（扩展移动端性能优化）

6.请介绍下状态码200和304他们各自的意义

7.ES6和ES5到底有哪些区别

8.简单介绍下js的继承

9.分析下各种存储方式（cookie、seesion、localstorage、sessionstroage、webstroage）

10.tcp三次握手，四次挥手简单介绍下（能画出图来）

11.promise / promise.all / promise.race（能手撕）

12.mvvm 和 mvc的区别和发展历程（扩展知道mvp）

13.vue是如何实现双向绑定的

14.vue 路由（和路由相关的知识点）

15.浏览器如何渲染一个页面的

16.js数据类型

17.手写快速排序，插入排序

18.get post的区别

19.h5的新特性

20.css3新特性

21.http状态码

22.bind call apply之间的区别

23.xss和csrf的区别以及实现方式