2019 前端面试 | 知其然，并知其所以然

栏目: CSS · 发布时间: 5年前

本文推荐 PC 端阅读~

本文版权归 “公众号 | 前端一万小时” 所有，未经授权，请勿转载！
复制代码

:rocket:本文为“语雀”私有库「前端一万小时」现有文章目录及对应面试题索引，含未公开发布和写作中的文章，目录持续更新中。

:hammer:本文使用指南：
1. 收藏/点赞，方便查阅和全文搜索；
2. 关注公众号「前端一万小时」；
3. 公众号内回复文章对应编号，即可获取面试题答案参考；
4. 以上三步搞定了“知其然”，想要“知其所以然”，去公众号探索探索吧。
复制代码

Web 前置知识

《老生常谈的从 URL 输入到页面展现背后发生的事》 [编号：web_01]

涉及面试题：
1. 从 URL 输入到页面展现背后发生了什么事？
2. 一次完整的 HTTP 事务是怎么一个过程？
3. 浏览器是如何渲染页面的？
4. 浏览器的内核有哪些？分别有什么代表的浏览器？
5. 刷新页面，js 请求一般会有哪些地方有缓存处理？
复制代码

HTML

《① HTML 基础》[编号：html_01]

涉及面试题：
 1. doctype 有什么作用？怎么写？
 2. 列出常见的标签，并简单介绍这些标签用在什么场景？
 3. 页面出现了乱码，是怎么回事？如何解决？
 4. title 属性和 alt 属性分别有什么作用？
 5. html 的注释怎样写？
 6. HTML5 为什么只写 <!DOCTYPE HTML> ？
 7. data- 属性的作用？
 8. <img> 的 title 和 alt 有什么区别？
 9. WEB 标准以及 W3C 标准是什么？
10. doctype 作用? 严格模式与混杂模式如何区分？它们有何意义?
11. HTML 全局属性（global attribute）有哪些？
复制代码

《② HTML 元素、属性详解》 [编号：html_02]

涉及面试题：
1. meta 有哪些常见的值？
2. meta viewport 是做什么用的，怎么写？
3. 列出常见的标签，并简单介绍这些标签用在什么场景？
4. 如何在 html 页面上展示 <div></div> 这几个字符？
5. 你是如何理解 HTML 语义化的？
6. 前端需要注意哪些 SEO?
7. 你对网页标准和 W3C 重要性的理解?
复制代码

《③ HTML 表单详解》[编号：html_03]

涉及面试题：
1. post 和 get 方式提交数据有什么区别？
2. 在 input 里，name 有什么作用？
3. label 有什么作用？如何使用？
4. radio 如何分组？
5. placeholder 属性有什么作用？
6. type=hidden 隐藏域有什么作用？举例说明。
7. CSRF 攻击是什么？如何防范？
8. 网页验证码是干嘛的？是为了解决什么安全问题？
9. 常见 web 安全及防护原理？
复制代码

CSS

《CSS 基础与选择器初识》 [编号：css_01]

涉及面试题：
1. CSS 加载方式有几种？
2. @import 有什么作用？如何使用？
3. CSS 选择器常见的有几种？
4. id 选择器和 class 选择器的使用场景分别是什么？
5. @charset 有什么作用？
6. 简述 src 和 href 的区别？
7. 页面导入时，使用 link 和 @import 有什么区别？
复制代码

《CSS 选择器详解》[编号：css_02]

涉及面试题：
1. 伪类选择器有哪些？
2. 伪元素和伪类的区别？
复制代码

《CSS 结构和层叠》[编号：css_03]

涉及面试题：
1. 选择器的优先级是如何计算的？
2. 什么是 CSS 继承？哪些属性能继承，哪些不能？
复制代码

《CSS 值和单位》[编号：css_04]

涉及面试题：
1. 你有没有使用过视网膜分辨率的图形？当中使用什么技术？
2. px，em，rem，vw 有什么区别？
复制代码

《CSS 给文本加样式：① 字体属性》 [编号：css_05]

涉及面试题：
简述字体图标的原理，动手实现使用 iconfont 实现字体图标的 demo。
复制代码

《CSS 给文本加样式：② 文本属性》
《CSS 基本视觉格式化：① “块盒子”格式化》 [编号：css_07]

涉及面试题：
1. 块级元素和行内元素分别有哪些？ 空（void）元素有那些？块级元素和行内元素有什么区别？
2. IE 盒模型和 W3C 盒模型有什么区别?
3. 在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例？
复制代码

《CSS 基本视觉格式化：② “行内盒子”格式化》 [编号：css_08]

涉及面试题：
1. line-height: 2; 和 line-height: 200%; 有什么区别?
2. 在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例。
3. 行内元素的“边框”、“边界”等“框属性”是由 font-size 还是 line-height 控制？
4. height=line-height 可以用来垂直居中单行文本？代码怎么实现？
5. inline-block 有什么特性？
6. inline-block 在实际工作中有什么作用？
7. 怎么去除两个按钮中间的缝隙问题？
8. 一个页面有一排高度不一样的产品图，这时如果我们用 inline-block ，怎样使他们“顶端对齐”？
复制代码

