- 2019/10/17
1.1 现代Web前端技术发展概述
Web Component: HTML5的一种组件化规范
webp格式: 一种在不降低图片质量的前提下,储存空间更小的图片格式。
1.2 浏览器应用基础
各大浏览器内核: p12
浏览器组成: 用户界面、浏览器引擎、渲染引擎(也称排版引擎,浏览器内核,用于解析和绘制DOM和CSS)、数据持久化存储、网络、JS引擎、UI后端。(p11)
**浏览器引擎工作流程:**解析HTML构建DOM树—构建渲染树—渲染树布局—渲染树绘制
改变页面元素位置: 会重新布局–页面重排,然后再进行重新渲染–重绘(不管有没有改变样式)
改变样式: 只进行重绘
Webkit(Chrome内核)和Grecko(Netscape6+、FireFox)渲染DOM的区别: Webkit中HTML和CSS的解析可以认为是并行的,而Greko先解析HTML,再解析CSS。(p13)
不同DOM的原始类型: p15-p17。
CSS样式定义的权重:!important
> 内联样式 > id选择器 > 类选择器 > 元素选择器(.className div{}
)
浏览器缓存技术: 9中缓存机制——HTTP文件缓存、LocalStorage
、SessionStorage
、indexDB
、WebSQL
、Cookies
、CacheStorage
、ApplicationCache
。(p20-p34)