前端面试题

1、列举3个HTML5标签，3个CSS3新特性，3个ECMAScript 5新API。
<canvas> <video> <audio>
div圆角，阴影效果，媒体查询
Array.isArray
Array.IndexOf
Array.lastIndexOf

2、2种方式，实现某DIV元素以50px每秒的速度左移100px。

3、怎样实现javascript代码的异步加载
html5提供了一个async的属性
javascript有一个defer属性
区别：前者不能保证加载的js文件能按照顺序执行，所以两个js文件不能相互依赖

8、用JS实现一个数组合并的方法（要求去重）。
Array.prototype.hebing=function(arr2){
var arr=this.concat(arr2);
for(var i=0;i<arr.length;i++){
for(var j=i+1;j<arr.length;j++){
if(arr[i]==arr[j]){
arr.splice[j,1];
j--;
}
}
}

}

9、使用正则表达式给所有string对象添加trim方法。
String.prototype.trim=function(){
return this.replace(/(^\s*)|(\s*$)/g,'')
}
String.prototype.trim=function(){
return this.replace(/(^\s*)|(\s*$)/g,'');
}

12、列举你经常访问的前端技术网站，并简单描述一下自己的职业规划。

开源中国

<b>和<strong>区别：HTML 标签 <b> 的意思是「bold」（粗体），它是一个单纯的样式标签，指定文本要用粗体。<strong> 是
一个带有着重意味的标签，浏览器通常也把它显示为粗体。

3）font-family:Tahoma;font-size:14px;line-height:22px;font-weight:bold;写出CSS的缩写
font:bold 14px/22px Tahoma;

5）说说CSS Sprite的优缺点
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，
“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。
优点：
1.利用CSS Sprites能很好地减少网页的http请求；
2.CSS Sprites能减少图片的字节；
3.解决了FE在图片命名上的困扰；
4.更换风格方便。
缺点：
1.在图片合并的造成多余的工作量；
2.开发过程中定位的麻烦；
3.修改麻烦，维护复杂
6）说说em和strong标签的语义
em 表示强调，strong 表示更强烈的强调
em 是句意强调，加与不加会引起语义变化。
strong 是重要性强调，和局部还是全局无关

附：（一些零散的面试题，大概记滴(*^__^*) ）
11）页面上有些图片需要放到最后加载，请基于jquery写一段大致的实现方法
13）用css实现鼠标悬浮在a元素上1秒后文字颜色变红
14）如何实现仅加载可视区域内的图片

15）用json表示一个数组，每个数组元素是一个对象，每个对象有两个属性
16）用json表示一个树结构（递归）
17）http请求状态码表示的意义
18）form标签里还有哪些属性
19）表单中有一些checkbox该如何提交值，name一样吗
一组复选框（checkbox）：一般将name设置为name[]，如果被选中，则在数组name中添加一个元素，在处理页面将如下获取值:
if(!empty($_POST['name'])){
for($i=0; $i< count($_POST['name']); $i++){
echo $array[$i].'<br />';
}
}

三大类：HTML,CSS,Javascript(jquery)

HTML:
1. 什么是语义化的HTML?有何意义？为什么要做到语义化？（高频率考题）

语义化的HTML就是写出的HTML代码，符合内容的结构化（内容语义化），选择合适的标签（代码语义化），
能够便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

有利于SEO，有利于搜索引擎爬虫更好的理解我们的网页，从而获取更多的有效信息，提升网页的权重。
在没有CSS的时候能够清晰的看出网页的结构，增强可读性。
便于团队开发和维护，语义化的HTML可以让开发者更容易的看明白，从而提高团队的效率和协调能力。
支持多终端设备的浏览器渲染。

2. 行内元素和块元素分别有哪些？（高频率）
行内元素：a span strong textarea
块元素：div p ul ol li

