1.前端性能优化
a.请求数量：合并脚本和样式表，CSS Sprites;
b.请求带宽：精简压缩JavaScript文件，移出重复脚本，图片优化；
c.使用CDN，使用外部JavaScript和CSS，添加Expires头，减少DNS查找，配置ETag，使AjaX可缓存；
d. 页面结构：将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出；
e. 代码校验：避免CSS表达式，避免重定向
2.在浏览器中输入一个网址之后浏览器都做了什么？
① 浏览器查找该域名的 IP 地址
② 浏览器根据解析得到的IP地址向 web 服务器发送一个 HTTP 请求
③ 服务器收到请求并进行处理
④ 服务器返回一个响应
⑤ 浏览器对该响应进行解码，渲染显示
⑥ 页面显示完成后，浏览器发送异步请求。
3.简述盒模型
文档中的每个元素被描绘为矩形盒子。
盒子有四个边界：外边距边界margin, 边框边界border, 内边距边界padding与内容边界content。
4.浏览器本地存储
在HTML5中提供了sessionStorage和localStorage.
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁，是会话级别的存储。
localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
5.减少页面加载时间的方法
a. 尽量减少页面中重复的HTTP请求数量
b. 服务器开启gzip压缩
c. css样式的定义放置在文件头部
d. Javascript脚本放在文件末尾
e. 压缩合并Javascript、CSS代码
f. 使用多域名负载网页内的多个文件、图片
6.浏览器的内核有哪些？
IE浏览器的内核Trident，
Mozilla的Gecko，
Chrome的Blink（WebKit的分支），
Opera内核原为Presto，现为Blink；
7.前端的三层结构和作用
a. 结构层：由 HTML 或 XHTML 之类的标记语言负责创建，仅负责语义的表达。解决了页面“内容是什么”的问题。
b. 表示层：由CSS负责创建，解决了页面“如何显示内容”的问题。
c. 行为层：由脚本负责。解决了页面上“内容应该如何对事件作出反应”的问题。
8.一个页面有大量的图片，如何提高加载速度，提高用户体验。
a. 图片懒加载，滚动到相应位置才加载图片。
b. 图片预加载，如果为幻灯片、相册等，将当前展示图片的前一张和后一张优先下载。
c. 使用CSSsprite，SVGsprite，Iconfont、Base64等技术，如果图片为css图片的话。
d. 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的缩略图，以提高用户体验。
9.从前端角度做好SEO
// SEO全称：Search English Optimization，搜索引擎优化。自从有了搜索引擎，SEO便诞生了。
// 存在的意义：为了提升网页在搜索引擎自然搜索结果中的收录数量以及排序位置而做的优化行为。简言之，就是希望百度等搜索引擎能多多我们收录精心制作后的网站，并且在别人访问时网站能排在前面。
a.网站结构布局优化；
b.代码优化，如：
<title>标题：只强调重点即可，尽量把重要的关键词放在前面，关键词不要重复出现，尽量做到每个页面的<title>标题中不要设置相同的内容。
<meta keywords>标签：关键词，列举出几个页面的重要关键字即可，切记过分堆砌。
<meta description>标签：网页描述，需要高度概括网页内容，切记不能太长，过分堆砌关键词，每个页面也要有所不同。
<body>中的标签：尽量让代码语义化，在适当的位置使用适当的标签，用正确的标签做正确的事。让阅读源码者和“蜘蛛”都一目了然。比如：h1-h6 是用于标题类的，<nav>标签是用来设置页面主导航的等。
<a>标签：页内链接，要加 “title” 属性加以说明，让访客和 “蜘蛛” 知道。而外部链接，链接到其他网站的，则需要加上 el="nofollow" 属性, 告诉 “蜘蛛” 不要爬，因为一旦“蜘蛛”爬了外部链接之后，就不会再回来了。
10.<img>标签上title属性与alt属性的区别
alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。
这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户等。
title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。
11.标签语义化的理解
a. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构
b. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
c. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
d. 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
12.Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器以何种模式来渲染文档。
严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。
在混杂模式中页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
13.Doctype文档类型
标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，
Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。
14.HTML与XHTML的区别
a. XHTML 元素必须被正确地嵌套。
b. XHTML 元素必须被关闭。
c. 标签名必须用小写字母。
d. XHTML 文档必须拥有根元素。
15.html5有哪些新特性、移除了那些元素？
a. HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
b. 拖拽释放(Drag and drop) API
c. 语义化更好的内容标签（header,nav,footer,aside,article,section）
d. 音频、视频API(audio,video)
e. 画布(Canvas) API
f. 地理(Geolocation) API
g. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
h. sessionStorage 的数据在页面会话结束时会被清除
i. 表单控件，calendar、date、time、email、url、search
j. 新的技术webworker, websocket等
移除的元素：
a. 纯表现的元素：basefont，big，center, s，strike，tt，u；
b. 对可用性产生负面影响的元素：frame，frameset，noframes；
16.iframe的优缺点？
优点：
a. 解决加载缓慢的第三方内容如图标和广告等的加载问题
b. iframe无刷新文件上传
c. iframe跨域通信
缺点：
a. iframe会阻塞主页面的Onload事件
b. 无法被一些搜索引擎索引到
c. 页面会增加服务器的http请求
d. 会产生很多页面，不容易管理。
17.简述一下src与href的区别
src用于替换当前元素；href用于在当前文档和引用资源之间确立联系。
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置
href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接
18.DOM操作 - 添加、移除、移动、复制、创建和查找节点
（1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
（2）添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子节点前插入一个新的子节点
（3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
getElementById() //通过元素Id，唯一性