web前端开发面试题（答案）

1.xhtml和html有什么区别？

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言
最主要的不同：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。

2.行内元素有哪些?块级元素有哪些?CSS的盒模型?
块级元素：div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css盒模型:内容，border ,margin，padding

3.CSS引入的方式有哪些? link和@import的区别是?
内联 内嵌 外链 导入
区别 ：同时加载
前者无兼容性，后者CSS2.1以下浏览器不支持
Link 支持使用javascript改变样式，后者不可

4.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?
IE: trident内核
Firefox：gecko内核
Safari：webkit内核
Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome：Blink(基于webkit，Google与Opera Software共同开发)

5.写出几种IE6 BUG的解决方法
1.双边距BUG float引起的 使用display
2.3像素问题 使用float引起的 使用dislpay:inline -3px
3.超链接hover 点击后失效 使用正确的书写顺序 link visited hover active
4.Ie z-index问题 给父级添加position:relative
5.Png 透明 使用js代码 改
6.Min-height 最小高度 ！Important 解决’
7.select 在ie6下遮盖 使用iframe嵌套
8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

6.你如何对网站的文件和资源进行优化?期待的解决方案包括：
文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用

7.清除浮动的几种方式，各自的优缺点
1.使用空标签清除浮动 clear:both（理论上能清楚任何标签，，，增加无意义的标签）
2.使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE）
3.是用afert伪元素清除浮动(用于非IE浏览器)

8.”==”和“===”的不同
前者会自动转换类型
后者不会

9.简述同步和异步的区别

同步是阻塞模式，异步是非阻塞模式。
同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；
异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。

10.px和em的区别

px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em

11.一次完整的HTTP事物是怎样的一个过程？

基本流程：

a. 域名解析

b. 发起TCP的3次握手

c. 建立TCP连接后发起http请求

d. 服务器端响应http请求，浏览器得到html代码

e. 浏览器解析html代码，并请求html代码中的资源

f. 浏览器对页面进行渲染呈现给用户

12.你所了解的web攻击技术

（1）XSS（Cross-Site Scripting，跨站脚本攻击）：指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或者JavaScript进行的一种攻击。
（2）SQL注入攻击
（3）CSRF（Cross-Site Request Forgeries，跨站点请求伪造）：指攻击者通过设置好的陷阱，强制对已完成的认证用户进行非预期的个人信息或设定信息等某些状态更新。

13.html5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

(1)绘画 canvas;

　　(2)用于媒介回放的 video 和 audio 元素;

　　(3)本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;

　　(4)sessionStorage 的数据在浏览器关闭后自动删除;

　　(5)语意化更好的内容元素，比如 article、footer、header、nav、section;

　　(6)表单控件，calendar、date、time、email、url、search;

　　(7)新的技术webworker, websocket, Geolocation;

IE8/IE7/IE6支持通过document.createElement方法产生的标签，

　　可以利用这一特性让这些浏览器支持HTML5新标签，

　　浏览器支持新标签后，还需要添加标签默认的样式。

　　当然也可以直接使用成熟的框架、比如html5shim

14.HTTP状态码知道哪些？

100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息

　　200 OK 正常返回信息

　　201 Created 请求成功并且服务器创建了新的资源

　　202 Accepted 服务器已接受请求，但尚未处理

　　301 Moved Permanently 请求的网页已永久移动到新位置。

　　302 Found 临时性重定向。

　　303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。

　　304 Not Modified 自从上次请求后，请求的网页未修改过。

　　400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。

　　401 Unauthorized 请求未授权。

　　403 Forbidden 禁止访问。

　　404 Not Found 找不到如何与 URI 相匹配的资源。

　　500 Internal Server Error 最常见的服务器端错误。

　　503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。

14.你有哪些性能优化的方法？

（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） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。

15.哪些常见操作会造成内存泄漏？

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。

　　垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。

　　setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。

　　闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）。

16.线程与进程的区别

一个程序至少有一个进程,一个进程至少有一个线程。

　　线程的划分尺度小于进程，使得多线程程序的并发性高。

　　另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。

　　线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。

　　从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。

17.null和undefined的区别？

null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。

　　undefined：

　　（1）变量被声明了，但没有赋值时，就等于undefined。

　　（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。

　　（3）对象没有赋值的属性，该属性的值为undefined。

　　（4）函数没有返回值时，默认返回undefined。

　　null：

　　（1） 作为函数的参数，表示该函数的参数不是对象。

　　（2） 作为对象原型链的终点。