0%
3245 字 --- 耗时5 分钟.

每天一道前端面试题(定期更新)

写在前面

马上快毕业了(实际上还有一年半),我本人倾向于前端的工作,想要加深对前端的理解,写了这篇博客,准备每天更新一道前端的面试题(看看能坚持多久吧)。

资料来源于网络,定期补充,临时抱佛脚的小伙伴可以直接浏览原帖:

对于一些我整理的解答,来自于以下参考:

一些开放性的试题

  • 自我介绍:除了基本个人信息以外,面试官更想听的是你与众不同的地方和你的优势。
  • 项目介绍
  • 如何看待前端开发?
  • 平时是如何学习前端开发的?
  • 未来三年的规划是怎样的?

面试有几点需注意:(来源寒冬winter 老师,github:@wintercn)

  1. 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。
  2. 题目类型: 理论知识、算法、项目细节、技术视野、开放性题、工作案例。
  3. 细节追问: 可以确保问到你开始不懂或面试官开始不懂为止,这样可以大大延展题目的区分度和深度,知道你的实际能力。因为这种知识关联是长时期的学习,临时抱佛脚绝对是记不住的。
  4. 回答问题再棒,面试官(可能是你面试职位的直接领导),会考虑我要不要这个人做我的同事?所以态度很重要、除了能做事,还要会做人。
  5. 资深的前端开发能把absolute和relative弄混,这样的人不要也罢,因为团队需要的是:你这个人具有可以依靠的才能(靠谱)。

2016-08-14

Q : position 的值, relative 和 absolute 分别是相对于谁进行定位的?

  • absolute :生成绝对定位的元素, 相对于最近一级的 定位不是 static 的父元素来进行定位,元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定
  • fixed (老IE不支持)生成绝对定位的元素,相对于浏览器窗口进行定位,元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定
  • relative 生成相对定位的元素,相对于其在普通流中的位置进行定位
  • static 默认值。没有定位,元素出现在正常的流中
  • inherit 子随父,常见的 CSS 值

2016-08-15

Q : 如何解决跨域问题

先搞懂一个问题,什么是跨域?广义的域是指域名,比如baidu.com 和 google.com,跨域访问,简单来说就是 A 网站的 javascript 代码试图访问 B 网站,包括提交内容和获取内容。

JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。对于跨域的总结,可以参考这篇文章 JavaScript跨域总结与解决办法

JSONP:

原理是:动态插入script标签,通过script标签引入一个js文件,这个js文件载入成功后会执行我们在url参数中指定的函数,并且会把我们需要的json数据作为参数传入。

由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源,为了实现跨域请求,可以通过script标签实现跨域请求,然后在服务端输出JSON数据并执行回调函数,从而解决了跨域的数据请求。

优点是兼容性好,简单易用,支持浏览器与服务器双向通信。缺点是只支持GET请求。

JSONPjson+padding(内填充),顾名思义,就是把JSON填充到一个盒子里

<script>  
    function createJs(sUrl){
        var oScript = document.createElement('script');
        oScript.type = 'text/javascript';
        oScript.src = sUrl;
        document.getElementsByTagName('head')[0].appendChild(oScript);
    }
    createJs('jsonp.js');
    box({
       'name': 'test'
    });
    function box(json){
        alert(json.name);
    }
</script>  

CORS

服务器端对于CORS的支持,主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置,就可以允许Ajax进行跨域的访问。

通过修改document.domain来跨子域

将子域和主域的document.domain设为同一个主域.前提条件:这两个域名必须属于同一个基础域名!而且所用的协议,端口都要一致,否则无法利用document.domain进行跨域

主域相同的使用document.domain

使用window.name来进行跨域

window对象有个name属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的,每个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的

使用HTML5中新引进的window.postMessage方法来跨域传送数据

还有flash、在服务器上设置代理页面等跨域方式。个人认为window.name的方法既不复杂,也能兼容到几乎所有浏览器,这真是极好的一种跨域方法。

2016-08-16

Q : XML和JSON的区别?

  1. 数据体积方面
    JSON相对于XML来讲,数据的体积小,传递的速度更快些。
  2. 数据交互方面
    JSON与JavaScript的交互更加方便,更容易解析处理,更好的数据交互。
  3. 数据描述方面
    JSON对数据的描述性比XML较差。
  4. 传输速度方面
    JSON的速度要远远快于XML。

2016-08-17

Q : 说说TCP传输的三次握手四次挥手策略

为了准确无误地把数据送达目标处,TCP协议采用了三次握手策略。用TCP协议把数据包送出去后,TCP不会对传送 后的情况置之不理,它一定会向对方确认是否成功送达。握手过程中使用了TCP的标志:SYNACK

发送端首先发送一个带SYN标志的数据包给对方。接收端收到后,回传一个带有SYN/ACK标志的数据包以示传达确认信息。 最后,发送端再回传一个带ACK标志的数据包,代表“握手”结束。 若在握手过程中某个阶段莫名中断,TCP协议会再次以相同的顺序发送相同的数据包。

