持续更新完善中...

目录
1、HTML篇
2、CSS篇
3、ECMAScript篇
4、DOM篇
5、浏览器常见兼容问题篇
6、网络协议篇
7、网络安全篇
8、性能优化篇

1、HTML篇

1、DOCTYPE的理解？

答：DOCTYPE 是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义来解析文档。只有确定了一个正确的文档类型，超文本标记语言或可扩展超文本标记语言中的标签和层叠样式表才能生效，甚至对 javascript 脚本都会有所影响。

作用: doctype声明位于文档中最前面的位置，处于标签之前，告知浏览器使用的是哪种规范。

doctype三种类型: Strict、Transitional 以及 Frameset

混杂模式：如果不声明doctype，浏览器不引入w3c的标准，那么早期的浏览器会按照自己的解析方式渲染页面。浏览器采用自身方式解析页面的行为称为"quirks mode（混杂模式也称怪异模式）"；

标准模式：采用w3c方式解析就是"strict mode（标准模式）"。 如果完全采用strictmode就不会出任何的差错，但这样会降低程序的容错率，加重开发人员的难度

特殊情况：
对于那些浏览器不能识别的doctype ,浏览器采用quirks mode；
没有声明DTD或者html版本声明低于4.0采用quirks mode，其他使用standard mode；
ie6中，如果在doctype声明前有一个xml声明(比如:<?xml version="1.0" encoding="iso-8859-1"?>)，则采用quirks mode解析

标准模式与怪异模式的区别:

标准模式：浏览器根据规范呈现页面
混杂模式（怪异模式）：页面以一种比较宽松的兼容方式显示。

他们最大的不同是对盒模型的解析。
严格模式（strict mode）中：width是内容宽度 ，也就是说,元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right- width + margin-right;

混杂模式（quirks mode） ：width则是元素的实际宽度 ，内容宽度 = width - (margin-left + margin-right + padding-left + padding-right + border-left-width + 　border-right-width)

2、position几个属性的作用？

答：position的常见四个属性值： relative，absolute，fixed，static。一般都要配合"left"、"top"、"right"以及 "bottom"属性使用。

1）Static：默认位置，设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。一般不常用。

2）Relative：位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，意思就是如果设置了 relative 值，那么，它偏移的 top，right，bottom，left 的值都以它原来的位置为基准偏移，而不管其他元素会怎么样。注意 relative 移动后的元素在原来的位置仍占据空间。

3）Absolute：位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。意思就是如果它的

父容器设置了 position 属性，并且 position 的属性值为 absolute 或者 relative，那么就会依据父容器进行偏移。如

果其父容器没有设置 position 属性，那么偏移是以 body 为依据。注意设置 absolute 属性的元素在标准流中不占位置。

4）Fixed：位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。不论窗口滚动与否，元素都会留在那个位置。它始终是以 body 为依据的。 注意设置 fixed 属性的元素在标准流中不占位置。

3、px，em，rem的区别？

答：
1）px 像素（Pixel）。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果 px 要换算成物理长度，需要指定精度 DPI。

2）em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。

3）rem是CSS3新增的一个相对单位（rootem，根 em），使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是 HTML 根元素。

4）区别：IE 无法调整那些使用 px 作为单位的字体大小，而 em 和 rem 可以缩放，rem 相对的只是 HTML 根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了 IE8 及更早版本外，所有浏览器均已支持 rem。

4、什么是BFC？

答：
1）定义：BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box 参与， 它规定了内部的Block-level Box 如何布局，并且与这个区域外部毫不相干。

布局规则：

A. 内部的 Box 会在垂直方向，一个接一个地放置。

B. Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box的margin 会发生重叠。

C. 每个元素的 margin box 的左边， 与包含块 border box 的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

D. BFC 的区域不会与 float box 重叠。

E. BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

F. 计算 BFC 的高度时，浮动元素也参与计算。

3）哪些元素会生成 BFC：

A. 根元素

