前端三个基本结构：结构层HTML、表现层CSS、行为层JavaScript。现在的Web前端应用已经不是简单的三层结构就能轻松解决，而是已经形成了编译流程化、生产环境基础优化结构运行的模式。
HTML4.01是基于SGML（Standard Generalized Markup language，标准通用标记语言）规范来制定的；HTML5不是基于SGML演化而来。
<!DOCTYPE html>的定义（不基于SGML无需DTD）兼容所有HTML的历史版本和最新的HTML5版本，不支持HTML5中的DOCTYPE定义的浏览器仍然会使用HTML4.01等历史版本的兼容模式来进行文档解析。
流动网页提速（Accelerated Mobile Pages）是Google推出一个提升页面资源载入效率的HTML提议规范。思路：使用严格受限的高效HTML标签，使用静态网页缓存技术来提高网络访问静态资源的性能和用户体验。
一般浏览器对同一个域名支持5-8个并行下载。可以通过分域存放，即可增大并行下载数，同时可以隔离Cookie，减少请求头大小！
AMP通过自定义标签来替换img、video、audio、embed、form、table、frame、object、iframe这类影响页面渲染的标签，通过JavaScript异步加载完成。某种意义上图片懒加载和AMP思想是一致的！
面向未来的组件标准，包括四个部分：Custom Elements、HTML Imports、HTML Templates、Shadow DOM。
示例：创建自定义color
1999年12月，ECMAScript3发布；2009年12月，ECMAScript5标准发布；2015年6月，ECMAScript6发布；2016年，ECMAScript7发布。JavaScript代码遵循ECMAScript规范。
注意：
下面只列举一些常用或者说需要格外注意的ES6语法。所有ES6相关内容请查看 ES6–变量的声明及解构赋值、ES6–字符串、正则、数值、数组的扩展、 ES6–对象、函数的扩展、ES6–Set、Map、Symbol、Proxy及Reflect、 ES6–Promise、Generator及async、ES6–Class、Module及常用特性。
JavaScript内存泄漏：
（1）闭包函数；（2）全局变量；（3）对象属性循环引用；（4）DOM节点删除时未解绑定事件；（5）Map和Set的属性直接删除；上述都会使内存无法被正常回收，导致内存泄漏。
异步方法：
（1）setTimeout；（2）事件监听；（3）观察者模式；（4）$.Deferred；（5）promise；（6）generator；（7）async/wait；（8）第三方async库等。
类别
权重
!important
最高
内联style
1000
#id
100
.class
10
name
优先级高的会覆盖优先级低的；相同优先级书写在后面的会覆盖前面的！
CSS伪类和伪元素
实现样式统一化的三种思路：reset、normalize、neat
通过编写更高效、易管理的类CSS脚本并将它们自动生成浏览器解释执行的CSS代码，实现高效开发和便捷管理。常见的有SASS、LESS、POSTCSS。
以SASS为例，主要包括模块引用、嵌套、父级选择符、变量、运算、函数、篡写、指令、mixin、继承等属性。**函数和mixin区别：**mixin的内容会被全部填充到引入的元素代码里面，而function函数只做过程处理并输出。
通常实现动画的方式有如下几种：（1）JavaScript直接实现动画；（2）可伸缩矢量图形SVG动画；（3）CSS transition；（4）CSS3 animation；（5）Canvas动画；（6）requestAnimationFrame。
人眼能辨识的流畅动画为每秒60帧，1000ms/60=16ms可以用来JavaScript中setInterval(() => {}, 16)的间隔时间！
通常认为，响应设计是根据不同设备浏览器尺寸或分辨率来展示不同页面结构、行为层、表现层的设计方式。目前主流的实现方式：（1）通过判断userAgent来跳转到不同页面完成不同设备浏览器的适配，即维护两个不同站点来根据用户设备进行相应的跳转；（2）使用media query媒体查询手段，让页面根据不同设备浏览器自动改变页面的布局和显示，不需要跳转。
通常我们在选择方案时，需要考虑下面几个问题：
根据不同的设备浏览器渲染不同的页面结构，而不是直接跳转。可以通过下述两种方式：一是页面内容在前端渲染；二是页面内容在后端渲染。
首先要确保以移动端优化资源为主，保证移动端页面的首屏内容优先加载，然后通过异步的方式来实现桌面端或移动端剩余内容的加载。
通过URL或者UA判断设备，尽可能将桌面端和移动端的业务层模块分开维护。这样既能复用共同的基础组件，还可以差异化开发不同的业务组件。JavaScript和CSS资源完全分开加载，实现了两个端加载内容的相互对立。
目前主要网站60%以上的流量数据都来自图片，确保不影响用户体验的前提下尽可能降低图片的输出流量具有很重要的意义。
（1）使用Media query背景图片替换
（2）Picture标签元素
（3）模板判断响应式图片
（4）图片服务器判断输出内容
响应式布局是根据浏览器宽度、分辨率、横屏、竖屏等情况来自动改变页面元素展示的一种布局方式，一般使用栅格方式来实现；
屏幕适配布局是为了实现网页内容根据移动端设备屏幕大小等比例缩放所提出的一种布局计算方式。通常依据HTML中<html>标签元素的zoom属性缩放和根据REM自适配方案实现等比例缩放。
（1）zoom属性控制方案
（2）REM屏幕适配方案
CSS大小尺寸的表示单位主要有像素px、相对父元素大小百分比%、相对于当前对象内文本字体font-size的大小em、相对于文档根元素font-size的大小rem。
如果给HTML根元素一个根据屏幕自动调整的font-size，页面上所有元素的尺寸全部以rem为单位，无论屏幕宽度怎样变换，页面的内容和屏幕的比例将始终不变，实现了页面根据屏幕自动缩放。
1rem = 屏幕宽度*屏幕分辨率/10这样得到的1rem恰好是屏幕宽度的10%。
1rem = 屏幕宽度/320*10这样1rem在宽度320px的屏幕上表示的是10px。
和结构层类似，行为层的响应式同样分为JavaScript内容在前端引入和在后端引入两种情况。