断开一个TCP连接则需要“四次握手”:

  • 第一次挥手:主动关闭方发送一个FIN,用来关闭主动方到被动关闭方的数据传送,也就是主动关闭方告诉被动关闭方:我已经不 会再给你发数据了(当然,在fin包之前发送出去的数据,如果没有收到对应的ack确认报文,主动关闭方依然会重发这些数据),但是,此时主动关闭方还可 以接受数据。
  • 第二次挥手:被动关闭方收到FIN包后,发送一个ACK给对方,确认序号为收到序号+1(与SYN相同,一个FIN占用一个序号)。
  • 第三次挥手:被动关闭方发送一个FIN,用来关闭被动关闭方到主动关闭方的数据传送,也就是告诉主动关闭方,我的数据也发送完了,不会再给你发数据了。
  • 第四次挥手:主动关闭方收到FIN后,发送一个ACK给被动关闭方,确认序号为收到序号+1,至此,完成四次挥手。

2016-08-18

Q : TCP和UDP的区别

TCP(Transmission Control Protocol,传输控制协议)是基于连接的协议,也就是说,在正式收发数据前,必须和对方建立可靠的连接。一个TCP连接必须要经过三次“对话”才能建立起来

UDP(User Data Protocol,用户数据报协议)是与TCP相对应的协议。它是面向非连接的协议,它不与对方建立连接,而是直接就把数据包发送过去! UDP适用于一次只传送少量数据、对可靠性要求不高的应用环境。

2016-08-19

Q : onmousemove 和 onmouseover 的区别?

  • 时间上:onmousemove事件触发后,再触发onmouseover事件。
  • 按钮上:不区分鼠标按钮。
  • 动作上:onmouseover只在刚进入区域时触发,onmousemove除了刚进入区域触发外,在区域内移动鼠标,也会触发

关于这两个函数:

onmousemove 事件会在鼠标指针移动时发生。每当用户把鼠标移动一个像素,就会发生一个 mousemove 事件。这会耗费系统资源去处理所有这些 mousemove 事件。因此请审慎地使用该事件。

onmouseover 当鼠标指针移动到图像上时执行一段 JavaScript。

2016-08-20

Q : 说说你对闭包的理解

推荐看一下这篇博客,说的很不错学习Javascript闭包(Closure)

闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成"定义在一个函数内部的函数"。闭包就是将函数内部和函数外部连接起来的一座桥梁。

使用闭包需要注意:由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。

2016-08-22

Q : 创建ajax过程

  1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象.
  2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
  3. 设置响应HTTP请求状态变化的函数.
  4. 发送HTTP请求.
  5. 获取异步调用返回的数据.
  6. 使用JavaScript和DOM实现局部刷新.

2016-08-23

Q : Doctype作用?标准模式与兼容模式各有什么区别?

  1. 声明位于位于HTML文档中的第一行,处于 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
  2. 标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

2016-08-24

Q : 渐进增强和优雅降级

渐进增强 :针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 :一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

2016-08-25

Q : sql注入原理

就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令。总的来说有以下几点:

  1. 永远不要信任用户的输入,要对用户的输入进行校验,可以通过正则表达式,或限制长度,对单引号和双"-"进行转换等。
  2. 永远不要使用动态拼装SQL,可以使用参数化的SQL或者直接使用存储过程进行数据查询存取。
  3. 永远不要使用管理员权限的数据库连接,为每个应用使用单独的权限有限的数据库连接。
  4. 不要把机密信息明文存放,请加密或者hash掉密码和敏感的信息。

2016-08-26

Q : XSS原理及防范

Xss( cross-site scripting )攻击指的是攻击者往Web页面里插入恶意 html标签或者javascript代码。比如:攻击者在论坛中放一个看似安全的链接,骗取用户点击后,窃取cookie中的用户私密信息;或者攻击者在论坛中加一个恶意表单,当用户提交表单的时候,却把信息传送到攻击者的服务器中,而不是用户原本以为的信任站点。

XSS防范方法

首先代码里对用户输入的地方和变量都需要仔细检查长度和对”<”,”>”,”;”,”’”等字符做过滤;其次任何内容写到页面之前都必须加以encode,避免不小心把html tag 弄出来。这一个层面做好,至少可以堵住超过一半的XSS 攻击。

首先,避免直接在cookie 中泄露用户隐私,例如email、密码等等。

其次,通过使cookie 和系统ip 绑定来降低cookie 泄露后的危险。这样攻击者得到的cookie 没有实际价值,不可能拿来重放。

尽量采用POST 而非GET 提交表单

2016-08-27

Q : Web worker主线程

1.通过 worker = new Worker( url ) 加载一个JS文件来创建一个worker,同时返回一个worker实例。  
2.通过worker.postMessage( data ) 方法来向worker发送数据。  
3.绑定worker.onmessage方法来接收worker发送过来的数据。  
4.可以使用 worker.terminate() 来终止一个worker的执行。  