《CSS 给盒子、背景、链接、列表、表单、表格等加样式》 [编号：css_09]

涉及面试题：
1. 让一个元素“看不见”有几种方式？有什么区别？
2. 单行文本溢出加 ... 如何实现？
3. 如何在页面上实现一个圆形的可点击区域？
复制代码

《让“盒子”动起来：① 浮动》 [编号：css_10]

涉及面试题：
1. 浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响？
2. 清除浮动指什么？如何清除浮动？两种以上方法。
复制代码

《让“盒子”动起来：② “定位”和 BFC》 [编号：css_11]

涉及面试题：
1. 有几种定位方式？分别是如何实现定位的？参考点是什么？使用场景是什么？
2. z-index 有什么作用？如何使用？
3. BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明。
4. 在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例？
复制代码

《把“可以动的盒子”更优雅地展示：① “伪元素”妙用》 [编号：css_12]

涉及面试题：
1. 如何使用伪元素来清除浮动？
2. 可以通过哪些方法优化 CSS3 animation 渲染？
复制代码

《把“可以动的盒子”更优雅地展示：② “居中”盒子》 [编号：css_13]

涉及面试题：
1. 如何让块级元素水平居中？如何让行内元素水平居中？如何让 inline-block 元素水平居中？
2. 垂直上下居中的办法？
复制代码

《把“可以动的盒子”更优雅地展示：③ 常用的“布局”》 [编号：css_14]

涉及面试题：
响应式布局原理？
复制代码

《让这些“展示”有更好的扩展性——媒体查询》 [编号：css_15]

涉及面试题：
1. 列举你了解的 HTML5、CSS3 新特性？
2. Canvas 和 SVG 有什么区别？
复制代码

《CSS 拓展：① 浏览器兼容》 [编号：css_16]

涉及面试题：
 1. 渐进增强和优雅降级分别是什么意思？
 2. 什么是 CSS hack？在哪个网站查看标签（属性）的浏览器兼容情况？
 3. IE6、7 的 hack 写法是？
 4. 尽可能多的列举浏览器兼容的处理范例？
 5. css reset 是什么？css 预编译器是什么？后编译器（post css）是什么？
 6. css reset 和 normalize.css 有什么区别？
 7. 尽可能多的写出浏览器兼容性问题？
 8. 如何让 Chrome 浏览器显示小于 12px 的文字？
 9. CSS 预处理器的比较：less、sass？
10. 常见兼容性问题？
复制代码

《CSS 拓展：② CSS 编码规范》 [编号：css_17]

涉及面试题：
1. 列举 CSS 编码规范？
2. 编码规范的作用是什么？列举 5 条以上编码规范。
复制代码

《CSS 拓展：③ Emmet 常用语法介绍》
《CSS 拓展：④ flex 布局》

:rocket:实战：HTML+CSS 综合

《临摹“简书”PC 静态首页：① 结构+header》[编号：html-css_01]

涉及面试题：
1. 什么是盒模型？
2. CSS 的属性 box-sizing 有什么值？分别有什么作用？
复制代码

《临摹“简书”PC 静态首页：② 侧边栏+推荐》
《临摹“简书”PC 静态首页：③ 轮播+按钮组+内容区》

JavaScript 初识

《① JS 速览——进入 JS 的世界》[编号：js_01]

涉及面试题：
1. 简单介绍 JavaScript 的发展历史。ES3、ES5、ES6 分别指什么？
2. 说几条写 JavaScript 的基本规范？
3. JavaScript 代码中的 “use strict” 是什么意思？
4. 说说严格模式的限制？
复制代码

《② 运算符、运算符优先级》[编号：js_02]

涉及面试题：
 1. NaN 是什么？有什么特别之处？
 2. == 与 === 有什么区别？
 3. console.log(1+'2') 和 console.log(1-'2') 的打印结果？
 4. 为什么 console.log(0.2+0.1==0.3) //输出 false ？
 5. 请用三元运算符（问号冒号表达式）改写以下代码：
    if (a > 10) {
        b = a
    } else {
        b = a - 2
    }

 6. 以下代码输出的结果是？
    var a = 1;
    a+++a;
    typeof a+2;

 7. 以下代码输出什么？
    var d = a = 3, b = 4
    console.log(d)

 8. 以下代码输出什么？
    var d = (a = 3, b = 4)
    console.log(d)

 9. 以下代码输出结果是？为什么？
    var a = 1, b = 2, c = 3;
    var val = typeof a + b || c >0
    console.log(val)
    var d = 5;
    var data = d ==5 && console.log('bb')
    console.log(data)
    var data2 = d = 0 || console.log('haha')
    console.log(data2)
    var x = !!"Hello" + (!"world", !!"from here!!");
    console.log(x)

10. 以下代码输出结果是？为什么？
    var a = 1;
    var b = 3;
    console.log( a+++b );

