一些面试题收集整理

作者: Observer_____ | 来源:发表于2018-03-18 16:00 被阅读0次

1.自我介绍：

介绍学校专业、应聘岗位。在大二下学期的时候，开始接触学习前端，如今已经一年了，一开始是做慕课网的任务，学习了html、css和js，以及参考GIthub优秀的代码，博客园上的文章。

2、JS的数据类型：

ES5的有undefine、null、Number、String、Object、Boolean、引用类型。ES6新增了Symbol。

3、JS的事件流：

捕获阶段、触发阶段、冒泡阶段
window->document->body->div->text

4、页面加载过程，就是输入url到加载出页面

输入地址
2.浏览器查找域名的IP地址，这一步包括DNS具体的查找过程：浏览器缓存、系统缓存、路由器缓存
浏览器向web服务器发送一个HTTP请求
4.服务器重定向响应（从example.com到www.example.com）
5.浏览器追踪重定向地址
6.服务器返回HTTP响应
7.浏览器显示HTML
8.浏览器发送请求获取嵌套在HTML中的资源（图片、视频、css、js）
9.浏览器发送异步请求

5.状态码

1xx：信息性状态码：接受的请求正在处理
2xx：成功状态码：请求正常处理完毕
3xx：重定向状态码：需要进行附加操作以完成请求
4xx：客户端错误状态码：服务器无法处理请求
5xx：服务器错误状态码：服务器处理请求出错

6.路由器的缓存

每个路由器根据所在网络的不同，都有自己的路由表，在工作时会选择相应的路径。为什么要有路由器缓存呢，这个也是为了发送数据，因为路由器最高层一般都是网络层，网络层一般都是传送数据包，数据包又是经过应用层向下传送之后送来的一部分文件数据，如果我们没有缓存的话，那么，每次都会查找传送到达方的ip地址就会很费力。

7.跨域

跨域是为了规避同源政策的限制。
（1） Cookie、LocalStorage 和 IndexDB 无法读取。
（2） DOM 无法获得。
（3） AJAX 请求不能发送。
CORS是跨源资源分享（Cross-Origin Resource Sharing）的缩写。它是W3C标准，是跨源AJAX请求的根本解决方法。相比JSONP只能发GET请求，CORS允许任何类型的请求。

8.CORS原理

CORS需要浏览器和服务器同时支持。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。
只要同时满足以下两大条件，就属于简单请求。
（1) 请求方法是以下三种方法之一：
HEAD
GET
POST
（2）HTTP的头信息不超出以下几种字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

非简单请求有PUT DELETE，或者Content-Type字段的类型是application/json。
详解：http://www.ruanyifeng.com/blog/2016/04/cors.html

9.闭包

闭包也就是指有权访问另一个函数作用域的函数而已。常用的创建闭包的方法就是在函数内部创建另一个函数。

function a(){
    var a;
    // ...
    return function(){
        // 这里可以引用a函数里面的作用域，也就是可以使用a
        // 而且a函数作用域无法使用这里的值。
    }
}

10.cookie、SessionStorage、LocalStorage的区别

cookie  localStorage    sessionStorage

①由谁初始化客户端或服务器，服务器可以使用Set-Cookie请求头。客户端客户端
②过期时间手动设置永不过期当前页面关闭时
③在当前浏览器会话（browser sessions）中是否保持不变取决于是否设置了过期时间是否
④是否与域名（domain）相关联是否否
⑤要是否随着每个 HTTP 请求发送给服务器是，Cookies 会通过Cookie请求头，自动发送给服务器否否
⑥容量（每个域名） 4kb 5MB 5MB
⑦访问权限任意窗口任意窗口当前页面窗口

11.移动端的触摸事件

移动端的触摸事件有了解不？
在这里，我回答说我之前的项目经验基本都是PC端的所以不了解，但是面试官建议我去了解一下，毕竟基础知识一定要扎实，才会在前端的路上走的更远。所以，我就红宝石了解了一下，这里也介绍给大家吧。