WebSocketWeb应用程序的传输协议,它提供了双向的,按序到达的数据流。他是一个HTML5协议,WebSocket的连接是持久的,他通过在客户端和服务器之间保持双工连接,服务器的更新可以被及时推送给客户端,而不需要客户端以一定时间间隔去轮询。

2016-08-28

Q : HTTP 和 HTTPS

HTTP协议通常承载于TCP协议之上,有时也承载于TLSSSL协议层之上,这个时候,就成了我们常说的HTTPS。

默认HTTP的端口号为80,HTTPS的端口号为443。

2016-08-29

Q : HTTP 和 HTTPS

因为网络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息,而如果使用HTTPS,密钥在你和终点站才有。https之所以比http安全,是因为他利用ssl/tls协议传输。它包含证书,卸载,流量转发,负载均衡,页面适配,浏览器适配,refer传递等。保障了传输过程的安全性

2016-08-30

Q : Javascript垃圾回收方法

标记清除(mark and sweep)

这是JavaScript最常见的垃圾回收方式,当变量进入执行环境的时候,比如函数中声明一个变量,垃圾回收器将其标记为“进入环境”,当变量离开环境的时候(函数执行结束)将其标记为“离开环境”。

垃圾回收器会在运行的时候给存储在内存中的所有变量加上标记,然后去掉环境中的变量以及被环境中变量所引用的变量(闭包),在这些完成之后仍存在标记的就是要删除的变量了

引用计数(reference counting)

在低版本IE中经常会出现内存泄露,很多时候就是因为其采用引用计数方式进行垃圾回收。引用计数的策略是跟踪记录每个值被使用的次数,当声明了一个 变量并将一个引用类型赋值给该变量的时候这个值的引用次数就加1,如果该变量的值变成了另外一个,则这个值得引用次数减1,当这个值的引用次数变为0的时 候,说明没有变量在使用,这个值没法被访问了,因此可以将其占用的空间回收,这样垃圾回收器会在运行的时候清理掉引用次数为0的值占用的空间。

在IE中虽然JavaScript对象通过标记清除的方式进行垃圾回收,但BOM与DOM对象却是通过引用计数回收垃圾的, 也就是说只要涉及BOM及DOM就会出现循环引用问题。

2016-08-31

Q : 你觉得前端工程的价值体现在哪

  1. 为简化用户使用提供技术支持(交互部分)
  2. 为多个浏览器兼容性提供支持
  3. 为提高用户浏览速度(浏览器性能)提供支持
  4. 为跨平台或者其他基于webkit或其他渲染引擎的应用提供支持
  5. 为展示数据提供支持(数据接口)

2016-09-01

Q : display:none和visibility:hidden的区别?

display:none隐藏对应的元素,在文档布局中不再给它分配空间,它各边的元素会合拢, 就当他从来不存在。

visibility:hidden隐藏对应的元素,但是在文档布局中仍保留原来的空间。

2016-09-05

Q : CSS中 link 和@import 的区别是?

  1. link属于HTML标签,而@import是CSS提供的;
  2. 页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;
  3. import只在IE5以上才能识别,而link是HTML标签,无兼容问题;
  4. link方式的样式的权重 高于@import的权重.

2016-09-06

Q : 介绍一下box-sizing属性?

box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box

  • content-box:让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定,设置width/height属性指的是content部分的宽/高
  • border-box:让元素维持IE传统盒模型(IE6以下版本和IE6~7的怪异模式)。设置width/height属性指的是border + padding + content

标准浏览器下,按照W3C规范对盒模型解析,一旦修改了元素的边框或内距,就会影响元素的盒子尺寸,就不得不重新计算元素的盒子尺寸,从而影响整个页面的布局。

2016-09-07

Q : 介绍一下box-sizing属性?

CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?

  1. id选择器( # myid)
  2. 类选择器(.myclassname)
  3. 标签选择器(div, h1, p)
  4. 相邻选择器(h1 + p)
  5. 子选择器(ul > li)
  6. 后代选择器(li a)
  7. 通配符选择器( * )
  8. 属性选择器(a[rel = "external"])
  9. 伪类选择器(a: hover, li:nth-child)

继承样式

  • 可继承的样式: font-size font-family color, text-indent;
  • 不可继承的样式:border padding margin width height;
  • 优先级就近原则,同权重情况下样式定义最近者为准;
  • 载入样式以最后载入的定位为准;

优先级为:

!important >  id > class > tag  

important 比 内联优先级高,但内联比 id 要高

CSS3新增伪类举例:

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。
:enabled  :disabled 控制表单控件的禁用状态。
:checked        单选框或复选框被选中。

2016-09-09

Q : CSS3有哪些新特性?

CSS3实现圆角(border-radius),阴影(box-shadow),
对文字加特效(text-shadow、),线性渐变(gradient),旋转(transform) transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
增加了更多的CSS选择器 多背景 rgba 在CSS3中唯一引入的伪元素是::selection. 媒体查询,多栏布局 border-image

2016-09-12

Q : 说说你对语义化的理解?

  1. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构
  2. 有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
  3. 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
  4. 便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。