前端面试跳槽总结-CSDN博客

一、面试准备

1、 css,html,js基本功知识

2、 javascript面向对象编程开发

es6和es5继承区别
es6语法更加优雅简单，但是浏览器不支持
es5写法和操作都比较麻烦，但兼容性好
详细比较 www.jianshu.com/p/342966fdf…
javascript原型链和异步的讲解
var,let,const的区别
- 使用var声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象；
- 使用let声明的变量，其作用域为该语句所在的代码块内，不存在变量提升；
- 使用const声明的是常量，在后面出现的代码中不能再修改该常量的值。

3、构建工具gulp和webpack的区别

详细比较 www.jianshu.com/p/b1022d224…
Gulp

Gulp就是为了规范前端开发流程，实现前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等功能的一个前端自动化构建工具。说的形象点，“Gulp就像是一个产品的流水线，整个产品从无到有，都要受流水线的控制，在流水线上我们可以对产品进行管理。”

Webpack

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、AMD 模块、ES6 模块、CSS、图片、JSON、Coffeescript、LESS 等。

4、了解css预编译器：styles/less/sass

* 基于css的，能让css也有一种编程语言范。解决了css的诸多问题，如css模块化、无法嵌套书写、没有变量。
复制代码

5、熟悉一种mvvm的开发模式。例如vue,熟悉vue生命周期，钩子，等含义

vue官网 cn.vuejs.org/v2/guide/
vue生命周期 segmentfault.com/a/119000000…
vue-router segmentfault.com/a/119000000…
vuex segmentfault.com/a/119000000…

6、了解并且熟悉前端组件化开发流程和模式

7、防抖和节流实现和区别

详细比较 blog.csdn.net/crystal6918…
防抖

将几次操作合并为一此操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。

节流

使得一定时间内只触发一次函数。它和防抖动最大的区别就是，节流函数不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而防抖动只是在最后一次事件后才触发一次函数。原理是通过判断是否到达一定时间来触发函数，若没到规定时间则使用计时器延后，而下一次事件则会重新设定计时器。

8、预加载三种区别。asyns、defer、preload

zcfy.cc/article/422…

9、jquery 开发流程

www.cnblogs.com/yoomin/p/53…

10、git学习 progit.bootcss.com/

二、一面准备

6. 类与继承

类与继承总结 www.cnblogs.com/chengzp/p/e…
this?原型/原型链？继承？闭包？zhuanlan.zhihu.com/p/28058983

7. 通信类

同源策略

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。当一个浏览器的两个tab页中分别打开来百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。[1] 如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。

跨域几种方法
- jsonp
- postMessage
- websocket
- cors

8. 安全类

csrf 跨站点访问
xss 在网页注入脚本(js)
- 慕课网视频教程：www.imooc.com/learn/812

9. 算法

快速排序
全部排序
递归讲解
递归树
for循环加递归调用顺序：先递归后for循坏，直到递归完才执行下一步操作；
数组转化成递归树

const jsonArr = [
    {name: 'a', id: 1, pid: 0},
    {name: 'b', id: 2, pid: 1},
    {name: 'c', id: 3, pid: 1},
    {name: 'd', id: 4, pid: 2},
    {name: 'e', id: 5, pid: 2}
]

function fn(data, pid = 0) {
    let result = []
    let temp
    for (let i = 0; i < data.length; i++) {
        if (data[i].pid === pid) {
            let obj = {
                'name': data[i].name,
                'id': data[i].id
            }
            result.push(obj)

            // 返回了一个result数组，先递归完，在for循坏
            temp = fn(data, data[i].id)
            // 如果数组大于0，就是他的子级
            if (temp.length > 0) {
                obj.children = temp
            }
        }
    }
    return result
}
复制代码

树对象变回数组

    
function resertJson(aryTreeObj, pid = 0) {
    var wrapper = [];
    if (ary.length < 1) return wrapper;

    for (var i = 0; i < ary.length; i++) {
        var item = ary[i];

        var obj = {
            name: item.name,
            id: item.id,
            pid: pid
        };
        wrapper.push(obj);

        if (item.children && item.children.length > 0) {
            resertJson(item.children, item.id);
        }
    }
    return wrapper;
}

复制代码

二面

1. 浏览器的渲染机制
- DOM：Document Object Model，浏览器将HTML解析成树形的数据结构，简称DOM。
- CSSOM：CSS Object Model，浏览器将CSS解析成树形的数据结构，简称CSSOM。
- Render Tree: DOM和CSSOM合并后生成Render Tree，如下图：
- Layout: 计算出Render Tree每个节点的具体位置。
- Painting：通过显卡，将Layout后的节点内容分别呈现到屏幕上。
- 详细讲解浏览器的渲染机制
- 重排与重绘区别和解决方案
2. 缓存
- 缓存总结