触摸事件指的是指的是用户将手指放在屏幕上，在屏幕上滑动到将手指从屏幕移开触发的事件，具体来说，有以下触摸事件的产生。

touchstart: 当手指触摸屏幕时候触发；
touchmove: 当手指在屏幕上滑动的时候连续触发；可以调用阻止默认事件preventDefault()阻止屏幕滚动；
touchend: 手指离开屏幕时触发；
touchcancel: 系统停止跟踪触摸时触发；
以上的这些时间都会冒泡，而且都可以取消冒泡，而且，对于以上事件也提供了和鼠标事件中常用的属性：bubble,cancelable,view,clientX,clientY,screenX,screenY,detail,altKey,shiftKey,ctrKey和metaKey。

除了上面这些属性外，触摸事件还提供了下面这些属性：

touches: 跟踪返回Touch对象的数组；
targetTouchs: 特定事件目标的Touch对象的数组；
changeTouchs: 上次触摸以来改变了的Touch对象的数组；
每个Touch对象包含一下的属性

clientX: 触摸目标在浏览器中的x坐标
clientY: 触摸目标在浏览器中的y坐标
identifier: 标识触摸的唯一ID。
pageX: 触摸目标在当前DOM中的x坐标
pageY: 触摸目标在当前DOM中的y坐标
screenX: 触摸目标在屏幕中的x坐标
screenY: 触摸目标在屏幕中的y坐标
target: 触摸的DOM节点目标。

11.作用域

作用域基本是用来隔离变量用的. 也是用来查找变量的. 如果找不到就会报错. 楼主说是查找属性感觉有一点不严谨. 如果是查找对象属性的话是寻着原型链来的找不到会报undefined

兼容性问题（IE和其他浏览器）（有没有实际解决过兼容性问题，有什么解决方法）
事件处理程序（html事件处理程序 dom0级处理程序 dom2级处理程序区别和具体用法）
事件冒泡（事件冒泡是怎样的如何阻止事件冒泡）
http协议的理解（各种状态码代表的含义）
get post相关问题（有什么区别什么情况下用get 什么情况下用post 如果用url传数据，但是数据很大，有2M，怎么办？提示：用iframe）
跨域的几种解决办法
了不了解node.js什么的

12.HTTP头部

13.HTTPS

14.W3C标准

1、什么是DOCTYPE
DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。其中的DTD(例如xhtml1-transitional.dtd)叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的DTD来解释你页面的标识，并展现出来。要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和CSS都不会生效。
XHTML 1.0 提供了三种DTD声明可供选择：
i) 过渡的(Transitional)：要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。
完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
ii) 严格的(Strict)：要求严格的DTD，你不能使用任何表现层的标识和属性，例如
。
完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
iii) 框架的(Frameset)：专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。
完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
注：DOCTYPE声明必须放在每一个XHTML文档最顶部，在所有代码和标识之上。
2、名字空间 namespace
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
通常我们HTML4.0的代码只是<html>，这里的"xmlns"是什么呢？
这个“xmlns”是XHTML namespace的缩写，叫做“名字空间”声明。XHTML是HTML向XML过渡的标识语言，它需要符合XML文档规则，因此也需要定义名字空间。又因为XHTML1.0不能自定义标识，所以它的名字空间都相同，就是"http://www.w3.org/1999/xhtml"。目前阶段我们只要照抄代码就可以了。
3、定义语言编码
<meta http-equiv=“Content-Type” content=“text/html; charset=gb2312” />
为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言，我们一般使用gb2312(简体中文)，制作多国语言页面也有可能用Unicode、ISO-8859-1等，根据你的需要定义。
注：如果忘记了定义语言编码,可能就会出现,你在DW(dreamweaver)做完一个页面，第二次打开时所有的中文变成了乱码。
4、Javascript定义
Js必须要用<script language="javascript" type="text/javascript">来开头定义，而不是原来的<script language=javascript>或干脆直接<script>，并且需要加个注释符，以保证不在不支持js的浏览器上直接显示出代码来。
例如：
<script language="javascript" type="text/javascript">
//<![CDATA[
function show_layout(selObj){
var n = selObj.options[selObj.selectedIndex].value;
document.getElementById('stylesheet').href = n;
}
//]]>
</script>

