前端精选面试题（10个）

前端精选面试题（10个）

1，求 y 和 z 的值是多少？

<script type="text/javascript">
	var x = 1;
	var y = 0;
	var z = 0;
	function add(n){n=n+1;}
	y = add(x);
	function add(n){n=n+3;}
	z = add(x);
</script>

答案：都为 undefined，因为没有返回值。

2， form 中的 input 可以设置为 readonly 和 disable，请问 2 者有什么区别？
答案：readonly 不可编辑，但可以选择和复制；值可以传递到后台。disabled 不能编辑，不能复制，不能选择；值不可以传递到后台。

3，JavaScript中有哪几种类型的错误？
答案：有三种类型的错误：
1，Load time errors:该错误发生与加载网页时，例如出现语法错误等情况，称为加载时间错误，并且会动态生成错误。
2，Run time errors：由于在HTML语言中滥用命令而导致的错误。
3，Logical Errors：这是由于在具有不同操作的函数上执行了错误逻辑而发生的错误。

4，JavaScript中使用new操作符都做了些什么？
答案：以下面这句代码为例子：

let obj = newTest();

new操作符一共做了三件事：
1，创建了一个空对象obj

let obj = {};

2,空对象 obj 的__proto__属性指向构造函数Test的prototype属性

Obj.__proto__ = Test.prototype;

3,执行构造函数，将Test的this指向obj

Test.call(obj);

---

5,一个页面从输入URL到页面加载显示完成，这个过程中都发生了什么？
答案：输入地址之后
1.浏览器查找域名的 IP 地址
2.这一步包括 DNS 具体的查找过程，包括：浏览器缓存->系统缓存->路由器缓存…
3.浏览器向 web 服务器发送一个 HTTP 请求
4.服务器的永久重定向响应（从 http://example.com 到 http://www.example.com）
5.浏览器跟踪重定向地址
6.服务器处理请求
7.服务器返回一个 HTTP 响应
8.浏览器显示 HTML
9.浏览器发送请求获取嵌入在 HTML 中的资源（如图片、音频、视频、CSS、JS等等）
10.浏览器发送异步请求

6，简述CSS中的5种布局定位方式？
答案：
1，absolute生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。
2，fiexd(老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。
3，relative生成相对定位的元素，相对于其正常位置进行定位。
4，static默认值。没有定位，元素出现在正常的流中，*（忽略top,bottom,left,right z-index声明）。
5，inherit规定从父类继承position属性的值。

7，HTML5的离线存储有几种方式？
答：有两种方式：
1，localStorage
长期存储数据，浏览器关闭后数据不丢失。
2，sessionStorage
数据在浏览器关闭后自动删除。
拓展问题：cookie,sessionStorage和localStorage的区别？
1，cookie在浏览器和服务器之间来回传递，而sessionStorage和localStorage不会
2，相对于cookie，sessionStorage和localStorage的存储空间更大，并拥有更多丰富易用的接口，sessionStorage和localStorage还有各自独立的存储空间

8，浮动元素引起的问题和解决方法？
答：引起的问题：
1，父元素的高度无法被撑开，影响与父元素同级的元素
2，与浮动元素同级的非浮动元素（内联元素）会跟随其后
3，若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
解决方法：
使用CSS中的clear:both;属性来清除元素的浮动可解决2，3问题，对于问题1，添加如下样式，给父元素添加clearfix样式；

.clearfix:after{content:“.”;display:block;
height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-block;}/*for IE/Mac*/

9，CSS3新增伪类都有哪些？
答：有如下六种
1，p:first-of-type选择属于其父元素的首个元素的每个元素
2，p:last-of-type选择属于其父元素的最后元素的每个元素
3，p:only-of-type选择属于其都元素唯一的元素的每个元素
4，p:only-child选择属于其父元素的唯一子元素的每个元素
p:nth-child(2)选择属于其父元素的第二个子元素的每个元素
5，:enabled:disabled控制表单控件的禁用态
6，:checked单选框或复选框被选中

10,JavaScript中的定时器是如何工作的？有什么缺点吗?
答：定时器用于在设定的时间执行一段代码，或者在给定的时间间隔内重复该代码。这通过使用函数setTimeout,setInterval和clearInterval来完成。
1，setTimeout(function,delay)函数用于启动在所述延迟之后调用特定功能的定时器。
2，setInterval(function,delay)函数用于在提到的延迟中重复执行给定的功能，只有在取消时才停止。
3，clearInterval(id)函数指示定时器停止。
缺点：
定时器在一个线程内运行，因此时间可能需要排队等待执行。