前端面试题（三）

时间 2019-12-07

标签端面试题繁體版

原文原文链接

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

px像素，相对长度单位；javascript

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

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

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

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

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

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

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

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

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

* 0web

标签 1ajax

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的功能是同样的，只是传入的参数列表形式不一样。

16.什么是事件委托， jQuery 和原生 js 怎么去实现

利用事件冒泡，只指定一个事件处理程序，就能够管理某一类型的全部事件。

</ul>

Js:

var lis = document.getElementsByclassName(‘lis’);

lis.add

17.如何判断一个数组和一个类数组。

Object.prototype.toString.call()

18.清除浮动的几种方式。

在父级尾部添加一个空的 div ，div 添加 clear ： both

在父级设置 overflow ： hidden

使用伪元素

使用双伪元素 after 和 before；

19.简述一下你对 promise 的理解

Promise是最先由社区提出和实现的一种解决异步编程的方案，比其余传统的解决方案（回调函数和事件）更合理和更强大。

ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。

ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。

20.web 前端开发，如何提升页面性能优化？

详细参阅 35条雅虎军规！