faq

[Jmingzi]

html

1. doctype的作用

需要知道2个概念，即文档类型和浏览器模式。
文档类型就是DTD(document type definition)，浏览器根据它来采用何种模式解析文档。
浏览器模式分为标准模式和兼容模式

标准模式即不同时期定义的标准，例如html5，html4
兼容模式 浏览器会向后兼容，例如ie6的一些行为

doctype

2. 使用 data- 属性的好处是什么？
data-*是html5的一个标准属性，好处是取值赋值都可以在el.dataset中统一管理

3. 如果把 HTML5 看作做一个开放平台，那它的构建模块有哪些？
开放平台就比如一些公司的开放平台api，讲构建模块其实是不准确的，我们熟知的构建是类似webpack一类工具去做的事情，它只是工具。而开放平台的内容在于运行时的一些内容，那在html5中，就是一些标准性的规范了

4. 什么是渐进式渲染 (progressive rendering)？
我们自然而然的会想到渐进式框架这个概念，何为渐进式，即主张最少，其它都可以以插件组件的形式去丰富。通俗点讲，只包含最基础的部分，麻雀虽小五脏俱全。

提到这个概念，我想就不是单纯的客户端spa需要的，应该属于ssr的范畴。

渐进式渲染也需要根据实际场景来划分哪些先渲染，哪些后渲染。以前的模版字符串拼接渲染是性能最优的，但对前端开发者不友好；现在使用virtualDom，开发方便，但性能不那么好，因为virtualDom是运行时的一种状态。

渐进式渲染我们也可以这样理解，页面的骨架、静态内容可以先渲染出来，动态内容再单独处理。
首屏渐进式渲染设想

css

1. 请问 "resetting" 和 "normalizing" CSS 之间的区别？你会如何选择，为什么？
这个我觉得也需要看实际场景，reset是指完全重置，重置后还得再定一套normalize；而normalize就是直接在现有的基础上，规范出一套样式。

2. 请解释浮动 (Floats) 及其工作原理
浮动并没有使元素脱离文档流，是破坏了内联元素的inline boxes，使其与同inline boxes元素不能一行展示；还使该元素没有高度。

工作原理 是包裹与破坏性，包裹是使浮动元素具有inline-box的特性，但破坏了其高度。使文字围绕在浮动元素周围。

3. 请描述 BFC(Block Formatting Context) 及其如何工作。
bfc是在某种情况下产生的一种盒子（浮动，绝对定位，非块级盒子的块级容器，overflow为auto，scroll，hidden），这些情况下都会为他们的内容创建新的块级格式化上下文

普通的盒模型是针对block-level的元素

4. box-sizing
css盒模型是针对块级元素提出的概念，而不是行内元素。因为一个标准的盒模型由margin+border+padding+content组成。
box-sizing用来调整盒模型中的宽度和高度表现

• content-box的宽高即是内容的宽高
• border-box的宽高即content+border+padding。但是当padding+border的宽高大于被设定的值时，此时的宽高就为padding+border了，内容区域的宽高变成0。

box-sizing

5. flex属性
其属性划分可以分为容器属性和子元素属性；

• 容器属性就是定义容器内的子元素们如何排列
• 子元素属性就是设置子元素自身

flex

6. 说一下一个未知宽高元素怎么上下左右垂直居中
display:flex;align-items:center即可。另外也可以使用绝对定位和transform来实现。

js

1. js国际化方案

分为静态内容和动态内容，静态内容可以在编译时完成，动态内容在运行时利用插件去做，例如vue-i18n

i18n

2. event loop
js单线程从上到下执行，还有一个调用栈。事件循环就是不断的从主线程中执行再到调用栈执行，再回到主线程，再到调用栈....

调用栈中的task又分为macro和micro，以micro来区分，micro只包含nextTick和promise,其余都是macro，执行完主线程后，去取macro执行，执行完一个macro后，去执行剩下的micro

3. webpack plugin 和 loader原理及实现

4. 说一下原型链，对象，构造函数之间的一些联系。
利用构造函数的原型对象，我们可以在创建实例对象之后，共享这个原型对象，然后通过克隆object.create()原型对象后就可以实现继承，一层一层继承下去也就形成原型链。

5. transform-runtime以及stage-2，你说一下他们的作用

transform-runtime是提供一个babel语法转换运行时，它是通过babel-runtime来实现polyfill或者对转换类函数的提取。而polyfill的核心是使用core-js实现。

babel-runtime与babel-polyfill的区别在于，前者是写Promise-like类的方法，后者是污染全局的声明Promise。

了解 Babel 6 生态

关于stage-2就得提到preset了，它的执行顺序和写法顺序是反的

{
  "presets": [
    "es2015",
    "react",
    "stage-2"
  ]
}
// 按以下顺序运行: stage-2， react， 最后 es2015 。

Stage-X是指实验阶段的Preset，这被称为TC39提案，提案分为几个阶段

• stage-0 所有想要实现的规范都在这一个阶段，它包含了stage-1，2，3里的所有方法，有很多新特性可以去玩，例如do {}，obj::func(val) === obj.call(obj, val)
• stage-1 初步实现这个想法
• stage-2 完成了初步规范，后续的更改都是在此基础上增量进行的。也就是说从这一阶段开始，这些特性就基本可以稳定使用了。
• stage-3 完成规范和浏览器初步实现
• stage-4 将被添加到下一年度发布

所以我们实际的项目中最好使用stage-2的方法，以保证稳定而不被修改。

弄清楚babel的stage
Plugins