各类前端面试题大汇总 时间：2016-12-23     来源：前端小赢家

今天权威的web前端培训机构华清远见为大家汇总各类web前端面试中经常遇到的问题。

1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?

• IE: trident内核

• Firefox：gecko内核

• Safari:webkit内核

• Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核

• Chrome:Blink(基于webkit，Google与Opera Software共同开发)

2.每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗?

答案： 声明位于文档中的前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

(重点：告诉浏览器按照何种规范解析页面)

3.div+css的布局较table布局有什么优点?

•改版的时候更方便 只要改css文件。

•页面加载速度更快、结构化清晰、页面显示简洁。

•表现与结构相分离。

•易于优化(seo)搜索引擎更友好，排名更容易靠前。

4.a：img的alt与title有何异同?b：strong与em的异同?

答案：a:alt(alt text):为不能显示图像、窗体或applets的用户代理(UA)，alt属性用来指定替换文字。替换文字的语言由lang属性指定。(在IE浏览器下会在没有title时把alt当成 tool tip，title(tool tip):该属性为设置该属性的元素提供建议性的信息。

b:strong:粗体强调标签，强调，表示内容的重要性；em:斜体强调标签，更强烈强调，表示内容的强调点

5.为什么利用多个域名来存储网站资源会更有效?

•CDN缓存更方便

•突破浏览器并发限制

•节约cookie带宽

•节约主域名的连接数，优化页面响应速度

•防止不必要的安全问题

6.请谈一下你对网页标准和标准制定机构重要性的理解。

(无标准答案)网页标准和标准制定机构都是为了能让web发展的更‘健康’，开发者遵循统一的标准，降低开发难度，开发成本，SEO也会更好做，也不会因为滥用代码导致各种BUG、安全问题，终提高网站易用性。

7.知道什么是微格式吗?谈谈理解。在前端构建中应该考虑微格式吗?

答案：微格式(Microformats)是一种让机器可读的语义化XHTML词汇的集合，是结构化数据的开放标准。是为特殊应用而制定的特殊格式。

优点：将智能数据添加到网页上，让网站内容在搜索引擎结果界面可以显示额外的提示。(应用范例：豆瓣，有兴趣自行google)

8.在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理?

答案：dns缓存，cdn缓存，浏览器缓存，服务器缓存。

Css篇：

1.有哪项方式可以对一个DOM设置它的CSS样式?

•外部样式表，引入一个外部css文件

•内部样式表，将css代码放在 标签内部

•内联样式，将css样式直接定义在 HTML 元素内部

2.CSS都有哪些选择器?

•派生选择器(用HTML标签申明)

•id选择器(用DOM的ID申明)

•类选择器(用一个样式类名申明)

•属性选择器(用DOM的属性申明，属于CSS2，IE6不支持，不常用，不知道就算了)

除了前3种基本选择器，还有一些扩展选择器，包括

•后代选择器(利用空格间隔，比如div .a{ })

•群组选择器(利用逗号间隔，比如p,div,#a{ })

3.CSS选择器的优先级是怎么样定义的?

基本原则：

一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。

复杂的计算方法：

•用1表示派生选择器的优先级

•用10表示类选择器的优先级

•用100标示ID选择器的优先级

•div.test1 .span var 优先级 1+10 +10 +1

•span#xxx .songs li 优先级1+100 + 10 + 1

•#xxx li 优先级 100 +1