首页 > > 网页制作 > Javascript >

前端面试题（三）

2019-03-13 23:33:15来源：博客园阅读 ()

1.px 和 em 和r em 的区别？

px像素，相对长度单位；

em相对长度单位，会继承父元素的字体大小；

rem相对长度单位，会根据节点html定义，不会受父元素的影响。

2.如何理解css的盒子模型？

盒子模型包含内容的大小，padding，border，margin

css盒子模型分为IE盒子模型和标准盒子模型；

IE盒子模型内容的宽高包含了padding和border。

3.css选择符有哪些？那些属性可以继承？优先级算法如何计算？css3新增伪类有哪些？

class，ID，标签，通配符 * ，伪类，子代，后代，相邻；

font-size，font-family，color，ul，li；

* 0

标签 1

class 10

ID 100

内联样式 1000

！imported 无穷大

计算时根据它的权重和来计算；

last-of-type ， last-child ， first-of-type ， first-child

4.push()，pop() ， shift() ， unshift()分别是什么功能？

push() 尾部插入；

pop() 尾部删除；

shift() 头部删除；

unshift() 头部插入；

5.什么是默认行为？什么是冒泡？如何禁止。

网页元素都有默认行为；

冒泡指事件由文档嵌套最深的元素接受，然后逐级向外传播；

通过stopPropagation() 方法用event对象在事件函数中调用阻止事件冒泡；

通过preventdefault() 方法用event对象在事件函数中调用阻止默认行为；

6.请给出异步加载js方案

动态创建<script>标签

示例：

<!DOCTYPE html>

<html>

<head>

　　　　(function () {

　　　　　　var s = document.createElement('script');

　　　　　　s.type = 'text/javascript';

　　　　　　s.src = "http://code.jquery.com/jquery-1.7.2.min.js";

　　　　　　var tmp = document.getElementsByTagName('script')[0];

　　　　　　tmp.parentNode.insertBefore(s, tmp);

　　　　})();

　　</script>

</head>

<body>

</body>

</html>

方案2：<script>标签的async="async"属性

async的定义和用法(是HTML5的属性)

async 属性规定一旦脚本可用，则会异步执行。

示例：

<script type="text/javascript" src="xxxxxxx.js" async="async"></script>

方案3：<script>标签的defer="defer"属性

defer 属性规定是否对脚本执行进行延迟，直到页面加载为止。

有的 javascript 脚本 document.write 方法来创建当前的文档内容，其他脚本就不一定是了。

如果您的脚本不会改变文档的内容，可将 defer 属性加入到 <script> 标签中，以便加快处理文档的速度。因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本，它将推迟对脚本的解释，直到文档已经显示给用户为止。

示例：

<script type="text/javascript" defer="defer"> 
　　alert(document.getElementById("p1").firstChild.nodeValue); 
</script>

7.$(document).ready() 是什么函数？为什么要用它？跟window.onload有什么区别？尝试实现ready方法。

$(document).ready()是jQuery中是入口函数。它能适应与所有浏览器；

window.onload是页面中的所有元素加载完成后才执行；

$(document).ready()是将页面中的DOM文档结构绘制完成就执行。

8.怎样添加，移除，移动，绘制，创建和查找节点。

（1）创建新节点

createDocumentFragment() //创建一个DOM片段

createElement() //创建一个具体的元素

createTextNode() //创建一个文本节点

（2）添加、移除、替换、插入

appendChild()

removeChild()

replaceChild()

insertBefore()

（3）查找

getElementsByTagName() //通过标签名称

getElementsByName() //通过元素的Name属性的值

getElementById() //通过元素Id，唯一性

9.简述一下css sprites及其优点。

css sprites ：精灵图/雪碧图

能够优化页面性能，减少图片的字节和http请求。

10.谈谈ES6 中的 let，const 声明。

let 类似于 var， let无法重复定义，块级作用域外无法读取块级作用域内的let声明的变量，let没有变量提升，无法在声明之前使用变量；

const是常量声明，一旦声明就不能更改，声明的变量是数组或者对象的时候，声明的只是一个引用地址并不是一个值，所以数组和对象中的值是可以改变的。