3. 严格模式与混杂模式的区分？如何触发这两种模式？（高频率）
在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。
浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。如果XHTML文档包含形式完整的DOCTYPE，
那么它一般以标准模式呈现,对于HTML 4.01文档，包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。
包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现，但是有过渡DTD而没有URI会导致页面以混杂模式呈现。
DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。

4. Doctype 是什么？有啥作用
DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，
它应该使用什么样的文档类型定义（DTD）来解析文档。

5. HTML与XHTML的区别
本质上无太大区别，XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
空标签也必须被关闭
XHTML 文档必须拥有根元素：所有的 XHTML 元素必须被嵌套于 <html> 根元素中。

8. Img的alt和title有啥区别？各自作用？
alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息，它会直接输出在原本加载图片的地方，
而title属性是在你鼠标悬停在该图片上时显示一个小提示，鼠标离开就没有了

9. HTML5的离线储存
jakii.manifest
{
CACHE MANIFEST
CACHE 1.html //需要缓存的文件
NETWORK 2.html //不需要缓存的文件

}

10. iframe有那些缺点？、
SEO不友好
用户不友好（框架结构有时会让人感到迷惑）
链接导航问题（必须正确设置链接，不然让用户很麻烦）

CSS:
2. CSS的导入方式：import与link方式的区别？优缺点？（高频率）
link属于XHTML标签，而@import完全是CSS提供的一种方式
加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），
link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载
兼容性的差别，link兼容性更好
@import不是dom可以控制的

3. CSS的优先级？内联和important哪个优先级高？（高频率）
important优先级高

5. 浮动元素清除浮动方法（高频率）
①使用无意义标签，比如：<p></p>,给p设置css样式：clear:both;
②使用overflow标签，在需要清除浮动的元素的父元素里面添加css样式：overflow：auto;

8. 谈谈CSS3 Media Queries
@media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}
也可以在引入外部css时候在link标签里面添加media属性

10.谈谈CSS hack
CSS hack由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，
或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，
得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，
能在不同的浏览器中也能得到我们想要的页面效果。
简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，
我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。
11.CSS中em和px的关系和区别
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸

Javascript：

7. 编写一个JavaScript函数 parseQueryString，它的用途是把URL参数解析为一个对象
varobj = parseQueryString(url);
alert(obj.key0) // 输出0

function parseQueryString(url){
var obj={};
var start=url.indexOf('?')+1;
var str=url.substr(start);
var arr=str.split('&');
for(var i=0;i<arr.length;i++){
var arr2=arr[i].split('=');
obj[arr2[0]]=arr2[1];
}

return obj;

}

function getObj(url){
var obj={};
var start=url.indexOf('?')+1;
var str1=url.substr(start);
var arr1=str1.split('&');
for(var i=0;i<arr1.length;i++){
tmp=arr1[i].split('=');
obj[tmp[0]]=tmp[1];
}
return obj;
}

10.Var a = ‘abc def ghi’,把每三个字中的首字母转为大写。
var a = "abc def ghi";
var arr1=a.split(' ');
for(var i=0;i<arr1.length;i++){
var tmp=arr1[i].split('');
tmp.unshift(tmp.shift().toUpperCase());
arr1[i]=tmp.join('');
}

var b=arr1[0].concat(' ',arr1[1],' ',arr1[2] );
alert(b);

12.JSON与XML的区别？优缺点？
14.写一个点击input能够弹出当前input索引的函数。
var inputs=document.getElementsByTagName('input');
for(var i=0;i<inputs.length;i++){
(function(){
var that=i;
inputs[that].onclick=function(){
alert(that);}
})(i);
}

15.==与===的区别
对于string,number等基础类型，==和===是有区别的
不同类型间比较，==之比较“转化成同一类型后的值”看“值”是否相等，===如果类型不同，其结果就是不等
同类型比较，直接进行“值”比较，两者结果一样

16.Null与undefined的区别
null表示"没有对象"，即该处不应该有值
undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义

18.Eval是啥？谈谈对它的理解
eval是把字符串当成javascript代码解析

