WEB前端面试题的纪录（一）
1、猎取非行间款式的函数：
function getStyle(obj, attr){
if (obj.currentStyle) {
return obj.currentStyle[attr];
}
else {
return getComputedStyle(obj, false)[attr];
}}
2、javascript的当地对象、内置对象和宿主对象：
当地对象为array、obj、regexp等可以new实例化的对象，如Array、RegExp、String、Boolean；
内置对象为global、Math 等不可以实例化的对象（没法在浏览器中发明global对象的存在，因为其属性和要领都被绑定在了window对象中）；
每一个宿主对象的完成都取决于差别的浏览器，即发生浏览器兼容性题目，其宿主为浏览器自带的document,window 等；
3、字符串反转：运用split()要领将字符串转化为数组，然后运用数组的reverse()反转要领将其反转，然后再运用join()要领将数组转化为字符串。
4、window.location.hash 返回的是什么：锚点。
5、window.location.reload()：革新当前页面
6、BOM对象有哪些：
window对象 ，是JS的最顶层对象，其他的BOM对象都是window对象的属性；
document对象，文档对象；
location对象，浏览器当前URL信息；
navigator对象，浏览器本身信息；
screen对象，客户端屏幕信息；
history对象，浏览器接见汗青信息；
7、bind(), live(), delegate()的辨别：
bind()： 绑定事宜，对新增添的事宜不起作用，要领用于将一个处置惩罚递次附加到每一个婚配元素的事宜上并返回jQuery对象。
live()： 要领将一个事宜处置惩罚递次附加到与当前挑选器婚配的一切元素（包含现有的或将来增添的）的指定事宜上并返回jQuery对象。
delegate()： 要领基于一组特定的根元素将处置惩罚递次附加到婚配挑选器的一切元素（现有的或将来的）的一个或多个事宜上
8、简述link和import的辨别：
（1）link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事件；@import属于CSS范畴，只能加载CSS；
（2）link援用CSS时，在页面载入时同时加载；@import须要页面网页完全载入今后加载；
（3）link是XHTML标签，无兼容题目；@import是在CSS2.1提出的，低版本的浏览器不支撑；
（4）link支撑运用Javascript掌握DOM去转变款式；而@import不支撑；
9、怎样优化本身的代码：
（1）代码重用：声明函数把全部历程封装起来；把他们弄成一些对象；
（2）防止全局变量（定名空间，封闭空间，模块化mvc..）AngularJS；
（3）拆分函数防止函数过于痴肥：单一职责准绳：层次越发清晰，更好的保护；
（4）恰当的诠释；
（5）内存治理，尤其是闭包中的变量开释；
（6）变量定名类型；
10、形貌web前端机能须要斟酌哪方面，优化思绪是什么：
（1）削减http要求：
1)小图弄成大图（雪碧图、精灵图）；
2)合理的设置缓存 localStorage 、cookie；
3)资本兼并、紧缩 html代码的最小化，紧缩体积：就是削减带宽；（2）一些小的js文件兼并成大的js文件；
（3）将外部的js文件置底；
11、简述readyonly与disabled的辨别：
readonly只针对input(text / password)和textarea有用，而disabled关于一切的表单元素都有用；
当表单元素在运用了disabled后，当我们将表单以POST或GET的体式格局提交的话，这个元素的值不会被通报出去，而readonly会将该值通报出去；
12、HTTP协定中，GET和POST有什么辨别：
get传送的数据长度有限定，post没有；
get经由过程url通报，在浏览器地点栏可见，post是在报文中通报；
get提交数据的类型是文本信息，post提交数据的类型是文本信息和二进制文件；
get传送的数据会缓存在url汗青状态，post不会被浏览器缓存；
离别实用什么场景：
post平经常使用于表单提交；
get平经常使用于简朴的数据查询，严厉要求不是那末高的场景；
13、HTTP状态音讯离别示意什么：
200：要求已胜利，要求所愿望的响应头或数据体将随此响应返回。
302：要求的资本暂时从差别的 URI响应要求。因为如许的重定向是暂时的，客户端应该继续向原有地点发送今后的要求。只需在Cache-Control或Expires中举行了指定的情况下，这个响应才是可缓存的。
304：假如客户端发送了一个带前提的 GET 要求且该要求已被许可，而文档的内容（自上次接见以来或许依据要求的前提）并没有转变，则服务器应该返回这个状态码。304响应制止包含音讯体，因而一向以音讯头后的第一个空行末端。
403：服务器已明白要求，然则拒绝实行它。
404：要求失利，要求所愿望获得的资本未被在服务器上发明。
500：服务器遇到了一个不曾预感的状态，致使了它没法完成对要求的处置惩罚。平常来说，这个题目都会在服务器端的源代码涌现错误时涌现。
14、枚举js数组类型中的经常使用要领：
要领 形貌
concat()：衔接两个或更多的数组，并返回结果。
join()：把数组的一切元素放入一个字符串。元素经由过程指定的分开符举行分开。
pop()：删除并返回数组的末了一个元素。
push()：向数组的末端增添一个或更多元素，并返回新的长度。
reverse()：倒置数组中元素的递次。
shift()：删除并返回数组的第一个元素。
slice()：从某个已有的数组返回选定的元素。
sort()：对数组的元素举行排序。
splice()：删除元素，并向数组增添新元素。
toSource()：返回该对象的源代码。
toString()：把数组转换为字符串，并返回结果。
toLocaleString()：把数组转换为当地数组，并返回结果。
unshift()： 向数组的开首增添一个或更多元素，并返回新的长度。
valueOf()： 返回数组对象的原始值
15、枚举经常使用的js框架以及离别实用的范畴：
jquery：简化了js的一些操纵，而且供应了一些非常好用的API。
jquery ui、jquery-easyui：在jqeury的基础上供应了一些经常使用的组件 日期，下拉框，表格这些组件。
require.js、sea.js（阿里的财宝）+》模块化开辟运用的。
jquery mobile：是jquery本身出的支撑挪动端网页开辟，不过非常笨重，然则功用非常壮大。
zepto：精简版的jquery，经常使用于手机web前端开辟功用,touch。
16、同步和异步的辨别：
同步：壅塞情势。
举例：浏览器向服务器要求数据，服务器比较忙，浏览器一向等着（页面白屏），直到服务器返回数据，浏览器才显现页面（张三叫李四去用饭，李四一向忙得不停，张三一向等着，直到李四忙完两个人一块去用饭）；即指一个历程在实行某个要求的时刻，若该要求须要一段时间才返回信息，那末这个历程将会一向守候下去，直到收到返回信息才继续实行下去；
异步：非壅塞情势。
举例：浏览器向服务器要求数据，服务器比较忙，浏览器可以自若的干本来的事变（显现页面），服务器返回数据的时刻关照浏览器一声，浏览器把返回的数据再衬着到页面，部份更新（张三叫李四去用饭，李四在忙，张三说了一声然后本身就去用饭了，李四忙完后本身去吃）；即指历程不须要一向等下去，而是继续实行下面的操纵，不论其他历程的状态。当有音讯返回体系会关照历程举行处置惩罚，如许可以进步实行的效力；
17、ajax的瑕玷：
（1）ajax不支撑浏览器back按钮；
（2）平安题目 AJAX暴露了与服务器交互的细节；
（3）对搜刮引擎的支撑比较弱；//不会实行你的js剧本，只会操纵你的网页源代码
（4）破坏了递次的非常机制；
（5）没法跨域要求，处理体式格局：jsonp；
18、盒子模子：
在网页中，一个元素占领空间的大小由几个部份组成，个中包含元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部份。这四个部份占领的空间中，有的部份可以显现响应的内容，而有的部份只用来分开相邻的地区或地区。4个部份一同组成了css中元素的盒模子。
19、行内元素有哪些，块级元素有哪些，空(void)元素有哪些：
行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素：即系没有内容的HTML元素，比方：br、meta、hr、link、input、img
20、CSS完成垂直程度居中：
div运用相对定位；指定宽高；top为50%；left为50%；此时div的左上极点居中，所以margin-left为负（-）宽的一半；margin-top为负（-）高的一半。
21、简述一下src与href的辨别：
href 是指向网络资本所在位置，竖立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。假如在文档中增添<link href=”common.css”rel=”stylesheet”/>，那末浏览器会辨认该文档为css文件，就会并行下载资本而且不会住手对当前文档的处置惩罚，因而发起使 用link体式格局来加载css，而不是运用@import体式格局。
src是指向外部资本的位置，指向的内容将会嵌入到文档中当前标签所在位置；在要求src资本时会将其指向的资本下载并运用到文档内，比方js剧本，img图片和frame等元素。当浏览器剖析到该元素时，会停息其他资本的下载和处置惩罚，直到将该资本加载、编译、实行终了，图片和框架等元素也云云，相似于将所指向资本嵌入当前标签内，因而要将js剧本放在底部而非头部。
src用于替代当前元素，href用于在当前文档和援用资本之间建立联络。
22、什么是CSS Hack：
平常来说是针对差别的浏览器写差别的CSS,就是 CSS Hack。
IE浏览器Hack平常分为三种：前提Hack、属性级Hack、挑选符Hack
比方：
（1）前提Hack：
[if IE]
<style>
.test{color:red;}
</style>
[endif]
（2）属性Hack：
.test{
color:#090\9; /* For IE8+ */
*color:#f00; /* For IE7 and earlier */
color:#ff0; /* For IE6 and earlier */
}
（3）挑选符Hack：
* html .test{color:#090;} /* For IE6 and earlier */
* + html .test{color:#ff0;} /* For IE7 */
23、px和em的辨别：
px和em都是长度单元，辨别是，px的值是牢固的，指定是若干就是若干，盘算比较轻易，是相对长度单元，像素是相关于显现器屏幕分辨率而言的；
em得值不是牢固的，而且em会继续父级元素的字体大小；
注：浏览器的默许字体高都是16px，所以未经调解的浏览器都相符: 1em=16px；那末12px=0.75em, 10px=0.625em；
pt是印刷业上常运用的单元，磅的意义，平经常使用于页面打印排版，16px = 1em = 12pt =100%。
24、文雅降级和渐进加强：
渐进加强 progressive enhancement：针对低版本浏览器举行构建页面，保证最基础的功用，然后再针对高等浏览器举行结果、交互等革新和追加功用到达 更好的用户体验。
文雅降级 graceful degradation：一最先就构建完全的功用，然后再针对低版本浏览器举行兼容。
辨别：
（1）文雅降级是从庞杂的近况最先，并试图削减用户体验的供应；
（2）渐进加强则是从一个非常基础的，可以起作用的版本最先，并不停扩大，以顺应将来环境的须要；
（3）降级（功用衰减）意味着往回看；而渐进加强则意味着朝前看，同时保证其基础处于平安地带；
25、Doctype：一种规范通用标记言语的文档声明类型。
<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可示知浏览器文档运用哪一种 HTML 或 XHTML 类型。（重点：通知浏览器根据何种类型剖析页面）。
Doctype是严厉情势照样混淆情势，怎样触发这两种情势，辨别它们有何意义：
Doctype用于声明文档运用那种类型（html/Xhtml）平常为 严厉 过渡 基于框架的html文档。到场XMl声明可触发，剖析体式格局变动成IE5.5 具有IE5.5的bug。
26.DIV+CSS的规划较table规划有什么长处：
（1）改版的时刻更轻易 只需改css文件；
（2）页面加载速率更快、构造化清晰、页面显现简约；
（3）表现与构造相星散；
（4）易于优化（seo）搜刮引擎更友爱，排名更轻易靠前；
27、Img标签中的alt属性和title属性的异同：
alt(alt text):为不能显现图象、窗体或applets的用户代办（UA），alt属性用来指定替代笔墨。替代笔墨的言语由lang属性指定。(在IE浏览器下会在 没有title时把alt当做 tool tip显现)。
title(tool tip):该属性为设置该属性的元素供应发起性的信息。
28、strong标签和em标签的异同：
strong:粗体强调标签，强调，示意内容的重要性。
em:斜体强调标签，更猛烈强调，示意内容的强调点。
29、一个网站有大批的图片，加载很慢，有哪些要领优化这些图片的加载，给用户更好的体验：
（1）优化图片的大小；
（2）用耽误加载手艺：
1)图片懒加载，在页面上的未可视地区可以增添一个滚动条事宜，推断图片位置与浏览器顶端的间隔与页面的间隔，假如前者小于后者，优先加载；
2)假如为幻灯片、相册等，可以运用图片预加载手艺，将当前展现图片的前一张和后一张优先下载；
3)假如图片为css图片，可以运用CSSsprite，SVGsprite，Iconfont、Base64等手艺；
4)假如图片过大，可以运用迥殊编码的图片，加载时会先加载一张紧缩的迥殊凶猛的缩略图，以进步用户体验；
5)假如图片展现地区小于图片的实在大小，则因在服务器端依据营业须要先行举行图片紧缩，图片紧缩后大小与展现一致；
30、行内元素和块级元素的详细辨别是什么，行内元素的padding和margin是不是可以设置：
块级元素会独有一行,默许情况下；其宽度自动填满其父元素宽度；可设margin,padding；
行内元素不会独有一行,相邻的行内元素会分列在一致行里,直到一行排不下,才会换行,其宽度随元素的内容而变化;
margin-top/bottom、padding-top/bottom不可设；
31、形貌一个“reset.css”文件，并怎样运用它：
Reset重置浏览器的css默许属性 浏览器的种类差别，款式差别，然后重置，让他们一致。
32、对WEB规范以及W3C的明白与熟悉：
标签闭合、标签小写、稳定嵌套、进步搜刮机械人搜刮概率、运用外链css和js剧本、构造行动表现的星散、文件下载与页面速率更快、内容能被更多的用户所接见、内容能被更普遍的装备所接见、更少的代码和组件，轻易保护、改版轻易，不须要变动页面内容、供应打印版本而不须要复制内容、进步网站易用性。
33、XHTML和HTML有什么辨别：
HTML是一种基础的WEB网页设想言语，XHTML是一个基于XML的置标言语；
最重要的差别：
XHTML 元素必需被正确地嵌套；
XHTML 元素必需被封闭；
XHTML标署名必需用小写字母；
XHTML 文档必需具有根元素；
34、CSS引入的体式格局有哪些：内联 内嵌 外链 导入
35、CSS挑选符有哪些，优先级算法怎样盘算，内联和important哪一个优先级高:
标签挑选符 类挑选符 id挑选符
Id>class>标签挑选
important优先级高
36、前端页面有哪三层组成，离别是什么，作用是什么：
构造层 HTML示意层 CSS 行动层 JS
37、css的基础语句组成：
挑选器{属性1:值1;属性2:值2;……}
38、各个浏览器的内核离别是什么：
IE浏览器内核为：Ie内核（Trident）
火狐浏览器内核为：Gecko
谷歌浏览器为：webkit
opear浏览器为：Presto
safari浏览器为：webkit
39、诠释css sprites，怎样运用：
css精灵：把一堆小的图片整合到一张大的图片上，减轻服务器对图片的要求数目。
40、浏览器规范情势和奇异情势之间的辨别是什么：
盒子模子；衬着情势的差别；
注：运用 window.top.document.compatMode 可显现为何情势。
41、怎样对网站的文件和资本举行优化，期待的处理方案包含：
（1）文件兼并
（2）文件最小化/文件紧缩
（3）运用CDN托管
（4）缓存的运用
42、消灭浮动的几种体式格局，各自的优瑕玷：
（1）运用空标签消灭浮动：clear:both（理论上能清晰任何标签，但会增添无意义的标签）；
（2）运用overflow:auto（空标签元素消灭浮动而不能不增添无意代码的弊病,,运用zoom:1用于兼容IE）；
（3）是用afert伪元素消灭浮动(用于非IE浏览器)；
43、HTML语义化：
依据内容的构造化（内容语义化），挑选适宜的标签（代码语义化），便于开辟者浏览和写出更文雅的代码的同时，让浏览器的爬虫和机械更好的剖析。
语义化的优点：（1）在没有CSS的情况下，页面也能呈现出很好的内容构造；
（2）用户体验好；
（3）有利于SEO：可以和搜刮引擎竖立优越沟通，有助于爬虫抓取更多有用信息；
（4）轻易其他装备剖析；
（5）便于团队开辟与保护，语义化更具可读性；
44、Javascript的typeof返回哪些数据类型：
Object number function boolean underfind
45、枚举3种强迫类型转换和2种隐式类型转换：
强迫：parseInt(num) parseFloat() Number()
隐式：num*1 +num num-0 num/1
46、split() join() 的辨别：
前者是切割成数组的情势，后者是将数组转换成字符串。
47、数组要领pop() push() unshift() shift()：
push()：尾部增添 pop()：尾部删除
unshift()：头部增添 shift()：头部删除
48、IE和DOM事宜流的辨别：
（1）实行递次不一样；
（2）参数不一样；
（3）事宜加不加on；
（4）this指向题目；
49、ajax要求时get 和post体式格局的辨别：
（1）一个在url背面 一个放在假造载体内里；
（2）有大小限定；
（3）平安题目；
（4）运用差别，一个是论坛等只须要要求的，一个是相似修正暗码的；
50、call和apply的辨别：
Object.call(this,obj1,obj2,obj3);
Object.apply(this,arguments);
51、ajax要求时，怎样诠释json数据：
运用eval parse，鉴于平安性斟酌，运用parse更靠谱。
52、事宜托付是什么：
运用事宜冒泡的道理，让本身的所触发的事宜，让他的父元素替代实行。
53、闭包是什么：
闭包就是可以读取其他函数内部变量的函数。
54、诠释jsonp的道理，以及为何它不是真正的ajax：
jsonp：动态建立script标签，回调函数。
ajax是页面无革新要求数据操纵。
55、document load 和document ready的辨别：
Document.onload 是在构造和款式加载完才实行js。
Document.ready原生种没有这个要领，jquery中有 $().ready(function)。
56、”==”和”===”的差别：
前者会自动转换类型，后者不会。
57、javascript的同源战略：
一段剧本只能读取来自于一致泉源的窗口和文档的属性，这里的一致泉源指的是主机名、协定和端口号的组合。
58、编写一个数组去重的要领：
var arr = [1,2,3,4,5,6,5,4];
function removeRepeat() {
var newArr = [];
for(var i in arr) {
if(newArr.indexOf(arr[i])==-1) {
newArr.push(arr[i]);
}
}
return newArr;
}
console.log(removeRepeat(arr));
59、js冒泡排序：
var arr = [2,4,9,11,6,3,88]; //采纳冒泡排序，向上冒泡，最小值在最上边
for(var x = 0 ; x < arr.length; x++) {//掌握趟数
for(var y = x + 1 ; y < arr.length ; y++) { //顺次比较，假如背面的元素大于前面的元素则交流
if(arr[x] > arr[y]){
var temp = arr[x];
arr[x] = arr[y];
arr[y] = temp;
}
}
}
document.write(arr);
60、块级元素与内联元素的辨别是什么：
块级元素高度宽度都是可以设置的。块级元素默许状态下每次都占有一全部行，背面的内容也必需再新起一行显现。
非块级元素可以经由过程css的display:block;将其变动成块级元素；float也具有此功用。
内联元素的高度宽度都是不可以设置的，其宽度就是本身笔墨或许图片的宽度。内联元素的显现特性就是像文本一样的显现，不会零丁占有一个行。
块级元素可以经由过程css的display:inline;和float来完成。
块元素(block element)：
address - 地点
blockquote - 块援用
center - 举中对齐块
dir - 目次列表
div - 经常使用块级轻易，也是css layout的重要标签
dl - 定义列表
fieldset - form掌握组
form - 交互表单
h1 - 大题目
h2 - 副题目
h3 - 3级题目
h4 - 4级题目
h5 - 5级题目
h6 - 6级题目
hr - 程度分开线
isindex - input prompt
menu - 菜单列表
noframes - frames可选内容，（关于不支撑frame的浏览器显现此区块内容
noscript - ）可选剧本内容（关于不支撑script的浏览器显现此内容）
ol - 排序表单
p - 段落
pre - 格式化文本
table - 表格
ul - 非排序列表
内联元素(inline element)：
a - 锚点
abbr - 缩写
acronym - 首字
b - 粗体(不引荐)
bdo - bidi override
big - 大字体
br - 换行
cite - 援用
code - 盘算机代码(在援用源码的时刻须要)
dfn - 定义字段
em - 强调
font - 字体设定(不引荐)
i - 斜体
img - 图片
input - 输入框
kbd - 定义键盘文本
label - 表格标签
q - 短援用
s - 中划线(不引荐)
samp - 定义类型盘算机代码
select - 项目挑选
small - 小字体文本
span - 经常使用内联容器，定义文本内区块
strike - 中划线
strong - 粗体强调
sub - 下标
sup - 上标
textarea - 多行文本输入框
tt - 电传文本
u - 下划线
var - 定义变量
61、<label>标签中的for属性：绑定的元素会猎取核心；
<label>标签中的accesskey属性：快捷键猎取核心；
注：要将label绑定到其他控件上，label元素上的for属性要设置为与该控件的ID雷同；若要提交表单，要为label元素所绑定到的控件指定name。
62、iframe与frame辨别：
（1）frame不能离开frameset零丁运用，iframe可以；
（2）frame不能放在body中；
（3）iframe必需放在body中；
（4）iframe可以随便运用；
（5）frame的高度只能经由过程frameset掌握，iframe可以自在掌握；
63、Javascript基础特性：
（1）剧本言语（一种诠释型剧本言语，无需编译，直接运转）；
（2）基于对象；
（3）简朴（弱类型的变量类型）；
（4）跨平台（只依靠浏览器，与操纵体系无关）；
（5）嵌入式；