11.什么是闭包，如何使用它，为什么要使用它？

在函数中在嵌套一个函数，里面的函数能够访问外面函数中的变量，外部的变量是内部函数的一部分；

用外层函数包裹要保护的变量和内层函数，外层函数将内层函数返回到外部，调用外层函数，可以获得内层函数的对象，保存在外部变量中。

闭包能够有效的防治变量被污染；

12.什么是跨域？跨域请求资源的方法有哪些？

由于浏览器的同源策略，凡是发送请求 URL 的协议，域名，端口三者之间任意一个与当前页面地址不同即为跨域；

跨域请求资源方法：

proxy代理，jsonp ， cors

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

Ajax工作原理是

相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。

对于用户请求ajax引擎会做一些数据验证和数据处理，不是所有请求都提交给服务器，当需要从服务器读取新数据时由Ajax引擎代为向服务器提交请求。AJAX最大优点就是不刷新整个页面的前提下与服务器通信维护数据。

过程的话

第一步：创建一个ajax引擎对象，ie6的是new ActiveXObject其他浏览器是new一个xmlHttpRequest对象

第二步调用open方法启动一个请求以备发送，open方法传入三个参数请求类型，请求url和一个布尔值

第三步调用send方法发送

第四部处理回调函数onreadystatechange，当readState = 4 响应数据完成时并且2status=200请求成功的时候处理响应数据

注意：回调函数要写在open（）和send（）之前

Jsonp原理

动态创建一个script标签，利用script标签src属性访问没有限制，实现跨域。

web客户端通过与调用脚本一样的方式来调用跨域服务器上动态生成的js格式文件(后缀.json)，服务器之所以要动态生成json文件目的把客户端需要的数据装入进去。

允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住json数据这样客户端就可以随意定制自己的函数来自动处理返回数据

Ajax 和 jsonp的区别

1.ajax和jsonp的调用方式很像，目的一样，都是请求url，然后把服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装；

2.实质不同

　ajax的核心是通过xmlHttpRequest获取非本页内容

　jsonp的核心是动态添加script标签调用服务器提供的js脚本（后缀.json)

3.区别联系

　不在于是否跨域

　ajax通过服务端代理一样跨域

　jsonp也不并不排斥同域的数据的获取

4.jsonp是一种方式或者说非强制性的协议

　ajax也不一定非要用json格式来传递数据　

5.jsonp只支持get请求，ajax支持get和post请求

14.请解释GET/POST的区别，分别在什么场景下使用。

　　GET ：数据在地址栏中；

　　POST ：数据在请求体中；

在不同的网页需要接受同一个账号名的时候用GET；

在登录和注册提交的时候用POST；

总之获取数据用 GET，提交数据用POST。

15.call 与 apply 区别？

JavaScript中的每一个Function对象都有一个apply()方法和一个call()方法，它们的语法分别为：

/*apply()方法*/
function.apply(thisObj[, argArray])

/*call()方法*/
function.call(thisObj[, arg1[, arg2[, [,...argN]]]]);

它们各自的定义：

apply：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.apply(A, arguments);即A对象应用B对象的方法。

call：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.call(A, args1,args2);即A对象调用B对象的方法。

它们的共同之处：

都“可以用来代替另一个对象调用一个方法，将一个函数的对象上下文从初始的上下文改变为由thisObj指定的新对象”。

它们的不同之处：

apply：最多只能有两个参数——新this对象和一个数组argArray。如果给该方法传递多个参数，则把参数都写进这个数组里面，当然，即使只有一个参数，也要写进数组里。如果argArray不是一个有效的数组或arguments对象，那么将导致一个TypeError。如果没有提供argArray和thisObj任何一个参数，那么Global对象将被用作thisObj，并且无法被传递任何参数。

call：它可以接受多个参数，第一个参数与apply一样，后面则是一串参数列表。这个方法主要用在js对象各方法相互调用的时候，使当前this实例指针保持一致，或者在特殊情况下需要改变this指针。如果没有提供thisObj参数，那么 Global 对象被用作thisObj。

实际上，apply和call的功能是一样的，只是传入的参数列表形式不同。