2018年前端笔试高频题精选（三）

今天是2018年前端高频笔试题的最后一篇了，该系列推出后，看的同学非常多，看来大家都提供关注这块，后续小编还会继续推出类似文章，以及前端笔试、面试技巧。

 

1、什么是mvvm mvc是什么区别 原理

 

一、MVC（Model-View-Controller）

MVC是比较直观的架构模式，用户操作->View（负责接收用户的输入操作）->Controller（业务逻辑处理）->Model（数据持久化）->View（将结果反馈给View）。

MVC使用非常广泛，比如JavaEE中的SSH框架

三、MVVM（Model-View-ViewModel）

如果说MVP是对MVC的进一步改进，那么MVVM则是思想的完全变革。它是将“数据模型数据双向绑定”的思想作为核心，因此在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此视图的数据的变化会同时修改数据源，而数据源数据的变化也会立即反应view。

 

2、px和em的区别

px表示像素 (计算机屏幕上的一个点：1px = 1/96in)，是绝对单位，不会因为其他元素的尺寸变化而变化；em表示相对于父元素的字体大小。em是相对单位 ，没有一个固定的度量值，而是由其他元素尺寸来决定的相对值。

3、eval()的作用

 

把字符串参数解析成JS代码并运行，并返回执行的结果；

eval("2+3");//执行加运算，并返回运算值。  

eval("varage=10");//声明一个age变量  

eval的作用域

functiona(){  

eval("var x=1"); //等效于 var x=1;  

console.log(x); //输出1  

}  

a();  

console.log(x);//错误 x没有定

 

4、关于JS事件冒泡与JS事件代理（事件委托）

 

 事件作为DOM操作重要的一环，需要大家好好理解和运用，今天特意看了一下事件冒泡和事件代理的相关资料，感触颇深，也深感自己的无知不知道多浪费了多少内存，废话不多说进入正题：

1.事件冒泡：

通俗易懂的来讲，就是当一个子元素的事件被触发的时候（如onclick事件），该事件会从事件源（被点击的子元素）开始逐级向上传播，触发父级元素的点击事件。

2.事件委托

事件委托，首先按字面的意思就能看你出来，是将事件交由别人来执行，再联想到上面讲的事件冒泡，是不是想到了？对，就是将子元素的事件通过冒泡的形式交由父元素来执行。下面经过详细的例子来说明事件委托：

有可能在开发的时候会遇到这种情况：如导航每一个栏目都要加一个事件，你可能会通过遍历来给每个栏目添加事件：

var ul = document.getElementById('parentUl');  

ul.onclick=function (event) {  

var e = event||window.event,  

source = e.target || e.srcElement;//target表示在事件冒泡中触发事件的源元素，在IE中是srcElement  

if(source.nodeName.toLowerCase() == "li"){   //判断只有li触发的才会输出内容  

alert(source.innerHTML);  

}  

stopPropagation(e); //阻止继续冒泡  

};  

function addElement() {  

var li = document.createElement('li');  

li.innerHTML="我是新孩子";  

ul.appendChild(li);  

}  

 

5、介绍一下box-sizing属性

 

兼容问题 

首先，box-sizing属性在FireFox中存在兼容问题，所以需要使用-moz-box-sizing做一下兼容。

属性值

box-sizing：content-box

box-sizing：border-box

box-sizing：inherit

content-box

这是box-sizing的默认属性值

是CSS2.1中规定的宽度高度的显示行为

在CSS中定义的宽度和高度就对应到元素的内容框

在CSS中定义的宽度和高度之外绘制元素的内边距和边框

border-box

在CSS中微元素设定的宽度和高度就决定了元素的边框盒

即为元素在设置内边距和边框是在已经设定好的宽度和高度之内进行绘制

CSS中设定的宽度和高度减去边框和内间距才能得到元素内容所占的实际宽度和高度

 

6、请解释JSONP的工作原理，以及它为什么不是真正的AJAX。

 

JSONP (JSON with Padding)是一个简单高效的跨域方式，HTML中的script标签可以加载并执行其他域的javascript，于是我们可以通过script标记来动态加载其他域的资源。例如我要从域A的页面pageA加载域B的数据，那么在域B的页面pageB中我以JavaScript的形式声明pageA需要的数据，然后在 pageA中用script标签把pageB加载进来，那么pageB中的脚本就会得以执行。JSONP在此基础上加入了回调函数，pageB加载完之后会执行pageA中定义的函数，所需要的数据会以参数的形式传递给该函数。JSONP易于实现，但是也会存在一些安全隐患，如果第三方的脚本随意地执行，那么它就可以篡改页面内容，截获敏感数据。但是在受信任的双方传递数据，JSONP是非常合适的选择。AJAX是不跨域的，而JSONP是一个是跨域的，还有就是二者接收参数形式不一样！

 

7、请解释一下JavaScript的同源策略。

 

在客户端编程语言中，如javascript和 ActionScript，同源策略是一个很重要的安全理念，它在保证数据的安全性方面有着重要的意义。同源策略规定跨域之间的脚本是隔离的，一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法。那么什么叫相同域，什么叫不同的域呢？当两个域具有相同的协议, 相同的端口，相同的host，那么我们就可以认为它们是相同的域。同源策略还应该对一些特殊情况做处理，比如限制file协议下脚本的访问权限。本地的HTML文件在浏览器中是通过file协议打开的，如果脚本能通过file协议访问到硬盘上其它任意文件，就会出现安全隐患，目前IE8还有这样的隐患。

 

8、浏览器的内核分别是什么?

 

IE: trident内核

Firefox：gecko内核

Safari：webkit内核

Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核

Chrome：Blink(基于webkit，Google与Opera Software共同开发)

 

9、浏览器是如何渲染页面的？

 

渲染的流程如下：

1.解析HTML文件，创建DOM树。

自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。

2.解析CSS。优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式；

3.将CSS与DOM合并，构建渲染树（Render Tree）

4.布局和绘制，重绘（repaint）和重排（reflow）

 

10、从输入url到显示页面，都经历了什么

 

第一步：客户机提出域名解析请求,并将该请求发送给本地的域名服务器。

第二步：当本地的域名服务器收到请求后,就先查询本地的缓存,如果有该纪录项,则本地的域名服务器就直接把查询的结果返回。

第三步：如果本地的缓存中没有该纪录,则本地域名服务器就直接把请求发给根域名服务器,然后根域名服务器再返回给本地域名服务器一个所查询域(根的子域)的主域名服务器的地址。

第四步：本地服务器再向上一步返回的域名服务器发送请求,然后接受请求的服务器查询自己的缓存,如果没有该纪录,则返回相关的下级的域名服务器的地址。

第五步：重复第四步,直到找到正确的纪录。

第2种解释：

一般会经历以下几个过程：

1、首先，在浏览器地址栏中输入url

2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。

3、在发送http请求前，需要域名解析(DNS解析)(DNS（域名系统，Domain Name System）是互联网的一项核心服务，它作为可以将域名和IP地址相互映射的一个分布式数据库，能够使人更方便的访问互联网，而不用去记住IP地址。)，解析获取相应的IP地址。

4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。（TCP即传输控制协议。TCP连接是互联网连接协议集的一种。）

5、握手成功后，浏览器向服务器发送http请求，请求数据包。

6、服务器处理收到的请求，将数据返回至浏览器

7、浏览器收到HTTP响应

8、读取页面内容，浏览器渲染，解析html源码

9、生成Dom树、解析css样式、js交互

10、客户端和服务器交互

11、ajax查询