B. float 属性不为 none

C. position 为 absolute 或 fixed

D. display 为 inline-block， table-cell，table-caption， flex， inline-flex F. overflow 不为visible

5、表格自动换行怎么实现？

答：word-break：normal 使用浏览器默认的换行规则；

break-all允许单词内换行；

keep-all只能在半角空格或连字符处换行

word-wrap：normal 是用浏览器默认的换行规则；break-word 在长单词或 URL 地址内部进行换行。

6、box-sizing、transition、translate分别是什么？

答：Box-sizing： 用来指定盒模型的大小的计算方式。主要分为boreder-box（从边框固定盒子大小）、content-box（从内容固定盒子大小）两种计算方式。

transition： 当前元素只要有“属性”发生变化时，可以平滑的进行过渡。通过 transtion-propety 设置过渡属性；

transtion-duration 设置过渡时间；

trantion-timing-function 设置过渡速度；

trantion-delay 设置过渡延时

translate：通过移动改变元素的位置；有 x、y、z 三个属性

7、选择器优先级是怎样的？

答：！important>行内样式>id 选择器>类选择器>标签选择器>通配符>继承

权重算法：（0，0，0，0）==》第一个 0 对应的是 important 的个数，第二个 0 对应的是 id 选择器的个数，第三个 0 对应的类选择器的个数，第四个 0 对应的是标签选择器的个数，就是当前选择器的权重。

比较：

先从第一个 0 开始比较，如果第一个 0 大，那么说明这个选择器的权重高，如果第一个相同，比较第二个，依次类推

8、Iframe的作用？

答：
用法：Iframe是用来在网页中插入第三方页面，早期的页面使用 iframe 主要是用于导航栏这种很多页面都相同的部分，这样可以在切换页面的时候避免重复下载。

优点：便于修改，模块分离，像一些信息管理系统会用到。但现在基本上不推荐使用。除非特殊需要，一般不推荐使用。

缺点 :
（1）iframe 的创建比一般的 DOM 元素慢了 1-2 个数量级

（2）iframe 标签会阻塞页面的加载，如果页面的onload 事件不能及时触发，会让用户觉得网页加载很慢，用户体验不好.在 Safari 和 Chrome 中可以通过 js 动态设置 iframe 的 src 属性来避免阻塞.

（3）iframe 对于 SEO 不友好，替代方案一般就是动态语言的 Incude 机制和 ajax 动态填充内容等.

9、有一个导航栏在chrome 里面样式完好？在 IE 里文字都聚到一起了，是哪个兼容性问题？

答：用了 display：flex 属性，在 ie10 以下都是无效的。

10、xhtml和 html 有什么区别？

答：HTML是一种基本的 WEB 网页设计语言，XHTML 是一个基于 XML 的置标语言最主要的不同：

XHTML元素必须被正确地嵌套。

XHTML元素必须被关闭。

标签名必须用小写字母。

XHTML文档必须拥有根元素。

11、标签上title 与alt 属性的区别是什么?

答：Alt 当图片不显示时，用文字代表。Title为该属性提供信息。

12、改变元素的外边距用什么属性？改变元素的内填充用什么属性？

答：改变元素的外边距用 margin，改变元素的内填充用 padding。

13、在新窗口打开链接的方法是？

答：target：_blank。

14、合理的页面布局中常听过结构与表现分离，那么结构是什么？表现是什么？

答：结构是 html，表现是 css。

15、简述对Web 语义化的理解？

答：根据内容的结构（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

优点

在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

如何做？

尽可能少的使用无语义的标签div和span；
在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
不要使用纯样式标签，如：b、font、u等，改用css设置。
需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

16、display：none；与 visibility： hidden 的区别是什么？

答：display：none； 使用该属性后，HTML 元素（对象）的宽度、高度等各种属性值都将“丢失”；

visibility：hidden； 使用该属性后，HTML 元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。

17、块级元素和有行内元素分别有哪些？他们分别有什么特点？空（void）元素有哪些？