11. 以下代码输出的结果是？为什么？
    console.log(1+1);
    console.log("2"+"4");
    console.log(2+"4");
    console.log(+"4");
复制代码

《③ 变量、值、数据类型、数据类型转换》[编号：js_03]

涉及面试题：
1. JavaScript 定义了几种数据类型？哪些是原始类型？哪些是复杂类型？null 是对象吗？
2. 对象类型和原始类型的不同之处？函数参数是对象会发生什么问题？
3. 怎样判断“值”属于哪种类型？typeof 是否能正确判断类型？instanceof 呢？
   instanceof 有什么作用？内部逻辑是如何实现的？
4. null，undefined 的区别？
5. 说一下 JS 中类型转换的规则？
6. 以下代码的输出？为什么？
    console.log(a);
    var a = 1;
    console.log(b);

7. 以下代码输出什么？
    var a = typeof 3 + 4
    console.log(a)

8. 以下代码输出什么？
    var a = typeof  typeof 4+4
    console.log(a)
复制代码

《④ 流程控制语句》[编号：js_04]

涉及面试题：
1. break 与 continue 有什么区别？
2. switch case 语句中的 break 有什么作用？
3. for of、for in 和 forEach、map 的区别？
4. 写出如下知识点的代码范例：
    ① if-else 的用法；
    ② switch-case 的用法；
    ③ while 的用法；
    ④ do-while 的用法；
    ⑤ for 遍历数组的用法；
    ⑥ for-in 遍历对象的用法；
    ⑦ break 和 continue 的用法。

5. 以下代码输出什么？
    var a = 2
    if(a = 1) {
      console.log('a等于1')
    }else{
      console.log('a不等于1')
    }
复制代码

JavaScript 入门

《① JS 函数——养成函数思维》[编号：js_05]

涉及面试题：
1. 写一个函数，返回参数的平方和？
    function sumOfSquares(){

    }
    var result = sumOfSquares(2,3,4)
    var result2 = sumOfSquares(1,3)
    console.log(result)  //-->？29
    console.log(result2)  //-->？10

2. 如下代码的输出？为什么？
    sayName('world');
    sayAge(10);
    function sayName(name){
      console.log('hello ', name);
    }
    var sayAge = function(age){
      console.log(age);
    };

3. 如下代码的输出？为什么？
    var x = 10;
    bar()
    function bar(){
      var x = 30;
      function foo(){
        console.log(x)
      }
      foo();
    }

4. 如下代码的输出？为什么？
    var x = 10
    bar()
    function foo() {
      console.log(x)
    }
    function bar(){
      var x = 30
      foo()
    }

5. 如下代码的输出？为什么？
    var a = 1
    function fn1(){

      function fn3(){
        function fn2(){
          console.log(a)
        }
        fn2()
        var a = 4
      }
      var a = 2
      return fn3
    }
    var fn = fn1()
    fn() //-->？

6. 如下代码的输出？为什么？
    var a = 1
    function fn1(){
      function fn2(){
        console.log(a)
      }
      function fn3(){
        var a = 4
        fn2()
      }
      var a = 2
      return fn3
    }
    var fn = fn1()
    fn() //-->？

7. 如下代码的输出？为什么？
    var a = 1
    function fn1(){
      function fn3(){
        var a = 4
        fn2()
      }
      var a = 2
      return fn3
    }
    function fn2(){
      console.log(a)
    }
    var fn = fn1()
    fn() //-->？

8. 如下代码的输出？为什么？
    var a = 1
    var c = { name: 'oli', age: 2 }
    function f1(n){
      ++n
    }
    function f2(obj){
      ++obj.age
    }
    f1(a)
    f2(c)
    f1(c.age)
    console.log(a)
    console.log(c)

9. 如下代码的输出？为什么？
    var obj1 = {a:1, b:2};
    var obj2 = {a:1, b:2};
    console.log(obj1 == obj2);
    console.log(obj1 = obj2);
    console.log(obj1 == obj2);
复制代码

《② JS 数组——让数据排排坐》[编号：js_06]

涉及面试题：
1. 写一个函数 squireArr，其参数是一个数组，作用是把数组中的每一项变为原值的平方。
    var arr = [3, 4, 6]
    function squireArr( arr ){
      //补全
    }
    squireArr(arr)
    console.log(arr)  //-->[9, 16, 36]

2. 写一个函数 squireArr，其参数是一个数组，返回一个新的数组，新数组中的每一项是原数组
   对应值的平方，原数组不变。
    var arr = [3, 4, 6]
    function squireArr( arr ){
      //补全
    }
    var arr2 = squireArr(arr)
    console.log(arr)  //-->[3, 4, 6]
    console.log(arr2)  //-->[9, 16, 36]

3. 遍历 company 对象，输出里面每一项的值。
    var company = {
      name: 'qdywxs',
      age: 3,
      sex: '男'
    }

4. 遍历数组，打印数组里的每一项的平方。
    var arr = [3,4,5]
复制代码

《③ JS 对象——理解对象》[编号：js_07]

