2021 Front-end Interview Тема «HTML + CSS + JS»

внешний интерфейс
2021 Front-end Interview Тема «HTML + CSS + JS» 
本文版权归 “公众号 | 前端一万小时” 所有，欢迎转载！

转载请注明出处，未经同意，不可修改文章内容。

🔥🔥🔥«10 000 часов на интерфейсе» — это ограниченная по времени скидка на две звездочки, добро пожаловать, щелкнув по каждому модулю в строке меню официальной учетной записи, чтобы понять ~

❗️❗️❗️
Следующая ссылка является последней главой об ошибках в этой статье -《Интервью | HTML&CSS》,Интервью | JavaScript

  • «Предварительные вопросы интервью» и «подробное объяснение справочных ответов» относятся к «￥102,4199 иен| Вопросы для интервью«Частный контент для частных колонн, нужноплатить за чтение;

  • Статьи, указанные в списке статей, принадлежат "￥20202999 иен| От нуля до простого трудоустройства«Эксклюзивное содержимое частной колонки, за исключением части «пробного чтения» с открытым исходным кодом, все остальные обязательныплатить за чтение;

▽ Предварительные знания в Интернете

❗❗️❗️️P.s. Ответ в диалоговом окне официального аккаунта web_01, html_01 или css_01 Проверьте образец ответа~

涉及面试题：
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 有什么区别？
  • «Расширение CSS: ① Совместимость с браузером» [Номер: css_16]
涉及面试题：
 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. 常见兼容性问题？
  • «Расширение CSS: ② Спецификация кодирования CSS» [Номер: css_17]
涉及面试题：
1. 列举 CSS 编码规范？
2. 编码规范的作用是什么？列举 5 条以上编码规范。
  • «Расширение CSS: ③ Введение в общую грамматику Эммета»
  • «Расширение CSS: ④ гибкий макет»
  • «Расширение CSS: ⑤ Переход CSS3»
  • «Расширение CSS: ⑥ Деформация CSS3»
  • «Расширение CSS: ⑦ Анимация CSS3»

▽ 🚀HTML+CSS реальный бой: разработка статической домашней страницы "Jianshu" на стороне ПК (сложность: ☆☆)

  • "Статическая домашняя страница "Simple Book" на стороне ПК: ① Структура + заголовок" [ID: html-css_01]
涉及面试题：
1. 什么是盒模型？
2. CSS 的属性 box-sizing 有什么值？分别有什么作用？
  • «Статическая домашняя страница «Цзяньшу» на стороне ПК: ② Боковая панель + рекомендация»
  • «Статическая домашняя страница «Цзяньшу» на стороне ПК: ③ Карусель + группа кнопок + область контента»

▽ Первое знакомство с 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: "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: ③ Дата» [Номер: 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. 深拷贝和浅拷贝的区别？如何实现？
  • «Объекты, предоставленные браузером: ① Спецификация» [Номер: js_21]
