前端面试题20190212

最新推荐文章于 2024-08-15 20:53:53 发布

庚中

最新推荐文章于 2024-08-15 20:53:53 发布

阅读量215

点赞数

分类专栏：十四.面试题文章标签：前端面试题20190212

本文链接：https://blog.csdn.net/xiaodi520520/article/details/87308502

版权

十四.面试题专栏收录该内容

24 篇文章 3 订阅

订阅专栏

                                               兆信网络2019招聘面试题

1. DOCTYPE有什么作用?为什么html5只需要写成<!doctype html>?

答:

声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。（重点：告诉浏览器按照何种规范解析页面）.

html5不基于SGML（标准通用置标语言）,因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照他们应该的方式来运行）而HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

2. 针对存储大小,时间,与服务端交互方式三个方面描述cookies,sessionStorage和localstorage的区别?

答:
区别：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。

3. 清除浮动的方式有哪些?最优的方式是哪一种?

答:
1、父级div定义伪类：after和zoom（推荐）
2.在结尾处添加空div标签clear:both
3.父级div定义height
4.父级div定义overflow:hidden
5.父级div定义overflow:auto

4.请描述代码:

中每个属性所表示的含义?
答: 视口（快捷键：meta:vp）
在这里插入图片描述

5.页面导入样式时,使用link和@import有什么区别?

答:
在这里插入图片描述

6.html5新增了哪些语义化更好的内容元素?

答:
在这里插入图片描述

7.请描述出XML和JSON的4种区别?

答:
数据体积方面，JSON相对XML来讲，数据的体积小，传递的速度更快些
数据交互方面，JSON与JavaScript的交互更加方便，更容易解析处理，更好地进行数据交互
传输速度方面，JSON的速度要远远快于XML
数据描述方面，JSON对数据的描述性比XML较差

8.js有哪5种基本数据类型?(送分题)

JavaScript中有五种基本数据类型（也叫做简单数据类型）分别为：undefined、null、bolean、number、string；另外还含有一种复杂的数据类型：object

9.undefined和null的区别?

undefined是访问一个未初始化的变量时返回的值，而null是访问一个尚未存在的对象时所返回的值

10.js有哪些内置对象?

答:
javascript有如下内置对象
1.Array数组对象
2.string字符串
3.Math对象
4.Date日期对象

11.evel是做什么的?

把字符串参数解析成JS代码并运行，并返回执行的结果；
例如：

eval(“2+3”);//执行加运算，并返回运算值。
但它有作用域:
eval的作用域

	functiona(){
	 eval("var x=1"); //等效于 var x=1;
	 console.log(x); //输出1
	}
	a();
	console.log(x);//错误 x没有定义

说明作用域在它所有的范围内容有效

12.请列举出DOM的添加,移除,移动,复制,创建和查找节点操作的方法(每种情况至少一个方法)?

答:
（1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
（2）添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore()
（3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性
1.创建元素节点
document.createElement() 方法用于创建元素，接受一个参数，即要创建元素的标签名，返回创建的元素节点
1 var div = document.createElement(“div”); //创建一个div元素
2 div.id = “myDiv”; //设置div的id
3 div.className = “box”; //设置div的class
创建元素后还要把元素添加到文档树中
2.添加元素节点
appendChild() 方法用于向childNodes列表的末尾添加一个节点，返回要添加的元素节点
1 var ul = document.getElementByIdx(“myList”); //获得ul
2 var li = document.createElement(“li”); //创建li
3 li.innerHTML = “项目四”; //向li内添加文本
4 ul.appendChild(li); //把li 添加到ul子节点的末尾

13.请解释说明MVC和MVVM的意思?

答:
MVC:分别所指Model、View、Controller。 MVC为标准的设计模式，是官方推荐的权威的规范模式。视图（View）：用户交互界面。
控制器（Controller）：调节Modle和View的交互。
模型（Model）：业务逻辑模型(并非数据模型)
MVVM:分别所指Model、View | Controller、ViewModel。视图（View | Controller）：调用ViewModel的方法并响应变化。
视图模型（ViewModel）：业务逻辑。
模型（Model）：数据模型
在MVVM 中，view 和 view controller正式联系在一起，我们把它们视为一个组件

14.请列举出对性能优化的方法(至少5项)

答:
（1）减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存，图片服务器。
（2）前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
（3）用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
（4）当需要设置的样式很多时设置className而不是直接操作style。
（5）少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
（6）避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
（7）图片预加载，将样式表放在顶部，将脚本放在底部加上时间戳。
（8）避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。

15.什么是内存泄漏?前端编程容易导致内存泄漏的操作有哪些?

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。

setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
闭包
控制台日志
循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

16.请解释说明什么是闭包?

“官方”的解释是：所谓“闭包”，指的是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。
通俗的讲：就是函数a的内部函数b，被函数a外部的一个变量引用的时候，就创建了一个闭包

17.$(document).ready()方法和window.onload有什么区别?

1、执行时机
　　window.onload方法是在网页中的所有的元素（包括元素的所有关联文件）都完全加载到浏览器之后才执行。而通过jQuery中的 $(d o c u m e n t) . r e a d y () 方法注册的事件处理程序，只要在 D O M 完全就绪时，就可以调用了，比如一张图片只要 < i m g > 标签完成，不用等这个图片加载完成，就可以设置图片的宽高的属性或样式等。 — — 其实从二者的英文字母可以大概理解上面的话， o n l o a d 即加载完成， r e a d y 即 D O M 准备就绪。 2 、注册事件$ (document).ready()方法可以多次使用而注册不同的事件处理程序，而window.onload一次只能保存对一个函数的引用，多次绑定函数只会覆盖前面的函数。