涉及面试题：
1. 介绍 js 有哪些内置对象？
2. 以下代码输出什么？
    var name = 'sex'
    var company = {
      name: 'qdywxs',
      age: 3,
      sex: '男'
    }
    console.log(company[name])

3. 以下代码输出什么？
    var name = 'sex'
    var company = {
        name: 'Oli',
        age: 3,
        sex: '男'
    }
    console.log(company.name)
复制代码

《④ 了解 DOM——与网页交互》
《⑤ JS 事件——异步编码》

JavaScript 基础

《JS 函数：① 把函数视为“值”》
《JS 函数：② 嵌套函数、作用域和闭包》[编号：js_11]

涉及面试题：
1. 闭包是什么？闭包的作用是什么？闭包有哪些使用场景？
2. 使用递归完成 1 到 100 的累加？
3. 谈谈垃圾回收机制的方式及内存管理？
4. 谈谈你对 JS 执行上下文栈和作用域链的理解？
5. 如下代码输出多少？如果想输出 3，那如何改造代码？
    var fnArr = [];
    for (var i = 0; i < 10; i ++) {
      fnArr[i] =  function(){
        return i
      };
    }
    console.log( fnArr[3]() )

6. 封装一个 Car 对象。
    var Car = (function(){
      var speed = 0;
      //补充
      return {
        setSpeed: setSpeed,
        getSpeed: getSpeed,
        speedUp: speedUp,
        speedDown: speedDown
      }
    })()
    Car.setSpeed(30)
    Car.getSpeed() //-->30
    Car.speedUp()
    Car.getSpeed() //-->31
    Car.speedDown()
    Car.getSpeed()  //-->30

7. 如下代码输出多少？如何连续输出 0，1，2，3，4？
    for(var i=0; i<5; i++){
      setTimeout(function(){
        console.log('delayer:' + i )
      }, 0)
    }

8. 如下代码输出多少？
    function makeCounter() {
      var count = 0
      return function() {
        return count++
      };
    }
    var counter = makeCounter()
    var counter2 = makeCounter();
    console.log( counter() ) //-->0
    console.log( counter() ) //-->1
    console.log( counter2() ) //-->?
    console.log( counter2() ) //-->?
复制代码

《JS 数组：① ES3 数组方法》[编号：js_12]

涉及面试题：
1. 数组的哪些 API 会改变原数组？
2. 写一个函数，操作数组，返回一个新数组，新数组中只包含正数。
    function filterPositive(arr){

    }
    var arr = [3, -1,  2, true]
    filterPositive(arr)
    console.log(filterPositive(arr)) //-->[3,  2]

3. 补全代码，实现数组按姓名、年纪、任意字段排序。
    var users = [
      { name: "John", age: 20, company: "Baidu" },
      { name: "Pete", age: 18, company: "Alibaba" },
      { name: "Ann", age: 19, company: "Tecent" }
    ]
    users.sort(byField('age'))
    users.sort(byField('company'))

4. 用 splice 函数分别实现 push、pop、shift、unshift 方法。
   如:
    function push(arr, value){
      arr.splice(arr.length, 0, value)
      return arr.length
    }
    var arr = [3, 4, 5]
    arr.push(10) // arr 变成[3,4,5,10]，返回 4
复制代码

《JS 数组：② ES5 数组方法》[编号：js_13]

涉及面试题：
1. for of、for in 和 forEach、map 的区别？
2. 数组的哪些 API 会改变原数组？
3. 如何消除一个数组里面重复的元素？
4. 判断一个变量是否是数组，有哪些办法？
5. ["1", "2", "3"].map(parseInt) 答案是多少？
6. 取数组的最大值（ES5、ES6）？
7. 实现一个 reduce 函数，作用和原生的 reduce 类似下面的例子。
   Ex：
    var sum = reduce([1, 2, 3], function(memo, num){ return memo + num; }, 0); => 6

8. 怎样用原生 JS 将一个多维数组拍平？
    var array = [1, [2], [3, [4, [5]]]]
    function flat(arr) {
      //补全
    }
    console.log(flat(array)) //-->[1, 2, 3, 4, 5]
复制代码

《面向对象编程：① 对象构造函数》[编号：js_14]

涉及面试题：
1. new 的原理是什么？通过 new 的方式创建对象和通过字面量创建有什么区别？
2. Object.create 有什么作用？
3. 怎样判断“值”属于哪种数据类型？typeof 是否能正确判断类型？instanceof 呢？instanceof 有什么作用？内部逻辑是如何实现的？
4. JavaScript 有哪些方法定义对象？
5. 如下代码中？new 一个函数本质上做了什么？
    function Modal(msg){
      this.msg = msg
    }
    var modal = new Modal()
复制代码

《面向对象编程：② 使用原型》[编号：js_15]

