前端笔试题整理
CSS
1、css reset是什么
每种浏览器对css的变现形式都可能不一样，为了默认未初始化的表现形式，一般使用reset.css文件进行样式初始化。
2、css sprites是什么，怎么实现？
css sprites又叫css精灵，如果页面使用太多图标，这样不利于页面加载，我们可以将所有图标放置到一张大图中按规则排列起来，然后我们按照需求从中取出对应位置的图形作为标签背景即可达到相应效果。
比如，先设置一个.sprites使其background-image：url(...)和backgr-repeat：no-repeat，即将大图设置为背景，然后需要的用到的地方设置.sprites属性，并使用background-position:(width:容器宽;height:容器高;x:x坐标;y:y坐标)来引用。
3、浏览器标准模式和怪异模式之间的区别是什么?
在html/css等标准出现之前，各大浏览器对页面的渲染效果有自己的处理方式，在html/css等标准出现之后，之后的浏览器版本一般都能支持这些标准，但是又不能让浏览器不能兼容之前版本的开发，所以浏览器保留了自己之前的那套标准，当有
<DOCTYPE>申明时启用标准模式进行渲染，否则使用怪异模式，依次来兼容旧版本非标准化。
使用window.top.document.compatMode可以查看当前浏览器模式。
4、你如何对网站的文件和资源进行优化?期待的解决方案包括？
1.文件合并
2.文件最小化/文件压缩
3.使用CDN托管
4.缓存的使用
5、什么是语义化的HTML?
就是让标签具有意义，比如
em和i标签，两者看似效果都是倾斜，但意义不同，前者是对文本进行划重点，后者则是文本倾斜。两者只是表现形式都是斜体罢了。让HTML语义化就是让文档和内容更有意义，让整体结构清晰，也便于搜索机器人进行文档处理。
6、清除浮动的几种方式，各自的优缺点
在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。一般有以下方法：
1.使用css属性clear:both（理论上能清楚任何标签，缺点是增加无意义的标签）
2.给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。
3.是用:afert伪元素清除浮动(用于非IE浏览器) ,给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。
7、CSS选择器有哪些？
类选择器、元素选择器、id选择器、属性选择器、派生选择器
一些实际的案例请参考：https://code.tutsplus.com/zh-hans/tutorials/the-30-css-selectors-you-must-memorize--net-16048
JavaScript
1、typeof的返回类型有哪些？
返回字符串,5种基本数据类型的返回：number,string,undefined,boolean,但null返回object，然后就是function申明的返回function类型。
2、js的数据类型有哪几种？例举3种强制类型转换和2种隐式类型转换?
js中的6种数据类型：number object string boolean null undefiine
强制转换比如：（parseInt,parseFloat）
隐式（== – ===）
为什么说是强制类型转换呢？看下图：
字符串转化为数字
3、split() join() 的区别
前者是切割成数组的形式，后者是将数组转换成字符串。（默认逗号）
4、数组方法pop() push() unshift() shift()
push()尾部添加 pop()尾部删除
unshift()头部添加 shift()头部删除
5、普通事件和绑定事件有什么不同？
普通事件中的onclick是DOM0级事件只支持单个事件，会被其他onclick事件覆盖，而事件绑定中的addEventListener是DOM2级事件可以添加多个事件而不用担心被覆盖。
6、IE和DOM事件流的区别
事件流其实就是指浏览器关于处理事件时的流向（顺序），分为冒泡流和捕获流。详细请参考：https://www.cnblogs.com/starof/p/4066381.html
冒泡流和捕获流
1.执行顺序不一样
2.参数不一样
3.事件加不加on
4.this指向问题
7、ajax请求的时候get 和post方式的区别
8、call()和apply()的区别
简单来说两者都是功能一致，
A.call(B,arg1,agr2,agr3) || A.apply(B(arguments))都是使用A方法调用B方法，但call参数不固定，apply只有两个参数，所以第二个参数为数组或类数组。
https://blog.csdn.net/ganyingxie123456/article/details/70855586
9、 json字符串转为json对象的方法及它们的区别
js自带了转换方法
Json.parse()和Json.eval()方法，但eval()方法不会检测是否符合json格式一并转换，所以存在安全为题。
另外，json对象转化为json字符串用Json.stringify()
https://blog.csdn.net/u014558484/article/details/71683622
10、js怎么获取非行间样式？
【ie】return obj.currentStyle[name];
【firefox】return getComputedStyle(obj,false)[name];
https://blog.csdn.net/github_33261002/article/details/50889663
11、事件委托是什么原理，有何优点？
事件委托又称为事件代理，利用了事件冒泡的特点，将具有相同事件的元素的事件交给父级元素处理，这样就不需要为事件一个一个的绑定事件，也不需要每次添加新元素就重新绑定一次事件。
https://www.cnblogs.com/liugang-vip/p/5616484.html
12、闭包是什么，有什么特性，对页面有什么影响？（难点）
https://blog.csdn.net/gaoshanwudi/article/details/7355794
Javascript闭包的定义非常晦涩——闭包，是指语法域位于某个特定的区域，具有持续参照（读写）位于该区域内自身范围之外的执行域上的非持久型变量值能力的段落。这些外部执行域的非持久型变量神奇地保留它们在闭包最初定义（或创建）时的值（深连结）。
简单来说，Javascript闭包就是在另一个作用域中保存了一份它从上一级函数或作用域取得的变量（键值对），而这些键值对是不会随上一级函数的执行完成而销毁。周爱民说得更清楚，闭包就是“属性表”，闭包就是一个数据块，闭包就是一个存放着“Name=Value”的对照表。就这么简单。但是，必须强调，闭包是运行期概念，一个函数实例。
各种专业文献上的“闭包”（closure）定义非常抽象，很难看懂。我的理解是，闭包就是能够读取其他函数内部变量的函数。
由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。
闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
13、如何阻止事件冒泡和默认事件
event.stopPropagation() || window.event.cancelBubble = true;
event.preventDefault() || window.event.returnValue = false;
http://caibaojian.com/javascript-stoppropagation-preventdefault.html
14、添加 删除 替换 插入到某个接点的方法
obj.appendChidl(newnode)
obj.innersetBefore(newnode,existingnode)
obj.replaceChild(newnode,oldnode)
obj.removeChild(node)
15、解释jsonp的原理，以及为什么不是真正的ajax？
Ajax请求受到同资源策略的影响，即请求域和接收域不同的话，ajax会报错，这是安全措施，但是如果我们想实现跨域读取信息应该怎么实现呢？我们知道<script>标签可以通过src引用来实现跨域资源访问，同样，我们可以动态地创建<script>标签并设置src即可实现跨域读取json的需求。一些细节请参考以下链接：
https://blog.csdn.net/u011897301/article/details/52679486
16、javascript的本地对象，内置对象和宿主对象
1.本地对象就是js定义好的一些：Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError
2.ECMA-262 把内置对象（built-in object）定义为“由 ECMAScript 实现提供的、独立于宿主环境的所有对象，在 ECMAScript 程序开始执行时出现”。这意味着开发者不必明确实例化内置对象，它已被实例化了。
同样是“独立于宿主环境”。根据定义我们似乎很难分清“内置对象”与“本地对象”的区别。而ECMA-262 只定义了两个内置对象，即 Global 和 Math （它们也是本地对象，根据定义，每个内置对象都是本地对象）。
3.宿主对象简单来说就是浏览器提供的对象，一般有window、document等对象。
https://www.cnblogs.com/luckyXcc/p/5892896.html
17、== 和 ===的区别
18、数组去重的方法
一般都借助新的数组进行存储。
https://www.jb51.net/article/46154.htm
19、js怎么实现继承
在js中的对象一般由构造器和原型两部分构成，所以继承也可以分为这两部分进行继承。
首先是构造器constructor，我们可以返回父类实例的方法来进行构造器初始化，对于function，我们要么使用functionName()的()来执行，这个时候this指向window对象，要么使用new关键字进行实例化，这时候this指向实例化对象。另外，我们可以使用call() || apply()进行this指定。所以一般利用call() || apply()进行构造函数的继承。比如：
function Animal (name){
this.name=name;
this.type="animal";
}
function pig(name1,name2){
Animal.call(this,name1);//继承的属性
this.name2 = name2;//自己的属性
}
然后就是原型prototype的继承，但我们不能直接pig.prototype=annimal.prototype，这是因为=的赋值特性，我们使用=赋值时对于基本类型数据是传值，但是赋值类型数据是传地址，所以这样对原型直接赋值，那么在修改pig的原型时同时也修改了animal的原型。
所以我们同样需要实例化原型再作为子对象的原型。我们可以这样：
Animal.prototype={
say:function(){
alert("I'm an "+this.type+", my name is "+this.name);
}
}
function pig(name1,name2){
Animal.call(this,name1);//继承的属性
this.name2 = name2;//自己的属性
}
pig.prototype = new Animal();//构造函数和原型一并初始化
pig.constructor = pig;//所以这里的构造函数要恢复回来
pig.prototype.fly = function(){//pig自己的行为
alert("i can fly");
}
参考：http://blog.sina.com.cn/s/blog_7dfe67db0100xpar.html
20、编写一个函数，将URL地址解析为一个对象：
字符串一般操作。
function parseQueryString(argu){
var str = argu.split('?')[1];//key0=0&key1=1&key2=2
var result = {};
var temp = str.split('&');//["key0=0","key1=1","key2=2"]
for(var i=0; i<temp.length; i++)
{
var temp2 = temp[i].split('=');
result[temp2[0]] = temp2[1];
}
return result;
}
21、浅clone和深度clone
22、编写一个函数返回指定字符串的字节数
假设英文1字节，中文2字节。js的
String.charCodeAt(i)方法可以返回字符串中某字符的Unicode编码，而中文编码的Unicode码均大于255，利用这个特点我们便可以区别字符是中文还是英文。
function getStrBytes(str){
var len = str.length;
var i = 0,bytes = len;
for(i = 0;i < len;i++){
if(str.charCodeAt(i) > 255) bytes++;
}
return bytes;
}
23、alert()等换行的问题？
使用
\n或\r\n换行符即可。
24、按照格式 xxxx年xx月xx日xx时xx分xx秒动态显示时间 要求不足10的补0
js关于日期的对象为Data，我们可以利用Date对象提供的方法来解决这一问题：
window.onload = function(){
var date = new Date();
document.write("年份："+date.getFullYear()+"<br/>");
document.write("月份："+(date.getMonth()+1)+"<br/>");//注意，月份从0开始
document.write("日期："+date.getDate());
document.write("时："+ date.getHours()+"<br/>");
document.write("分："+ date.getMinutes()+"<br/>");
document.write("秒："+ date.getSeconds()+"<br/>");
document.write("<hr>");
document.write(date.toString()+"<br/>");
document.write(date.toLocaleString());
}
25、ajax？ajax的交互模型？ajax的跨域问题？
26、如何让一个浮动的元素居中？
我们一般可以使用margin:0 auto进行居中设置，但float属性存在是margin便不起作用了，这个使用我们可以设置<div>将浮动元素包裹起来，让外层div居中即可。
https://blog.csdn.net/renxinzhewudi/article/details/55805261
27、最最基本的基础知识应该掌握，而不是时时刻刻都依赖搜索引擎？
DOM结构：两个节点之间可能存在哪些关系以及如何在节点之间任意移动。（最简单的使用就是选择器的使用）
js常用的对象及其方法使用：
XMLHttpRequest对象及ajax相关知识
DOM操作：创建、添加、删除、移动、克隆、查找结点等。
事件：一般事件的使用和处理、事件的模型差异（冒泡||捕获）、事件涉及到的浏览器兼容问题。
严格模式和混杂模式的触发以及意义
盒模型:外边距、内边距和边框之间的关系，IE 8以下版本的浏览器中的盒模型有什么不同。
块级元素与行内元素——怎么用CSS控制它们、它们怎样影响周围的元素以及你觉得应该如何定义它们的样式。
浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。
HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由。
JSON——它是什么、为什么应该使用它、到底该怎么使用它，说出实现细节来。
