面试题

2017-09-06 本文已影响0人 LorenaLu

1、说明盒子模型

（1）两种， IE 盒子模型、标准 W3C 盒子模型；IE 的content部分包含了 border 和 pading;
（2）盒模型：内容(content)、填充(padding)、边界(margin)、边框(border).
IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。
IE8 及更早IE版本不支持填充的宽度和边框的宽度属性设。解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。

2、CSS3实现垂直水平居中？

未知宽高时：
width : 200px; height : 200px;
position : absolute;
top : 0; left : 0; bottom : 0; right:0;
margin : auto;
已知宽高时：
width:200px;height:200px;
position:absolute;
top:50%;left:50%;
margin-top:-100px;
margin-left : -100px;
行内元素（img）设置垂直水平居中
给img的父元素div设置：
div{
display:table-cell;
text-align:center;
vertical-align:middle;
}
img{
vertical-align:top;
}

3、清除数组里面重复的元素，并重新正序排序；

 var aArr = [2,9,3,4,3,30,4,4,6,7];
    function remRep(arr){
        //拿每一个数和其他的数进行比较
        for(var i = 0; i< arr.length;i++){  
            for(var j = i+1;j<arr.length;j++){
                if(arr[i] == arr[j]){
                    arr.splice(j,1);
                    j--;
                }
            }            
        }

        for(var i = 0 ;i<arr.length-1;i++){ //循环的次数
            for(var j = 0;j<arr.length-1-i;j++){ //相邻两个数从大到小排序
                if(arr[j]<arr[j+1]){
                    var temp = arr[j+1];
                    arr[j+1] = arr[j];
                    arr[j] = temp;
                }
            }
        }

        return arr;
    }
    console.log(remRep(aArr));

4、HTTP常用状态及含义

304:：请求缓存数据成功；
500及以上：服务器内部错误；
200 OK //客户端请求成功
400 Bad Request //客户端请求有语法错误，不能被服务器所理解
403 Forbidden //服务器收到请求，但是拒绝提供服务
404 Not Found //请求资源不存在，输入了错误的URL
500 Internal Server Error //服务器发生不可预期的错误
503 Server Unavailable //服务器当前不能处理客户端的请求，一段时间后可能恢复正常

5、跨域请求资源的方法？

由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。（1）JSONP　　这种方式主要是通过动态插入一个script标签。浏览器对script的资源引用没有同源限制，同时资源加载到页面后会立即执行（没有阻塞的情况下）。
1 <script> 2 var _script = document.createElement('script'); 3 _script.type = "text/javascript"; 4 _script.src = "http://localhost:8888/jsonp?callback=f"; 5 document.head.appendChild(_script); 6 </script>　
　实际项目中JSONP通常用来获取json格式数据，这时前后端通常约定一个参数callback，该参数的值，就是处理返回数据的函数名称。
缺点：　　1、这种方式无法发送post请求（这里）　　
2、另外要确定jsonp的请求是否失败并不容易，大多数框架的实现都是结合超时时间来判定。
（2）Proxy代理　　
这种方式首先将请求发送给后台服务器，通过服务器来发送请求，然后将请求的结果传递给前端。需要注意的是如果你代理的是https协议的请求，那么你的proxy首先需要信任该证书（尤其是自定义证书）或者忽略证书检查，否则你的请求无法成功。
（3）CORS　　
这是现代浏览器支持跨域资源请求的一种方式。当你使用XMLHttpRequest发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin;浏览器判断该相应头中是否包含Origin的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。

6、web 前端如何向服务器端传递 sessionID，写出隐式和显式两种方法？

7、MVVM

MVC:接受用户指令时，MVC 可以分成两种方式。一种是通过 View 接受指令，传递给 Controller。另一种是直接通过controller接受指令
视图（View）：用户界面。
控制器（Controller）：业务逻辑
模型（Model）：数据保存
1、 View 传送指令到 Controller
2、 Controller 完成业务逻辑后，要求 Model 改变状态
3、 Model 将新的数据发送到 View，用户得到反馈
所有的通信都是单向的

8、HTTP

HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写,是用于从万维网（WWW:World Wide Web ）服务器传输超文本到本地浏览器的传送协议。。
HTTP是一个基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）。
HTTP是无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。
HTTP是媒体独立的：这意味着，只要客户端和服务器知道如何处理的数据内容，任何类型的数据都可以通过HTTP发送。客户端以及服务器指定使用适合的MIME-type内容类型。
HTTP是无状态：HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。另一方面，在服务器不需要先前信息时它的应答就较快。
HTTP是基于客户端/服务端（C/S）的架构模型，通过一个可靠的链接来交换信息，是一个无状态的请求/响应协议。
一个HTTP"客户端"是一个应用程序（Web浏览器或其他任何客户端），通过连接到服务器达到向服务器发送一个或多个HTTP的请求的目的。
一个HTTP"服务器"同样也是一个应用程序（通常是一个Web服务，如Apache Web服务器或IIS服务器等），通过接收客户端的请求并向客户端发送HTTP响应数据。
HTTP使用统一资源标识符（Uniform Resource Identifiers, URI）来传输数据和建立连接。
一旦建立连接后，数据消息就通过类似Internet邮件所使用的格式[RFC5322]和多用途Internet邮件扩展（MIME）[RFC2045]来传送。
首先，我们要了解浏览器是如何处理内容的。在浏览器中显示的内容有 HTML、有 XML、有 GIF、还有 Flash ……那么，浏览器是如何区分它们，决定什么内容用什么形式来显示呢？答案是 MIME Type，也就是该资源的媒体类型。
媒体类型通常是通过 HTTP 协议，由 Web 服务器告知浏览器的，更准确地说，是通过 Content-Type 来表示的，例如:
Content-Type: text/HTML

9、

JS中变量和常量的定义
var只能声明一个变量，这个变量可以保存任何数据类型的值
ES6之前并没有定义声明常量的方式，ES6标准中引入了新的关键字const来定义常量
使用const定义常量后，常量无法改变
ES6中还新增了let关键字来声明变量，作用与var相似，但其所声明的变量只在声明所在块内有效

10、虚拟dom

虚拟DOM就是把DOM映射成一个js对象的结构！！！然后，当有数据发生变化时，去比较虚拟DOM中的不同之处，这样的比较是在内存中对象的比较！而不是真实的DOM重新渲染，比较完成后，只去改变受影响的节点，而不是重新渲染整个DOM

11、数据的埋点监控用户行为

12、刷新

WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。
WebSocket API是下一代客户端-服务器的异步通信方法。该通信取代了单个的TCP套接字，使用ws或wss协议，可用于任意的客户端和服务器程序。WebSocket目前由W3C进行标准化。WebSocket已经受到Firefox 4、Chrome 4、Opera 10.70以及Safari 5等浏览器的支持。
WebSocket API最伟大之处在于服务器和客户端可以在给定的时间范围内的任意时刻，相互推送信息。WebSocket并不限于以Ajax(或XHR)方式通信，因为Ajax技术需要客户端发起请求，而WebSocket服务器和客户端可以彼此相互推送信息；XHR受到域的限制，而WebSocket允许跨域通信。
Ajax技术很聪明的一点是没有设计要使用的方式。WebSocket为指定目标创建，用于双向推送消息。

WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。
当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。
以下 API 用于创建 WebSocket 对象。
var Socket = new WebSocket(url, [protocol] );

13、get,post区别

两种请求方式的区别：

1、GET请求，请求的数据会附加在URL之后，以?分割URL和传输数据，多个参数用&连接。URL的编码格式采用的是ASCII编码，而不是uniclde，即是说所有的非ASCII字符都要编码之后再传输。
POST请求：POST请求会把请求的数据放置在HTTP请求包的包体中。上面的item=bandsaw就是实际的传输数据。
因此，GET请求的数据会暴露在地址栏中，而POST请求则不会。
2、传输数据的大小
在HTTP规范中，没有对URL的长度和传输的数据大小进行限制。但是在实际开发过程中，对于GET，特定的浏览器和服务器对URL的长度有限制。因此，在使用GET请求时，传输数据会受到URL长度的限制。
对于POST，由于不是URL传值，理论上是不会受限制的，但是实际上各个服务器会规定对POST提交数据大小进行限制，Apache、IIS都有各自的配置。
3、安全性
POST的安全性比GET的高。这里的安全是指真正的安全，而不同于上面GET提到的安全方法中的安全，上面提到的安全仅仅是不修改服务器的数据。比如，在进行登录操作，通过GET请求，用户名和密码都会暴露再URL上，因为登录页面有可能被浏览器缓存以及其他人查看浏览器的历史记录的原因，此时的用户名和密码就很容易被他人拿到了。除此之外，GET请求提交的数据还可能会造成Cross-site request frogery攻击
4、HTTP中的GET，POST，SOAP协议都是在HTTP上运行的

为什么要使用回调函数

回调函数是一个作为参数传给另一个函数的函数，另一个函数里面可以自由决定什么时候执行回调函数。比如当ajax请求完成时，会执行你写的回调函数，又比如侦测到用户点击了按钮，会执行你写的回调函数。

面试题