其他：

2. 网站性能优化的方法（高频率）
后台：用memcached缓存
页面静态化
mysql优化
前台：将CSS放在页面顶端，JS文件放在页面底端
使用gzip压缩网页内容
尽量减少外部脚本的使用，减少javascript脚本的使用
sprite
3. 响应式布局（高频率）：就是一个网站能够兼容多个终端
4. 前端由哪些部分组成（高频率）
UI设计部分
html/css页面静态化
javascript客户端动态化
多媒体化

5. W3C标准是啥：结构（Structure）、表现（Presentation）和行为（Behavior）的一系列标准合集

7. 为什么利用多个域名来提供网站资源会更有效？
节约主域名的连接数，避免了大图片之类的并不一定重要的内容阻塞住主域名上其他后续资源的连接（比如ajax请求）。

15、前端页面有哪三层构成，分别是什么?作用是什么?
结构层 Html 表示层 CSS 行为层 js
16、你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?
Ie(Ie内核) 火狐（Gecko）谷歌（webkit） opear(Presto) safria

1.javascript的typeof返回哪些数据类型
Object number String function boolean underfind

2.例举3种强制类型转换和2种隐式类型转换?
强制（parseInt,parseFloat,number）
隐式（== – ===）

3、ajax请求时，如何解释json数据？
使用JSON.parse();
4、事件委托是什么？
让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！

18.javascript的本地对象，内置对象和宿主对象
本地对象为array obj regexp等可以new实例化
内置对象为gload Math 等不可以实例化的
宿主为浏览器自带的document,window 等

19.document load 和document ready的区别
Document.onload 是在结构和样式加载完才执行js
Document.ready原生种没有这个方法，jquery中有 $().ready(function)

20，indexOf:查找某个字符在字符串里面位置
charAt:查找某个位置的字符串
21.fixed relative absolute static 定位区别

static：没有定位
relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。相对于原先的位置的移动
absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

22、css属性overflow属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。正确

23、 flash和js通过什么类如何交互?
ExternalInterface

24，关于跨域的理解：通过修改document.domain来跨子域
使用window.name来进行跨域
域名、端口相同，协议不同，属于相同的域（错误）

25，写出结果：
<SCRIPT LANGUAGE=""JavaScript>
var a="undefined";
var b="false";
var c="";
function assert(aVar){
if(aVar)
alert(true);
else
alert(false);
}
assert(a);
assert(b);
assert(c);
</SCRIPT>
true true false

26.domContentLoaded事件早于onload事件
HTTP状态码302表示暂时性转移
IE6/7/8不支持事件捕获

27，HTML5的离线储存？
localStorage 长期存储数据，浏览器关闭后数据不丢失；sessionStorage 数据在浏览器关闭后自动删除。

28、语义化的理解？
用正确的标签做正确的事情！html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

29、怎样让一个浮动的div水平居中：外边套一个div即可
怎样让一个div垂直居中？
div{
position:absolute;
width:100px;
height:100px;
top:50%;
margin-top:-50px;
}

30,Node.js的适用场景？
高并发、聊天、实时消息推送

31、IE与火狐的事件机制有什么区别？如何阻止冒泡？
事件处理机制：IE是事件冒泡、火狐是事件捕获； ev.stopPropagation();

32、"use strict";是什么意思 ? 使用它的好处和坏处分别是什么？
好处：消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;- 消除代码运行的一些不安全之处，
保证代码运行的安全；- 为未来新版本的Javascript做好铺垫。
坏处：现在网站的JS 都会进行压缩，一些文件用了严格模式，而另一些没有。这时这些本来是严格模式的文件，被 merge 后，
这个串就到了文件的中间，不仅没有指示严格模式，反而在压缩后浪费了字节