块级元素： div、ul、li、dl、dt、dd、p、h1-h6、blockquote
特点：单独占一行，可以设置 width、height、margin，padding
display 属性值： block

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
特点： 和其他行内元素同在一行，不能设置width、height，margin-top/margin-bottom无效，padding-top/padding-bottom无效
display属性值： inline

display：inline-block 行内块元素，可以设置 width，height，margin，padding

空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img

17、cookie、localstorage和 sessionstorage 的区别？

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。

sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

存储大小
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

有效时间
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

作用域不同
sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；
localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。
Web Storage 的 api 接口使用更方便。

了解sessionStorage 和 localStorage

sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，这两种方式都允许开发者使用js设置的键值对进行操作，在在重新加载不同的页面的时候读出它们。这一点与cookie类似。可以方便的在web请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。

sessionStorage、localStorage、cookie都是在浏览器端存储的数据，
其中sessionStorage的概念很特别，引入了一个“浏览器窗口”的概念。 sessionStorage是在同源的同窗口（或tab）中，始终存在的数据。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁。同时“独立”打开的不同窗口，即使是同一页面，sessionStorage对象也是不同的。
Web Storage 数据完全存储在客户端, 不需要通过浏览器的请求将数据传给服务器, 因此比cookies能够存储更多的数据,大概5M左右。

Web Storage带来的好处：使用 local storage和session storage主要通过在js中操作这两个对象来实现，分别为window.localStorage和window.sessionStorage. 这两个对象均是Storage类的两个实例，自然也具有Storage类的属性和方法。

减少网络流量：一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递。

快速显示数据：性能好，从本地读数据比通过网络从服务器获得数据快得多，本地数据可以即时获得。再加上网页本身也可以有缓存，因此整个页面和数据都在本地的话，可以立即显示。

临时存储：很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage非常方便。

18、浏览器本地存储与服务器端存储之间的区别？

其实数据既可以在浏览器本地存储，也可以在服务器端存储。
浏览器端可以保存一些数据，需要的时候直接从本地获取，sessionStorage、localStorage和cookie都由浏览器存储在本地的数据。

服务器端也可以保存所有用户的所有数据，但需要的时候浏览器要向服务器请求数据。
1）服务器端可以保存用户的持久数据，如数据库和云存储将用户的大量数据保存在服务器端。

2）服务器端也可以保存用户的临时会话数据。服务器端的session机制，如jsp的 session 对象，数据保存在服务器上。

实现上，服务器和浏览器之间仅需传递session id即可，服务器根据session id找到对应用户的session对象。会话数据仅在一段时间内有效，这个时间就是server端设置的session有效期。

服务器端保存所有的用户的数据，所以服务器端的开销较大，而浏览器端保存则把不同用户需要的数据分布保存在用户各自的浏览器中。

浏览器端一般只用来存储小数据，而服务器可以存储大数据或小数据。
服务器存储数据安全一些，浏览器只适合存储一般数据。

HTML5

1、canvas： <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成

2、音频audio
3、视频video
4、语义性标签： article, nav , footer, section, aside, hgroup等.
5、时间time
6、表单
7、本地存储
8、websocket
9、拖放 draggable

• 新属性

  • 拖放: draggable <img draggable="true">
  • 可编辑: contenteditable

• 新事件

  • 拖放 ondrag ondrop
  • 关闭页面 onunload
  • 窗口大小改变 onresize

• 取消了一些元素: font center等

• 新的DOCTYPE声明 <!DOCTYPE html>

• 完全支持CSS3

• Video和Audio

• 2D/3D制图

• 本地存储

• 本地SQL数据

• Web应用

2、CSS篇

CSS3新特性：

