转载自# web前端开发面试遇到的题目
1、解释html语义化？
回答：用正确的标签做正确的事情。html语义化让页面的内容结构化、结构更清晰、便于对浏览器、搜索引擎解析；
即使在没有css样式的情况下，也以一种文档格式显示，并且是容易阅读的；
搜索引擎的爬虫也依赖于html标记来确定上下文和各个关键字的权重，利于SEO;
使阅读代码的人对网站更容易对网站分块，便于阅读维护理解。
2、块级元素与行内元素的区别？各自有哪些？
回答：css规范规定，每个元素都有一个display属性,确定该元素的类型，如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素。
区别：第一：块级元素会独占一行，其宽度自动填充父元素宽度；行内元素不会独占一行，相邻的行内元素会排列在一行里，直到一行拍不下，才会换行。
第二：块级元素可以设置width、height，行内元素设置无效。（块级元素即使设置了width宽度，也是独占一行）。
第三：块级元素可以设置margin、padding，行内元素水平方向有效，竖直方向无效。（例如：margin-left,margin-right、padding-left、padding-right有效）。
块级元素：div、ul、li、ol、dl、dt、dd、h1、h2、h3、h4...p、table form fieldset dir-目录列表 menu
行内元素：a b span img strong select label sub sup textarea input
空元素：br hr img input link meta
3、DOCTYPE的作用？标准模式和兼容模式各有什么区别？为什么html5只需要写<!doctype html>?
回答：（1）、<!doctype>声明位于html文档中的第一行，处于<html>标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或者格式不正确会导致文档以兼容模式呈现。
（2）、标准模式的排版和js运作模式都是以该浏览器支持的最高标准运行；在兼容模式下，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。
（3）、HTML不基于SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照他们应该的方式来运行）；
而html4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
4、link和@import的区别？
回答：（1）、link属于xhtml标签，除了加载css之外，还能用于定义rss,定义rel连接属性等作用；而@import是css提供的，只能用于加载css;
（2）、页面被加载时，link会同时被加载；而@import引用的css会等到页面被加载完后再加载。
（3）、@import是css2.1提出的，只有在IE5以上才能被识别，而link是xhtml标签，无兼容问题。
5、HTML5有哪些新特性？移除了哪些元素？如何处理html5新标签的浏览器兼容问题？如何区分html和html5?
回答：（1）、h5不是SGML的子集，主要是关于图像、位置、存储、多任务等功能的增加。
绘画canvas；用于媒介回放的video和audio元素；语义化更好的内容元素：article、footer、header、nav、section；本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失；sessionStorage的数据在浏览器关闭后自动删除；表单控件增添calendar、date、time、email、url、search;新的技术Webworker,Websocket,Geolocation。
（2）、移除的元素：纯表现的元素：basefont\big\center\font\s\u;对可用性产生负面影响的元素：frame\frameset\noframes;
（3）、处理和html5新标签的浏览器兼容问题：
当在页面中使用html5新标签时，可能得到三种不同的情况：
1>结果1：新标签被当做错误处理并且忽略，在DOM构建时会当作这个标签不存在；
2>结果2：新标签当作错误处理，并在DOM构建时，这个新标签会被构造成行内元素；
3>结果3：新标签被识别为html5标签，然后用DOM节点对其进行替换。
不能识别html5标签而不能使用，解决办法如下：
1>方法1：实现标签被识别
通过document.creatElement(tagname)方法让浏览器识别新标签，浏览器支持标签后，还可以为新标签增添css样式。
2>方法2：javascript解决方案
a)使用html5shim:
在head中调用一下代码：(也可以下载到自己的网站上进行调用，但是必须在head中)
<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> </pre>
b)使用kill IE6
在</body>之前调用以下代码：
<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"> <script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.zh_CN.pack.js"></script> </pre>
（4）、区分html和html5:doctype声明、新增的结构元素|功能元素。
6、css选择符？优先级算法？哪些属性可以继承？
回答：（1）、id选择器；（2）、类选择器；（3）、标签选择器；（4）、相邻选择器（h1+p）;（5）、子选择器（ul>li）;（6）、后代选择器（li a）；（7）、通配符选择器（*）；（8）、属性选择器（a[rel="external"]）;（9）、伪类选择器（a:hover）;
可继承的属性：font-size/font-family/color/UL LI Dl DD DT;
不可继承的样式：border/margin/padding/height/width/display/position/float/left...;
优先级：！important>id>class>tag>*; !important比内联优先级高；内联样式表（标签内部）>嵌入样式表（当前文件中）>外部样式表（外部文件中）
7、描述cookies,sessionStorage,localStorage的区别？
回答：（1）、cookie是网站用于标识用户的身份而储存在用户本地终端（client side）上的数据（通常经过加密）；cookie数据始终在同源的http中携带（即使不需要），即会在浏览器和服务器间来回传递；（2）、sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
（3）、存储大小：cookie数据大小不能超过4k;sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
（4）、有效时间：localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage数据在当前浏览器关闭后删除；
cookie 设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭。
8、javascript有几种数据类型？划一下他们的内存图？
回答： 栈:原始数据类型（number、string、Boolean、null、undefined）;
堆：引用数据类型（对象、数组、和函数）；
两种类型的区别：存储位置不同：原始数据类型存储在栈中的简单数据段，占据空间小，大小固定，属于被频繁使用数据，所以放入栈中存储；
引用数据类型存储在堆中的对象，占据空间大，大小不固定。如果存储在栈中将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。
image
9、href和src的区别？
回答：(1)、href表示超文本引用，用于建立当前元素和文档之间的链接。常用的有link、a上使用，当前文档和引用资源之间确立联系，并行下载资源。
(2)、src是sourse的缩写，src指向的文档会嵌入到文档中当前标签所在的位置。主要是引入，常用与img,script等元素上，替换当前元素，当浏览器解析该元素时，会暂停其他资源的下载和处理，直到完毕。
10、javascript中call()和apply()方法的区别？
回答：ECMAScript规范给所有函数都定义了这两个方法call()和apply()。
call()方法定义：调用一个对象的一个方法，以另一个对象替换当前对象。
apply()方法定义：应用某一对象的一个方法，用另一个对象替换当前对象。
两者的区别在与参数：call()和apply()的第一个参数都是要调用的函数的对象，call()的剩余参数是传递给要调用的函数的值，而apply()只有两个参数，第一个是对象，第二个是数组，这个数组就是该函数的参数。
11、javascript原型？原型链？以及如何实现继承？
回答：每个对象都会在内部初始化一个属性，就是prototype（原型），当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype里面找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去，就是原型链的概念。
如何实现继承：
1》构造继承：比如：现在有一个”动物“对象的构造函数
<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"> function Animal(){this.species = "动物";
}</pre>
还有一个”猫“对象的构造函数
<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"> function Cat(name,color){this.name = name;this.color = color;
}</pre>
”猫“继承”动物“
构造函数绑定：使用call()或者apply()方法，将父对象的构造函数绑定在子对象上，即在子对象构造函数中加一行：
[
复制代码
](javascript:void(0); "复制代码")
<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"> function Cat(name,color){
Animal.apply(this, arguments);
this.name = name;this.color = color;
}var cat1 = new Cat("大毛","黄色");
alert(cat1.species); // 动物</pre>
复制代码
](javascript:void(0); "复制代码")
2》原型继承：如果”猫“的prototype对象，指向一个animal的实例，那么所有猫的实例就可以继承animal了。
<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"> Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;var cat1 = new Cat("大毛","黄色");
alert(cat1.species); // 动物</pre>
3》实例继承：
4》拷贝继承：
原型prototype机制或apply和call方法去实现比较简单，建议使用构造方式和原型混合方式。
[
复制代码
](javascript:void(0); "复制代码")
<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"> function Parent(){ this.name = 'wang';
} function Child(){ this.age = 28;
}
Child.prototype = new Parent();//继承了Parent，通过原型
var demo = new Child();
alert(demo.age);
alert(demo.name);//得到被继承的属性</pre>
复制代码
](javascript:void(0); "复制代码")
12、前端性能优化的方法？
回答：（1）、当需要设置的样式很多时设置className而不是直接操作style。
（2）、避免在页面的主题布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。
（3）、用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
（4）、减少http请求次数：CSS Sprites，JS、CSS源码压缩，图片大小控制合适；网页GZIP压缩，CDN托管，data缓存，图片服务器。
（5）、图片预加载，将样式表放在顶部，将脚本放在底部，加上时间戳。
（6）、前端模板 JS+数据，减少由于html标签导致的贷款浪费，前端用变量保存AJAX请求结果，每次操作本地数据，减少请求次数。
（7）、少用全局变量，缓存DOM节点查找的结果。减少IO（输入/输出）读取操作。
（8）、避免使用CSS Expression(css 表达式)又称动态属性（Dynamic properties）。
（9）、减少DOM操作；部署前，图片压缩、代码压缩；优化js代码结构，减少冗余代码；减少http请求，合理设置http缓存；使用内容分发cdn加速；静态资源缓存；图片延迟加载；
13、介绍一下标准的CSS的盒子模型？低版本的IE的盒子模型有什么不同？
回答：（1）、有两种：IE盒子模型、w3c盒子模型；（2）、盒模型：content(内容)、padding（内边距）、margin（外边距）、 border（边框）；（3）：区别：IE的content把padding和border计算了进去。
14、如何居中div?
回答：（1）、水平居中：给DIV设置一个宽度，然后添加margin:0 auto属性。
<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"> div{ width:200px; margin:0 auto;
}</pre>
（2）、让绝对定位的div居中：
[
复制代码
](javascript:void(0); "复制代码")
<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">div { position: absolute; width: 300px; height: 300px; margin: auto; top: 0; left: 0; bottom: 0; right: 0; background-color: pink; /* 方便看效果 */
}</pre>
复制代码
](javascript:void(0); "复制代码")
（3）、水平垂直居中一：
[
复制代码
](javascript:void(0); "复制代码")
<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"> 确定容器的宽高 宽500 高 300 的层
设置层的外边距
div { position: relative; /* 相对定位或绝对定位均可 / width:500px; height:300px; top: 50%; left: 50%; margin: -150px 0 0 -250px; / 外边距为自身宽高的一半 / background-color: pink; / 方便看效果 */
}</pre>
[
复制代码
](javascript:void(0); "复制代码")
（4）、水平垂直居中二：
[
复制代码
](javascript:void(0); "复制代码")
<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"> 未知容器的宽高，利用 transform 属性
div { position: absolute; /* 相对定位或绝对定位均可 / width:500px; height:300px; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: pink; / 方便看效果 */
}</pre>
[
复制代码
](javascript:void(0); "复制代码")
（5）、水平垂直居中三：
[
复制代码
](javascript:void(0); "复制代码")
<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"> 利用 flex 布局
实际使用时应考虑兼容性
.container { display: flex; align-items: center; /* 垂直居中 / justify-content: center; / 水平居中 */
} .container div { width: 100px; height: 100px; background-color: pink; /* 方便看效果 */
} </pre>
复制代码
](javascript:void(0); "复制代码")
15、position的值定位原点是？
回答：（1）、absolute：生成绝对定位的元素，相对于值不为static的第一个父元素进行定位。
（2）、relative：生成相对定位的元素，相对于元素正常位置进行定位。
（3）、fixed（老IE不支持）：生成绝对定位的元素，相对于浏览器窗口进行定位。
（4）、static：默认值，没有定位，元素出现在正常的流中。
（5）、inherit:规定从父元素继承position的值。
16：清除浮动的几种方式？为什么要清除浮动呢？
回答：（1）、添加新的元素，应用clear:both;（额外标签法）
<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">.clear{clear:both; height: 0; line-height: 0; font-size: 0}</pre>
（2）、父级div定义overflow:auto;
（3）、使用：after方法，作用与浮动元素的父元素。（伪元素）
[
复制代码
](javascript:void(0); "复制代码")
<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"> .clearfix:after{ content:"";//设置内容为空
height:0;//高度为0
line-height:0;//行高为0
display:block;//将文本转为块级元素
visibility:hidden;//将元素隐藏
clear:both//清除浮动
} .clearfix{ zoom:1;为了兼容IE(触发IE的haslayout属性)
}</pre>
复制代码
](javascript:void(0); "复制代码")
（4）、使用双伪元素
[
复制代码
](javascript:void(0); "复制代码")
<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">.clearfix:before,.clearfix:after { content: ""; display: block; clear: both;
} .clearfix { zoom: 1;
}</pre>
复制代码
](javascript:void(0); "复制代码")
原因：如果一个盒子中有一个子盒子，并且父盒子没有设置高，子盒子在父盒子中设置了浮动，那么将来父盒子的高度就是0，下面的元素就会自动部位。（所以可以给父级DIV定义height；也可以父级DIV一起浮动）。
（当设置了zoom的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。）
17、css定义的权重？
回答：权重的规则：标签的权重为1，class的权重为10，id的权重为100，如下所示：（ps:如果权重相同，则最后定义的样式会起作用，但是要避免这样的情况）
[
复制代码
](javascript:void(0); "复制代码")
<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">/权重为1/ div{
}
/权重为10/ .class1{
}
/权重为100/ #id1{
}
/权重为100+1=101/ #id1 div{
}
/权重为10+1=11/ .class1 div{
}
/权重为10+10+1=21/ .class1 .class2 div{
}</pre>
复制代码
](javascript:void(0); "复制代码")
18、javascript作用域和闭包？
回答：变量作用域：包括全局变量和局部变量（函数内部可以直接读取全局变量&函数外部自然不能读取函数内部的局部变量）。
（1）、函数作用域：函数的局部变量仅对函数内部可见。
（2）、词法作用域：函数的嵌套关系是定义的时候决定的，而不是调用的时候决定的，即嵌套关系是词法分析时确定的，而非运行时决定。
（3）、全局作用域：在最外层定义的变量，全局对象的变量，任何地方隐匿定义的变量。
（4）、没有块级作用域。
闭包：就是能够读取其他函数内部变量的函数。也可以理解成”定义在一个函数内部的函数”；
闭包的用途就是一可以读取函数内部的变量，二就是让这些变量的值始终保存在内存中。（内存会消耗过大，所以不能滥用闭包）。
简单的闭包例子：
[
复制代码
](javascript:void(0); "复制代码")
<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"> function f1(){var n=999;
function f2(){
alert(n);
}return f2;
}var result=f1();
result(); // 999</pre>
复制代码
](javascript:void(0); "复制代码")
19、AJAX的步骤？
回答：（1）、创建ajax对象；（2）、发出HTTP请求；（3）、接收服务器传回的数据；（4）、更新网页数据。
20、一个页面上两个div左右铺满整个浏览器，要保证左边的div一直为100px，右边的div跟随浏览器大小变化（比如浏览器为500，右边就为400；如果浏览器为900，右边为800）？
回答：（1）、浮动布局：
[
复制代码
](javascript:void(0); "复制代码")
<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"><div id="left">left sidebar</div>
<div id="content">Main Content</div>
<style type="text/css"> *{ margin: 0; padding: 0;
} #left{ float: left; width: 220px; background-color: green;
} #content{ background-color: orange; margin-left: 220px;
}
</style></pre>
复制代码
](javascript:void(0); "复制代码")
21、一个页面从输入URL到页面加载显示完成，这个过程发生了什么？（流程说的越详细越好）
回答：输入地址
（1）、浏览器查找域名的IP地址，这一步包括DNS具体的查找过程（包括：浏览器缓存-》系统缓存-》路由器缓存...）（2）、浏览器向web服务器发送一个HTTP请求；（3）、服务器的永久重定向响应（从http://example.com到http://www.example.com）；（5）、浏览器跟踪重定向地址；（6）、服务器处理请求；（7）、服务器返回一个HTTP响应；（8）、浏览器显示HTML；（9）、浏览器发送请求获取嵌入在HTML中的 资源（如图片、音频、视频、css、js等等）；（10）、浏览器发送异步请求。
22、JS跨域请求的方式，能写几种写几种?
回答：（1）、通过jsonp跨域；
（2）、通过修改document.domain来跨子域；
（3）、使用window.name来进行跨域；
（4）、使用HTML5新引进的window.postMessage方法来进行跨域（ie6 7不支持）；
（5）、CORS需要服务器设置header:Access-Control-Allow-Origin；
（6）、nginx反向代理 这个方法可以不用目标服务器配合，不过需要搭建一个中转nginx服务器，用于转发请求。
网友评论