- 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结构中全部使用<div>元素来嵌套使用，因为<div>没有任何的语义，仅代表一个元素容器。*HTML的语义化能让页面内容更具结构化更加清晰，便于浏览器和搜索引擎的解析。*要做到即使没有css的情况下，网页内容也是有序的文档格式显示。（p84）
display属性： 每个标签元素都是由display属性的，根据标签元素的display属性，可以将标签分为：行内元素、块级元素和常见空元素（br、hr、link等不能显示内容甚至不会在页面中出现的标签，但是对页面的解析有着重要的作用）。（p87）
table标签： <table>标签会导致内容渲染较慢，因为<table>是等表格所有内容全部解析完成后渲染树一次性渲染到页面上，如果表格内容过多，则可能产生渲染过程较慢的问题。因此通常使用其他标签来模拟表格，例如使用无序列表来模拟。（p88）
AMP HTML： AMP（流动网页提速）是google推荐的一个提升页面资源载入效率的HTML提议规范，以提高网络访问静态资源的性能和用户体验。思路是：（p90）
- 使用严格首先的高效HTML标签；
- 使用静态网页缓存技术。
浏览器的同一域名下的最大并行下载线程个数是有限的，所以我们常常要有限加载关键性展示资源，延后加载页面脚本类资源或页面非关键性图片资源。
但是
<img> <video> <form> <table> <iframe>等元素会在页面元素解析时就下载src或param中的内容，导致页面阻塞。 AMP通过自定义标签来替换这些标签。
- 2019/10/23
3.2 前端结构层演进
SGML： 标准通用标记语言，XML（可扩展标记语言）是在SGML的基础上演化而来的。
Web Component与Shadow Dom： Web Component是一种允许自定义的组件化技术，可以通过API创建新的组件。而Shadow Dom是一种通过Web Component来创建的DOM元素。比如<video>标签，看似只有一个标签，就实现了视频播放器内容，但是其标签内部具有很多其他的元素，并且无法直接操作内部的DOM元素，自己写的css和js都不能影响内部的隐藏元素。这样的DOM就称为Shadow Dom。(p98-p102)
- 2019/10/24
3.3 浏览器脚本演进历史
浏览器经历的脚本演化： ECMAScript3（1999）— ES5（2009）— CoffeeScript— ES6+（2015）、TypeScript（202）…(p102-107)
3.4 JavaScript标准实践
JavaScript和ECMAScript： JS = ES + DOM + BOM
ES5-call()、apply()、bind()的区别： 三者都可以重新绑定函数中this的指向，但是call()和apply()是直接用新的this去调用该函数，而bind()是返回新的函数。(p112)
call()的第一个参数是新的this，后面的参数是按照顺序的原函数参数。
apply()的第一个参数是新的this，后面的参数是一个数组，数组里面是按照顺序的参数。
ES6：
-
字符串模板： 字符串模板不会压缩内部的换行和空格，只是将内容填充替换掉。但是在项目开发中，如果使用es6的转译工具将es6的代码处理成es5后运行，格式可能丢失。（p114）
-
函数参数： es6对于函数参数添加了默认参数、不定参数和拓展参数。（p116）
-
箭头函数：在js中，代码的执行上下文由变量对象、作用域链和this值组成。**箭头函数没有完整的执行上下文，**箭头函数的this和外层this相同，可以理解为他的执行上下文没有this值。如果需要创建具有独立上下文this值的函数，就不要使用箭头函数。
-
Iterator和Generator：(p119-122)//迭代器生成方法 let numbers = [1,2,3,4,5]; let iterator = numbers[Symbol.iterator]();生成器
Generator和迭代器类似，使用方法见p120，但是注意Generator内部的函数和外部的主线程是异步的。 -
2019/10/25
-
Map、Set： Set可以认为是增强的数组类型；Map可以认为是增强的对象类型。而
WeakSet和WeakMap对应着Set和Map的优化类型。（p122）
JS中可能出现内存泄漏的场景： 闭包函数、全局变量、对象属性循环引用、DOM节点删除时未绑定事件、Map和Set的直接删除属性。（p123）
- Symbol： ES6新增的基础类型，一般用作属性键值， 能避免对象属性键的命名冲突。
ES6中的基本类型有7种：
null, undefined, boolean, string, number, symbol, object
Proxy、Reflect：Proxy可以拦截某个对象的属性值访问；Reflect是原有对象的一个引用代理。（p126-128）
JS中实现异步的方法：
setTimeout, 事件监听, 观察者模式,$.Deferred,promise,generator,async/await(ES7), 第三方async库。
3.5 前端表现层基础
- 2019/10/26
3.6 前端界面技术
css统一化处理： reset、normalize、neat。reset是清除浏览器的默认样式并保持在所有浏览器中一致；normalize是使用同一种默认样式，并在所有浏览器中保持一致样式；neat是两种的结合。（p137）
实现动画的方案： 6种：JS实现、SVG动画、CSS3 transition、CSS3 animation、Canvas动画和requestAnimationFrame。（p141-149）
- 2019/11/11
3.7 响应式网站开发技术
实现方法： 主流的实现方法有2种：第一种是前端或后端判断userAgent来跳转不同的页面来完成适配，适用于功能复杂并对性能要求较高的站点；第二种是使用media query等手段，让页面根据不同浏览器自动改变布局和显示，适用于访问量较小、性能要求不高的应用场景。（p149-152）
结构层响应式： HTML内容的自适应渲染实现方式。（p152-160）
表现层响应式： 表现层响应式可以分为2种：一是响应式布局，根据浏览器宽度、分辨率、横竖屏等情况来自动改变页面元素展示的一种方式，一般可以使用栅格方式来实现；二是屏幕适配布局，屏幕适配布局主要针对移动端，由于移动端的屏幕大小不同，屏幕适配布局是为了实现网页内容根据移动端设备屏幕大小等比缩放所提出的一种布局计算方式。（p160）
行为层响应式： 在行为层脚本根据不同的浏览器环境执行不同的逻辑。
