前端学习日记 -- 五月

2019-05-06

0、match(/app/gi)中的i是忽略大小写。

2019-05-07

0、git工作中遇到：
1）git add错文件，撤回add，需要按文件(夹) 输入git reset HEAD <文件名>；
2）git dev合并到release：在dev上push到远程对应分支后，本地拉取最新的release分支，本地切换到release分支，执行git merge <dev分支名>，然后push到远程release分支。

2019-05-09

1、整数正则：0 | [1-9][0-9]*；
2、英文 How browser works：http://taligarsiel.com/Projects/howbrowserswork1.htm
2、github小型编译器项目：https://github.com/jamiebuilds/the-super-tiny-compiler/blob/master/the-super-tiny-compiler.js

2019-05-10

0、
1）两个RN项目调试，即一个项目跳到另一个项目的页面：启动两个本地服务，但是端口号不一样.
如：qrn run dev -p 8082
2）Date 毫秒转换成日期：( new Date(到现在的毫秒数) ).getMonth() + 1；
3）⚠️ border-radius（以及RN中的borderRadius）不具有继承性，如果需要呈现父子结构，需要父结构设置border-radius并且overflow: hidden.

1、Promise A+：https://promisesaplus.com/

2019-05-13

1、HTML DTD：There are a few variations of the DTD. The strict mode conforms solely to the specifications but other modes contain support for makeup used by browsers in the past. The purpose is backwards compatibility with older content. The current strict DTD is here: http://www.w3.org/TR/html4/strict.dtd

2019-05-14 / 15

0、统计一定要每一个点击都测试完再提测！！！

1、作用域及作用域链（关键补充）：
⚠️作用域
1）作用域最大的用处是隔离变量，不同作用域下同名变量不会有冲突。
这就是为何jQuery、Zepto等库的源码，所有的代码都会放在(function(){...})()中。
2）块级作用域可通过let和const声明，块级作用域在如下情况下被创建：1 在一个函数内部； 2 在一个代码块（{}包裹），特点是：1 声明变量不会提升到代码块顶部；2 禁止重复声明；3 循环中的绑定块级作用域的妙用

⚠️作用域链
父级作用域存在歧义，应该是 “要到创建这个函数的那个域”，作用域中取值，这里强调的是“创建”，而不是“调用”。切记——其实这就是所谓的“静态作用域”。
两个例子加深理解：

