学习笔记——浏览器原理简述

一,加载代码

浏览器运行

二,浏览器内核

不同的浏览器有不同的内核,谷歌浏览器的内核是Blink,是Webkit(苹果基于KHTMl开发、开源的,用于Safari)的一个分支、

浏览器内核指的是浏览器引擎(也叫页面渲染引擎)

三,浏览器渲染过程

执行过程中,HTML解析的时候遇到了JavaScript标签,会停止解析HTMl,而去加载和执行JavaScript代码

一般从index.html开始解析,浏览器内核中的HTML Parser,会把HTML解析成DOM Tree,上面那个倒三角DOM是指JavaScript代码可以操作DOM,比如document.createElement()进行元素创建。css会由CSS Parser解析成CSS规则,然后CSS规则和DOM Tree会结合成Attachment(附加),进而生成RenderTree(渲染树),这时Layout(布局引擎)会根据不同浏览器进行对应的布局生成新的RenderTree,然后Painting(绘制)出页面元素,最后Display(展示)
整个过程就像一辆汽车,html是车的主体和零件,css就是车的装饰,js就是车的各种功能


四,JavaScript引擎

整个过程中,JavaScript代码是由JavaScript引擎来执行的,

作用:将js代码翻译成CPU指令来执行

V8引擎:由谷歌开发

五,Js引擎和浏览器内核的关系

这里以WebKit为例,WebKit由两部分组成

WebCore:负责HTMl解析、布局、渲染等等相关工作

JavaScriptCore:解析、执行JavaScript代码

六,V8引擎的原理

V8是用C++编写的Google开源高性能JavaScript和WebAssembly引擎,它用于Chrome和Node.js等。

一行代码,比如const name=“lj”,会进行

词法分析:tokens:[{type:'keyword',value:‘const’},{type:‘identifier’,value:'name'}] keyword是关键字,identifier是标识符

语法分析:分成一个个小对象后,会根据其类型进行语法分析,然后生成AST抽象语法树

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容