33、DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
当前对象为node
返回父节点：node.parentNode
返回所有子节点：node.childNodes（包含文本节点及标签节点）
返回第一个子节点：node.firstChild
返回最后一个子节点： node.lastChild
返回同属上一个子节点：node.nextSibling
返回同属下一个子节点：node.previousSibling

34、new操作符具体干了什么呢?
1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中。

35、模块化怎么做？
立即执行函数,不暴露私有成员

36、jquery是怎么实现json转为字符串再转换回去的
jQuery中没有提供这个功能，所以你需要先编写两个jQuery的扩展：
$.fn.stringifyArray = function(array)
{
return JSON.stringify(array)

}
$.fn.parseArray = function(array)
{
return JSON.parse(array)
}

37、
什么是渐进增强（progressive enhancement）、优雅降级（graceful degradation）呢？

　　渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

　　优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

　　区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

38、对Node的优点和缺点提出了自己的看法？
*（优点）因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求，因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。
*（缺点）Node是一个相对新的开源项目，所以不太稳定，它总是一直在变，而且缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子。

39、优化网站性能方法：
（1）减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存，图片服务器。
（3）使用外部js+css，可以被缓存。
（4）当需要设置的样式很多时设置className而不是直接操作style。
（5）少用全局变量、缓存DOM节点查找的结果。
（6）避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
（7）图片预加载，将样式表放在顶部，将脚本放在底部
（8）避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。
40、var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
alert('1.' + this.name);
return function(){
return this.name;
};
}
};
var func = object.getNameFunc();//1+my object
alert('2.' + func()); //2+the window
alert('3.' + func.call(object));//3+my object
alert('4.' + func.apply(object));//4+my object

41、用js实现一个电话号码提取的方法。
例如：" 1852145998 020-888-999845 测试 021 - 85421987, 19865754"
得到的结果应该是[1852145998, 020-888-999845 , 021 - 85421987, 19865754]

var str='1852145998 020-888-999845 测试 021 - 85421987, 19865754';
var reg=/(1\d+)|(0\d{2}(\s*-\s*\d+)+)/g;
alert(str.match(re));

42、从输入网址，到用户看到页面，发生了什么？？
①浏览器分析链接指向页面url
②浏览器向DNS请求解析对于网址的ip地址
③域名系统的DNS解析出对应服务器的ip地址
④浏览器与对应服务器建立TCP连接
⑤浏览器发出取文件命令
⑥服务器给出响应，把文件发给浏览器
⑦释放TCP连接，浏览器显示网页

43、javascript变量声明提升：当前作用域内的声明都会提升到作用域的最前面，包括变量和函数的声明
（即词法分析原则）

45、ajax跨域方法及其原理详解：
①jsonp方法：用一个<script>标签，引用其它域的js文件来
②通过修改document.domain来跨子域：iframe不同页面之间是不同域的，我们可以在两个页面都显式写上
document.domain='相同的域名'，该相同的域名必须是自身或者父域名
当要获取其它域名的东西时候，可以设置一个隐藏的iframe
③使用window.name来进行跨域：window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,
窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久
存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。
④使用代理服务器文件：比如php等

46、jquery自定义组件：
$.extend : 扩展工具方法下的插件形式 $.xxx() $.yyy()
$.fn.extend : 扩展到JQ对象下的插件形式 $().xxx() $().yyy()

①//扩展一个去左空格和去右空格的插件
$.extend({
leftTrim : function(str){
return str.replace(/^\s+/,'');
},
rightTrim : function(){},
aaa : function(){
alert(1);
},
bbb : function(){}
});
//使用：$.leftTrim(str);
②//编写拖拽插件：此处this指的是$('#div1'),其余地方与jquery一致
$.fn.extend({

drag : function(){
//this : $('#div1')
var disX = 0;
var disY = 0;

var This = this;

this.mousedown(function(ev){

disX = ev.pageX - $(this).offset().left;
disY = ev.pageY - $(this).offset().top;

$(document).mousemove(function(ev){

This.css('left' , ev.pageX - disX);
This.css('top' , ev.pageY - disY);

});

$(document).mouseup(function(){
$(this).off();
});

return false;
});
}
});

