阅读 72246

2020 前端面试 | “HTML + CSS + JS”专题

本文版权归 “公众号 | 前端一万小时” 所有,欢迎转载!

转载请注明出处,未经同意,不可修改文章内容。
复制代码
  • “前端面试题”及“参考答案详解”属于“¥102.4 | 面试刷题”私有团队专享内容,需付费阅读

  • 文章列表所列示的文章属于“¥1024 | 从零基础到轻松就业”私有团队专享内容,除开源的部分,其它皆需付费阅读



▽ Web 前置知识

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

▽ HTML

涉及面试题:
 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)有哪些?
复制代码
涉及面试题:
1. meta 有哪些常见的值?
2. meta viewport 是做什么用的,怎么写?
3. 列出常见的标签,并简单介绍这些标签用在什么场景?
4. 如何在 HTML 页面上展示 <div></div> 这几个字符?
5. 你是如何理解 HTML 语义化的?
6. 前端需要注意哪些 SEO?
7. 你对网页标准和 W3C 重要性的理解?
复制代码
涉及面试题:
1. POST 和 GET 方式提交数据有什么区别?
2. 在 input 里,name 有什么作用?
3. label 有什么作用?如何使用?
4. radio 如何分组?
5. placeholder 属性有什么作用?
6. type=hidden 隐藏域有什么作用?举例说明。
7. CSRF 攻击是什么?如何防范?
8. 网页验证码是干嘛的?是为了解决什么安全问题?
9. 常见 Web 安全及防护原理?
复制代码

▽ CSS

涉及面试题:
1. CSS 加载方式有几种?
2. @import 有什么作用?如何使用?
3. CSS 选择器常见的有几种?
4. id 选择器和 class 选择器的使用场景分别是什么?
5. @charset 有什么作用?
6. 简述 src 和 href 的区别?
7. 页面导入时,使用 link 和 @import 有什么区别?
复制代码
涉及面试题:
1. 伪类选择器有哪些?
2. 伪元素和伪类的区别?
复制代码
涉及面试题:
1. 选择器的优先级是如何计算的?
2. 什么是 CSS 继承?哪些属性能继承,哪些不能?
复制代码
涉及面试题:
1. 你有没有使用过视网膜分辨率的图形?当中使用什么技术?
2. px,em,rem,vw 有什么区别?
复制代码
涉及面试题:
简述字体图标的原理,动手实现使用 iconfont 实现字体图标的 demo。
复制代码
涉及面试题:
1. 块级元素和行内元素分别有哪些? 空(void)元素有那些?块级元素和行内元素有什么区别?
2. IE 盒模型和 W3C 盒模型有什么区别?
3. 在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例?
复制代码
涉及面试题:
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 ,怎样使他们“顶端对齐”?
复制代码
涉及面试题:
1. 让一个元素“看不见”有几种方式?有什么区别?
2. 单行文本溢出加 ... 如何实现?
3. 如何在页面上实现一个圆形的可点击区域?
复制代码
涉及面试题:
1. 浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响?
2. 清除浮动指什么?如何清除浮动?两种以上方法。
复制代码
涉及面试题:
1. 有几种定位方式?分别是如何实现定位的?参考点是什么?使用场景是什么?
2. z-index 有什么作用?如何使用?
3. BFC 是什么?如何生成 BFC?BFC 有什么作用?举例说明。
4. 在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例?
复制代码
涉及面试题:
1. 如何使用伪元素来清除浮动?
2. 可以通过哪些方法优化 CSS3 Animation 渲染?
复制代码
涉及面试题:
1. 如何让块级元素水平居中?如何让行内元素水平居中?如何让 inline-block 元素水平居中?
2. 垂直上下居中的办法?
复制代码
涉及面试题:
响应式布局原理?
复制代码
涉及面试题:
1. 列举你了解的 HTML5、CSS3 新特性?
2. Canvas 和 SVG 有什么区别?
复制代码
涉及面试题:
 1. 渐进增强和优雅降级分别是什么意思?
 2. 什么是 CSS Hack?在哪个网站查看标签(属性)的浏览器兼容情况?
 3. IE6、7 的 Hack 写法是?
 4. 尽可能多的列举浏览器兼容的处理范例?
 5. CSS Reset 是什么?CSS 预编译器是什么?后编译器(PostCSS)是什么?
 6. CSS Reset 和 Normalize.css 有什么区别?
 7. 尽可能多的写出浏览器兼容性问题?
 8. 如何让 Chrome 浏览器显示小于 12px 的文字?
 9. CSS 预处理器的比较:Less、Sass?
