三层结构和应用

DOCTYPE

DOCTYPE声明指示Web浏览器页面使用哪个HTML版本编写的指令进行解析。

AMP

流动网页提速，是谷歌推行的一个提升页面资源载入效率的HTML提议规范。使用严格受限的高效HTML标签以及使用静态网页缓存技术来提高网络访问静态资源的性能和用户体验。

DOM

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。

HTML5

HTML5增加了较多新的语义化标签，如<header> <video>等

在原有标签上新增了一些属性，如input的type,增加了color,date,time等属性

ShadowDOM WebComponent

ShadowDom是HTML的一个规范，允许开发者封装自己的HTML标签，CSS样式和特点的JS代码，同时也可以让开发者创建一个自己的自定义一级标签，创建的新标签和相关的API被称为WebComponent。

ESMAScript5

严格模式：限制了原有的一些不规范的写法，让一些不合理的语法直接报错。

json：支持了IE8以及更低版本浏览器对json解析方法的使用

Object：新增了属性和方法

Array方法属性：对内置数组对象的原型方法进行了扩展完善，添加了indexOf，forEach，filter，map等

Data.now(),Data.toJson

深拷贝vs浅拷贝

浅复制是对对象地址的复制，并没 有开辟新的栈，也就是复制的结果是两个对象指向同一个地址，修改其中一个对象的属性，则另一个对象的属性也会改变，而深复制则是开辟新的栈，两个对象对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性。

深拷贝可以通过创建一个新的对象，然后递归进行复制或者使用json解析的方式来拷贝，还可以使用concat()方法和slice()方法来进行拷贝。

递归深拷贝

function clone( o ) {
    var temp = {};
    for( var k in o ) {
        if( typeof o[ k ] == 'object' ){
             temp[ k ] = clone( o[ k ] );
        } else {
             temp[ k ] = o[ k ];
        }
    }
    return temp;
}

contact深拷贝

concat() 方法用于连接两个或多个数组，该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

var arr = [0,1,2,3,4];
var arrCopy = arr.concat();
console.log(arrCopy); // 0,1,2,3,4

slice深拷贝

slice() 方法可从已有的数组中返回选定的元素。

var arr = [0,1,2,3,4];
var arrCopy = arr.slice(0,arr.length);
console.log(arrCopy); // 0,1,2,3,4

ESMAScript6

let,const: let和const都只能作为块级作用域变量的声明，且只能在块级作用域内生效，块内声明的变量无法在块级外引用；使用const声明的变量必须进行初始化赋值，而且一旦赋值就不能再进行二次修改赋值；使用let，const在全局作用域下声明的变量不回作为属性添加到全局作用域对象里。

解构赋值

数组新特性:Array.prototype.find,findIndex,等，keys(),values(),entries()等遍历方式

函数参数：ES6对函数参数进行了新的设计，添加了默认参数，不定参数和扩展参数。

箭头函数：其this和外层this相同，可以理解为它执行上下文只有变量对象和作用域链，没有this值。

增强对象：可以通过属性简写，变量作为属性名或省略对象函数属性的书写方式来提高编码效率。

类：class

模块module：import/export

循环和迭代器：iterator iterator.next()

集合类型： Map，Set，WeakMap，WeakSet

Promise： 避免异步操作函数里的多层嵌套回调问题

ESMAScript7

幂指数操作符

数组方法：include

异步函数async/await

响应式

结构层数据内容响应式： 桌面端浏览器和移动端浏览器加载相同的HTML结构，用异步的方式加载桌面端或移动端不同的JavaScript资源列表来渲染不同的前端数据内容。同样也可以用这个方式来加载CSS文件。

后端数据渲染响应式：在服务端根据userAgent和URL参数来选择不同的模版。

结构层媒体响应式：让浏览器的展示媒体内容尺寸根据屏幕宽度或屏幕分辨率来进行自适应调节。

图片资源响应式：使用媒体查询来根据不同分辨率加载不同的图片资源，Picture标签元素，前端模版进行判断渲染输出不同的图片，服务端来进行判断输出不同内容。

表现层响应式布局：栅格。

屏幕适配布局：在HTML的head里面加入一段meta声明来控制页面使用移动端浏览器展示时保持内容不缩放。

屏幕适配-zoom属性控制方案：控制body的zoom属性来控制页面缩放。

rem屏幕适配方案：1rem大概是屏幕宽度的10%，使用rem来作为尺寸单位，所有元素大小和布局就都是相对的，1rem在不同分辨率屏幕上显示的比例都是一致的。

回流（Reflow）和重绘（Repaint）

提高高性能DOM就不得不提到回流和重绘，那么什么是回流什么是重绘？ 
回流 
对于DOM结构中的各个元素都有自己的盒子模型，这些都需要浏览器根据各种样式（浏览器的、开发人员定义的）来计算并根据计算结果将元素放到它该出现的位置，这个过程称为回流。

重绘 
当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为重绘。

什么情况会引起回流呢，操作dom，比如访问元素的 clientWidth属性，或者添加和删除dom节点，改变元素的尺寸，边框，改变元素位置，以及浏览器窗口发生变化，都会引起回流。

改变元素的颜色，背景色等属性，不会引起位置变化的属性时，则只会进行重绘。

显然如果频繁的回流和重绘，那么页面的性能将大大降低，我们需要采取一些措施避免频繁的回流和重绘。

1. 将多次改变样式属性的操作合并成一次操作。

2.将需要多次重排的元素，position属性设为absolute或fixed，这样此元素就脱离了文档流，它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。

3. 在内存中多次操作节点，完成后再添加到文档中去。例如要异步获取表格数据，渲染到页面。可以先取得数据后在内存中构建整个表格的html片段，再一次性添加到文档中去，而不是循环添加每一行。

4. 由于display属性为none的元素不在渲染树中，对隐藏的元素操作不会引发其他元素的重排。如果要对一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示。这样只在隐藏和显示时触发2次重排。 

5. 在需要经常取那些引起浏览器重排的属性值时，要缓存到变量。