47、回流与重绘：
浏览器呈现页面过程：html形成dom树，css形成样式结构体，然后两者合成remder tree（渲染树），既包括内容，又包括样式，但
不包括隐藏的元素，因为不影响布局

1. 当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。
每个页面至少需要一次回流，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的部分失效，
并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。

2. 当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，
比如background-color。则就叫称为重绘。

注意：回流必将引起重绘，而重绘不一定会引起回流。
回流的花销也不小，如果每句JS操作都去回流重绘的话，浏览器可能就会受不了
注意：浏览器做了一些优化，若是自己操作属性，会提前flush渲染队列。因此需要手动优化，
方法如下：①直接改变className
②让要操作的元素进行”离线处理”，处理完后一起更新
a）使用DocumentFragment进行缓存操作,引发一次回流和重绘
b) 使用display:none技术，只引发两次回流和重绘；
c) 使用cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘；
③不要经常访问会引起浏览器flush队列的属性，如果你确实要访问，利用缓存（用一个变量缓存需要操作的属性）
④让元素脱离动画流，减少回流的Render Tree的规模

48、异步加载js文件方法：①jquery的getscript()方法
②用ajax方法

49、http状态码：1xx:需要客户端进行下一步动作才能响应
2xx:服务器响应成功
3xx：重定向
4xx：客户端出错
5xx:服务器端错误

50、ajax过程：
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.

