现代前端技术解析-第3章 前端三层结构与应用
《现代前端技术解析》第3章阅读笔记
- 笔记章节目录
- 第1章 Web前端技术基础
- 第2章 前端与协议
- 第3章 前端三层结构与应用
- 第4章 现代前端交互框架
- 第5章 前端项目与技术实践
- 一（5.1 前端开发规范）
- 二（5.2 前端组件规范 & 5.3 自动化构建）
- 三（5.3 自动化构建）
- 四（5.5 前端用户数据分析 & 5.6 前端搜索引擎优化基础 & 5.7 前端协作）
- 第6章 前端跨栈技术
- 第7章 未来前端时代
- 2019/10/22
前端的三层结构： 结构层（HTML）、表现层（CSS）、行为层（JS）。
现在的Web前端应用开发早已不是简单的三层结构就能轻松解决的了，而是已经形成了编译流程化、生产环境基础优化结构运行的模式。（p83）
3.1 HTML结构层基础
HTML5： HTML最早是有XML衍生而来，HTML4.01是基于SGML（标椎通用标记语言）规范来制定的。HTML5则不是，所以不需要对DTD（文档类型定义）进行声明。（p83）
因为SGML的规范很多，所以使用HTML来开发页面时需要进行DTD声明，即在DOCTYPE后面声明DTD定义，否则会使用较低的浏览器标椎模式（也称混杂模式、怪异模式）来解析HTML文本。声明的话会使用标椎模式来解析HTML文本。
Web语义化标签： 用正确的标签做正确的事情。杜绝HTML结构中全部使用 display属性： 每个标签元素都是由display属性的，根据标签元素的display属性，可以将标签分为：行内元素、块级元素和常见空元素（br、hr、link等不能显示内容甚至不会在页面中出现的标签，但是对页面的解析有着重要的作用）。（p87） table标签： AMP HTML： AMP（流动网页提速）是google推荐的一个提升页面资源载入效率的HTML提议规范，以提高网络访问静态资源的性能和用户体验。思路是：（p90） 浏览器的同一域名下的最大并行下载线程个数是有限的，所以我们常常要有限加载关键性展示资源，延后加载页面脚本类资源或页面非关键性图片资源。 但是标签会导致内容渲染较慢，因为
是等表格所有内容全部解析完成后渲染树一次性渲染到页面上，如果表格内容过多，则可能产生渲染过程较慢的问题。因此通常使用其他标签来模拟表格，例如使用无序列表来模拟。（p88）