涉及面试题：
 1. JS 原型是什么？如何理解原型链？
 2. JS 如何实现继承？
 3. 实现一个函数 clone 可以对 JavaScript 中的五种主要数据类型（Number、string、Object、Array、Boolean）进行复制？
 4. 对 String 做扩展，实现如下方式获取字符串中频率最高的字符：
    var str = 'ahbbccdeddddfg';
    var ch = str.getMostOften();
    console.log(ch); //-->d，因为 d 出现了 5 次

 5. 有如下代码，代码中并未添加 toString 方法，这个方法是哪里来的？画出原型链图进行解释：
    function People(){
      //补全
    }
    var p = new People()
    p.toString()

 6. 有如下代码，解释 Person、 prototype、__proto__、p、constructor 之间的关联：
    function Person(name){
      this.name = name;
    }
    Person.prototype.sayName = function(){
      console.log('My name is :' + this.name);
    }
    var p = new Person("Oli")
    p.sayName();

 7. 下面两种写法有什么区别？
    // 方法1：
    function People(name, sex){
      this.name = name;
      this.sex = sex;
      this.printName = function(){
        console.log(this.name);
      }
    }
    var p1 = new People('Oli', 2)
    // 方法2：
    function Person(name, sex){
      this.name = name;
      this.sex = sex;
    }
    Person.prototype.printName = function(){
      console.log(this.name);
    }
    var p1 = new Person('Aman', 2);

 8. 补全代码，实现继承：
    function Person(name, sex){
      // 补全
    };
    Person.prototype.getName = function(){
      // 补全
    };
    function Male(name, sex, age){
      // 补全
    };
      // 补全
    Male.prototype.getAge = function(){
      // 补全
    };
    var catcher = new Male('Oli', '男', 2);
    catcher.getName();

 9. 如下代码中 call 的作用是什么？
    function Person(name, sex){
      this.name = name;
      this.sex = sex;
    }
    function Male(name, sex, age){
      Person.call(this, name, sex);  //这里的 call 有什么作用？
      this.age = age;
    }
复制代码

《JS 提供的对象：① 作为对象的“字符串”》[编号：js_16]

涉及面试题：
1. 多行字符串的声明有哪几种常见写法？
2. 以下代码输出什么？
    var str = 'C:\Users\Document\node\index.js'
    console.log(str.length)
   如何声明 str 让 console.log(str) 输出 C:\Users\Document\node\index.js ？
复制代码

《JS 提供的对象：② 正则表达式》[编号：js_17]

涉及面试题：
1. 写一个函数 isValidUsername(str)，判断用户输入的是不是合法的用户名（长度 6-20 个字符，
   只能包括字母、数字、下划线）？
2. 写一个函数 isPhoneNum(str)，判断用户输入的是不是手机号？
3. 写一个函数 isEmail(str)，判断用户输入的是不是邮箱？
4. 写一个函数 trim(str)，去除字符串两边的空白字符？
5. \d，\w，\s，[a-zA-Z0-9]，\b，.，*，+，?，x{3}，^，$ 分别是什么?
6. 什么是贪婪模式和非贪婪模式？
复制代码

《JS 提供的对象：③ Date》[编号：js_18]

涉及面试题：
写一个函数，参数为时间对象毫秒数的字符串格式，返回值为字符串。假设参数为时间对象毫秒数 t，
根据 t 的时间分别返回如下字符串：
  - 刚刚（ t 距当前时间不到1分钟时间间隔）；
  - 3分钟前（t 距当前时间大于等于1分钟，小于1小时）；
  - 8小时前（t 距离当前时间大于等于1小时，小于24小时）；
  - 3天前（t 距离当前时间大于等于24小时，小于30天）；
  - 2个月前（t 距离当前时间大于等于30天小于12个月）；
  - 8年前（t 距离当前时间大于等于12个月）。

    function friendlyDate(time){
      // 补充
    }
    var str = friendlyDate( '1556286683394' ) //--> x 分钟前（以当前时间为准）
    var str2 = friendlyDate('1555521999999') //--> x 天前（以当前时间为准）
复制代码

《JS 提供的对象：④ Math》[编号：js_19]

涉及面试题：
1. 写一个函数，返回从 min 到 max 之间的随机整数，包括 min 不包括 max ？
2. 写一个函数，生成一个随机颜色字符串，合法的颜色为 #000000 ~ #ffffff。
    function getRandColor(){
      //补全
    }
    var color = getRandColor()
    console.log(color)   //-->#3e2f1b

3. 写一个函数，生成一个长度为 n 的随机字符串，字符串字符的取值范围包括 0 到 9，a 到 z，A 到 Z。
    function getRandStr(len){
      //补全
    }
    var str = getRandStr(10); //-->0a3iJiRZap

4. 写一个函数，生成一个随机 IP 地址，一个合法的 IP 地址为 0.0.0.0 ~ 255.255.255.255。
    function getRandIP(){
      //补全
    }
    var ip = getRandIP()
    console.log(ip) //-->10.234.121.45
复制代码

《JS 提供的对象：⑤ JSON》[编号：js_20]

涉及面试题：
1. JSON 格式的数据需要遵循什么规则？
2. 使用 JSON 对象实现一个简单的深拷贝函数（deepCopy）？
3. XML 和 JSON 的区别？
4. eval 是做什么的？
5. 深拷贝和浅拷贝的区别？如何实现？
复制代码

