现代前端技术解析-第1章 Web前端技术基础

《现代前端技术解析》第1章阅读笔记

---

• 笔记章节目录

• 第1章 Web前端技术基础
• 第2章 前端与协议
• 第3章 前端三层结构与应用
• 第4章 现代前端交互框架
• 第5章 前端项目与技术实践
  • 一（5.1 前端开发规范）
  • 二（5.2 前端组件规范 & 5.3 自动化构建）
  • 三（5.3 自动化构建）
  • 四（5.5 前端用户数据分析 & 5.6 前端搜索引擎优化基础 & 5.7 前端协作）
• 第6章 前端跨栈技术
• 第7章 未来前端时代

---

• 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）