第六届字节跳动青训营第一课 | 青训营

50 阅读2分钟

第一节课的内容是对整个前端以及常用前端“三剑客”的概述和引论,范围涵盖其简介和发展史;

三语言的概述:

HTML:构建框架、结构;包含控制内容布局;

CSS:给元素添加样式,识别不同的屏幕、尺寸以让网站具备对应的特征,是网站外表和体验最重要的一个工具;

JS:增加交互体验,即网页web的精髓所在;可以处理复杂的函数、特性,且本身为代码,可以保证更高的效率和可用性

image.png 三语言的特性:

HTMl是大量标签构成的文本文件,标签为HTML中最小的字符,以<>框住;通过浏览器容器,将其转化为具象的页面内容;

CSS语法非常简单,只需要一个Selector后面跟上一个包含多个Declaration的{},每个Declaration都是由Property和Value组成的

JS借鉴了C语言的基本语法,Java语言的数据类型和内存管理,Scheme语言中函数的first class地位和Self语言中基于原型(prototype)的继承机制

 

部分其他笔记:

JS在定义变量时会自动进行数据统一化的处理,如果数据类型不匹配可能导致结果不符合预期,尽量对同一个类型的数据进行操作;

image.png 浏览器一般包含两种引擎:即渲染引擎和JS引擎;渲染引擎主要负责加载页面,根据HTML来适配DOM树的结构,接着获取CSS资源并构建CSS-OM树,结合DOM的结构特性和CSS-OM树的样式特性,渲染引擎会计算最终页面的排版,并判断其中哪些部分可以作为一个整体,并为一个图层,这样渲染的效率会更高,最后把页面绘制出来

image.png JS的本质也是一段文本,需要通过解释器才能运行。引擎会把JS源码经过词法、语法解析转化成为AST树,接着通过Ignition转化为次解码,次解码可以在虚拟器中运行,值得一提的是如果虚拟器发现有热点代码,可以反过来让Turbofan直接生成优化后的机器码,性能会更高。但也有可能会有一个Deoptimize的流程,当Turofan运行时发现数据类型不正确,就会返回,让Ignition重新优化兼容类型的代码,这也是我们提倡不改变JS变量类型的原因