《浏览器提供的对象：① BOM》[编号：js_21]

涉及面试题：
1. URL 如何编码解码？为什么要编码？
2. iframe 有那些缺点？
3. 补全如下函数，判断用户的浏览器类型。
    function isAndroid(){
      // 补全
    }
    function isIphone(){
      // 补全
    }
    function isIpad(){
      // 补全
    }
    function isIOS(){
      // 补全
    }
复制代码

《浏览器提供的对象：② DOM》[编号：js_22]

涉及面试题：
1. 什么是 Virtual DOM，为何要用 Virtual DOM？
2. 怎么添加、移除、复制、创建、和查找节点？
3. offsetWidth/offsetHeight，clientWidth/clientHeight 与 scrollWidth/scrollHeight 的区别？
4. attribute 和 property 的区别是什么？
5. 写一个函数，批量操作 css。
    function css(node, styleObj){
      //补全
    }
    css(document.body, {
      'color': 'red',
      'background-color': '#ccc'
    })

6. 补全代码，要求：当鼠标放置在 li 元素上，会在 img-preview 里展示当前 li 元素的
   data-img 对应的图片。
    <ul class="ct">
      <li data-img="1.png">鼠标放置查看图片1</li>
      <li data-img="2.png">鼠标放置查看图片2</li>
      <li data-img="3.png">鼠标放置查看图片3</li>
    </ul>
    <div class="img-preview"></div>
    <script>
      //你的代码
    </script>
复制代码

《浏览器提供的对象：③ 定时器》[编号：js_23]

涉及面试题：
 1. setTimeout、setInterval、requestAnimationFrame 各有什么特点？
 2. 实现一个节流函数？
 3. setTimeout 倒计时为什么会出现误差？
 4. 简单解释单线程、任务队列的概念？
 5. 简述同步和异步的区别？
 6. JS 延迟加载的方式有哪些？
 7. 函数防抖节流的原理？
 8. defer 和 async ？
 9. 下面这段代码输出结果是？ 为什么？
    var flag = true;
    setTimeout(function(){
      flag = false;
    },0)
    while(flag){}
    console.log(flag);

10. 下面这段代码输出结果是？为什么？
    var a = 1;
    setTimeout(function(){
      a = 2;
      console.log(a);
    }, 0);
    var a ;
    console.log(a);
    a = 3;
    console.log(a);
复制代码

《JS 事件：① 事件流和 DOM2 事件处理程序》[编号：js_24]

涉及面试题：
1. DOM 事件模型是什么？
2. 解释 DOM2 事件传播机制？
复制代码

《JS 事件：② 事件对象和事件代理》[编号：js_25]

涉及面试题：
1. 解释以下概念：事件传播机制、阻止传播、取消默认事件、事件代理？
2. 写一个 Demo，演示事件传播的过程，演示阻止传播的效果？
3. JS 的事件委托是什么，原理是什么？
复制代码

《JS 事件：③ 常见事件使用》[编号：js_26]

涉及面试题：
window.onload 和 document.onDOMContentLoaded 有什么区别？
复制代码

JavaScript 进阶

《前后端交互：① :rocket:Node.js 搭建简单后端服务器》
《前后端交互：② AJAX 概念及 XMLHttpRequest 对象初识》[编号：js_28]

涉及面试题：
1. HTTP 状态码知道哪些？
2. 301 和 302 的区别是什么？
3. Ajax 是什么？有什么作用？
4. HTTP 的几种请求方法和区别？
5. Ajax 原理？
复制代码

《前后端交互：③ XMLHttpRequest 对象详解》[编号：js_29]

涉及面试题：
1. 把 GET 和 POST 类型的 AJAX 的用法手写一遍？
2. 封装一个 AJAX 函数？
复制代码

《前后端交互：④ AJAX 示例——:rocket:实现简单新闻列表切换》
《浏览器相关：① 同源策略和跨域》[编号：js_31]

涉及面试题：
1. 什么是同源策略？
2. 什么是跨域？列举跨域有几种实现形式？
3. JSONP 的原理是什么？
4. JSON 和 JSONP 的区别？
复制代码

《浏览器相关：② 浏览器加载机制、白屏和 FOUC （写作中）》
《浏览器相关：③ 浏览器存储》[编号：js_33]

涉及面试题：
1. cookie、session、localStorage 分别是什么？
2. cookies，sessionStorage 和 localStorage 的区别？
3. 如何实现同一个浏览器多个标签页之间的通信？
4. HTML5 的离线储存怎么使用，工作原理能不能解释一下？
5. 浏览器是怎么对 HTML5 的离线储存资源进行管理和加载的呢？
6. web 开发中会话跟踪的方法有哪些？
7. 使用 localStorage 封装一个 Storage 对象，达到如下效果：
    Storage.set('name', '前端一万小时') // 设置 name 字段存储的值为'前端一万小时'。
    Storage.set('age', 2, 30);
    Storage.set('people', ['Oli', 'Aman', 'Dante'],  60)
    Storage.get('name')    // ‘前端一万小时’
    Storage.get('age')     //  如果不超过 30 秒，返回数字类型的 2；如果超过 30 秒，返回 undefined，并且 localStorage 里清除 age 字段。
    Storage.get('people')  // 如果不超过 60 秒，返回数组； 如果超过 60 秒，返回 undefined。
