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