前端基础面试题收集

HTML基础
1、什么是<！DOCTYPE >？是否需要在HTML5中使用？
<！DOCTYPE>是关于页面写入了什么版本的HTML的指令。<！DOCTYPE>标记没有结束标记，它不区分大小写。
2、HTML5有哪些的新特性？

二维画图中的元素
媒体播放的和元素
支持本地存储
新的内容特定元素，如
<section>，<article>，<footer>，<header>，<nav>，<menu>
3、HTML5的优势有哪些？
标记/代码简洁
语义清晰
设备兼容特性
缓存式离线应用程序
网页多媒体特性
4、Canvas是什么？怎样写Canvas？
Canvas标画布，利用js在html渲染出图形
如果要在我们的HTML文档中添加Canvas标签，我们需要ID、宽度和高度。下面是如何将基本Canvas标签写入HTML文档的示例。
```
<canvas id="myFirstCanvas" width="100" height="100"> </canvas>
```

5、HTML5地理定位是什么？如何使用？
HTML5 地理定位用于定位用户的位置
HTML5 地理定位API用于获取用户的地理位置。
由于这会侵犯用户隐私，除非用户批准，否则该位置不可用。
使用 getCurrentPosition() 方法获取用户的位置。
如：

navigator.geolocation.getCurrentPosition(function(position){
//position.coords.latitude;
//position.coords.longitude 
})

6、Html5应用程序缓存和Html浏览器缓存有什么区别？
应用程序缓存是 HTML5 的重要特性之一，提供了离线使用的功能，让应用程序可以获取本地的网站内容，这个特性可以提高网站性能，它的实现借助于 manifest 文件

<!doctype html>  <html manifest=”example.appcache”>  …..  </html>

与传统浏览器缓存相比，它不强制用户访问的网站内容被缓存。
7、简要描述下最新的HTML5标准中的API是什么？

定时媒体回放
离线存储数据库
Canvase
文档编辑
拖放
跨文档消息传递
浏览器历史管理
MIME类型和协议处理程序注册
8、新的 HTML5 文档类型和字符集是？
HTML5文档类型：<!doctype html>
HTML5使用的编码<meta charset=”UTF-8”>
9、是IE8/IE7/IE6支持通过document.createElement方法产生的标签HTML5标签

JS基础
1、创建新节点
createDocumentFragment //创建新DOM片段
createElement //创建一个元素
createTextNode //创建一个文本节点

2、添加移除替换插入
appendChild() //添加
removeChild //移除
replaceChild //替换
insertBofore //插入

3、查找
getElementsByTagName() //通过标签名查找
getElementsByName() //通过元素的name属性查找
getElementById() //通过元素的id查找

4、指出document load和document ready的区别？
ready：页面的文档结构加载完成，不包括图片视频等非文字内容。
load：所有页面元素都加载完成
ready的速度比load快

5、从浏览器地址栏输入url到显示页面的步骤
1）浏览器会先检查缓存，缓存有效直接返回无效进行新请求
2）浏览器根据请求的URL，交给DNS域名解析，找到真实的服务器ip，然后浏览器组装一个http的get请求报文。
3）打开一个socket与目标IP地址端口建立TCP链接（三次握手）
4）TCP链接建立后发送HTTP请求
5）服务器接受请求并解析，将请求转发到服务程序,服务器将响应报文通过TCP连接发送回浏览器
6）浏览器接收HTTP响应，然后根据情况选择关闭TCP连接或者保留重用
7）浏览器对加载的资源进行语法解析，建立相应的数据内部结构。
8）解析html，创建dom树，自上而下的顺序
9）解析css，优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式；
10）将css与dom合并，构建渲染树
11）布局重绘重排，页面完成渲染。

6、常见的HTML状态码和他的含义

1XX：信息状态码
100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
2XX：成功状态码
200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求，但尚未处理
3XX：重定向
301 Moved Permanently 请求的网页已永久移动到新位置。
302 Found 临时性重定向。
303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。
304 Not Modified 自从上次请求后，请求的网页未修改过。
4XX：客户端错误
400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
401 Unauthorized 请求未授权。
403 Forbidden 禁止访问。
404 Not Found 找不到如何与 URI 相匹配的资源。
5XX: 服务器错误
500 Internal Server Error 最常见的服务器端错误。
503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。