复制代码

《:rocket:JS 原生小 DEMO：① Tab 切换》
《:rocket:JS 原生小 DEMO：② 模态框》
《:rocket:JS 原生小 DEMO：③ 轮播实现原理（写作中）》
《:rocket:JS 原生小 DEMO：④ 图片懒加载原理（写作中）》
《:rocket:JS 原生小 DEMO：⑤ 瀑布流布局原理（写作中）》
《:rocket:JS 原生小 DEMO：⑥ 木桶布局原理（写作中）》

前端拓展

《NPM 与 Node.js 入门：① NPM 包管理器（写作中）》
《NPM 与 Node.js 入门：② NPM Script（写作中）》
《NPM 与 Node.js 入门：③ :rocket:开发天气命令行应用（写作中）》
《前端工程化：① “前端工程化”初识》[编号：fe_04]

涉及面试题：
1. 模块化开发怎么做？
2. webpack 如何实现打包的？
复制代码

《前端工程化：② 模块化（写作中）》[编号：fe_05]

涉及面试题：
谈谈你对 AMD、CMD 的理解？
复制代码

《HTTP：① HTTP 初识和报文》[编号：fe_06]

涉及面试题：
1. HTTPS 是如何实现加密的？
2. HTTP 和 HTTPS 的区别？
3. 如何实现页面每次打开时清除本页缓存？
复制代码

《HTTP：② HTTP 缓存（写作中）》

ES6+

《ES6 速学：① let、const 和解构赋值》[编号：es6_01]

涉及面试题：
1. var、let 及 const 区别？
2. 使用解构，实现两个变量的值的交换？
3. 解构赋值？
4. 函数默认参数？
5. JavaScript 中什么是变量提升？什么是暂时性死区？
复制代码

《ES6 速学：② 字符串、数组、函数、对象》[编号：es6_02]

