一、<!DOCTYPE>标签的作用是什么？
<!DOCTYPE>标签一般位于文档首行，用于向浏览器声明当前HTML的文档类型以及解析规范。
<!DOCTYPE HTML>代表当前HTML文档版本为HTML 5。
<!DOCTYPE>未声明或声明错误时，浏览器会按照兼容模式解析文档。
二、标准模式与兼容模式各有什么区别？
标准模式（严格模式）：排版以及JS运行模式都是以浏览器支持的最高标准运行。
兼容模式（怪异模式）：页面以宽松的向后兼容方式显示，模拟老浏览器的行为运行。
三、什么是语义化？
所谓语义化，就是在HTML书写过程中使用具有语义的标签。
使用语义化的好处有如下几点：
（1）HTML代码结构清晰，便于维护和阅读；
（2）有利于网站SEO优化；
（3）方便浏览器设备解析。
常用的语义化标签有：<header> <main> <nav> <article> <section> <div> <h1>~<h6>。
四、meta viewport 是做什么的？怎么写?
移动端浏览器渲染HTML通常在一个比屏幕更宽的视口（viewport）中进行，通过设置<meta name='viewport'>。
常用的设置方法为：
<meta name='viewport' content="width=device-width, initial-scale=1, maximum-scale=1">
五、link和 @import导入样式的区别是什么？
（1）@import是CSS语法，仅导入CSS样式；<link>是HTML语法，除CSS外还可加载rel、图标等等；
（2） 加载页面时<link>引入的CSS文件被同时加载；@import引入的CSS文件在页面加载完后被加载；
（3）@import在老版本浏览器中存在兼容问题；<link>作为HTML标签，不存在兼容性问题；
（4）可通过JS操作DOM，插入<link>来改变样式，而无法使用@import插入样式。
六、什么是浏览器的内核？
浏览器内核指浏览器的核心功能代码，负责网页的语法解释和页面渲染两方面工作，对应的也由两部分组成：JS引擎、渲染引擎。
常见的浏览器渲染引擎有Trident、webkit、Blink、Gecko，JS引擎有Chakra、Javascriptcore、V8、SpiderMonkey。
七、HTML5有哪些新特性？
新增了图像、位置、存储、多任务、拖拽等功能；
新增了<canvas> <video> <audio> <footer>等元素。
八、cookies、sessionStorage和localStorage的异同是什么？
cookies，sessionStorage和localStorage都是用于在浏览器端保存数据。其不同之处在于：
（1）cookie是为了标识用户身份而存储在用户本地终端上的数据，始终在同源http请求中携带，即cookies在浏览器和服务器间来回传递，而另外两个不会自动把数据发给服务器，仅在本地保；
（2）cookie保存的数据很小，不能超过4k，而sessionStorage和localStorage保存的数据大，可达到5M；
（3）cookie在设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭。sessionStorage仅在浏览器窗口关闭之前有效。localStorage始终有效，窗口和浏览器关闭也一直保存，用作长久数据保存；
（4）cookie在所有的同源窗口都可共享；sessionStorage不可在不同的浏览器间共享，即使是同一页面；localStorage在所有同源窗口都可共享；
九、iframe框架有那些优缺点？
优点：
（1）可以在页面中原封不动的嵌套另一网页，而不使布局发生错乱；
（2）引用的网页内容或结构发生变更，不会影响现网页，易于维护；
（3）可以用于呈现有加载缓慢问题的第三方内容(图片、广告等)。
缺点：
（1）iframe会额外占用电脑内存，增加服务器的请求次数，影响性能；
（2）iframe的内容过大时会额外产生滚动条，影响美观；
（3）iframe内的内容搜索引擎无法获取，不利于SEO。
十、网页优化的技术有哪些？
（1）采用字体图标替代图片图标；
（2）对于重复的图像背景，通过一像素宽度图像来铺满；
（3）合理运用雪碧图，减少图片请求次数；
（4）在确保兼容性的前提下使用语义化标签；
（5）选择正确且最优的图片格式；
（6）对html/css/js代码进行压缩。
十一、从输入URL到页面展现的流程？
（1）DNS解析器转换域名；
（2）浏览器向服务器发送请求，服务器接收浏览器请求；（期间会经历四次挥手）；
（3）服务器向浏览器返回资源。加载完毕后断开连接（期间会经历三次握手）；
（4）浏览器拿到页面资源，将HTML文件解析的同时会构建DOM树和CSSOM树；
（5）如遇JS文件，则优先加载JS。完毕后继续解析；
（6）解析完成后，合并为RenderTree再进行渲染；
（7）如遇颜色、背景等变化则重绘，如遇大小、位置等变化则回流。回流开销大于重绘。
前端面试指南系列传送门：