选择器：(: not(.input): 所有class不是“input”的节点）
圆角：border-radiuis
多列布局：
阴影和反射：box-shadow
文字特效：text-shadow
线性渐变： gradient
旋转：transform
缩放：scale(0.85,0.90)
定位：translate(0px, -30px)
倾斜：skew(-9deg, 0deg)
动画：Animation
多背景：

怎么让一个不定宽高的DIV，垂直水平居中？

答：
1）使用CSS方法

父盒子设置：display：table-cell； text-align：center；vertical-align：middle；

Div 设置： display：inline-block；vertical-align：middl；

2）使用CSS3 transform

父盒子设置：display：relative

Div 设置： transform： translate(-50%，-50%)；position： absolute；top： 50%；left： 50%；

解释浮动和工作原理

浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。
假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。
清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。
关于清除浮动:清除浮动可以理解为打破横向排列。 clear: none | left | right | both
对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。

清除浮动

浮动元素后面添加空标签 clear:both
给父标签使用overflow: hidden/auto;zoom:1
父级div定义, 使用伪类:after和zoom
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}

.clearfloat{zoom:1}

zoom:1的作用： 触发IE下的hasLayout。zoom是IE浏览器专有属性，可以设置或检索对象的缩放比例。

当设置了zoom的值之后，所设置的元素就会扩大或缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。

CSS中可以和不可以继承的属性

一、无继承性的属性

1、display：规定元素应该生成的框的类型

2、文本属性：

vertical-align：垂直文本对齐

text-decoration：规定添加到文本的装饰

text-shadow：文本阴影效果

white-space：空白符的处理

unicode-bidi：设置文本的方向

3、盒子模型的属性：
width、height、margin、padding、border

4、背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment

5、定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

6、生成内容属性：content、counter-reset、counter-increment

7、轮廓样式属性：outline-style、outline-width、outline-color、outline

8、页面样式属性：size、page-break-before、page-break-after

9、声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

二、有继承性的属性

1、字体系列属性

font：组合字体

font-family：规定元素的字体系列

font-weight：设置字体的粗细

font-size：设置字体的尺寸

font-style：定义字体的风格

font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。

font-stretch：对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。

font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。

2、文本系列属性

text-indent：文本缩进

text-align：文本水平对齐

line-height：行高

word-spacing：增加或减少单词间的空白（即字间隔）

letter-spacing：增加或减少字符间的空白（字符间距）

text-transform：控制文本大小写

direction：规定文本的书写方向

color：文本颜色

3、元素可见性：visibility

4、表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout

5、列表布局属性：list-style-type、list-style-image、list-style-position、list-style

6、生成内容属性：quotes

7、光标属性：cursor

8、页面样式属性：page、page-break-inside、windows、orphans

9、声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

三、所有元素可以继承的属性

1、元素可见性：visibility

2、光标属性：cursor

四、内联元素可以继承的属性

1、字体系列属性

2、除text-indent、text-align之外的文本系列属性

五、块级元素可以继承的属性

1、text-indent、text-align

3、ECMAScript篇

一、 ES5

1、ECMAScript有哪些基本类型?

Undefined, Null, Boolean, Number, String

Object是复杂数据类型, 其本质是由一组无序的名值对组成的.

2、原型，原型链？

3、闭包

闭包是指有权访问另一个函数作用域中的变量的函数. 创建闭包常见方式,就是在一个函数内部创建另一个函数.

作用: 匿名自执行函数 (function (){ ... })(); 创建了一个匿名的函数，并立即执行它，由于外部无法引用它内部的变量，因此在执行完后很快就会被释放，关键是这种机制不会污染全局对象。
缓存, 可保留函数内部的值
实现封装
实现模板

4、作用域

5、this的理解与用法？

this 在 JavaScript 中主要由以下5种使用场景。

1、函数调用，this 绑定全局对象，浏览器环境全局对象为 window
2、内部函数的 this 也绑定全局对象，应该绑定到其外层函数对应的对象上，这是 JavaScript的缺陷，用that替换。
3、构造函数使用，this 绑定到新创建的对象。
4、对象方法使用，this 绑定到该对象。
5、使用apply或call调用 this 将会被显式设置为函数调用的第一个参数。

