Web前端经典面试试题（一）

本篇收录了一些面试中经常会遇到的经典面试题，并且都给出了我在网上收集的答案。眼看新的一年马上就要开始了，相信很多的前端开发者会有一些跳槽的悸动，通过对本篇知识的整理以及经验的总结，希望能帮到更多的前端面试者。（如有错误或更好的答案，欢迎指正，水平有限，望各位不吝指教。）

一. 什么是语义化的HTML?有何意义？为什么要做到语义化？（高频率考题）

a.什么是语义化的HTML？

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

b、为什么要做到语义化？

1.有利于SEO，有利于搜索引擎爬虫更好的理解我们的网页，从而获取更多的有效信息，提升网页
的权重。
2.在没有CSS的时候能够清晰的看出网页的结构，增强可读性。
3.便于团队开发和维护，语义化的HTML可以让开发者更容易的看明白，从而提高团队的效率和协
调能力。
4.支持多终端设备的浏览器渲染。

二. 行内元素和块元素分别有哪些？（高频率）

块级元素：div  , p  , form,   ul,  li ,  ol, dl,    form,   address, fieldset,  hr,
         menu,  table
行内元素：span,   strong,   em,  br,  img ,  input,  label,  select,  textarea, cite

三. iframe有那些缺点？

1.frame会阻塞主页面的Onload事件；
2.iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
3.SEO不利，对爬虫不友好。

四. CSS的优先级？内联和important哪个优先级高？（高频率）

id选择器 值：100
类选择器 值：10
标签选择器： 1

五. 盒子垂直居中方法（高频率）

position: absolute;
left:50%;
top:50%; 
width:400px;
height:400px;
margin-left:-200px;
margin-top:-200px;

六. 浮动元素清除浮动方法（高频率）

四种方法：
1、使用空标签清除浮动
2、使用overflow属性。（overflow:auto；zoom:1″用于兼容IE6）
3、使用after伪对象清除浮动。 该方法只适用于非IE浏览器
4、浮动外部元素，float-in-float。这种方法很简单，就是把“#outer”元素也进行浮动（向左
   或者向右）。

七. Diplay:none与visibility：hidden的区别（高频率）

visibility:hidden隐藏，但在浏览时保留位置；
display:none视为不存在，且不加载！

八. CSS中em和px的关系和区别

1. em的值并不是固定的； 
2. em会继承父级元素的字体大小。
    12px = 1.2em

九. 闭包的理解，javascript的作用域（高频率）

a、闭包就是能够读取其他函数内部变量的函数。
b、在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
闭包的用途
闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另
一个就是让这些变量的值始终保持在内存中。 

实例如下：
根据作用域链的规则，底层作用域没有声明的变量，会向上一级找，找到就返回，没找到就一
直找，直到window的变量，没有就返回undefined。这里明显count 是函数内部的flag2 的那
个count 。

var count=10;   //全局作用域 标记为flag1
    function add(){
    var count=0;    //函数全局作用域 标记为flag2
    return function(){
        count+=1;   //函数的内部作用域
        alert(count);
    }
    }
    var s = add()
    s();//输出1
    s();//输出2

JS中作用域的概念：
表示变量或函数起作用的区域，指代了它们在什么样的上下文中执行，亦即上下
执行环境。Javascript的作用域只有两种：全局作用域和本地作用域，本地作用
是按照函数来区分的。

十. SetTimeout与setInterval区别

因为setTimeout(表达式,延时时间)在执行时,是在载入后延迟指定时间后,去执行一次表达式,记
住,次数是一次 
而setInterval(表达式,交互时间)则不一样,它从载入后,每隔指定的时间就执行一次表达式

十一. 网站性能优化的方法（高频率）

1）将css和js文件放在独立外部文件中引用
2) 使用gzip压缩网页内容
3）将CSS放在页面顶端，JS文件放在页面底端
4）使JS文件内容最小化
5）尽量减少外部脚本的使用，减少DNS查询时间
（ 文件合并
   文件最小化/文件压缩
   使用 CDN 托管
   缓存的使用（多个域名来提供缓存））

十二. 前端由哪些部分组成（高频率）

a、网页的结构层（structural layer）由 HTML 或 XHTML 之类的标记语言负责创建。标签，也
就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关
于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”
b、网页的表示层（presentation layer） 由 CSS 负责创建。 CSS 对“如何显示有关内容”的问
题做出了回答。
c、网页的行为层（behavior layer）负责回答“内容应该如何对事件做出反应”这一问题。这是 
Javascript 语言和 DOM 主宰的领域。

十三. Jpeg、gif、png格式的优缺点，应用场景

jpg高画质（图片）
gif 色质单一（图标）
png 透明