var x = 10
function fn() {console.log(x)
}
function show(f) {var x = 20(function() {f() //10，而不是20})()
}
show(fn)

var a = 10
function fn() {var b = 20function bar() {console.log(a + b) //30}return bar
}
var x = fn(),
b = 200
x() //bar()

JavaScript属于解释型语言，执行分为：解释和执行两个阶段。

解释阶段

词法分析
语法分析
作用域规则确定

执行阶段

创建执行上下文
执行函数代码
垃圾回收

2、how browsers work:
http://taligarsiel.com/Projects/howbrowserswork1.htm
中文版：https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/#The_browsers_we_will_talk_about

HTML Parsing

复习：HTML不是context free grama
总结：浏览器对HTML的容忍度很高（怎么写都不报错，见下），所以没有parser能分析HTML（这么说不是很严谨，我的大致理解，以后修改）

HTML parsing flow (taken from HTML5 spec)

example html:

<html><body>Hello world</body>
</html>

Tokenizing html

tree construction of example html

At this stage the browser will mark the document as interactive and start parsing scripts that are in “deferred” mode - those who should be executed after the document is parsed. The document state will be then set to “complete” and a “load” event will be fired.

完整的html-parser过程参见W3C：
https://www.w3.org/TR/html5/syntax.html#html-parser

Webkit uses a stack for the current element contents

对于浏览器容忍度强 Webkit有趣的comment：
Misplaced html or body end tags
Again - the comment speaks for itself.
Support for really broken html.
We never close the body tag, since some stupid web pages close it before the actual end of the doc.
Let’s rely on the end() call to close things.

if (t->tagName == htmlTag || t->tagName == bodyTag )return;

So web authors beware - unless you want to appear as an example in a Webkit error tolerance code - write well formed HTML.

CSS Parsing

comment /*[ ^* ]*+([ ^/][ ^]*+)/
num [0-9]+|[0-9]"."[0-9]+
nonascii [\200-\377]
nmstart [_a-z]|{nonascii}|{escape}
nmchar [_a-z0-9-]|{nonascii}|{escape}
name {nmchar}+
ident {nmstart}{nmchar}*

运行script和css的顺序
script （⚠️对于阻塞的原因理解）
网络模型具有同步性，遇到script会去执行然后中断parsing html，添加defer可以等待parsing完执行script，HTML5添加了一个选项可以让parsing和执行在不同线程。

Speculative parsing
Webkit和Firefox做了这方面的优化。在执行scripts时，另一个线程负责parse剩下的document的parsing，并且load和download其他需要的资源。

Style sheets（⚠️对于阻塞的原因理解）
CSS有另一个不同的模型。虽然它不会改变DOM树，没有必要为了CSS的加载去中断parsing，但是有一种情况，就是script需要操作元素的style，如果此时css没有加载，就会报错。所以，Firefox会在有css没有加载parsing完前阻塞所有scripts，Webkit会在scripts想要操作特定css属性（可能会被没有加载的css文件影响）时阻塞scripts。

自己写的小例子：

<div></div>
<script>console.log(document.getElementsByTagName('div')[0]);console.log(document.getElementsByTagName('p')[0]);
</script>
<p>aaaa</p>

这样就获取不到p，因为script阻塞了html的解析

<body><div></div><p style="color: blue" >aaaa</p><script>console.log(document.getElementsByTagName('div')[0]);var p = document.getElementsByTagName('p')[0];p.style.color = 'pink';</script><style>p { color: red; }</style>
</body>

script设置的color是p的最终颜色。

render tree ( 呈现树 ) 与 DOM tree的联系：
renderer ( 呈现器 ) 和DOM元素相对应，但并非一对一，head标签不被插入到render tree中，display:none的元素也不在（hidden的元素在render tree中）。

有的元素不能被单一的表示在一个矩形中，比如select标签。

<select><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="opel">Opel</option><option value="audi">Audi</option>
</select>

它由三个renderers(渲染器)组成，一个展示区域，一个用于下拉的dropdown，一个用于按钮。此外，如果一个text由于容器限制被分割成几行，也会需要多个renderers。

另一个关于多呈现器的例子是格式无效的 HTML。根据 CSS 规范，inline 元素只能包含 block 元素或 inline 元素中的一种。如果出现了混合内容，则应创建匿名的 block 呈现器，以包裹 inline 元素。

固定定位和绝对定位

Some render objects correspond to a DOM node but not in the same place in the tree. Floats and absolutely positioned elements are out of flow, placed in a different place in the tree, and mapped to the real frame. A placeholder frame is where they should have been.

The render tree and the corresponding DOM tree(3.1). The “Viewport” is the initial containing block. In Webkit it will be the “RenderView” object.

构建呈现树流程

在 Firefox 中，系统会针对 DOM 更新注册展示层，作为侦听器。展示层将框架创建工作委托给 FrameConstructor，由该构造器解析样式（请参阅样式计算）并创建框架。
在Webkit中，解析样式和创建呈现器的过程称为“附加”。每个DOM节点都有一个attach方法。附加是同步进行的，将节点插入DOM树需要调用新的节点“attach”方法。

样式计算带来的问题：

1、样式数据的庞大，有数不清的样式属性，可能带来存储问题；
2、如果匹配规则不是最优的，可能造成性能问题，每一个元素都贯穿整个规则会是一个很大的工作量。比如

<style>
div div div div { ...
}
</style>

这个意味着一个有三个div子孙的div才符合规则，假设你想要检测一个div是否符合，你需要确定一条路，然后一层层的在树中寻找，最后发现它有两个div子孙而不是三个，那么你又需要选择另一条路。
3、Applying the rules involves quite complex cascade rules that define the hierarchy of the rules.（应用规则涉及到相当复杂的层叠规则）。

我们来看看浏览器如何解决这些问题：

1、共享样式数据：符合规定的节点可以共享样式属性
2、Firefox规则树：

回流（reflow）

⚠️暂停！

重学前端（浏览器三 / 四 / 五）

为什么没有“父选择器”？

在浏览器构建DOM树的过程中，我们依次拿到上一步构建好的元素，去检查它匹配到了哪些规则再根据规则的优先级，做覆盖和调整。
所以，CSS选择器出现顺序必定跟构建DOM树的顺序一致（这是一个CSS设计的原则），即保证选择器在DOM树构建到当前节点时，已经可以准确判断是否匹配，不需要后续节点信息。

– 也就是说未来也不可能会出现“父元素选择器”这种东西，因为父元素选择器要求根据当前节点的子节点，来判断当前节点是否被选中，而父节点会先于自节点创建。

CSS的下载：
head中的css是要下载完的，body中放CSS的话，会重新计算。

CSS的构建：
cssom是有rule部分和view部分的，rule部分是在dom开始之前就构件完成的，而view部分是跟着dom同步构建的。

排版：

inline的margin/padding？

<style>*{padding: 0;margin: 0;}p {display: inline;margin-left: 30px;padding-left: 30px;margin-top: 50px;padding-top: 50px;background-color: red;}
</style>
<body><p>Can you see my Margin / Padding?</p>
</body>

著名开源字体解析库freetype对某个特定文字的相关信息的横向版本和纵向版本分别为

纵向版本：

其中，advance代表每个文字排布后在主轴上的前进距离，它和文字的宽/高不相等，是字体中最重要的属性。display值为inline的元素中的文字排版时会被直接排入文字流中，inline元素主轴方向的margin属性和border属性（例如主轴为横向时的margin-left和margin-right）也会被计算进排版的前进距离中。

渲染 ( 模型变成位图 ) - 合成 - 绘制

2019-05-16

1、前端公开课：懒加载与预加载

懒加载：
即按非必要资源延后加载
原理就是只等到需要的时候去利用js加载内容

2019-05-20

0、（后来试了一下不好使，再研究）
git checkout 分支号（去掉 -b ）
git pull

2019-05-29

1、?Object.keys(obj) 遍历对象的key，实现：

Object.keys = Object.keys || function(obj){var a = [];for(a[a.length] in obj);return a;
}

2、看avalon源码

document.createDocumentFragment() – （React好像不是使用这种方法）
documentFragment是DOM节点，但是不是真实DOM树中的部分，主要用于承载动态创建的DOM内容，存储在内存中，添加进DOM树时，documentFragment被子节点们替代。（被浏览器广泛支持）

2）HTML字符实体
HTML中，有些字符是预留的，如不能使用<>，浏览器会认为它们是html标签，如果需要显示预留字符，必须在html源码中使用字符实体，类似&entity_name;或者&#entity_number，如小于号，必须写成<或<（浏览器对实体数字的支持很好）

?判断是否是html：/<|&#?\w+;/.test(htmlStr)

3、Under-the-hood-ReactJS
https://bogdan-lyashenko.github.io/Under-the-hood-ReactJS/stack/book/Intro.html

2019-05-30

1、节流（throttle）：给金鱼滴水加氧气
两次执行间隔必须超过一个值

function throttle(fn, wait = 50){var previous = new Date();return function(...arg){var now = new Date();if(now - previous > wait){previous = now;fn.apply(this, arg);}}
}
var betterFn = throttle(()=>{console.log('fn 执行了');}, 1000);
var a = setInterval(betterFn, 10);
// clearInterval(a);

underscore的实现较为复杂待看：https://mp.weixin.qq.com/s/1U8gsj4kv00GrMDWRw7Y2Q

2、防抖
我的小实现：https://github.com/NanaYang007/web_practise/tree/master/js/节流防抖