注：具体参考js规范。
5、CSS定义
CSS必须要用<style type=“text/css”>开头来定义，而不是原来的直接<style>，也不建议直接写在内容代码里如：<div style=”padding-left:20px;”></div>，并需要加个注释符
例如：
<style type="text/css" media="screen">

</style>
为保证各浏览器的兼容性，在写CSS时请都写上数量单位，例如：错误：.space_10{padding-left:10} 正确：.space_10 {padding-left:10px}
6、不要在注释内容中使用“--”
“--”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。
例如下面的代码是无效的：
正确的应用等号或者空格替换内部的虚线。
7、所有标签的元素和属性的名字都必须使用小写
与HTML不一样，XHTML对大小写是敏感的，<title>和<TITLE>是不同的标签。XHTML要求所有的标签和属性的名字都必须使用小写。例如：<BODY>必须写成<body>。大小写夹杂也是不被认可的，通常dreamweaver自动生成的属性名字"onMouseOver"也必须修改成"onmouseover"。
8、所有的属性必须用引号""括起来
在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。
例如：<height=80>必须修改为：<height="80">。
特殊情况，你需要在属性值里使用双引号，你可以用"，单引号可以使用'，例如：<alt="say'hello'">
9、把所有<和&特殊符号用编码表示
任何小于号（<），不是标签的一部分，都必须被编码为 <
任何大于号（>），不是标签的一部分，都必须被编码为 >
任何与号（&），不是实体的一部分的，都必须被编码为 &
错误：
http://club.china.alibaba.com/forum/thread/search_forum.html?action=SearchForum&doSearchForum=true&main=1&catcount=10&keywords=mp3
正确：
http://club.china.alibaba.com/forum/thread/search_forum.html?action=SearchForum&doSearchForum=true&main=1&catcount=10&keywords=mp3
10、给所有属性赋一个值
XHTML规定所有属性都必须有一个值，没有值的就重复本身。例如：
<td nowrap><input type="checkbox" name="shirt" value="medium" checked>必须修改为：
<td nowrap="nowrap"><input type="checkbox" name="shirt" value="medium" checked="checked" />
11、所有的标记都必须要有一个相应的结束标记
以前在HTML中，你可以打开许多标签，例如<p>和<li>而不一定写对应的</p>和</li>来关闭它们。但在XHTML中这是不合法的。XHTML要求有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个"/"来关闭它。
例如：<br />
<img height="80" alt="网页" title=”网页” src="logo.gif" width="200" />

特殊结束标记
错误：
Document.write("<td width="300"><a href="1.html">ok</a></td>");
正确:
Document.write("<td width="300"><a href="1.html">ok</a></td>");
在js中，原已结束的标签需要再转义再结束。

12、所有的标记都必须合理嵌套
同样因为XHTML要求有严谨的结构，因此所有的嵌套都必须按顺序，以前我们这样写的代码：
<p><b></p></b>必须修改为：<p><b></b></p>
就是说，一层一层的嵌套必须是严格对称。
错误：
<table><tr><form><td></td></form></tr></table>
正确：
<form><table><tr><td></td></tr></table></form>
13、图片添加有意义的alt属性
例如：<img src="logo.gif" width="100" height="100" align="middle" boder="0" alt="w3cschool" />
尽可能的让作为内容的图片都带有属于自己的alt属性。
同理：添加文字链接的title属性。
<a href="#" target="_blank" title="新闻新闻新闻新闻">新闻新闻…</a>，在一些限定字数的内容展示尤为重要，帮助显示不完成的内容显示完整，而不用考虑页面会因此而撑大。
14、在form表单中增加lable，以增加用户友好度
例如：
<form action="http://somesite.com/prog/adduser" method="post">
<label for="firstname">first name: </label>
<input type="text" id="firstname" />
<label for="lastname">last name: </label>
<input type="text" id="lastname" />
</form>