6、call、apply 、bind的用法与区别？

call/apply用法：都能继承另一个对象的方法和属性,区别在于参数列表不一样

区别：Function.apply(obj, args) args是一个数组,作为参数传给Function
Function.call(obj, arg1, arg2,...) arg*是参数列表
apply一个妙用: 可以将一个数组默认的转化为一个参数列表
举个栗子: 有一个数组arr要push进一个新的数组中去, 如果用call的话需要把数组中的元素一个个取出来再push, 而用apply只有Array.prototype.push.apply(this, arr)

bind用法:
bind()函数会创建一个新函数, 为绑定函数。当调用这个绑定函数时,绑定函数会以创建它时传入bind方法的第一个参数作为this,传入bind方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数.

一个绑定函数也能使用new操作符创建对象：这种行为就像把原函数当成构造器。提供的 this 值被忽略，同时调用时的参数被提供给模拟函数。

7、jsonp

8、伪数组

伪数组是能通过Array.prototype.slice 转换为真正的数组的带有length属性的对象
比如arguments对象,还有像调用getElementsByTagName,document.childNodes之类的，它们都返回NodeList对象都属于伪数组
我们可以通过Array.prototype.slice.call(fakeArray)将伪数组转变为真正的Array对象: 返回新数组而不会修改原数组

9、undefined和null的区别, 以及对undeclared的理解？

null表示没有对象, 即此处不该有此值. 典型用法:
（1） 作为函数的参数，表示该函数的参数不是对象。

（2） 作为对象原型链的终点。

( 3 ) null可以作为空指针. 只要意在保存对象的值还没有真正保存对象,就应该明确地让该对象保存null值.

undefined表示缺少值, 即此处应该有值, 但还未定义.
（1）变量被声明了，但没有赋值时，就等于undefined。

（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。

（3）对象没有赋值的属性，该属性的值为undefined。

（4）函数没有返回值时，默认返回undefined。

undeclared即为被污染的命名, 访问没有被声明的变量, 则会抛出异常, 终止执行. 即undeclared是一种语法错误

10、事件冒泡机制:

从目标元素开始，往顶层元素传播。途中如果有节点绑定了相应的事件处理函数，这些函数都会被一次触发。如果想阻止事件起泡，可以使用e.stopPropagation()（Firefox）或者e.cancelBubble=true（IE）来组织事件的冒泡传播。

二、 ES6

1、let和const关键字: 可以把let看成var，只是它定义的变量被限定在了特定范围内才能使用，而离开这个范围则无效。const则很直观，用来定义常量，即无法被更改值的变量。

2、箭头函数，inputs => outputs：剪头操作符左边是输入的参数，而右边则是进行的操作以及返回的值

