前端面试经典题目

这只是我自己学习记录，内容来自网络
1.什么是盒子模型？

盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)
两种: 标准 W3C 盒子模型、IE 盒子模型
区别：IE的content部分包含了 border 和 padding

2.简述一下src与href的区别?

href 表示超文本引用，在 link 和 a 等元素上使用。 src 表示来源地址，在 img、script、iframe 等元素上使用。
src是引入文件，href是链接跳转。

3.简述同步和异步的区别?

举个例子：普通B/S模式（同步）AJAX技术（异步）
同步：提交请求->等待服务器处理（这个期间客户端浏览器不能干任何事）->处理完毕返回
异步：请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完

4.怎样添加、移除、移动、复制、创建和查找节点？

1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
2）添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性

5.一次完整的HTTP事务是怎样的一个过程？

基本流程： a. 域名解析
b. 发起TCP的3次握手
c. 建立TCP连接后发起http请求
d.服务器端响应http请求，浏览器得到html代码
f.浏览器对页面进行渲染呈现给用户

6.你所了解到的Web攻击技术?

（1）XSS（Cross-Site Scripting，跨站脚本攻击）：指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或者JavaScript进行的一种攻击。
（2）SQL注入攻击
（3）CSRF（Cross-Site Request Forgeries，跨站点请求伪造）：指攻击者通过设置好的陷阱，强制对已完成的认证用户进行非预期的个人信息或设定信息等某些状态更新。
7.ajax是什么?ajax的交互模型?同步和异步的区别?如何解决跨域问题?

通过异步模式，提升了用户体验
2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
3. Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。
Ajax的特点
Ajax可以实现动态不刷新（局部刷新）
readyState属性 状态 有5个可取值： 0=未初始化 ，1=启动 2=发送，3=接收，4=完
ajax的缺点
1、ajax不支持浏览器back按钮。
2、安全问题 AJAX暴露了与服务器交互的细节。
3、对搜索引擎的支持比较弱。
4、破坏了程序的异常机制。
5、不容易调试。

8.什么叫优雅降级和渐进增强？

渐进增强 progressive enhancement：
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation： 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别： a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给 b.
渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要 c.
降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

9.在Javascript中什么是伪数组？如何将伪数组转化为标准数组？

伪数组（类数组）：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数，还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。

10.浏览器本地存储?

在较高版本的浏览器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage来取代globalStorage。html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

11.线程与进程的区别?

一个程序至少有一个进程,一个进程至少有一个线程.线程的划分尺度小于进程，使得多线程程序的并发性高。另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。

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

12.请说出三种减少页面加载时间的方法。

1.优化图片
2.图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）
3.优化CSS（压缩合并css，如margin-top,margin-left…)
4.网址后加斜杠（如http://www.campr.com/目录，会判断这个“目录是什么文件类型，或者是目录。）
5.标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。
当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。）
6.减少http请求（合并文件，合并图片）。

13.一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
14.HTTP状态码
15.请解释一下 JavaScript 的同源策略。
16 .GET和POST的区别，何时使用POST？

思考题

1）站点 Logo 是否因出现在 h1标签中?
最好不要，一个站点的logo是这个站点的象征，一定要显眼，出现一次即可。
2）是否应该支持 IE6？
不应该,因为支持ES6需要耗费大量精力，现在国内ES6比例也相当低，而基本上所有电脑都可以支持现代浏览器
3)前端网页制作怎么克服不同分辨率的问题？
设置视口（通过meta设置）
4)是否该继续使用b和i两个标签?
strong与em是结构化标签，而b与i是表现化标签。应尽量不使用b和i
5).在链接中应该使用诸如“Click here” 一类的笼统词汇吗？
6). 链接是否应该在新窗口打开？
7）.ajax请求的时候get 和post方式的区别是什么？
8）. Web前端密码加密是否有意义？(既然前端代码都是直接可以看到的，那加密是否还有意义？)