涉及面试题：
1. 箭头函数？
2. 箭头函数与普通函数有什么区别？
3. 反引号 ` 标识？
4. 使用 ES6 改下面的模板？
    let iam  = "我是";
    let name = "Oli";
    let str  = "大家好，"+iam+name+",多指教。";

5. 属性简写、方法简写？
6. for of 循环？
7. 字符串新增方法？
复制代码

《ES6 速学：③ 彻底弄懂各种情况下的 this 指向》[编号：es6_03]

涉及面试题：
1. 如何改变函数内部的 this 指针的指向？
2. 如何判断 this？箭头函数的 this 是什么？
3. call、apply 以及 bind 函数内部实现是怎么样的？
复制代码

《ES6 速学：④ 类、继承和模块化》[编号：es6_04]

涉及面试题：
1. import 和 export？
2. ES6 中的 class 了解吗？ES6 中的 class 和 ES5 的类有什么区别？
3. 知道 ECMAScript6 怎么写 class 么？为什么会出现 class 这种东西?
4. 原型如何实现继承？Class 如何实现继承？Class 本质是什么？
复制代码

《ES6 速学：⑤ Promise 对象》[编号：es6_05]

涉及面试题：
1. Promise 有几种状态？Promise 的特点是什么，分别有什么优缺点？
2. Promise 构造函数是同步还是异步执行？then 呢？Promise 如何实现 then 处理？
3. Promise 和 setTimeout 的区别？
4. 如何实现 Promise.all() ？
5. 如何实现 Promise.prototype.finally() ？
6. all() 的用法？
7. 说说你对 Promise 的了解？
复制代码

:rocket:原生 JS 实战：简单的 PC 端天气预报（写作中）

:rocket:原生 JS 实战：移动端音乐播放器（写作中）

前端框架学习——Vue.js

《Vue 介绍——① hello world》
《Vue 介绍——② 开发 TodoList（v-model、v-for、v-on）》[编号：更新中]

涉及面试题：
1. v-model 的使用？
2. v-on 可以监听多个方法吗？
复制代码

《Vue 介绍——③ MVVM 模式》[编号：更新中]

涉及面试题：
1. 什么是 MVVM？比之 MVC 有什么区别？
2. Vue 的优点？
3. 渐进式框架的理解？
4. 三大框架的对比？
复制代码

《Vue 介绍——④ 使用组件改造 TodoList》[编号：更新中]

涉及面试题：
引进组件的步骤？
复制代码

《Vue 介绍——⑤ 简单的组件间传值》
《Vue 基础精讲——① Vue 实例》
《Vue 基础精讲——② Vue 实例生命周期》[编号：更新中]

涉及面试题：
1. Vue 有哪些生命周期钩子函数？
2. 什么是 Vue 生命周期？
3. 第一次页面加载会触发哪几个钩子？
4. 简述每个周期具体适合哪些场景？
5. created 和 mounted 的区别？
6. Vue 获取数据在哪个周期函数？
7. $nextTick 的使用？
复制代码

《Vue 基础精讲——③ Vue 的模板语法》
《Vue 基础精讲——④ 计算属性、方法与侦听器》[编号：更新中]

涉及面试题：
1. computed 计算属性的用法？跟 methods 的区别？
2. computed 和 watch 区别？
3. 分别简述 computed 和 watch 的使用场景？
复制代码

《Vue 基础精讲——⑤ 计算属性的 getter 和 setter》[编号：更新中]

涉及面试题：
Vue.set 视图更新？
复制代码

《Vue 基础精讲——⑥ Vue 中的样式绑定》[编号：更新中]

涉及面试题：
如何让 CSS 只在当前组件中起作用？
复制代码

《Vue 基础精讲——⑦ Vue 中的条件渲染》[编号：更新中]

涉及面试题：
1. v-show 和 v-if 指令的共同点和不同点？
2. v-if 和 v-for 的优先级？
复制代码

《Vue 基础精讲——⑧ Vue 中的列表渲染》[编号：更新中]

涉及面试题：
1. 说出几种 vue 当中的指令和它的用法？
2. 为什么使用 key？
3. 列举常用的指令？
复制代码

《深入理解 Vue 组件——① 使用组件的细节点》[编号：更新中]

涉及面试题：
1. vue 组件中 data 为什么必须是一个函数？
2. vue 的两个核心点？
3. 如何获取 DOM？
复制代码

《深入理解 Vue 组件——② 父子组件间的数据传递》[编号：更新中]

涉及面试题：
1. Vue 父组件向子组件传递数据？
2. 子组件像父组件传递事件？
3. 跨组件双向数据绑定？
复制代码

《深入理解 Vue 组件——③ 组件参数校验与非 props 特性》
《深入理解 Vue 组件——④ 给组件绑定原生事件》
《深入理解 Vue 组件——⑤ 非父子组件间的传值》[编号：更新中]

涉及面试题：
组件间的通信?
复制代码

《深入理解 Vue 组件——⑥ 在 Vue 中使用插槽》
《深入理解 Vue 组件——⑦ 作用域插槽》
《深入理解 Vue 组件——⑧ 动态组件与 v-once 指令》
《Vue 中的动画特效——① Vue 中的 CSS 动画原理（写作中）》
《Vue 中的动画特效——② 在 Vue 中使用 animate.css 库（写作中）》
《Vue 中的动画特效——③ 在 Vue 中同时使用过渡和动画（写作中）》
《Vue 中的动画特效——④ Vue 中的 JS 动画与 Velocity.js 的结合（写作中）》
《Vue 中的动画特效——⑤ Vue 中多个元素或组件的过度（写作中）》
《Vue 中的动画特效——⑥ Vue 中的列表过度（写作中）》
《Vue 中的动画特效——⑦ Vue 中的动画封装（写作中）》
《Vue 项目预热——① 环境配置（写作中）》
《Vue 项目预热——② 项目代码介绍（写作中）》[编号：更新中]

涉及面试题：
请说出 Vue.cli 项目中 src 目录每个文件夹和文件的用法？
复制代码

《Vue 项目预热——③ 单文件组件与 Vue 中的路由（写作中）》[编号：更新中]

涉及面试题：
1. Vue-router 跳转和 location.href 有什么区别？
2. Vue 里面 router-link 在电脑上有用，在安卓上没反应怎么解决？
3. Vue2 中注册在 router-link 上事件无效解决方法？
4. RouterLink 在 IE 和 Firefox 中不起作用（路由不跳转）的问题？
复制代码

《Vue 项目预热——④ 单页应用 :vs:多页应用（写作中）》[编号：更新中]

涉及面试题：
单页面应用和多页面应用区别及优缺点？
复制代码

《Vue 项目预热——⑤ 项目代码初始化（写作中）》

:rocket:Vue 项目实战：移动端旅游网站开发

《“首页”开发（写作中）》
《“城市列表页”开发（写作中）》
《“详情页”开发（写作中）》
《项目的联调，测试与发布上线（写作中）》

以上所述就是小编给大家介绍的《2019 前端面试 | 知其然，并知其所以然》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

计算机程序设计艺术・卷3

[美] 高德纳（Donald E. Knuth） / 贾洪峰 / 人民邮电出版社 / 2017-2 / 198.00元

《计算机程序设计艺术》系列被公认为计算机科学领域的权威之作，深入阐述了程序设计理论，对计算机领域的发展有着极为深远的影响。本书为该系列的第3卷，全面讲述了排序和查找算法。书中扩展了卷1中数据结构的处理方法，并对各种算法的效率进行了大量的分析。一起来看看《计算机程序设计艺术・卷3》这本书的介绍吧!

码农工具

RGB转16进制工具

RGB HEX 互转工具

HTML 编码/解码

MD5 加密

MD5 加密工具