10. 常见兼容性问题?
复制代码
涉及面试题:
1. 列举 CSS 编码规范?
2. 编码规范的作用是什么?列举 5 条以上编码规范。
复制代码

▽ 🚀HTML+CSS 实战:PC 端“简书”静态首页开发(难度:☆☆)

  • 《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. breakcontinue 有什么区别?
2. switch...case 语句中的 break 有什么作用?
3. for...of、 for...in 和 forEach、map 的区别?
4. 写出如下知识点的代码范例:
    ① if...else 的用法;
    ② switch...case 的用法;
    ③ while 的用法;
    ④ do...while 的用法;
    ⑤ for 遍历数组的用法;
    ⑥ for...in 遍历对象的用法;
    ⑦ breakcontinue 的用法。

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: "qdywxs",
      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. 下面两种写法有什么区别?
    // 方法一:
    function People(name, sex) {
      this.name = name;
      this.sex = sex;
      this.printName = function() {
        console.log(this.name);
      }
    }
    var p1 = new People("Oli", 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 进阶

  • 《前后端交互:① 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 示例——实现简单新闻列表切换》
  • 《浏览器相关:① 同源策略和跨域》[编号: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。
复制代码
  • 《前端工程化:① “前端工程化”初识》[编号:js_34]
涉及面试题:
1. 模块化开发怎么做?
2. Webpack 如何实现打包的?
复制代码
  • 《前端工程化:② JS 模块加载方案和“组件化”初探》[编号:js_35]
涉及面试题:
谈谈你对 AMD、CMD 的理解?
复制代码

▽ 🚀原生 JS 实战:小 DEMO 系列(难度:☆☆)

  • 《Tab 切换》
  • 《模态框》
  • 《JS 动画》
  • 《图片懒加载》
  • 《瀑布流布局》

▽ 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 的了解?
复制代码

▽ 🚀原生 JS 实战:造轮子系列(难度:☆☆☆☆)

  • 《实现一个简单的左右滑动手势库》
  • 《Web 轮播:① “面向过程”写法》
  • 《Web 轮播:② “面向对象”写法》
  • 《Web 轮播:③ 给轮播加动画》

▽ 前端高级

  • 《NPM 与 Node.js 入门:① Node.js》
  • 《NPM 与 Node.js 入门:② NPM 初识》
  • 《NPM 与 Node.js 入门:③ NPM 详解》
  • 《NPM 与 Node.js 入门:④ 开发天气命令行应用》
  • 《“移动端”实战技巧:① “移动端”开发少踩坑(上)》
  • 《“移动端”实战技巧:② “移动端”开发少踩坑(下)》
  • 《HTTP:① HTTP 初识和报文》[编号:http_01]
涉及面试题:
1. HTTPS 是如何实现加密的?
2. HTTP 和 HTTPS 的区别?
3. 如何实现页面每次打开时清除本页缓存?
复制代码
  • 《HTTP:② HTTP 缓存》

▽ 🚀原生 JS 实战:移动端音乐播放器(难度:☆☆☆)

  • 《① 项目概览和环境搭建》
  • 《② 静态页面(大结构 + 移动端适配 + header)》
  • 《③ 静态页面(SVG + panels)》
  • 《④ 静态页面(SVG Sprite + buttons + bar-area + actions)》
  • 《⑤ JS 效果实现(大体结构 + mock 数据)》
  • 《⑥ JS 效果实现(播放/暂停 + 上/下一曲)》
  • 《⑦ JS 效果实现(滑动窗口切换 + 歌词加载)》
  • 《⑧ JS 效果实现(歌词定位 + 时间进度条 + 项目上线)》



▷ React.js 基础语法学习

▷ 🚀React.js 实战——PC 端“简书”项目开发(难度:☆☆☆☆)

▷ Vue.js 基础语法学习

▷ 🚀Vue.js 实战: 移动端“旅游网站”开发(难度:☆☆☆☆)(🔥近期火热更新中~)

关注下面的标签,发现更多相似文章
评论