7、说说JS的内存机制及垃圾回收机制
基本类型（number, string, boolean, null, undefined, symbol）是在栈的，而其他的引用类型都是在堆的。　　现在各大浏览器通常用采用的垃圾回收有两种方法：标记清除、引用计数。
1）标记清除
　　这是javascript中最常用的垃圾回收方式。当变量进入执行环境是，就标记这个变量为“进入环境”。从逻辑上讲，永远不能释放进入环境的变量所占用的内存，因为只要执行流进入相应的环境，就可能会用到他们。当变量离开环境时，则将其标记为“离开环境”。
　　垃圾收集器在运行的时候会给存储在内存中的所有变量都加上标记。然后，它会去掉环境中的变量以及被环境中的变量引用的标记。而在此之后再被加上标记的变量将被视为准备删除的变量，原因是环境中的变量已经无法访问到这些变量了。最后。垃圾收集器完成内存清除工作，销毁那些带标记的值，并回收他们所占用的内存空间。
2）引用计数
　　另一种不太常见的垃圾回收策略是引用计数。引用计数的含义是跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型赋值给该变量时，则这个值的引用次数就是1。相反，如果包含对这个值引用的变量又取得了另外一个值，则这个值的引用次数就减1。当这个引用次数变成0时，则说明没有办法再访问这个值了，因而就可以将其所占的内存空间给收回来。这样，垃圾收集器下次再运行时，它就会释放那些引用次数为0的值所占的内存。

8 、Node的特点是异步非IO阻塞、适合高并发，但不适合密集型计算
9、Ajax使用
全称： Asynchronous Javascript And XML
所谓异步，就是向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果它自己会根据设定进行后续操作，与此同时，页面是不会发生整页刷新的，提高了用户体验。
创建Ajax的过程：

创建XMLHttpRequest对象（异步调用对象）

var xhr = new XMLHttpRequest();
2) 创建新的Http请求（方法、URL、是否异步）

xhr.open(‘get’,’example.php’,false);
3) 设置响应HTTP请求状态变化的函数。
onreadystatechange事件中readyState属性等于4。响应的HTTP状态为200(OK)或者304(Not Modified)。
4) 发送http请求

xhr.send(data);
5) 获取异步调用返回的数据
注意：

页面初次加载时，尽量在web服务器一次性输出所有相关的数据，只在页面加载完成之后，用户进行操作时采用ajax进行交互。
同步ajax在IE上会产生页面假死的问题。所以建议采用异步ajax。
尽量减少ajax请求次数
ajax安全问题，对于敏感数据在服务器端处理，避免在客户端处理过滤。对于关键业务逻辑代码也必须放在服务器端处理。

10、 JavaScript有几种类型的值？你能画一下他们的内存图吗？
基本数据类型存储在栈中，引用数据类型（对象）存储在堆中，指针放在栈中。
两种类型的区别是：存储位置不同；原始数据类型直接存储在栈中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储；引用数据类型存储在堆中的对象,占据空间大、大小不固定,如果存储在栈中，将会影响程序运行的性能
引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。

11、栈和堆的区别？
栈（stack）：由编译器自动分配释放，存放函数的参数值，局部变量等；
堆（heap）：一般由程序员分配释放，若程序员不释放，程序结束时可能由操作系统释放。
12、eval是做什么的？
它的功能是把对应的字符串解析成JS代码并运行；应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。
13、null，undefined的区别？
null表示一个对象被定义了，但存放了空指针，转换为数值时为0。
undefined表示声明的变量未初始化，转换为数值时为NAN。
typeof(null) – object;
typeof(undefined) – undefined
14、[“1”, “2”, “3”].map(parseInt) 答案是多少？
[1,NaN,NaN]
15、关于事件，IE与火狐的事件机制有什么区别？如何阻止冒泡？
IE为事件冒泡，Firefox同时支持事件捕获和事件冒泡。但并非所有浏览器都支持事件捕获。jQuery中使用event.stopPropagation()方法可阻止冒泡;（旧IE的方法 ev.cancelBubble = true;）
16、如何判断一个对象是否属于某个类？
使用instanceof 即if(a instanceof Person){alert(‘yes’);}
17、Javascript中，执行时对象查找时，永远不会去查找原型的函数？
Object.hasOwnProperty(proName)：是用来判断一个对象是否有你给出名称的属性。不过需要注意的是，此方法无法检查该对象的原型链中是否具有该属性，该属性必须是对象本身的一个成员。
18、JS延迟加载的方式有哪些？
JS的延迟加载有助与提高页面的加载速度。
defer和async、动态创建DOM方式（用得最多）、按需异步载入JS
defer：延迟脚本。立即下载，但延迟执行（延迟到整个页面都解析完毕后再运行），按照脚本出现的先后顺序执行。
async：异步脚本。下载完立即执行，但不保证按照脚本出现的先后顺序执行。

VUE
1、如何防止花括号出来

<!--阻止花括号闪烁-->
<span v-cloak>{{msg}}</span>
<!--阻止花括号闪烁-->
<span v-text="msg"></span>
<!--2.0写法，v-html可以转义输出html-->
<span v-html="msg"></span>

Oject.keys() Array.from() new set([1,2]) map

前端基础面试题收集

猜你喜欢