1.前言 浏览器做了什么？
浏览器做的工作就是将我们输入的url变成一张位图BitMap。
BitMap传给计算机的显卡驱动设备，就转换成我们可以人眼可见的光信号。
image.png
浏览器将url变成一张BitMap，本篇主要解释基础的渲染流程部分，真正的浏览器工作比这个要复杂得多。
具体步骤：
-
http请求得到html页面：输入url发送一个http请求，解析http回应，得到url对应的html页面； -
对html进行文本分析，解析得到DOM树：对html文本进行parse解析，得到一个DOM树。 -
CSS Computing:经过css计算，DOM树上对应哪些css规则，对css规则叠加，css规则覆盖，进行计算，得到带样式的DOM树； -
布局产生css盒的位置，进行的一些位置的计算； -
render渲染,给DOM树添加背景图和背景色。
2. 前置知识：有限状态机
2.1 状态机是什么？
有限状态机，又叫状态机。
每个状态都是一个机器
在每个机器里，我们可以做计算、存储和输出......
所有的机器接受的输入是一致的
状态机的本身没有状态，用函数表示的话，就是纯函数。
每个状态机知道下一个状态
有两种状态机：
Moore状态机：每个机器都有确定的下一个状态。
Mealy状态机：每个机器根据输入决定下一个状态（大多数比较实用）。
2.2 Js中的有限状态机（Mealy型）
// 每个函数是一个状态
function state(input){ // 函数参数就是输入
// 在函数中，可以自由的编写代码，处理每个状态的逻辑
// 返回值作为下一个状态
return next;
}
// 调用部分
while(input){
// 获取输入
state = state(input); //把状态机的返回值作为下一个状态
}
看到这里，不明白不要紧，往下看例子就知道咯....
2.2.1 一般方法解决字符输入查找
例：问题1:在一个字符串中找到字符‘a’, 怎么解？
我们可以这样：
function find(string){
for(let c of string){
if(c==='a')
return true;
}
return false;
}
let result = find("i am a girl",'a');
console.log(result); // true
例：问题2:在一个字符串中找到字符‘ab’, 怎么解？
function find(string){
let foundA = false; // 用一个变量标记a是否找到
for(let c of string){
if(c==='a')
foundA = true;
else if(foundA && c === 'b') // 在找到a的基础上，找字符b
return true;
else
foundA = false; // 如果a没有找到，或者找到a但是后面不是b，则表明ab没找到，将a的标记变量设置为false没找到
}
return false; // 循环结束没找到ab，则返回false
}
let result = find("i am a girl bcd");
console.log(result); // true
那问题3:在一个字符串中找到字符‘abcdef’, 怎么解呢？
同问题2，我们可以设置多个变量标识
function find(string){
let foundA = false;
let foundB = false;
let foundC = false;
let foundD = false;
let foundE = false;
for(let c of string){
if(c == 'a'){
foundA = true;
}else if(foundA && c === 'b'){
foundB = true;
}else if(foundB && c === 'c'){
foundC = true;
}else if(foundC && c === 'd'){
foundD = true;
}else if(foundD && c === 'e'){
foundE = true;
}else if(foundE && c === 'f'){
return true;
}else{
foundA = false;
foundB = false;
foundC = false;
foundD = false;
foundE = false;
}
}
return false
}
console.log(find("i am a abcjucabcdef")); // true
console.log(find("i am a abcjucabdef")); // false
看到这里，我们下面尝试使用状态机实现字符查找
2.2.2 使用状态机解决字符输入查找
在一个字符串中找到字符‘abcdef’, 用状态机解决。
思路：
- 找到字符'a'之前和之后，在for循环中的逻辑是完全不一样的，所以每找到我们要的一个字符，就去切换一个状态
function find(string){
let state = start; // state表示当前状态
for(let c of string){
state = state(c); // 将state执行的结果，也就是下一个状态赋给当前状态
}
return state === end;
}
function start(c){
if(c ==='a'){
return foundA;
}else
return start;
}
// end状态永远返回end，叫做一个trap
function end(c){
return end;
}
// foundA 找字符b
function foundA(c){
if(c ==='b'){
return foundB;
}else{
return start(c); // 把当前字符传给start从新开始往后找，避免漏掉当前字符。
}
}
// foundB 找字符c
function foundB(c){
if(c ==='c'){
return foundC;
}else{
return start(c);
}
}
// foundC 找字符d
function foundC(c){
if(c ==='d'){
return foundD;
}else{
return start(c);
}
}
// foundD 找字符e
function foundD(c){
if(c ==='e'){
return foundE;
}else{
return start(c);
}
}
// foundE 找字符f
function foundE(c){
if(c ==='f'){
return end;
}else{
return start(c);
}
}
console.log(find('abcdeabcdefsss')); // true
那用状态机怎么实现在字符串中查找'abababx' ?
// 状态机 处理字符串"abababx"
function find(string){
let state = start;
for(let c of string){
state = state(c);
}
return state === end;
}
function start(c){
if(c === "a"){
return foundA;
}else{
return start;
}
}
function end(c){
return end;
}
function foundA(c){
if(c === "b"){
return foundB;
}else{
return start(c);
}
}
function foundB(c){
if(c === 'a'){
return foundA2;
}else{
return start(c);
}
}
function foundA2(c){
if(c === 'b'){
return foundB2;
}else{
return start(c);
}
}
function foundB2(c){
if(c === 'a'){
return foundA3;
}else{
return start(c);
}
}
function foundA3(c){
if(c === 'b'){
return foundB3;
}else{
return start(c);
}
}
function foundB3(c){
if(c === 'x'){
return end;
}else{
return foundB2(c);
}
}
console.log(find("i am abababx")); // true
console.log(find("i am ababababx")); // true
console.log(find("i am abcabcababx")); // false
网友评论