题目来源是张雯莉的博客
这里粘过来是为了方便自己找一些答案什么的~望见谅
1. css3如何实现图片旋转？
答：（参考）
css3 的transform属性允许我们旋转、缩放和移动元素。 可以通过给它传递一个 rotate(度数) 值来旋转一个元素，正值表示顺时针方向旋转，负值表示逆时针方向旋转，旋转的中心点为元素的中心。
浏览器支持：Firefox 4+、Oprea 10+、Safari 3.1+、Chrome 8+、IE 9+
CSS代码：
1 .rotate{ 2 -ms-transform:rotate(90deg); /* IE 9 */ 3 -moz-transform:rotate(90deg); /* Firefox */ 4 -webkit-transform:rotate(90deg); /* Safari and Chrome */ 5 -o-transform:rotate(90deg); /* Opera */ 6 }
JS代码：
element.style.webkitTransform="rotate(-90deg)" element.style.MozTransform="rotate(-90deg)" element.style.msTransform="rotate(-90deg)" element.style.OTransform="rotate(-90deg)" element.style.transform="rotate(-90deg)";
2. JavaScript倒计时
- 用setInterval实现
<script type="text/javascript"> $(function(){ var second = 10; var div = $("div"); var timer; timer = setInterval(function(){ second--; if(second < 0){ alert("倒计时结束！"); clearInterval(timer); return; } div.html('还有'+second+'秒！'); },1000); }); </script>
- 用setTimeout实现
<script type="text/javascript"> $(function(){ var second = 10; var div = $("div"); var timer; function change(){ second--; if(second>=0){ div.html("还有"+second+"秒！"); timer = setTimeout(change,1000); } else { clearTimeout(timer); alert("倒计时结束！") } } timer = setTimeout(change,1000); }); </script>
3. setTimeout 和 setInterval 的区别
setTimeout 指定在某时间段后调用一次，setInterval 调用多次。使用setInterval，需要手动的停止tick触发。而使用方法中嵌套setTimeout，可以根据方法内部本身的逻辑不再调用setTimeout就等于停止了触发。
4. JavaScript如何处理异常
-
try...catch...
try{ ... } catch (err){ ... //弹出错误或异常处理 } -
throw
<script type="text/javascript"> try{ if(x>10) throw "err1"; else if(x<0) throw "err2" }catch(err){ ... }
-
.onerror
如果需要利用 onerror 事件，就必须创建一个处理错误的函数。你可以把这个函数叫作 onerror 事件处理器 (onerror event handler)。这个事件处理器使用三个参数来调用：msg（错误消息）、url（发生错误的页面的 url）、line（发生错误的代码行）。
<script> onerror = handleErr; function handleErr(msg,url,l){ //处理错误 return true or false; } </script>
eg：
<html> <head> <script type="text/javascript"> onerror=handleErr var txt="" function handleErr(msg,url,l) { txt="There was an error on this page.\n\n" txt+="Error: " + msg + "\n" txt+="URL: " + url + "\n" txt+="Line: " + l + "\n\n" txt+="Click OK to continue.\n\n" alert(txt) return true } function message() { adddlert("Welcome guest!") } </script> </head> <body> <input type="button" value="View message" onclick="message()" /> </body> </html>
则弹出：
5. JSON 和 XML 的优缺点
-
XML的优缺点
- XML的优点
- 格式统一，符合标准；
- 容易与其他系统进行远程交互，数据共享比较方便。
- XML的缺点
- XML文件庞大，文件格式复杂，传输占带宽；
- 服务器端和客户端都需要花费大量代码来解析XML，导致服务器端和客户端代码变得异常复杂且不易维护；
- 客户端不同浏览器之间解析XML的方式不一致，需要重复编写很多代码；
- 服务器端和客户端解析XML花费较多的资源和时间。
- XML的优点
-
.JSON的优缺点
- JSON的优点：
- 数据格式比较简单，易于读写，格式都是压缩的，占用带宽小；
- 易于解析，客户端JavaScript可以简单的通过eval()进行JSON数据的读取；
- 支持多种语言，包括ActionScript, C, C#, ColdFusion, Java, JavaScript, Perl, PHP, Python, Ruby等服务器端语言，便于服务器端的解析；
- 在PHP世界，已经有PHP-JSON和JSON-PHP出现了，偏于PHP序列化后的程序直接调用，PHP服务器端的对象、数组等能直接生成JSON格式，便于客户端的访问提取；
- 因为JSON格式能直接为服务器端代码使用，大大简化了服务器端和客户端的代码开发量，且完成任务不变，并且易于维护。
- JSON的缺点
- 没有XML格式这么推广的深入人心和喜用广泛，没有XML那么通用性；
- JSON格式目前在Web Service中推广还属于初级阶段。
- JSON的优点：
6. JavaScript 如何实现继承
1. 构造函数伪装
调用父级的构造函数——为了继承属性
Persion.call(this, name, sex);
2. 原型链
通过原型来继承父级的方法
Worker.prototype=Persion.prototype;//这样是引用，会影响父类
for (var i in Person.prototype)
{
Worker.prototype[i] = Person.prototype[i];
}
<script> function Person(){ this.sex = "female"; this.age=18; this.shouting = function(){ console.log("父类的方法"); } } //继承 function Worker(){ this.base = Person; } Worker.prototype = new Person; //为子类添加新的方法 Worker.prototype.typeC = function(){ console.log("Hello, 码农！") }; (function(){ var a = new Worker(); console.log(a.sex); //调用父类的属性 console.log(a.age); //调用父类的属性 a.shouting(); //调用父类的方法 a.typeC(); //调用子类的方法 })(); </script>
输出：
female
index_3.html:99 18
index_3.html:84 父类的方法
index_3.html:94 Hello, 码农！
JavaScript中创建自定义对象：
引入概念：原型（prototype）。我们可以简单的把prototype看做是一个模版，新创建的自定义对象都是这个模版（prototype）的一个拷贝 （实际上不是拷贝而是链接，只不过这种链接是不可见，给人们的感觉好像是拷贝）。
通过prototype创建自定义对象的一个例子：
<script> //构造函数 function Person(name,sex){ this.name=name; this.sex=sex; } //定义Person的原型，原型中的属性可以被自定义对象引用 Person.prototype = { getName: function(){ return this.name; }, getSex: function(){ return this.sex; } } //创建自定义对象（实例化类） var zhang = new Person("zhang","man"); console.log(zhang.getName()); //zhang </script>
为了证明prototype模版并不是被拷贝到实例化的对象中，而是一种链接的方式，请看如下代码：
<script> function Person(name,sex){ this.name=name; this.sex=sex; } Person.prototype.age=20; var zhang = new Person("zhang","man"); console.log(zhang.age); //20 //覆盖prototype中的age属性 zhang.age = 19; console.log(zhang.age); //19 delete zhang.age; //在删除实例属性age后，此属性值又从prototype中获取 console.log(zhang.age); //20 </script>
<script> function Person(name, age){ this.name = name; this.age = age; } Person.prototype.say = function(){ console.log('hello, my name is '+this.name); }; function Man(name,age){ Person.apply(this,arguments); } Man.prototype = new Person(); Man.prototype.sayMan = function(){ console.log('name is ' + this.name); } var man1 = new Man('joe'); var man2 = new Person('Amy'); Person.prototype.say2 = function(){ console.log("name is "+this.name); } console.log(man1.name); //joe man1.say(); //hello, my name is joe man2.say(); //hello, my name is Amy man1.sayMan(); //name is joe //man2.sayMan(); //man2.sayMan is not a function man1.say2(); //name is joe man2.say2(); //name is Amy </script>
最流行的：寄生组合继承
<script> function Person(name, age){ this.name = name; this.age = age; } Person.prototype.say = function(){ console.log('hello, my name is '+this.name); }; function Man(name,age){ Person.apply(this,arguments); } Man.prototype = Object.create(Person.prototype); Man.prototype.constructor = Man; var man1 = new Man("joe"); console.log(man1.name); //joe man1.say(); //hello, my name is joe </script>
7. 对闭包的理解
在程序语言范畴内的“闭包”指的是函数把其中的变量作用域都“包”在该函数的作用域内，形成一个“包”，外部函数无法访问内部变量。所以严格意义上来说，JavaScript 中的函数都是闭包。但我们常说的闭包，通常是指为了让外部函数访问到内部函数中变量，使内部函数返回一个函数，在其中操作内部变量。
8. RESTful 的操作名
-
PUT：创建新资源，修改已有资源
- GET：获取资源
- DELETE：删除某个资源
- POST：创建资源、提交表单、添加资源状态
9. HTTP 404、302、500、403 状态名是什么意思
- 200 OK //客户端请求成功
- 400 Bad Request //客户端请求有语法错误，不能被服务器所理解
- 401 Unauthorized //请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用
- 403 Forbidden //服务器收到请求，但是拒绝提供服务
- 404 Not Found //请求资源不存在，eg：输入了错误的URL
- 500 Internal Server Error //服务器发生不可预期的错误
- 503 Server Unavailable //服务器当前不能处理客户端的请求，一段时间后可能恢复正常
- 302 该资源原本确实存在，但已经被临时改变了位置；或者换个说法，就是临时的存在于某个临时 URL 下。通常会发送 Header 来暂时重定向到新的新位置。
- 301 Moved Permanently // - 资源的URI已被更新
10. 你认为前端是做什么的？
主要职责是与交互设计师、 视觉设计师协作，根据设计图用HTML和CSS完成页面制作。同时，在此基础之上，对完成的页面进行维护和对网站前端性能做相应的优化。
狭义的前端是实现设计师的设计稿；广义的前端是所有跟用户打交道的环节。
11. 模块化了解吗？
http://www.cnblogs.com/doublenet/p/4918306.html
12. position 的几种值？
fixed, absolute, static, relative
13. 如果一个元素 absolute，没设 left、top，位置是哪里？
相当于 static 的默认位置
14. 100px; padding:50px; border:1px; margin:50px 问 border 之间的距离？
200px, IE下某些版本是100px。如果指定了box-sizing: border-box，则距离都是 100px。
15. var a=["a","b","c","d"] 每过 1 秒 alert 一下数组中的值
方法1：
<script> var a = ["a", "b", "c", "d"]; var i = 0; var timer = setInterval(function(){ if(i < a.length) { alert(a[i++]); } else { clearInterval(timer); } },1000); </script>
方法2 用setTimeout
<script> var a = ["a", "b", "c", "d"]; var i = 0; var timer = null; function aler(){ if(i<a.length){ alert(a[i++]); timer = setTimeout(aler, 1000); } else { clearTimeout(timer); alert("wanle"); } } timer = setTimeout(aler,1000); </script>
使用闭包：
<script> var a = ["a", "b", "c", "d"]; var i = 0; for(var i = 0; i<a.length; i++){ (function(j){ setTimeout(function(){ alert(a[j]); },1000*j); })(i); } </script>
16.Ajax 请求需要做哪些事？
- 创建ajax对象：new XMLHttpRequest() 或 new ActiveXObject("Microsoft.XMLHTTP");
- 连接服务器: open(method , url, 是否异步)
- 发送请求 ：send()
- 接收返回：onreadystatechange
<script> //创建Ajax对象 var oAjax=null; if(window.XMLHttpRequest) { oAjax=new XMLHttpRequest(); } else { oAjax=new ActiveXObject("Microsoft.XMLHTTP"); //为解决ie6下不兼容问题 } //连接服务器 oAjax.open('GET','abc.txt',true); //open(方法，url，是否异步) //发送请求 oAjax.send(); //接收返回 oAjax.onreadystatechange=function () { if(oAjax.readyState==4); //完成. { if(oAjax.status==200); //200表示成功。 { alert('成功！'+oAjax.responseText); } } }; </script>
17. 如何加快页面加载速度？
http://www.cnblogs.com/MarcoHan/p/5295398.html
- 减少 HTTP 访问次数、
- CDN（内容发布网络）
- minify、
- 服务器增加缓存、
- CSS 放前面 JS 放后面、
- 图片压缩、
- CSS Sprite:
- 通过将多个图片融合到一副图里面，然后通过CSS的一些技术布局到网页上。特别是图片特别多的网站，如果能用css sprites降低图片数量，带来的将是速度的提升。
- 避免使用CSS表达式
- 使用外部的CSS和JavaScript
- 减少DNS查找
18. 为什么要减少 HTTP 访问次数？
浏览器进程请求链接的数目是有限的，如果有很多 HTTP 请求，有些就得等着；另外，建立 HTTP 链接的开销比较大，需要三次握手之类，而相对地，一次连接中文件大小的边际成本就很小。
只有10%-20%的最终用户响应时间花在接收请求的HTML文档上，剩下的80%-90%时间花在HTML文档所引用的所有组件(图片，script，css，flash等等)进行的HTTP请求上。
19. 从浏览器输入 URL 到页面渲染发生了什么事？
参考：http://www.cnblogs.com/kongxy/p/4615226.html
- 在浏览器中输入url，WebKit 调用其资源加载器加载该 URL 对应的网页
- 应用层DNS解析域名：客户端先检查本地是否有对应的IP地址，若找到则返回响应的IP地址。若没找到则请求上级DNS服务器，直至找到或到根节点。
- 应用层客户端发送http请求
- http请求包括请求报头和请求主体
- 请求报头包括请求的方法（GET/POST）、目标url、遵循的协议（http/https/ftp...），返回的信息是否需要缓存，以及客户端是否需要发送cookie等
- 传输层TCP传输报文（三次握手）
- 网络层IP协议查询MAC地址
- 数据到达数据链路层
- 服务器接收数据
- 服务器响应请求
- 服务器返回响应文件
- 页面渲染
- 当用户输入网页 URL 的时候，WebKit 调用其资源加载器加载该 URL 对应的网页。
- 加载器依赖网络模块建立连接，发送请求并接收答复。
- WebKit 接收到各种网页或者资源的数据，其中某些资源可能是同步或异步获取的。
- 网页被交给 HTML 解释器转变成一系列的词语（Token）。
- 解释器根据词语构建节点（Node），形成 DOM 树。
- 如果节点是 JavaScript 代码的话，调用 JavaScript 引擎解释并执行。
- JavaScript 代码可能会修改 DOM 树的结构
- 如果节点需要依赖其他资源，例如图片、CSS、视频等，调用资源加载器来加载它们，但是它们是异步的，不会阻碍当前 DOM 树的创建，直到 JavaScript 的资源加载并被 JavaScript 引擎执行后才继续 DOM 树的创建。 摘自《WebKit技术内幕》 另外，网上看到颗粒度非常细的回答，表示不明觉厉！
20. 在 network 中看到很多 JavaScript 是并行发的，但是这就叫异步加载吗？
21. CSS 的加载是异步的吗？表现在什么地方？
22. JavaScript 的多个模块怎么组织？