第一部分：HTML和HTML5
1、HTML与HTML5，声明模式有什么不同，为什么不同？
<!DOCTYPE> 声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。
<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前，<!DOCTYPE>声明告知浏览器的解析器用什么文档标准解析这个文档（标准模式）。若声明错误或未声明会导致文档以兼容模式/混杂模式呈现。
<!DOCTYPE> 标签没有结束标签。<!DOCTYPE> 声明不区分大小写。总是先给 HTML 文档添加 <!DOCTYPE> 声明，确保浏览器能够预先知道文档类型.
在html4.01中,<!DOCTYPE>声明需要引用DTD（文档类型声明），因为它是基于SGML（Standard Generalized Markup Language 标准通用标记语言），DTD 指定了标记语言的规则，确保了浏览器能够正确的渲染内容。
HTML5不基于SGML因此不需要引用DTD。
HTML5只有一种声明方式： <!DOCTYPE html>
HTML 4.01 规定了三种不同的 <!DOCTYPE> 声明，分别是：Strict、Transitional 和 Frameset
Strict模式，不允许使用表现性、废弃元素（如font）以及框架集（如frameset）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Transitional 模式 ，允许使用表现性、废弃元素（如font），不允许使用框架集（如frameset）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Frameset 模式，允许表现性元素，废弃元素以及框架集
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
2、HTML的组成部分，每个部分的结构和作用
一个标准完整的HTML主要由声明、html标签，head标签,body标签等组成
head中可以包括 meta 、link、title、base、style、script等标签
body定义文档的主题，大部分实体元素在body中
其中meta标签：可提供有关页面的元信息（meta-information）,meta 有一个必选属性content 和三个可选属性 http-equiv ,name, scheme
link标签：用于引入CSS样式表文件，只能出现在head中
title标签：定义文档的标题，可显示在浏览器页签中
base标签： 为页面上的所有链接规定默认地址或默认目标。通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。使用 <base> 标签可以改变这一点。浏览器随后将不再使用 当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。
style标签：标签用于为 HTML 文档定义样式信息。在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。type 属性是必需的，唯一可能的值是 "text/css"。
script标签：标签用于定义客户端脚本，比如 JavaScript。script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。
3、HTML中的块级元素、行内元素、行内块元素各有哪些，其语义表达的是什么?
元素按照功能可以分为基础元素、格式元素、表单元素、框架元素、图像元素、多媒体元素、链接元素、列表元素、表格元素、样式语义元素、脚本元素、元信息元素等
（1）常用块级元素div、h1-h6、p、table、ul、ol、dl、li、dt、dd、header、footer、article、aside、section
(2) 常用行内元素span、大部分的格式元素b、strong、i、del、em、pre、sub、sup、u等，image、a、input、button、select、textarea、label
空元素：即没有内容的HTML元素，例如：br、meta、hr、link、input、img
4、HTML5中新增了哪些元素？废除了哪些元素？，
（1）HTML5中引入了新的canvas元素，新的多媒体元素audio、video、source、embed、track等，新的表单元素datelist、keygen、output，新的语义化元素article、aside、details、command、header、footer、nav、section等
（2） 废除了旧版中一些用于格式的元素，applet、basefont、font、center、big、dir、frame等
5、HTML5中的WebStorage技术（localStorage 和 sessionStorage）
WebStorage是HTML新增的本地存储解决方案之一，但并不是为了取代cookie而制定的标准，
cookie作为HTTP协议的一部分用来处理客户端和服务器通信是不可或缺的，session正是依赖于实现的客户端状态保持。
WebStorage的意图在于解决本来不应该cookie做，却不得不用cookie的本地存储。
HTML5 提供了两种在客户端存储数据的新方法：localStorage,sessionStorage,
localStorage在本地永久性存储数据，除非显式将其删除或清空，
sessionStorage存储的数据只在会话期间有效，关闭浏览器则自动删除。两个对象都有共同的API
length、key、getItem、setItem、removeItem、clear
同时HTML5规定了一个storage事件，在WebStorage发生变化的时候触发，可以用此监视不同页面对storage的修改(不同标签页之间的数据传递)
localStorage对象临时储存API 方法： 1、localStorage.setItem(key,value)---设置存储内容 2、localStorage.getItem(key)---获取存储内容 3、localStorage.removeItem(key)---删除存储内容
4、localStorage.clear()---一次性清空所有的key
5、localStorage.length——获取存储内容的个数 6、localStorage.key或localStorage[key]——获取存储内容 ---localStorage ：没有存储时间 容量2-5Mb左右，存储字符串。 ---sessionStorage： 1）网页会话结束时失效（刷新没问题，网页关闭就没了）储存容量不一。许多浏览器没有限制 相同url不同页面不能共享sessionStorage数据（只能在自己的标签页）； 2）存储容量超出限制，抛出QutotaExceededError异常，存储值时应使用try catch避免异常未捕获； 3）只能存储字符串，注意类型转换
6、HTML5中的Websocket
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。
在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
详细参考：
HTML5中的webSocket、ajax、http - 一粒一世界 - 博客园；
第二部分：CSS
1、CSS 中的选择器都有哪些？优先级情况如何？
（1）类选择器 .className
(2) ID 选择器 #id
(3) 元素选择器 div 可以多个，以逗号隔开
（4）父子选择器 以空格隔开 div p ，表示所有 div 下的 p 元素
（5）父子组合选择器 div>p , 表示所有父级元素是 div 的 p 元素
（6）相邻选择器 div+p , 表示所有紧接着 div 之后的 p 元素
（7）属性选择器 [target] , 表示所有带有 target 属性的元素
（8）属性筛选选择器 [arrt=] [arrt-= ] [arrt|=] , 分别表示某项属性等于 ，某项属性包含，某项属性以某字符开头的元素
（9）伪类选择器 :link , :visited, :hover, :active, :first-child, 等等
选择器优先级： 行内样式 > id > class > element > * 通配符
2、CSS 常用的伪类和伪元素
（1）常用的伪类有：
：hover - 表示鼠标经过改变颜色；
：nth-child(even)- 表示父元素的第偶数个子元素， 常用来生成斑马纹效果
：nth-child(odd)- 表示父元素的第奇数个子元素，常用来生成斑马纹效果
：disabled - 表示选择所有禁用的表单元素
：checked - 表示所有选中的表单元素
（2）常用的伪元素
：after 向指定的元素后增加内容
：before 向指定的元素前增加内容
：first-letter 表示要选中的文本的第一个字母的样式
：first-line 表示要选中的文本的第一行文字的样式
伪类和伪元素的区别？
在 css2 中是这样定义二者的：
CSS 伪类用于向某些选择器添加特殊的效果。
CSS 伪元素用于将特殊的效果添加到某些选择器。
伪类存在的意义是为了通过选择器找到那些不存在 DOM 树中的信息以及不能被常规 CSS 选择器获取到的信息。
第一点讲的是获取不存在与 DOM 树中的信息。比如<a>标签的: link、visited 等，这些信息不存在与 DOM 树结构中，只能通过 CSS 选择器来获取；
第二点讲的是获取不能被常规 CSS 选择器获取的信息。比如伪类: target，它的作用是匹配文档 (页面) 的 URI 中某个标志符的目标元素。
因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。
伪元素包括: first-letter, :first-line, :before ,:after 等，所有的伪元素都要写在伪元素选择器的最后面。
3、CSS 中的定位属性分为几种？
（1）static : 默认定位， 无定位
（2）relative: 相对定位，相对于自身位置进行偏移
（3）absolute: 绝对行为， 相对于最近的非 static 定位祖先元素的偏移, 绝对定位的元素可以设置外边距（margin），且不会与其他边距合并
(4) fixed ： 固定定位，相对于屏幕视口（viewport）的位置
（5）sticky: 粘性定位，盒位置根据正常流计算 (这称为正常流动中的位置)，
然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。
在所有情况下（即便被定位元素为 table 时），该元素定位均不对后续元素造成影响。
当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。
position: sticky 对 table 元素的效果与 position: relative 相同。
4、CSS 中的盒模型，分为哪几种？
（1）盒模型的概念：
盒模型的组成由里向外 content,padding,border,margin.
标准盒模型：盒模型的宽高只是内从 content 的宽高
IE 盒模型： IE 模型中盒模型的宽高是内容 (content)+ 填充(padding)+ 边框(border) 的总宽高。
（2）CSS3 的属性 box-sizing
可以设置盒模型为 content-box 或 border-box
5、CSS 中的 float 属性的理解，如何清除浮动，如何解决浮动元素撑不开高度的问题?
CSS 中的 float 属性
浮动可以理解为让某个 div 元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次
（1）浮动的本质是用来文字环绕的，像分栏布局和列表排列都可用其它属性实现。
（2）浮动是一个带有方位的 display：inline-block；所以设置浮动，就会有默认的 display：inline-block；这个属性。
不需要再写 display 了；设置 display：inline-block 带来的各种效果，比如高宽自适应而不是继承父元素宽。
可以设置高和宽。他的前后不会像块级元素默认换行（但是它没有高度）。
（3）浮动会破坏 inline-box，产生两个结果。
①（无 inlinebox-> 无 line-box-> 无高度）。
②图片与文字无法同行显示。这两个结果恰恰是文字环绕的所必需的
float 和 position 的相互影响
如果在 float 上设置 position：absolute 的话，会覆盖 float 的属性。就不是浮动了。
在 float 上设置 position：relative 的话，如果设置 left/top/right/bottom 等属性，则元素会先浮动到相应位置，
然后再根据 top/left/bottom/right 所设置的距离发生偏移，在 float 上设置 margin 属性也是有效的。
清除浮动的方法：设置 clear:both，clear:left,clear:right 属性，
解决浮动元素撑不开父元素高度的问题：
1、使用空的块级元素撑开高度
2、对父元素使用：after 伪元素
3、对父元素添加 over-flow:hidden 属性
其一，通过在浮动元素的末尾添加一个空元素，设置 clear：both 属性，after 伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素；
其二，通过设置父元素 overflow 或者 display：table 属性来闭合浮动。
6、CSS 中外边距重合问题的描述，如何解决，CSS 中 bfc 的理解 block fomatting context?
（1）在一个 Web 页面的 CSS 渲染中，块级格式化上下文 (Block Fromatting Context) 是按照块级盒子布局的。W3C 对 BFC 的定义如下：
浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及 overflow 值不为 “visiable” 的块级盒子，都会为他们的内容创建新的 BFC（块级格式上下文）。
（2）创建 BFC 的条件
1、float 的值不是 none。
2、position 的值不是 static 或者 relative。
3、display 的值是 inline-block、table-cell、flex、table-caption 或者 inline-flex
4、overflow 的值不是 visible
BFC 是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个 BFC 中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
作用： 利用 BFC 避免外边距折叠，解决容器高度不会被浮动元素撑开的问题，避免文字环绕，可以避免多列布局中的样式问题。
详细：
一、何为 BFC
BFC（Block Formatting Context）格式化上下文，是 Web 页面中盒模型布局的 CSS 渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。二、形成 BFC 的条件
1、浮动元素，float 除 none 以外的值；
2、定位元素，position（absolute，fixed）；
3、display 为以下其中之一的值 inline-block，table-cell，table-caption；
4、overflow 除了 visible 以外的值（hidden，auto，scroll）；三、BFC 的特性
1. 内部的 Box 会在垂直方向上一个接一个的放置。
2. 垂直方向上的距离由 margin 决定
3.bfc 的区域不会与 float 的元素区域重叠。
4. 计算 bfc 的高度时，浮动元素也参与计算
5.bfc 就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。7、CSS3 中新增的常用属性？
（1）边框圆角 border-radius， 边框图片
(2) 文字阴影，盒阴影，文字溢出省略
（3）背景图片（多个），背景尺寸剪切，颜色渐变
（4）2D 与 3D 转换， transform ,translate, rotate, scale，skew, rotateX, roteteY
(5) 过渡 transition , 动画 animation
(6) 多列布局，弹性盒模型 flex
（7）多媒体查询
详细：
1.CSS3 边框：
2.CSS3 背景：
3.CSS3 文字效果：
4.CSS3 2D 转换：
transform：通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。
matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
5.CSS3 3D 转换：
6.CSS3 过渡：当元素从一种样式变换为另一种样式时为元素添加效果。
7.CSS3 动画：通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
8.CSS3 多列：
9.CSS3 用户界面：
8、CSS 响应式设计的方法
（1）设置 Viewport，
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
（2）设置多媒体查询，CSS3 @media 查询，@media 可以针对不同的屏幕尺寸设置不同的样式
（3）使用 CSS 栅格视图，参考：快速使用 CSS Grid 布局，实现响应式设计；
（4）设置响应式的图片和视频，参考：干货!如何在响应式网页中安置和处理图片及视频；
（5）使用响应式设计的样式框架，参考：14 个支持响应式设计的前端框架。
9、如何在网页中添加一个三角形或指定的其他图形？解决思路有几种？
（1）利用高度为 0 的块及元素的边框设置, css 设置，参考：使用css3在网页中实现各种三角形样式集合（原理解析）；
（2）利用 HTML 转义字符串设置
(3) 利用: after 伪元素设置
（4）利用字体图标或背景图片设置
第三部分：其他
1.谈你对前端性能优化的理解
a. 请求数量：合并脚本和样式表，CSS Sprites，拆分初始化负载(懒加载)，划分主域
b. 请求带宽：开启GZip，精简JavaScript，移除重复脚本，图像优化，将icon做成字体
c. 缓存利用：使用CDN，使用外部JavaScript和CSS，添加Expires头，减少DNS查找，配置ETag，使AjaX可缓存
d. 页面结构：将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出
e. 代码校验：避免CSS表达式，避免重定向
参考：前端性能优化汇总;
2.简述盒模型
IE6盒子模型与W3C盒子模型。
文档中的每个元素被描绘为矩形盒子。盒子有四个边界：外边距边界margin, 边框边界border, 内边距边界padding与内容边界content。
CSS3中有个box-sizing属性可以控制盒子的计算方式，
content-box：padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和。（W3C盒子模型）
border-box：padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值。（IE6盒子模型）
3请你谈谈Cookie的弊端
a. 每个特定的域名下最多生成的cookie个数有限制
b. IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie
c. cookie的最大大小约为4096字节（4k），为了兼容性，一般不能超过4095字节
d. 安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。
4.浏览器本地存储
在HTML5中提供了sessionStorage和localStorage.
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁，是会话级别的存储。
localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
5.web storage和cookie的区别
a. Cookie的大小是受限的
b. 每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽
c. cookie还需要指定作用域，不可以跨域调用
d. Web Storage拥有setItem,getItem等方法，cookie需要前端开发者自己封装setCookie，getCookie
e. Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生
f. IE7、IE6中的UserData通过简单的代码封装可以统一到所有的浏览器都支持web storage
6.线程与进程的区别
a. 一个程序至少有一个进程，一个进程至少有一个线程
b. 线程的划分尺度小于进程，使得多线程程序的并发性高
c. 进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率
d. 每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制
e. 多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配
7.请说出三种减少页面加载时间的方法
a. 尽量减少页面中重复的HTTP请求数量
b. 服务器开启gzip压缩
c. css样式的定义放置在文件头部
d. Javascript脚本放在文件末尾
e. 压缩合并Javascript、CSS代码
f. 使用多域名负载网页内的多个文件、图片
8.什么叫优雅降级和渐进增强？
定义：
渐进增强 progressive enhancement：
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：
a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给
b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要
c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带
观点
渐进增强观点认为应该关注于内容本身，更适合在产品一开始还没有大用户量的时候就去做这件事。
优雅降级观点认为应该针对那些最高级、最完善的浏览器来设计网站。那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如IE、Mozilla等）的前一个版本。在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨（poor,but passable)”的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。
抉择
Web端产品研发之前，就要确定产品的目标用户，进行用户调研，了解使用低配版浏览器的用户占总用户的百分之几，用户的使用习惯等。开发的时候还要考虑成本问题。
使用渐进增强的方式进行开发，先做一个基本功能版，兼容大部分低配版浏览器，然后进行迭代，即针对各个浏览器进行渐进增加，增加各种功能。在迭代过程中，可以建议用户升级浏览器，以便获得更好的体验。当用户认可你的产品，升级浏览器的意愿就会比较高，对于不愿意升级浏览器的用户，也是有基本功能可以使用的，这样既兼顾了内核用户的使用习惯，又可以使产品不断优化迭代。
使用优雅降级的方式进行开发，如果不这么做，从一开始就不断去迁就，对后面的版本迭代会造成更高的维护成本和升级成本，并且，用户会一直工作在这种两边互相兼容的系统环境下，出错率更高。结合实际，IE8.0 是一个偏旧的内核版本，从理性上考虑，软件的发展势必淘汰掉一些现有的旧东西，所以长痛不如短痛，及时止损降低研发成本和增强后续的开发兼容性才是更好的选择，所以让用户升级浏览器来兼容产品也符合优雅降级的一部分理念。
9.请解释一下 JavaScript 的同源策略
同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议。
指一段脚本只能读取来自同一来源的窗口和文档的属性。
10.浏览器的内核分别是什么?
IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera内核原为Presto，现为Blink；
详细：
五大主流浏览器及四大内核
现在国内常见的浏览器有：IE、Firefox、Safari、Opera、Google Chome、QQ 浏览器、搜狗浏览器、百度浏览器、猎豹浏览器、UC 浏览器、360 浏览器、遨游浏览器、世界之窗浏览器等等。但目前最为主流浏览器有五大款，分别是 IE、Firefox、Google Chrome、Safari、Opera。
浏览器最重要的部分是浏览器的内核。浏览器内核是浏览器的核心，也称 “渲染引擎”，用来解释网页语法并渲染到网页上。浏览器内核决定了浏览器该如何显示网页内容以及页面的格式信息。不同的浏览器内核对网页的语法解释也不同，因此网页开发者需要在不同内核的浏览器中测试网页的渲染效果。
四大内核：
1、Trident 内核，也称 IE 内核。
2、Webkit 内核。
3、Gecko 内核。
4、Presto 内核。
各浏览器所用内核：
1、IE 浏览器内核：Trident 内核，也是俗称的 IE 内核；
2、Chrome 浏览器内核：统称为 Chromium 内核或 Chrome 内核，以前是 Webkit 内核，现在是 Blink 内核；
3、Firefox 浏览器内核：Gecko 内核，俗称 Firefox 内核；
4、Safari 浏览器内核：Webkit 内核；
5、Opera 浏览器内核：最初是自己的 Presto 内核，后来是 Webkit，现在是 Blink 内核；
6、360 浏览器、猎豹浏览器内核：IE+Chrome 双内核；
7、搜狗、遨游、QQ 浏览器内核：Trident（兼容模式）+Webkit（高速模式）；
8、百度浏览器、世界之窗内核：IE 内核；
9、2345 浏览器内核：以前是 IE 内核，现在也是 IE+Chrome 双内核；
11.一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。
a. 图片懒加载，滚动到相应位置才加载图片。
b. 图片预加载，如果为幻灯片、相册等，将当前展示图片的前一张和后一张优先下载。
c. 使用CSSsprite，SVGsprite，Iconfont、Base64等技术，如果图片为css图片的话。
d. 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
12.iframe的优缺点？
优点：
a. 解决加载缓慢的第三方内容如图标和广告等的加载问题
b. iframe无刷新文件上传
c. iframe跨域通信
缺点：
a. iframe会阻塞主页面的Onload事件
b. 无法被一些搜索引擎索引到，不利于SEO
c. 页面会增加服务器的http请求
d. 会产生很多页面，不容易管理。
13.请阐述table的缺点
a. 太深的嵌套，比如table>tr>td>h3，会导致搜索引擎读取困难，而且，最直接的损失就是大大增加了冗余代码量。
b. 灵活性差，比如要将tr设置border等属性，是不行的，得通过td
c. 代码臃肿，当在table中套用table的时候，阅读代码会显得异常混乱
d. 混乱的colspan与rowspan，用来布局时，频繁使用他们会造成整个文档顺序混乱。
e. table需要多次计算才能确定好其在渲染树中节点的属性，通常要花3倍于同等元素的时间。
f. 不够语义
14.简述一下src与href的区别
src用于替换当前元素；href用于在当前文档和引用资源之间确立联系。
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置
href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接
1.src 是指向物件的来源地址，是引入。在 img、script、iframe 等元素上使用。
2.href 是超文本引用，指向需要连结的地方，是与该页面有关联的，是引用。在 link 和 a 等元素上使用。
1.href (Hypertext Reference) 网络资源的位置，浏览器识别当前资源是一个样式表，页面解析不会暂停（由于浏览器需要样式规则去画或者渲染页面，渲染过程可能会被被暂停）。这与把 css 文件内容写在 <style> 标签里不相同，因此建议使用 link 标签而不是 @import 来把样式表导入到 html 文档里。
2，src (Source) 属性仅仅 嵌入当前资源到当前文档元素定义的位置，在浏览器下载，编译，执行这个文件之前页面的加载和处理会被暂停。这个过程与把 js 文件放到 <script> 标签里类似。这也是建议把 JS 文件放到底部加载的原因。当然，img 标签页与此类似。浏览器暂停加载直到提取和加载图像。
15.简述同步和异步的区别
同步是阻塞模式，异步是非阻塞模式。
同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去;
异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。
16.position包含几种属性?absolute和relative的区别?
static：默认状态、没有定位、正常流
inherit：从父元素继承position属性的值
fixed：生成绝对定位的元素(相对于浏览器窗口进行定位)
absolute：生成绝对定位的元素(相位与static定位以外的第一个父元素定位)
relative：生成相对定位的元素(相对于其正常位置定位)
absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
relative：生成相对定位的元素，相对于其正常位置进行定位。
两者最核心的区别在于：absolute 不受父元素里的其他元素影响，而 relative 会受到父元素里的其他元素影响。
relative 相对定位：
把其父元素看作一个盒子的话，它默认会被放在盒子的左上角，相当于块级元素，默认情况宽度为父元素宽度。它的父元素是指设置 position 属性辈分最低的长辈元素。如果没有设置 position 的元素，它便相对 body 元素放置。
absolute 绝对定位：
绝对定位的元素的父元素和相对定位的一样，但绝对定位的元素相当于行级元素，宽度根据内容定，注意有一点小区别，可以设置宽高，相当于 inline-block。
absolute 可以设置 left，right，top,bottom, 并且可以同时设置，宽高会自动计算出来。
17.JSONP是什么?它是如何实现跨域的?为什么它可以实现跨域?
JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问。
由于同源策略的限制，XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源，为了实现跨域请求，可以通过script标签实现跨域请求(因为同源策略不阻止动态脚本插入，并且将脚本看作是从提供 Web 页面的域上加载的)，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。
18.什么是闭包？作用是什么？
闭包：函数能被外部调用到，则该作用域上的所有变量都会被保存下来。
作用：①可以读取函数内部的变量;②相当于划出了一块私有作用域，避免数据污染;③让变量始终保存在内存中。
使用全局变量被认为是不好的习惯，而且容易造成错误并且维护成本较高，所以js可以采用闭包的方式读取函数的内部变量。但是如果大量使用闭包就会造成过多的变量始终保存在内存中，会造成内存泄漏。
一个简单的闭包例子：
function f1(){
var n=999;
function f2(){
alert(n);
}
return f2;
}
var result=f1();
result(); // 999
19.谈谈你对预加载的理解？
Web预加载指的是在网页全加载完成之前，在页面优先显示一些主要内容，以提高用户体验。对于一个较庞大的网站，如果没有使用预加载技术，用户界面就会长时间显示一片空白，直到资源加载完成，页面才会显示内容。
例如，可以通过js预先从服务器加载图片资源(动态创建Image，设置src属性)，只要浏览器把图片下载到本地，就会被缓存，再次请求相当的src时就会优先寻找浏览器缓存，提高访问速度。（幻灯片）
参考：
详细：
一、 预加载，增强用户的体验，但会加载服务器的负担。一般会使用多种
1、什么是预加载
提前加载图片，当用户需要查看时可直接从本地缓存中渲染
2、实现预加载的方法
a、单纯的 css 实现
可通过 CSS 的 background 属性将图片预加载到屏幕外的背景上。只要这些图片的路径保持不变，当它们在 Web 页面的其他地方被调用时，浏览器就会在渲染过程中使用预加载（缓存）的图片。简单、高效，不需要任何 JavaScript。
#preload-01 { background: url(https://domain.tld/image-01.png) no-repeat -9999px -9999px; }
b、单纯的 js 预加载图片
<div>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
var images = new Array()
function preload() {
for (i = 0; i < preload.arguments.length; i++) {
images[i] = new Image()
images[i].src = preload.arguments[i]
}
}
preload(
"http://domain.tld/gallery/image-001.jpg",
"http://domain.tld/gallery/image-002.jpg",
"http://domain.tld/gallery/image-003.jpg"
)
//--><!]]>
</script>
</div>
c、使用 ajax 实现预加载
window.onload = function() {
setTimeout(function() {
// XHR to request a JS and a CSS
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://domain.tld/preload.js');
xhr.send('');
xhr = new XMLHttpRequest();
xhr.open('GET', 'http://domain.tld/preload.css');
xhr.send('');
// preload image
new Image().src = "http://domain.tld/preload.png";
}, 1000);
};
参考网址：http://web.jobbole.com/86785/
二、延迟加载（懒加载）
1、什么是懒加载
懒加载又称延迟加载。
当访问一个页面时，先把 img 元素或者其他元素的背景图片替换成一张大小 1*1px 图片的路径（只需要请求一次的占位图），只有当图片出现在浏览器的可视区域内时，才设置图片真正的路径，让图片显示出来，这就是图片的懒加载。
2、懒加载的实现原理
页面中 img 元素，如果没有 src 属性，浏览器就不会发出请求去下载图片，只有通过 js 设置图片路径，浏览器才会发送请求；
懒加载的原理是先在页面中把所有的图片统一使用一张占位图进行占位，把真正的路径存在元素的‘data-url’属性中，要使用的时候，在设置。
3、懒加载的实现步骤
1)首先，不要将图片地址放到 src 属性中，而是放到其它属性 (data-original) 中。
2) 页面加载完成后，根据 scrollTop 判断图片是否在用户的视野内，如果在，则将 data-original 属性中的值取出存放到 src 属性中。
3) 在滚动事件中重复判断图片是否进入视野，如果进入，则将 data-original 属性中的值取出存放到 src 属性中。
4、懒加载的优点
页面加载速度快、可以减轻服务器的压力、节约了流量, 用户体验好
三、懒加载与预加载的对比
1、概念
懒加载也叫延迟加载：js 图片延迟加载，延迟加载图片或者符合某些条件是才加载某些图片；
预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。（base64 小图片可以通过 css 保存）
2、区别
两种技术的本质：两者的行为相反，一个是提前加载，一个是迟缓甚至不加载。懒加载会对前端有一定的缓解压力作用，预加载则会增加前端的压力。
3、懒加载的意义及实现方式：
懒加载的主要目的是优化前端性能，减少请求数或延迟请求数。
方法：
a、延时加载，使用 setTimeOut （计时器）或者 setInterval (定时器)进行加载延迟；
b、条件加载，符合某些条件，或者触发了某些事件才开始异步下载；
c、可视区加载，即仅加载可以看到的区域，监控滚动条实现。
4、预加载的意义及实现方式
预加载是牺牲前端性能，换取用户体验，使用户的操作得到最快的反映。
方法：
比如：用 CSS 和 JavaScript 实现预加载；仅使用 JavaScript 实现预加载；使用 Ajax 实现预加载。
常用的是 new Image(); 设置其 src 来实现预载，再使用 onload() 方法回调预加载完成事件。只要浏览器把图片下载到本地，src 就会使用缓存，这是最基本的预加载方法。当 image 下载完图片后，会得到宽和高，因此可以在预加载前得到图片的大小 (方法是用记时器轮循宽高变化)。
function loadImage(url,callback) {
var img = new Image();
img.src = url;
if(img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
callback.call(img);
return; // 直接返回，不用再处理onload事件
}
img.onload = function(){
img.onload = null;
callback.call(img);
}
}
20.图片如何压缩？
可以使用一些在线的图片压缩工具
优先用 png 而不是 gif
压缩 png
去掉 jpg 的 metadata
压缩 gif 动画
尝试使用 png8
避免使用 AlphaImageLoader
压缩动态生成的图像
使 favicon 更小 可缓存
使用 CSS Sprites
使用SVG
21.压缩文件有哪些方法？
使用Grunt、Sass、ant压缩
22.什么情况下会碰到跨域问题？有哪些解决方法？
跨域问题是这是浏览器为了安全实施的同源策略导致的，同源策略限制了来自不同源的document、脚本，同源的意思就是两个URL的域名、协议、端口要完全相同。
script标签jsonp跨域、nginx反向代理、node.js中间件代理跨域、后端在头部信息设置安全域名、后端在服务器上设置cors。
23.ES5的继承和ES6的继承有什么区别？
ES5的继承时通过prototype或构造函数机制来实现。ES5的继承实质上是先创建子类的实例对象，然后再将父类的方法添加到this上（Parent.apply(this)）。
ES6的继承机制完全不同，实质上是先创建父类的实例对象this（所以必须先调用父类的super()方法），然后再用子类的构造函数修改this。
具体的：ES6通过class关键字定义类，里面有构造方法，类之间通过extends关键字实现继承。子类必须在constructor方法中调用super方法，否则新建实例报错。因为子类没有自己的this对象，而是继承了父类的this对象，然后对其进行加工。如果不调用super方法，子类得不到this对象。
ps：super关键字指代父类的实例，即父类的this对象。在子类构造函数中，调用super后，才可使用this关键字，否则报错。
24.HTTP状态码知道哪些？
100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求，但尚未处理
301 Moved Permanently 请求的网页已永久移动到新位置。
302 Found 临时性重定向。
303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。
304 Not Modified 自从上次请求后，请求的网页未修改过（HTTP 缓存）。
400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
401 Unauthorized 请求未授权。
403 Forbidden 禁止访问。
404 Not Found 找不到如何与 URI 相匹配的资源。
500 Internal Server Error 最常见的服务器端错误。
503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。
25.HTTP 缓存和 304 状态码？
304 的标准解释是：客户端有缓冲的文档并发出了一个条件性的请求。服务器告诉客户端，原来缓冲的文档还可以继续使用。
完成这个几个动作包括服务器确认返回 304 给予客户端，主要包含几个 http 头信息，请求头 If-None-Match、响应头 ETag 和响应头 Cache-Control。
使用 express 启动一个服务：
var express = require('express');
var app = express();
app.get('/', function(req, res) {
res.send('hello world');
});
app.listen('8080')
启动之后，浏览器访问 localhost:8080 并观察请求，响应头。
第一次请求：
第二次请求：
第二次请求服务器返回了一个 304。
在第一次请求服务器的时候在获取资源之后是会先把该资源缓存在本地的，同时服务器 response 返回了一个响应头 ETag，ETag 全称 Entity Tag，用来标识一个资源。在具体的实现中，ETag 可以是资源的 hash 值，也可以是一个内部维护的版本号。但不管怎样，ETag 应该能反映出资源内容的变化，这是 Http 缓存可以正常工作的基础。服务器对于 hello world 这个字符串使用上述返回的 ETag 来表示，只要 hello world 这个资源不变，这个 Etag 就不会变。
客户端第二次请求服务器的时候，利用请求头 If-None-Match 来告诉服务器自己已经有个 ETag 为 xxx 的资源。如果服务器上的资源没有变化，也就是说服务器上的资源的 ETag 也是 xxx 的话，服务器就不会再返回该资源的内容，而是返回一个 304 的响应，告诉浏览器该资源没有变化，缓存有效，浏览器将直接调用本地缓存。
响应头 Cache-Control
每个资源都可以通过 Http 头 Cache-Control 来定义自己的缓存策略，Cache-Control 控制谁在什么条件下可以缓存响应以及可以缓存多久。 最快的请求是不必与服务器进行通信的请求：通过响应的本地副本，我们可以避免所有的网络延迟以及数据传输的数据成本。为此，HTTP 规范允许服务器返回一系列不同的 Cache-Control 指令，控制浏览器或者其他中继缓存如何缓存某个响应以及缓存多长时间。
Cache-Control 头在 HTTP/1.1 规范中定义，取代了之前用来定义响应缓存策略的头 (例如 Expires)。当前的所有浏览器都支持 Cache-Control，因此，使用它就够了。
以下我来介绍可以再 Cache-Control 中设置的常用指令。
max-age
该指令指定从当前请求开始，允许获取的响应被重用的最长时间 (单位为秒。例如：Cache-Control:max-age=60 表示响应可以再缓存和重用 60 秒。需要注意的是，在 max-age 指定的时间之内，浏览器不会向服务器发送任何请求，包括验证缓存是否有效的请求，也就是说，如果在这段时间之内，服务器上的资源发生了变化，那么浏览器将不能得到通知，而使用老版本的资源。所以在设置缓存时间的长度时，需要慎重。
public 和 private
如果设置了 public，表示该响应可以在浏览器或者任何中继的 Web 代理中缓存，public 是默认值，即 Cache-Control:max-age=60 等同于 Cache-Control:public, max-age=60。
在服务器设置了 private 比如 Cache-Control:private, max-age=60 的情况下，表示只有用户的浏览器可以缓存 private 响应，不允许任何中继 Web 代理对其进行缓存 - 例如，用户浏览器可以缓存包含用户私人信息的 HTML 网页，但是 CDN 不能缓存。
no-cache
如果服务器在响应中设置了 no-cache 即 Cache-Control:no-cache，那么浏览器在使用缓存的资源之前，必须先与服务器确认返回的响应是否被更改，如果资源未被更改，可以避免下载。这个验证之前的响应是否被修改，就是通过上面介绍的请求头 If-None-match 和响应头 ETag 来实现的。
需要注意的是，no-cache 这个名字有一点误导。设置了 no-cache 之后，并不是说浏览器就不再缓存数据，只是浏览器在使用缓存数据时，需要先确认一下数据是否还跟服务器保持一致。如果设置了 no-cache，而 ETag 的实现没有反应出资源的变化，那就会导致浏览器的缓存数据一直得不到更新的情况。
no-store
如果服务器在响应中设置了 no-store 即 Cache-Control:no-store，那么浏览器和任何中继的 Web 代理，都不会存储这次相应的数据。当下次请求该资源时，浏览器只能重新请求服务器，重新从服务器读取资源。
