web前端面试题集锦
- 伪类和伪元素的区别
CSS 伪类用于向某些选择器添加特殊的效果（active、docus、hover、link、visited、lang等）。
CSS 伪元素用于将特殊的效果添加到某些选择器（first-letter、first-line、before、after）。 - link 和@import 的区别是?
（1）、link属于XHTML标签，而@import完全是CSS提供的一种方式;
（2）、页面被加载的时候，link-会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
（3）、import只有在IE5以上的才能识别，而link是XHTML标签，无兼容问题;
（4）、link方式的样式的权重 高于@import的权重. - css Hack
HTML头部的Hack：这种方式主要是针对IE浏览器，IE浏览器是广大Web前端工程师的痛，它不仅有很多自己独有的区别于其他浏览器的CSS样式，自己不同版本之间的CSS实现也会存在很大的差异。下面我们来看看这种方式的写法：
1
2
3
这种写法会被非IE的浏览器所忽略，只有IE浏览器才会执行上面的代码，上面这段代码的意思是当IE的版本是8或者比8低的IE浏览器才会执行下面的样式。例子中有一个运算符号lte，它是less than or equal to的简写，意思是小于等于，其他的运算符号还有lt（less than，小于）、gte（greater than or equal to，大于等于）、gt（greater than，大于）。
background:blue\0;/* OP */
background:turquoise\9;/* IE8+ */
[background:red;background:black;/* SA,CH */
*background:green; /* IE7 */
_background:yellow;/* IE6 */
background:red;/* FF */
4. 常见兼容性问题
png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.
浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}
这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——display:inline;将其转化为行内属性。(这个符号只有ie6会识别)
渐进识别的方式，从总体中逐渐排除局部。
IE下,可以使用获取常规属性的方法来获取自定义属性,
也可以使用getAttribute()获取自定义属性;
Firefox下,只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性.
IE下,even对象有x,y属性,但是没有pageX,pageY属性; Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.
解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.
超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
5. iframe有那些缺点
* iframe会阻塞主页面的Onload事件；
* iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
通过javascript动态给iframe添加src属性值，这样可以可以绕开以上两个问题。
6. new操作符具体干了什么呢
1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中。
3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。
var obj = {};
obj.__proto__ = Base.prototype;
Base.call(obj);
7. 异步加载的方式有哪些
(1) defer，只支持IE
(2) async：
(3) 创建script，插入到DOM中，加载完毕后callBack
8. 性能优化的方法
（1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
（2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
（3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
（4） 当需要设置的样式很多时设置className而不是直接操作style。
（5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
（6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
（7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
（8） 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。
9. http状态码有那些？分别代表是什么意思.
100-199 用于指定客户端应相应的某些动作。
200-299 用于表示请求成功。
300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。
400-499 用于指出客户端的错误。400 语义有误，当前请求无法被服务器理解。401 当前请求需要用户验证 403 服务器已经理解请求，但是拒绝执行它。
500-599 用于支持服务器错误。 503 – 服务不可用
10. 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么
查找浏览器缓存
DNS解析、查找该域名对应的IP地址、重定向（301）、发出第二个GET请求
进行HTTP协议会话
客户端发送报头(请求报头)
服务器回馈报头(响应报头)
html文档开始下载
文档树建立，根据标记请求所需指定MIME类型的文件
文件显示
[ 浏览器这边做的工作大致分为以下几步：
加载：根据请求的URL进行域名解析，向服务器发起请求，接收文件（HTML、JS、CSS、图象等）。
解析：对加载到的资源（HTML、JS、CSS等）进行语法解析，建议相应的内部数据结构（比如HTML的DOM树，JS的（对象）属性表，CSS的样式规则等等）]
11. 介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同
1）有两种， IE 盒子模型、W3C 盒子模型；
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
（3）区 别： IE的content部分把 border 和 padding计算了进去;
12. 什么是window对象? 什么是document对象?
window对象是指浏览器打开的窗口。
document对象是Documentd对象（HTML 文档对象）的一个只读引用，window对象的一个属性。
13. XML和JSON的区别
(1).数据体积方面。
JSON相对于XML来讲，数据的体积小，传递的速度更快些。
(2).数据交互方面。
JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。
(3).数据描述方面。
JSON对数据的描述性比XML较差。
(4).传输速度方面。
JSON的速度要远远快于XML。
14. Web Worker 和webSocket
worker主线程:
1.通过 worker = new Worker( url ) 加载一个JS文件来创建一个worker，同时返回一个worker实例。
2.通过worker.postMessage( data ) 方法来向worker发送数据。
3.绑定worker.onmessage方法来接收worker发送过来的数据。
4.可以使用 worker.terminate() 来终止一个worker的执行。
WebSocket是Web应用程序的传输协议，它提供了双向的，按序到达的数据流。他是一个HTML5协议，WebSocket的连接是持久的，他通过在客户端和服务器之间保持双工连接，服务器的更新可以被及时推送给客户端，而不需要客户端以一定时间间隔去轮询。
15. 移动端性能优化
尽量使用css3动画，开启硬件加速。
适当使用touch事件代替click事件。
避免使用css3渐变阴影效果。
可以用transform: translateZ(0)来开启硬件加速。
不滥用Float。Float在渲染时计算量比较大，尽量减少使用
不滥用Web字体。Web字体需要下载，解析，重绘当前页面，尽量减少使用。
合理使用requestAnimationFrame动画代替setTimeout
CSS中的属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）会触发GPU渲染，请合理使用。过渡使用会引发手机过耗电增加
PC端的在移动端同样适用
16. cookie 和session 的区别
1、cookie数据存放在客户的浏览器上，session数据放在服务器上。
2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
考虑到安全应当使用session。
3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
考虑到减轻服务器性能方面，应当使用COOKIE。
4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
5、所以个人建议：
将登陆信息等重要信息存放为SESSION
其他信息如果需要保留，可以放在COOKIE中
17. 如何删除一个cookie
//1.将时间设为当前时间往前一点。
var date = new Date();
date.setDate(date.getDate() - 1);//真正的删除
18. attribute和property的区别是什么
attribute是dom元素在文档中作为html标签拥有的属性；
property就是dom元素在js中作为对象拥有的属性。
所以：对于html的标准属性来说，attribute和property是同步的，是会自动更新的，
但是对于自定义的属性来说，他们是不同步的
19. css渲染
如果写在body后会重新渲染整个页面；同一个DOM同时应用多个class，样式都会应用，重复的样式会覆盖
20. 构造函数、实例和原型对象的区别
实例就是通过构造函数创建的。实例一创造出来就具有constructor属性（指向构造函数）和proto属性（指向原型对象），
构造函数中有一个prototype属性，这个属性是一个指针，指向它的原型对象。
原型对象内部也有一个指针（constructor属性）指向构造函数:Person.prototype.constructor = Person;
实例可以访问原型对象上定义的属性和方法。
在这里person1和person2就是实例，prototype是他们的原型对象。
21. proto属性和prototype属性的区别
prototype是function对象中专有的属性。
proto是普通对象的隐式属性，在new的时候，会指向prototype所指的对象；
ptoto实际上是某个实体对象的属性，而prototype则是属于构造函数的属性。ptoto只能在学习或调试的环境下使用。
22. 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?
IE: trident内核
Firefox：gecko内核
Safari:webkit内核
Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome:Blink(基于webkit，Google与Opera Software共同开发)
23.如何克服click300ms 延迟
//1-禁用缩放，
//2-width=device-width Meta 标签
在包含 width=device-width 或者置为比 viewport 值更小的页面上禁用双击缩放。
//3-指针事件 (Pointer Events)
有一个和点击延迟直接相关的实现 —— 一个名为 touch-action 的新 CSS 属性。
根据规范，touch-action 属性决定 “是否触摸操作会触发用户代理的默认行为。这包括但不限于双指缩放等行为”。
从实际应用的角度来看，touch-action 决定了用户在点击了目标元素之后，是否能够进行双指缩放或者双击缩放。因此，这也相当完美地解决了 300 毫秒点击延迟的问题。
touch-action 的默认值为 auto，将其置为 none 即可移除目标元素的 300 毫秒延迟。例如，下面的代码在 IE10 和 IE11 上移除了所有链接和按钮元素的点击延迟。
a[href], button {
-ms-touch-action: none; /* IE10 */
touch-action: none; /* IE11 */
}
24. 同一个事件处理函数可以绑定2次,一次用于事件捕获，一次用于事件冒泡
var dom = document.getElementById(“outestA”);
dom.addEventListener(‘click’, a, false);
dom.addEventListener(‘click’, a, true);
//捕获阶段的处理函数最先执行，其次是目标阶段的处理函数，最后是冒泡阶段的处理函数。目标阶段的处理函数，先注册的先执行，后注册的后执行。
25.html和xhtml和xml的区别
1、html即是超文本标记语言（Hyper Text Markup Language），是最早写网页的语言，但是由于时间早，规范不是很好，大小写混写且编码不规范；
2、xhtml即是升级版的html（Extensible Hyper Text Markup Language），对html进行了规范，编码更加严谨纯洁，也是一种过渡语言，html向xml过渡的语言；
3、xml即时可扩展标记语言（Extensible Markup Language），是一种跨平台语言，编码更自由，可以自由创建标签。
4、网页编码从html>>xhtml>>xml这个过程发展
xhtml对比与html，xhtml文档具有良好完整的排版，体现在两方面：a、元素必须要有结束标签；b、元素必须嵌套；
2、对于html的元素和属性，xhtml必须小写，因为xml是严格区分大小写的；
3、xhtml的属性值必须在引号之中；
4、xhtml不支持属性最小化，什么是属性最小化？
正确:非最小化属性(unminimized attributes)
不正确:最小化属性(minimized attributes)
5、 在xhtml中，name属性是不赞成使用的，在以后的版本中将被删除。
26. 什么是FOUC?如何避免
Flash Of Unstyled Content：用户定义样式表加载之前浏览器使用默认样式显示文档， 用户样式加载渲染之后再从新显示文档， 造成页面闪烁。 解决方法：把样式表放到文档的 head
27. offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别
offsetWidth/offsetHeight返回值包含content + padding + border， 效果与e.getBoundingClientRect()相同
clientWidth/clientHeight返回值只包含content + padding， 如果有滚动条， 也不包含滚动条
scrollWidth/scrollHeight返回值包含content + padding + 溢出内容的尺寸
28. XMLHttpRequest通用属性和方法
readyState :表示请求状态的整数， 取值：
UNSENT（ 0） ：对象已创建
OPENED（ 1） ：open()成功调用， 在这个状态下， 可以为xhr设置请求头， 或者使用send()发送请求 HEADERS_RECEIVED(2)：所有重定向已经自动完成访问， 并且最终响应的HTTP头已经收到LOADING(3)：响应体正在接收
DONE(4)：数据传输完成或者传输产生错误
2. onreadystatechange ：readyState改变时调用的函数
3. status ：服务器返回的HTTP状态码（ 如， 200， 404）
4. statusText :服务器返回的HTTP状态信息（ 如， OK， No Content）
5. responseText :作为字符串形式的来自服务器的完整响应
6. responseXML : Document对象， 表示服务器的响应解析成的XML文档
7. abort() :取消异步HTTP请求
8. getAllResponseHeaders() : 返回一个字符串， 包含响应中服务器发送的全部HTTP报头。 每个报头都
是一个用冒号分隔开的名/值对， 并且使用一个回车/换行来分隔报头行
9. getResponseHeader(headerName) :返回headName对应的报头值
10. open(method, url, asynchronous [, user, password]) :初始化准备发送到服务器上的请求。
method是HTTP方法， 不区分大小写；url是请求发送的相对或绝对URL；asynchronous表示请求是否
异步；user和password提供身份验证
11. setRequestHeader(name, value) :设置HTTP报头
12. send(body) :对服务器请求进行初始化。 参数body包含请求的主体部分， 对于POST请求为键值对字
符串；对于GET请求， 为null
- sessionStorage,localStorage,cookie区别
- 都会在浏览器端保存， 有大小限制， 同源限制
- cookie会在请求时发送到服务器， 作为会话标识， 服务器可修改cookie；web storage不会发送到服务
器 - cookie有path概念， 子路径可以访问父路径cookie， 父路径不能访问子路径cookie
- 有效期：cookie在设置的有效期内有效， 默认为浏览器关闭；sessionStorage在窗口关闭前有效，
localStorage长期有效， 直到用户删除 - 共享：sessionStorage不能共享， localStorage在同源文档之间共享， cookie在同源且符合path规则的
文档之间共享 - localStorage的修改会促发其他文档窗口的update事件
- cookie有secure属性要求HTTPS传输
- 浏览器不能保存超过300个cookie， 单个服务器不能超过20个， 每个cookie不能超过4k。 web storage
大小支持能达到5M