前端开发工程师如何在2013年里提升自己——阅读笔记（二）

2019独角兽企业重金招聘Python工程师标准>>>

第三篇文章：So, You Want to Be a Front-End Engineer, David Mosher (Video)

浏览器是世界上最易变（volatile）的编程环境。因此，学习浏览器内部操作可以帮助我们更好地制定决策，也能由此判断哪些是最好的开发实践。浏览器的基本工作原理如下：

主要的工作流程如下：

解析HTML（Parse）-->生成DOM树-->渲染树（Render）-->布局和绘制（Layout & Paint）

一般的解析过程：输入-->词法分析（lexical analysis）-->语法分析（syntax analysis）-->输出

HTML的解析过程：文档-->tokenizer-->树结构（tree construction）-->DOM树

由于没有上下文无关语法，html的解析十分困难。

如上图所示，脚本总在DOM形成之后执行，然后作用于Tokeniser。所以我们一般将脚本代码放在页面的底部。

DOM的全称叫做文档对象模型，它的具体组成如下图所示：

相比HTML而言，CSS的解析要容易得多。通常是把CSS代码转为样式表对象（Stylesheet Object）。样式表对象的组成如下图所示：

处理资源一般有四种方式：同步（synchronous）、推理（speculative）、顺序相关（order matter）和单线程（single threaded）。

• 在处理顺序（processing order）上，浏览器是同步的
• 在渲染（render）上，浏览器是单线程的（firefox有一个单一主线程处理事件，chrome有相互独立的几个主线程来处理每一个打开的标签中的事件），除网络操作之外的其他操作都是发生在单一线程中

DOM树与渲染树的对照：

样式的数据非常大，规则匹配很困难，级联很复杂。样式的设置来源于四种途径：浏览器、用户（User）、作者（Author）、内联（Inline）。这四种来源下的样式在级联时的优先级如下图所示：

考虑到浏览器兼容性问题，我们通常会写一个css reset文件。但是这篇文章的作者不赞成如此。如果坚持要使用reset，作者推荐normalize.css。同时，作者认为，应当慎用!important。

在解析css的过程中需要考虑到规则冲突的问题。解决冲突的顺序是：

1. importance：看是否有!important
2. origin：考虑样式的来源（作者>用户>浏览器）
3. specificity：根据选择器优先级，css选择器的优先级是：内联样式>id选择器>class选择器>标签选择器
4. source order：来源顺序，importance、origin和specificity均相等的情况下，按照后声明的样式实现

布局的过程如下：

1. 计算父元素的宽度
2. 迭代子元素，在适当位置渲染子元素，如果dirty的话则调用子元素的布局
3. 计算父元素的高度
4. 父元素将dirty位设为false

Reflow过程中触发的内容包括：字体大小改变、用户输入、屏幕大小改变、hover、添加或删除样式表、改变类属性、js改变DOM、offset计算。因此作者建议：尽量避免修改DOM，避免内联样式，使用fixed或absolute元素，避免用table来布局。

绘制的过程如下:

1. 背景色
2. 背景图片
3. 边框
4. 子元素
5. 外轮廓（outline）

在绘制时，firefox和chrome都有相应优化。对firefox而言，如果元素在重绘时会被其他元素遮盖，则压根不添加该元素。对chrome而言，它会在一个位图（bitmap）里保存矩形，重绘时仅绘制新旧矩形之间的三角形部分。

第四篇文章：The Web Can Do That!?, Eric Bidelman (Video)

这里先介绍一下作者。作者是来自Google Chrome Team的Senior Developer Programs Engineer，名叫Eric Bidelman。

1. Web App中的CSS：

作者给出了来自W3C的有关css改进内容的文档，链接如下：

1. CSS Regions Module Level 3
2. CSS Flexible Box Layout Module ( da new one )
3. CSS Grid Layout
4. CSS Hierarchies
5. CSS Filter Effects 1.0
6. Web Animations 1.0（该链接无法打开）
7. CSS Variables Module Level 1

CSS3中提出用region、exclusion、grid和flexible box来进行布局。作者对flexible box布局尤其推崇。作者以Holy Grail布局为例进行了分析。

注意：对于CSS Flexbox，Safari、Chrome、IE支持，Firefox和Opera不支持。