(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.

(3)设置响应HTTP请求状态变化的函数.

(4)发送HTTP请求.

(5)获取异步调用返回的数据.

(6)使用JavaScript和DOM实现局部刷新.

51、web前端安全问题：XSS：跨域，客户端执行：利用服务器返回客户端输入错误信息而输入<script>代码段，在客户端执行从而攻击
CSRF：利用服务器对用户的信任来攻击（本地已经有cookie）
sql注入：

52、ie各版本和chrome可以并行下载多少个资源
ie6两个，其余6个

53、说几个常见的兼容问题？
阻止浏览器默认行为
阻止冒泡
事件处理
height：100px；（ie6，ie7，火狐都不同）
盒子模型等

54、网页浏览速度慢排查原因？
①网站服务器慢：ping url -t
②网络较慢
③是否有错误代码或者较大图片或者视频

55、html检查工具（HTML Tidy）

56、（1）第一次握手：建立连接时，客户端A发送SYN包（SYN=j）到服务器B，并进入SYN_SEND状态，等待服务器B确认。

（2）第二次握手：服务器B收到SYN包，必须确认客户A的SYN（ACK=j+1），同时自己也发送一个SYN包（SYN=k），即SYN+ACK包，此时服务器B进入SYN_RECV状态。

（3）第三次握手：客户端A收到服务器B的SYN＋ACK包，向服务器B发送确认包ACK（ACK=k+1），此包发送完毕，客户端A和服务器B进入ESTABLISHED状态，完成三次握手。

完成三次握手，客户端与服务器开始传送数据。

57、（1）客户端A发送一个FIN，用来关闭客户A到服务器B的数据传送。

（2）服务器B收到这个FIN，它发回一个ACK。

（3）服务器B关闭与客户端A的连接，发送一个FIN给客户端A。

（4）客户端A发回ACK报文确认。

58、请用CSS定义p标签，要求实现以下效果: 字体颜色在IE6下为黑色(#000000)；IE7下为红色(#ff0000)；而其他浏览器下为绿色(#00ff00)。
p{color:#0f0}
*p{color:#000}//ie6
_p{color:#f00}//ie7

59、var Obj = function(msg){
this.msg = msg;
this.shout = function(){
alert(this.msg);
}
this.waitAndShout = function(){
//隔五秒钟后执行上面的shout方法
}
}

60、Sea.js是一个很纯粹小巧的模块加载器，它只解决一个问题：前端代码的模块化。通过Sea.js，可以将大量JavaScript代码封装成一个个小模块，
然后轻松实现模块的加载和依赖管理。

61、CORS:
CORS定义一种跨域访问的机制，可以让AJAX实现跨域访问。CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。
实现此功能非常简单，只需由服务器发送一个响应标头即可。
假设我们页面或者应用已在 http://www.test1.com 上了，而我们打算从 http://www.test2.com 请求提取数据。一般情况下，
如果我们直接使用 AJAX 来请求将会失败，浏览器也会返回“源不匹配”的错误，"跨域"也就以此由来。
　　利用 CORS，http://www.test2.com 只需添加一个标头，就可以允许来自 http://www.test1.com 的请求，下图是我在PHP中的 hander() 设置，
“*”号表示允许任何域向我们的服务端提交请求：

HTML5标签兼容各个浏览器：
<script>
(function() {
if (!
/*@cc_on!@*/
0) return;
var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
var i= e.length;
while (i--){
document.createElement(e[i])
}
})()
</script>

HTML5 本地存储?
localstorage: 存储大
sessionStorage
cookie：存储小

HTTP 状态码？
200 成功
304 响应禁止包含消息体
500 服务器错误
404 页面不存在
300 重定向

前端开发优化方法：
1、图片优化 - 雪碧图
2、css 优化 - 简化代码、压缩代码
3、js优化 - 模块化开发

ajax：
什么是 AJAX ？
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。
这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

ajax 的交互模型？

基于数据缓存策略Ajax的人机交互模型
实现页面与服务器数据交互，从而使页面局部刷新。

同步和异步的区别？

同步是阻塞模式，异步是非阻塞模式。
同步：脚本会停留并等待服务器发送回复然后再继续
　异步：脚本允许页面继续其进程并处理可能的回复

如何解决跨域问题？
前端对于跨域的解决办法：
　　 (1) document.domain+iframe
　　 (2) 动态创建script标签

字符串常用的方法？（http://www.jb51.net/article/29547.htm）
1、charCodeAt方法返回一个整数，代表指定位置字符的Unicode编码。
2、fromCharCode方法从一些Unicode字符串中返回一个字符串。
3、charAt方法返回指定索引位置处的字符。如果超出有效范围的索引值返回空字符串。
4、slice方法返回字符串的片段。
5、substring方法返回位于String对象中指定位置的子字符串。
6、substr方法返回一个从指定位置开始的指定长度的子字符串。
7、indexOf方法放回String对象内第一次出现子字符串位置。如果没有找到子字符串，则返回-1。
8、lastIndexOf方法返回String对象中字符串最后出现的位置。如果没有匹配到子字符串，则返回-1。
9、search方法返回与正则表达式查找内容匹配的第一个字符串的位置
10、concat方法返回字符串值，该值包含了两个或多个提供的字符串的连接。
11、将一个字符串分割为子字符串，然后将结果作为字符串数组返回。
12、toLowerCase方法返回一个字符串，该字符串中的字母被转换成小写。
13、toUpperCase方法返回一个字符串，该字符串中的所有字母都被转换为大写字母。

数组常用的方法？（http://www.jb51.net/article/40503.htm）

1.shift()t:删除数组的第一个元素,返回删除的值。这里是0

2.unshift(3,4):把参数加载数组的前面，返回数组的长度。现在list:中是3,4,0,1,2

3.pop():删除数组的最后一个元素，返回删除的值。这里是2.

4.push(3):将参数加载到数组的最后，返回数组的长度，现在List中时：0,1,2,3

5.concat(3,4):把两个数组拼接起来。

js数组与字符串之间的转换？

一、数组转字符串需要将数组元素用某个字符连接成字符串，示例代码如下：

1 var a, b;
2 a = new Array(0,1,2,3,4);
3 b = a.join("-");

二、字符串转数组实现方法为将字符串按某个字符切割成若干个字符串，并以数组形式返回，示例代码如下：

1 var s = "abc,abcd,aaa";
2 ss = s.split(",");// 在每个逗号(,)处进行分解。

animations动画与transition动画的区别？

transition属性是一个简单的动画属性，非常简单非常容易用。可以说它是animation的简化版本，是给普通做简单网页特效用的。
如果在transition的动画当中，属性值有了新的变化，则会中断当前的动画执行，并将中断时的属性值提供给新的动画作为起始值来计算新的动画效果。

animations动画是transition属性的扩展。但是这个简单的介绍里面包含了不简单的东西：keyframes。
animation则根据这个keyframes提供的属性变化方式去计算元素动画当中的属性。
与 transition 不同的是，keyframes提供更多的控制，尤其是时间轴的控制，
这点让css animation更加强大，使得flash的部分动画效果可以由css直接控制完成，
而这一切，仅仅只需要几行代码，也因此诞生了大量（比起flash来说算是大量了）
基于css的animation tools，用来取代flash的动画部分。
另外在animation属性里面还有一个最重要的就是：animation-fill-mode，
这个属性标示是以(from/0%)指定的样式还是以(to/100%)指定的样式为动画完成之后的样式。
这个很方便我们控制动画的结尾样式，保证动画的整体连贯。

什么是响应式布局？

响应式布局：简单点说，就是做一个网站同时能兼容多个终端，由一个网站转变成多个网站，为我们大大节省了资源。
那么响应式布局的优点和缺点又有哪些呢？
优点：1.面对不同分辨率设备灵活性强
2.能够快捷解决多设备显示适应问题
缺点：不能完全兼容所有浏览器，代码累赘，加载时间加长。

响应式布局的开发原理是什么？
原理：简单点说响应式布局它是通过CSS中Media Query（媒介查询）@media功能，来判断我们的终端设备宽度在多少像素内，然后就执行与之对应的CSS样式。

HTML5常用的框架有哪些？

bootstrap【http://www.runoob.com/bootstrap/bootstrap-tutorial.html】
jq mobile【http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html】
easyui【http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html】

说出下面函数的执行结果

var a=10;
fun()
function fun(){
var a =a+10;
console.log(a);
return(a)
}
console.log(a)
console.log(fun())
}

看看下面alert的结果是什么？

function b(x,y,a){
arguments[2]=10;(arguments像数组，并不是真的数组，是一个Arguments对象可以代表传给函数的参数的个数)
alert(a)
}
b(1,2,3)

什么是闭包？

子函数能被外部调用到，则该作用连上的所有变量都会被保存下来。

编写一个方法求一个字符串的字节长度
<script language="javascript" type="text/javascript">
new function(s)
{
if(!arguments.length||!s) return null;
if(""==s) return 0;
var l=0;
for(var i=0;i<s.length;i++)
{
if(s.charCodeAt(i)>255) l+=2;
else l++;
}
alert(l);
}("你");
</script>

arguments 参数的集合
arguments[0]代表第一个参数
arguments.length代表参数的个数
!s s是参数 if(!s)是说参数不存在,执行return null;
charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。

编写一个方法，去掉一个数组中的重复元素？

var s = [0,2,3,4,4,0,2];
for(var i=0,o={},tmp=[],count=0,l=s.length;i<l;i++){
if(o[s[i]]){
count++;
}else{
o[s[i]]=1;
tmp.push(s[i])
}
}
alert(count);
alert(tmp)

去除字符串前后空格的办法？

var word = " good ";
word = word.replace(/(^\s*)(\s*$)/g, "");
alert(word);

用js编写一个方法,每次返回从1到100的任意整数

页面上有个人在选中图片并且把它选中的图片提交给后台;

posted @ 2015-11-20 16:56 努力跟随我阅读(731) 评论(1) 收藏举报

刷新页面返回顶部

努力跟随我

前端面试题

公告