前端面试跳槽总结

1、面试准备

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

二、 javascript面向对象编程开发

• es6和es5继承区别

• es6语法更加优雅简单，可是浏览器不支持
• es5写法和操做都比较麻烦，但兼容性好
• 详细比较 www.jianshu.com/p/342966fdf…
• javascript原型链和异步的讲解

• var,let,const的区别

  • 使用var声明的变量，其做用域为该语句所在的函数内，且存在变量提高现象；
  • 使用let声明的变量，其做用域为该语句所在的代码块内，不存在变量提高；
  • 使用const声明的是常量，在后面出现的代码中不能再修改该常量的值。

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

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

• Gulp

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

• Webpack

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

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

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

五、 熟悉一种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…

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

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

• 详细比较 blog.csdn.net/crystal6918…

• 防抖

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

• 节流

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

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

• zcfy.cc/article/422…

九、jquery 开发流程

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

十、git学习 progit.bootcss.com/

2、一面准备

1. css页面布局

• 三列布局五种方法: www.cnblogs.com/chengzp/p/l…
• 两列布局： www.bestvist.com/2017/10/14/…
• 清除浮动方法：segmentfault.com/a/119000000…

2. css盒子模型

• css盒子模型 www.cnblogs.com/chengzp/p/c…
• 边距重叠问题解决方案.blog.csdn.net/qq_24235325…

3. DOM的事件类

• DOM事件类总结： www.cnblogs.com/chengzp/p/d…

4. http协议

• http协议总结 www.cnblogs.com/chengzp/p/h…

5. 原型链

• 原型链总结 www.cnblogs.com/chengzp/p/p…

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. 缓存

  • 缓存总结