3、字符串模板: ES6中允许使用反引号 ` 来创建字符串，此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${vraible}。

4、Promises是处理异步操作的一种模式

5、class关键字，ES6提供的类实际上就是JS原型模式的包装

6、默认参数值：现在可以在定义函数的时候指定参数的默认值了，而不用像以前那样通过逻辑或操作符来达到目的了。

7、for of值遍历 每次循环它提供的不是序号而是值。

8、Map, Set

9、自动解析数组或对象中的值。比如若一个函数要返回多个值，常规的做法是返回一个对象，将每个值做为这个对象的属性返回。但在ES6中，利用解构这一特性，可以直接返回一个数组，然后数组中的值会自动被解析到对应接收该值的变量中。

10、Math, Number, String, Object的新API

11、iterator, generator

4、DOM篇

DOM是针对HTML和XML文档的一个API(应用程序编程接口)，DOM描绘了一个层次化的节点树, 允许开发人员添加, 移除和修改页面的某一部分.

常用的DOM方法

getElementById(id)
getElementsByTagName()
appendChild(node)
removeChild(node)
replaceChild()
insertChild()
createElement()
createTextNode()
getAttribute()
setAttribute()

常用的DOM属性

innerHTML 节点(元素)的文本值
parentNode 节点(元素)的父节点
childNodes
attributes 节点(元素)的属性节点

5、浏览器知识，以及常见兼容问题篇

浏览器知识

先说一下浏览器的结构：

1、用户界面（UI） - 包括菜单栏、工具栏、地址栏、后退/前进按钮、书签目录等，也就是能看到的除了显示页面的主窗口之外的部分；
2、浏览器引擎（Rendering engine） - 也被称为浏览器内核、渲染引擎，主要负责取得页面内容、整理信息（应用CSS）、计算页面的显示方式，然后会输出到显示器或者打印机；
3、JS解释器 - 也可以称为JS内核，主要负责处理javascript脚本程序，一般都会附带在浏览器之中，例如chrome的V8引擎；
4、网络部分 - 主要用于网络调用，例如：HTTP请求，其接口与平台无关，并为所有的平台提供底层实现；
5、UI后端 - 用于绘制基本的窗口部件，比如组合框和窗口等。
6、数据存储 - 保存类似于cookie、storage等数据部分，HTML5新增了web database技术，一种完整的轻量级客户端存储技术。

注：IE只为每个浏览器窗口启用单独的进程，而chrome浏览器却为每个tab页面单独启用进程，也就是每个tab都有独立的渲染引擎实例。

现在的主流浏览器：

IE、Firefox、Safari、Chrome、Opera。

它们的浏览器内核（渲染引擎）：
IE--Trident、
FF(Mozilla)--Gecko、
Safari--Webkit、
Chrome--Blink（WebKit的分支）、
Opera--原为Presto，现为Blink。
因此在开发中，兼容IE、FF、Opera（Presto引擎是逐步放弃的）、Chrome和Safari中的一种即可，Safari、Chrome的引擎是相似的。

文件加载顺序

浏览器加载页面上引用的CSS、JS文件、图片时，是按顺序从上到下加载的，每个浏览器可以同时下载文件的个数不同，因此经常有网站将静态文件放在不同的域名下，这样可以加快网站打开的速度。

reflow

在加载JS文件时，浏览器会阻止页面的渲染，因此将js放在页面底部比较好。
因为如果JS文件中有修改DOM的地方，浏览器会倒回去把已经渲染过的元素重新渲染一遍，这个回退的过程叫reflow。
CSS文件虽然不影响js文件的加载，但是却影响js文件的执行，即使js文件内只有一行代码，也会造成阻塞。因为可能会有var width = $('#id').width()这样的语句，这意味着，js代码执行前，浏览器必须保证css文件已下载和解析完成。
办法：当js文件不需要依赖css文件时，可以将js文件放在头部css的前面。

常见的能引起reflow的行为：

1、改变窗囗大小
2、改变文字大小
3、添加/删除样式表
4、脚本操作DOM
5、设置style属性

reflow是不可避免的，只能尽量减小，常用的方法有：

1.尽量不用行内样式style属性，操作元素样式的时候用添加去掉class类的方式
2.给元素加动画的时候，可以把该元素的定位设置成absolute或者fixed，这样不会影响其他元素

repaint

另外，有个和reflow相似的术语，叫做repaint（重绘），在元素改变样式的时候触发，这个比reflow造成的影响要小，所以能触发repaint解决的时候就不要触发reflow……

浏览器常见兼容问题

问题1：不同浏览器的标签默认的外补丁和内补丁不同.

即随便写几个标签, 在不加样式控制的情况下, 各自的margin和padding差异较大.
解决方法: CCS里: *{margin:0; padding:0}

问题2：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大

会使得ie6后面的一块被顶到下一行.
解决方案: 在float的标签样式中加入 display: inline; 将其转化为行内属性

问题3：设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度

IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度
解决方案: 给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度
原因: ie8之前的浏览器都会给标签一个最小默认的行高的高度. 即使标签是空的,这个标签的高度还是会达到默认的行高.

问题4：行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug

解决: 在display:block;后面加入display:inline;display:table;

问题5：图片默认有间距

几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。
解决: 使用float属性为img布局

问题6：标签最低高度设置min-height不兼容

因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容
如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}

问题7：透明度的兼容CSS设置

使用hacker
IE6认识的hacker是下划线_和*
IE7,遨游认识的hacker是*

问题8：IE ol的序号全为1, 不递增

解决: li设置样式{display: list-item}

6、网络协议篇

7、网络安全篇

8、性能优化篇

如何对网站的文件和资源进行优化?

1、文件合并（同上题“假若你有5个不同的 CSS 文件, 加载进页面的最好方式是？”）
减少调用其他页面、文件的数量。一般我们为了让页面生动活泼会大量使用background来加载背景图，而每个 background的图像都会产生1次HTTP请求，要改善这个状况，可以采用css的1个有用的background-position属 性来加载背景图，我们将需要频繁加载的多个图片合成为1个单独的图片，需要加载时可以采用：background:url(....) no-repeat x-offset y-offset;的形式加载即可将这部分图片加载的HTTP请求缩减为1个。
每个http请求都会产生一次从你的浏览器到服务器端网络往返过程，并且导致推迟到达服务器端和返回浏览器端的时间，我们称之为延迟。

2、文件最小化/文件压缩
即将需要传输的内容压缩后传输到客户端再解压，这样在网络上传输的 数据量就会大幅减小。通常在服务器上的Apache、Nginx可以直接开启这个设置，也可以从代码角度直接设置传输文件头，增加gzip的设置，也可以 从 负载均衡设备直接设置。不过需要留意的是，这个设置会略微增加服务器的负担。建议服务器性能不是很好的网站，要慎重考虑。
js和css文件在百度上搜一个压缩网站就能压缩，但是在实际开发的项目中，使用gulp、webpack等工具可以打包出合并压缩后的文件，小图片可以在打包时转换成base64方式引入，大图片可以被压缩，html文件也是可以被压缩的

3、使用 CDN 托管
CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。

4、缓存的使用
Ajax调用都采用缓存调用方式，一般采用附加特征参数方式实现，注意其中的<script src=”xxx.js?{VERHASH}”，{VERHASH}就是特征参数，这个参数不变化就使用缓存文件，如果发生变化则重新下载新文件或更新信息。

5、css文件放置在head，js放置在文档尾

6、在服务器端配置control-cache last-modify-date

7、在服务器配置Entity-Tag if-none-match

8、用更少的时间下载更多的文件，提高网站加载速度，提高用户体验，可以使用以下方法：
1）css sprites----将小图片合并为一张大图片，使用background-position等css属性取得图片位置
2）将资源放在多个域名下-----打开控制台，可以看到很多网站都是这么做的~
3）图片延迟加载-----很多电商网站、新闻网站，尤其是用到瀑布流展示图片的时候，很多都这么做了，这个技术已经很普遍~

9、书写代码的时候要注意优化：
1）css
将可以合并的样式合并起来，比如margin-top、margin-bottom等。
给img图片设置宽高，因为浏览器渲染元素的时候没有找到这两个参数，需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。
2）js
少改变DOM元素，少触发reflow，可以复用的代码提出来写成公共的等等……
3）img
优化图片，不失真的情况下尽量减少图片大小，使用iconfont等

前端开发的优化问题：

1、减少http请求次数：css spirit,data uri

2、JS，CSS源码压缩

3、前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

4、用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能

5、用setTimeout来避免页面失去响应

6、用hash-table来优化查找

7、当需要设置的样式很多时设置className而不是直接操作style

8、少用全局变量

9、缓存DOM节点查找的结果

10、避免使用CSS Expression

11、图片预载

12、避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢

如何控制网页在网络传输过程中的数据量

1、启用GZIP压缩

2、保持良好的编程习惯，避免重复的CSS，JavaScript代码，多余的HTML标签和属性