【附注：经典三列布局，也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一个布局模型概念，在国内最早是由淘宝UED的工程师传播开来，在中国也有叫法是双飞翼布局，它的布局要求有几点：
1、三列布局，中间宽度自适应，两边定宽；
2、中间栏要在浏览器中优先展示渲染；
3、允许任意列的高度最高；
4、要求只用一个额外的DIV标签；
5、要求用最简单的CSS、最少的HACK语句；

关于圣杯布局的详细介绍可以参见文章：重温经典布局-圣杯Holy Grail of Layout】

Alignment

示例1：flex-start + flex-start

示例2：center + flex-start

示例3：flex-end + flex-start

示例4：space-between + flex-start

示例5：space-around + flex-start

示例6：flex-start + center

示例7：center + flex-end

示例8：flex-start + baseline

示例9：flex-start + stretch

关于上面提到的三个加下划线的内容，在不同浏览器下写法不同，分别为：

1. -webkit-flex
2. -moz-flex
3. -ms-flex
4. -o-flex
5. flex

1. -webkit-justify-content
2. -moz-justify-content
3. -ms-justify-content
4. -o-justify-content
5. justify-content

1. -webkit-align-items
2. -moz-align-items
3. -ms-align-items
4. -o-align-items
5. align-items

Ordering & Orientation

示例1：row + 0

示例2：row-reverse + 0

示例3：column + 0

示例4：column-reverse + 0

示例5：row + 1

示例6：row + -1

关于上面提到的两个加下划线的内容，在不同浏览器下写法不同，分别为：

1. -webkit-flex-direction
2. -moz-flex-direction
3. -ms-flex-direction
4. -o-flex-direction
5. flex-direction

1. -webkit-order
2. -moz-order
3. -ms-order
4. -o-order
5. order

Flexibility

示例1：0

示例2：1

示例3：

示例4：3

2. 动态CSS：

calc()的示例：

注意：对于CSS calc()，Safari、Chrome、Firefox、IE支持，Opera不支持。

3. 数据绑定（Data binding）：

传统的数据绑定的方法有两种：

1. 用js框架，如Angular
2. 用data-*属性：
   1. 模型（model）：数据属性
   2. 使用attr()获得数值
   3. 视图（View）：渲染器为:before/:after伪元素生成内容
   4. 钩子侦听器（hook listener）观察变化

上面的方法二示例如下：

现在有一种新的方法，应用<datalist>来完成数据绑定。示例如下：

注意：对于<datalist>，Safari、Chrome、Firefox、IE、Opera都支持。

4. 访问文件系统：

这里作者推荐了一本书：《HTML5 Filesystem API》。这是作者自己写的书。

注意：对于HTML5 Filesystem API，Chrome、Firefox、IE都支持，Safari和Opera不支持。

5. sudo：

作者对sudo的使用表示质疑（busted）。

6. 无服务器下载（Serverless Downloads）：

客户端下载的新旧方法对比：

7. 高效传输数据：

postMessage()的发展经历了三个阶段，分别是：

（1）简单字符串（Basic strings）

（2）JSON

（3）复杂类型（Complex types via structured cloning）

上述这些方法有一个共同的缺点就是通过复制（copy）来完成，因此不够高效。因此后来出现了“传输对象（transferable object）”的概念。

虽然还是postMessage，但是语义却不同了。另外还有特征检测（feature detection）。

注意：对于Transferable object，只有Chrome支持，Safari、Firefox、IE和Opera不支持。

8. 访问本地硬件（Access Native Hardware）：

Device APIs Working Group:

1. Geolocation API
2. Device Orientation API ( accelerometer )
3. WebGL ( GPU )
4. HTML5 Filesystem API ( sandboxed filesystem )
5. navigator.onLine / navigator.connection ( network connectivity )
6. Battery API
7. Gamepad API
8. WebRTC ( voice & video input ) / Web Audio API ( core audio )

注意：对于getUserMedia()，Chrome、Firefox和Opera支持，Safari 、IE 不支持。

9. <audio>标签：

10. 流媒体（Stream Multimedia）：

上一篇文章：前端开发工程师如何在2013年里提升自己——阅读笔记（一）

下一篇文章：前端开发工程师如何在2013年里提升自己——阅读笔记（三）

转载于:https://my.oschina.net/warmcafe/blog/99895