涉及面试题：
1. URL 如何编码解码？为什么要编码？
2. iframe 有那些缺点？
3. 补全如下函数，判断用户的浏览器类型。
    function isAndroid() {
      // 补全
    }
    function isIphone() {
      // 补全
    }
    function isIpad() {
      // 补全
    }
    function isIOS() {
      // 补全
    }
  • «Объекты, предоставленные браузером: ② DOM» [ID: 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 有什么区别？

▽ 🚀Нативный JS бой: небольшая серия DEMO (сложность: ☆☆)

  • «Переключение вкладок»
  • «Модальный ящик»
  • «JS-анимация»
  • «Отложенная загрузка изображения»
  • «Схема водопада»

▽ специальный перерыв | научиться жить ES6 +

  • «Экологическое строительство с участком»
  • ES2015
  • Основы JS: var, let и const
  • 《Массивы JS: ① Какие существуют методы «обхода» в ES5 и ES6? 》
  • 《Массивы JS: ② Как преобразовать «массивные объекты» в массивы? 》
  • 《JS-массивы: ③ Как создавать новые массивы? 》
  • 《Массивы JS: ④ Как найти массивы? 》
  • «JS-функции: ① значения параметров функций по умолчанию»
  • «Функция JS: ② Как работать с неопределенными параметрами? 》
  • «Функция JS: ③ обратная операция параметра покоя»
  • «Функция JS: ④ Функция стрелки» [Номер: es6_09]
涉及面试题：
1. 箭头函数？
2. 箭头函数与普通函数有什么区别？
3. 反引号 ` 标识？
4. 使用 ES6 改下面的模板？
    let iam  = "我是";
    let name = "Oli";
    let str  = "大家好，" + iam + name + "，多指教。";
    
5. 属性简写、方法简写？
6. for...of 循环？
7. 字符串新增方法？
  • «Функция JS: ⑤ Тщательно понимать указатель this в различных ситуациях» [Номер: es6_10]
涉及面试题：
1. 如何改变函数内部的 this 指针的指向？
2. 如何判断 this？箭头函数的 this 是什么？
3. call、apply 以及 bind 函数内部实现是怎么样的？

  • «Объект JS: ① свойство объекта»

  • «Объекты JS: ② Установить структуру данных»

  • «Объекты JS: ③ Структура данных карты»

  • «Объект JS: ④ Копия объекта»

  • «Объектно-ориентированное программирование: ① Как объявить класс? 》

  • «Объектно-ориентированное программирование: ② «Свойства чтения и записи» и «Статические методы»

  • «Объектно-ориентированное программирование: ③ «Наследование» и «Модульность ES6» [Номер: es6_17]

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

  • «Встроенные объекты JS: «Строки» как объекты — проблемы конкатенации строк

  • «Встроенные объекты JS: регулярные выражения — модификатор ① y»

  • «Встроенные объекты JS: регулярные выражения — модификатор ② u»

  • «Назначение деструктуризации: назначение деструктуризации массивов, объектов и функций» [Номер: es6_21]

涉及面试题：
1. var、let 及 const 区别？
2. 使用解构，实现两个变量的值的交换？
3. 解构赋值？
4. 函数默认参数？
5. JavaScript 中什么是变量提升？什么是暂时性死区？
  • «Асинхронные операции: объекты Promise» [номер: es6_22]
涉及面试题：
1. Promise 有几种状态？Promise 的特点是什么，分别有什么优缺点？
2. Promise 构造函数是同步还是异步执行？then 呢？Promise 如何实现 then 处理？
3. Promise 和 setTimeout 的区别？
4. 如何实现 Promise.all() ？
5. 如何实现 Promise.prototype.finally() ？
6. all() 的用法？
7. 说说你对 Promise 的了解？
  • ES2016 (Обновление...)
  • ES2017 (Обновление...)
  • ES2018 (Обновление...)
  • ES2019 (Обновление...)

▽ 🚀Родной бой JS: серия по сборке колес (сложность: ☆☆☆☆)

  • «Реализация простой библиотеки жестов смахивания влево и вправо»
  • «Веб-карусель: ①« Процессно-ориентированное »письмо»
  • «Веб-карусель: ② «Объектно-ориентированное» письмо
  • "Веб-карусель: ③ Добавьте анимацию в карусель"

▽ Взаимодействие с интерфейсом и сервером

  • «Правила и стандарты взаимодействия: HTTP——① Пятиуровневая сетевая модель и история развития протокола HTTP» [№: взаимодействие_01]
涉及面试题：
1. HTTPS 是如何实现加密的？
2. HTTP 和 HTTPS 的区别？
3. 如何实现页面每次打开时清除本页缓存？
  • «Правила и стандарты взаимодействия: HTTP — ② HTTP-трехстороннее рукопожатие, URI, URL и URN»
  • «Правила и стандарты взаимодействия: HTTP — ③ HTTP-сообщение»
  • «Сервер», который отвечает на запросы: создание простого «веб-сервера» с помощью Node.js
  • «Клиент», делающий запрос: ① Знание HTTP-клиента.
  • «Клиент», который делает запрос: ② Браузер отправляет «HTTP-запрос данных» асинхронно — первое понимание AJAX» [Номер: взаимодействие_06]
涉及面试题：
1. HTTP 状态码知道哪些？
2. 301 和 302 的区别是什么？
3. AJAX 是什么？有什么作用？
4. HTTP 的几种请求方法和区别？
5. AJAX 原理？
  • «Клиент», который делает запрос: ③ Браузер отправляет «HTTP-запрос данных асинхронно» — подробное объяснение объекта XMLHttpRequest» [Номер: взаимодействие_07]
涉及面试题：
1. 把 GET 和 POST 类型的 AJAX 的用法手写一遍？
2. 封装一个 AJAX 函数？
  • ««Клиент», который делает запрос: ④ Браузер отправляет «HTTP-запрос данных» асинхронно — используя AJAX для реализации простого переключения списка новостей»
  • «Клиент», делающий запрос: ⑤ Политика одного и того же происхождения и междоменная политика» [ID: взаимодействие_09]
涉及面试题：
1. 什么是同源策略？
2. 什么是跨域？列举跨域有几种实现形式？
3. JSONP 的原理是什么？
4. JSON 和 JSONP 的区别？
  • «Клиент», делающий запрос: ⑥ Хранилище браузера — Cookie и сеанс» [Номер: взаимодействие_10]
涉及面试题：
1. Cookie、Session、localStorage 分别是什么？
2. Cookie，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。
  • «Клиент», который инициирует запрос: ⑦ Краткий анализ кеша браузера.

▽ Интерфейсное расширение

  • «Введение в NPM и Node.js: ① Node.js»
  • «Введение в NPM и Node.js: ② Первое знакомство с NPM»
  • «Введение в NPM и Node.js: ③ Подробное описание NPM»
  • «Введение в NPM и Node.js: ④ Разработка приложения командной строки для прогноза погоды»
  • «Предварительная разработка: ① Первое понимание «Предварительной разработки» [№: engineering_01]
涉及面试题：
1. 模块化开发怎么做？
2. Webpack 如何实现打包的？
  • «Фронтенд-инжиниринг: ② Схема загрузки модуля JS и предварительное исследование «Компонентизации»» [№: engineering_02]
涉及面试题：
谈谈你对 AMD、CMD 的理解？

▽ 🚀Битва нативного JS-проекта: мобильный музыкальный плеер (сложность: ☆☆☆)

  • «① Обзор проекта и создание среды»
  • 《②Статическая страница (большая структура + адаптация мобильного терминала + заголовок)》
  • «③ статическая страница (панели SVG +)»
  • 《④ Статическая страница (SVG Sprite + кнопки + панель + действия)》
  • «⑤ Реализация эффекта JS (общая структура + фиктивные данные)»
  • «⑥ Реализация эффекта JS (воспроизведение/пауза + предыдущая/следующая песня)»
  • «⑦ Реализация эффекта JS (переключение скользящего окна + загрузка текстов песен)»
  • «⑧ Реализация эффекта JS (позиционирование текста + индикатор времени + онлайн-проект)»


▷ Базовое изучение грамматики React.js

▷ 🚀react.js Проект фактический бой - конец PC "简 简 书" разработка проекта (сложность: ☆☆☆☆)

▷ Изучение базовой грамматики Vue.js

▷ 🚀Битва проекта Vue.js: разработка мобильного терминала "туристический сайт" (сложность: ☆☆☆☆)

Категории