思路：左边栏宽度固定，设置左浮动，右边栏设置margin-left属性，值为左边栏的宽度。
盒模型可以帮助块级元素的定位和计算面积，简单来说W3C的盒模型包括content、padding、border。而IE得盒模型则有些不同，表现在设置宽高的时候，W3C模型下只包含content区域，而IE包括所有区域。
这样，在IE下，设置了宽高之后可以很放心的设定padding，但是对于W3C模型下，设置了宽高之后还要计算padding和border的区域。因此有一个方法叫做box-sizing:border-box。border-box将border和padding区域一同算进设定的宽高内。这样的话添加如下代码，就可以设定padding而用不担心超出设置区域。
div{ box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */}一个方法为tabel-cell，这种方法就是将每一个元素设置的尽可能的大，但由于自适应的特性，这三个元素还是会乖乖地等分的排在一行里。
方法二：
用百分比控制
*{ margin: 0; padding: 0;}.left,.right,.middle{ float:left; width:33.3%; margin-right: -4px//可以按照实际调整。}div{ transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari and Chrome */ -o-transform: translate(50px,100px); /* Opera */ -moz-transform: translate(50px,100px); /* Firefox */}div{ transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ -o-transform: rotate(30deg); /* Opera */ -moz-transform: rotate(30deg); /* Firefox */}div{ transform: skew(30deg,20deg); -ms-transform: skew(30deg,20deg); /* IE 9 */ -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */ -o-transform: skew(30deg,20deg); /* Opera */ -moz-transform: skew(30deg,20deg); /* Firefox */}div{ transform: scale(2,4); -ms-transform: scale(2,4); /* IE 9 */ -webkit-transform: scale(2,4); /* Safari 和 Chrome */ -o-transform: scale(2,4); /* Opera */ -moz-transform: scale(2,4); /* Firefox */}transition是指过渡，可以动画般显示出一个从样式到样式之间的过渡。
transform的属性包括一个你设定过渡的CSS属性，持续时间，时间曲线还有过渡开始的时间。
div{ transition-property: width; transition-duration: 1s; transition-timing-function: linear; transition-delay: 2s; /* Firefox 4 */ -moz-transition-property:width; -moz-transition-duration:1s; -moz-transition-timing-function:linear; -moz-transition-delay:2s; /* Safari 和 Chrome */ -webkit-transition-property:width; -webkit-transition-duration:1s; -webkit-transition-timing-function:linear; -webkit-transition-delay:2s; /* Opera */ -o-transition-property:width; -o-transition-duration:1s; -o-transition-timing-function:linear; -o-transition-delay:2s;}animation专门做动画的
animation就复杂多了：@keyframes可以有from to，也可以是百分比表示时间帧。
var elementList=document.querySelectorAll('a');var listLen=elementList.length;function handler (element,color){ return function(){ element.style.color=color; };}//添加事件方法function addEvent(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false); } else if(element.attachEvent){ element.attachEvent('on'+type,handler); }}//循环为元素添加事件for(i=0;i7. 事件委托什么是事件委托：通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。
也就是：利用冒泡的原理，把事件加到父级上，触发执行效果。
好处呢：1，提高性能。
这样我们就可以做到li上面添加鼠标事件。
但是如果说我们可能有很多个li用for循环的话就比较影响性能。
8. 添加一个类似email中checklist的双向联动做一个类似email里选择发件人的东西，勾选的时候添加到发件人，取消勾选的时候从发件人里面删除。由于是双向联动，因此要在发件人里点击的时候可以删除，并且取消勾选。好像说的有点乱，看下面代码。
其实主要还是事件绑定，然后添加节点，改变属性。
Kathy Vispervar emails=document.querySelectorAll('[name=email]');var showBox=document.querySelector('.showbox');var length=emails.length;//添加事件function addEvent(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false); } else if(element.attachEvent){ element.attachEvent('on'+type,handler); }}//循环，为每个checkbox添加事件for(var i=0;i9. Array的方法isArray()，判断是否为Array类型。
join()，将Array类型转换为字符串类型,并用join内的符号间隔开。
队列，栈的用法
push()，将数据项放到数组的后面。
pop()，将数组的最后一项删除并返回。
shift()，将数组的第一项删除并返回。
unshift()，将数据项放到数组的前面。
重排序的方法
reverse()，将数组逆序排列。
sort()，将数组由小到大排列。默认是按照字符串比较，也就是说15比5小。要按照数字排列的话，要设定方法：
var numlist = [0, 5, 15, 20, 10];function compare (value1, value2){ value2-value1;}var listsort = numlist.sort(compare);alert( listsort );//0, 5, 10, 15, 20 按照数值从小到大操作Array的方法
concat()，在原有meat数组上创建新数组
slice()，截取从指定位置开始到结束为止(不包含结束位置)的数组项赋给新数组，如果没有第二个参数，则截取从指定位置开始到结束的数组项赋给新数组
splice()，从指定位置(第一个参数)删除指定个数(第二个参数)并插入指定项目(’第三个参数”)
位置方法
indexOf()，从前向后查找位置索引。
lastIndexOf()，从后向前查找位置索引。
这两个方法支持第二个参数，既指定位置然后按照方法向前或向后查找位置。
遍历方法
every()中，每一项运行给定函数，每一项都返回true,??则返回true。
filter()中，每一项运行给定函数，返回true的项。
forEach()中，每一项运行给定函数，无返回。
map()中，每一项运行给定函数，返回调用结果组成的数组。
some()中，每一项运行给定函数，任意一项返回true，?则返回true。
归并方法
reduce()和reduceRight()都接受四个参数：前一个值，当前值，索引和数组对象。
reduce()是从左向右归并，当第一个值和第二个值运行过之后，结果将作为下一次运行的前一个值。
reduceRight()则是从右向左，归并方式与reduce()一样。
10. 给定字符串“abcba”，处理得到第一个不重复字母。function firstOnlyChar(str) { var str = str || '', i=0, k='', _char = '', charMap = {}, result = {name:'',index:str.length}; for(i=0;i11. AJAX过程，AJAX中如何区分get和post，get和post的区别AJAX算是听人说的最多的一个技术，无需加载整个页面的情况下进行局部更新。
再用AJAX技术与服务器交换数据时，首先创建一个XMLHttpRequest对象，在特立独行的IE里是ActiveXObject。
接着我们用open()方法和send()方法，使用get和post会有些区别。然后，请求会发送给服务器，服务器会响应触发onreadystatechange事件，当readyState=4（请求完成）且status=200时，说明服务器已经就绪。然后用responseText或responseXML属性去获得字符串或XML格式的数据。
var xmlhttp;if (window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest();}else{ //奇葩的IE5、6 xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');}xmlhttp.open('GET','response.php',true);xmlhttp.send();xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById('showBox').innerHTML=xmlhttp.responseText; } }在AJAX中区别get和post，就要详谈open()方法和send()方法。
get请求常用于向服务器查询信息。
在get请求中，open()的第一个参数为“get”，第二个参数为URL，第三个参数为是否为异步。由于get请求的URL中通常带有参数，这些参数必须要使用encodeURIComponent()方法进行编码，否则会有格式错误。这样send()方法内部的参数可以传入null，传入的参数也会转到URL中。
post请求常用于向服务器提交信息。
在post请求中，open()的第一个参数为“post”，URL中不含有参数，第三个参数一样。post请求的send()方法中需要传入提交数据，可以使用XML或者字符串。在提交表单时，首先要设定请求头部的Content-Type为 application/x-www-form-urlencoded。
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
然后将传入的表单信息序列化，方便后端的程序获取数据。对于表单数据序列化，FormData对象可以直接放入send()内:
var form = document.getElementById('user-info');xhr.send(new FormData(form));前面提过，get方式中url包含参数，而post中url是“干干净净”的。因为用处不同，post在提交内容的时候没有大小限制。而且post在发送时有内容体，那些提交的信息放在内容体内。
12. JSONP 跨域的特性由于跨域安全策略，XMLHttpRequest不能跨域请求，这是AJAX的一个主要限制。
JSONP是通过<\script>元素。因为我们知道，<\script>可以跨域引用js文件。返回的数据格式为JSON，创建一个回调函数来相应返回的数据。
var script = document.createElement('script');?script.src = 'http://pvoutput.org/service2v?Apikey=123&SystemID=123&callback=handler”;document.body.appendChild(script);//回调函数function handler(response){ var responseContent={ diatotime:response.datetime, usedEnergy:response.used.Energy, … } return responseContent；}除了JSONP，用img标签也可以跨域通信。
var img = new Image();img.src = 'http://www.example.com/id=123”;CORS是跨域请求的另一个方法。在IE浏览器中为XDomainRequest对象，而在其他浏览器中则继续用XMLHttpRequest。区别在于，XDomainRequest对象的open()只有两个参数：请求类型和URL，因为都是异步执行。而其他浏览器在使用open()时，URL要使用绝对路径，既可以跨域请求。
13.提高网页性能的方法将小图片放在一起减少HTTP请求。然后想到将script和css从外部引入，然后script放在文档底部。
除此之外，总结一下：在内容上压缩，在请求上减少。压缩图片、脚本和CSS，使用CSS精灵，优化图片，尽量使用
14.Nodejs性能优化1. 并行 创建 Web 应用的时候，你可能要多次调用内部 API 来获取各种数据。比如说，假设在 Dashboard 页面上，你要执行下面这几个调用:
用户信息 -getUserProfile().
当前活动 -getRecentActivity().
订阅内容 -getSubscriptions().
通知内容 -getNotifications().
为了拿到这些信息，你应该会为每个方法创建独立的中间件，然后将它们链接到 Dashboard 路由上。不过问题是，这些方法的执行是线性的，上一个没结束之前下一个不会开始。可行解决案是并行调用它们。
如你所知由于异步性，Node.js 非常擅长并行调用多个方法。我们不能暴殄天物。我上面提到的那些方法没有依赖性，所以我们可以并行执行它们。这样我们可以削减中间件数量，大幅提高速度。
我们可以用 async.js 来处理并行，它是一个专门用来调教 JavaScript 异步的 Node 模块。下面代码演示怎样用 async.js 并行调用多个方法的:
function runInParallel() { async.parallel([ getUserProfile, getRecentActivity, getSubscriptions, getNotifications ], function(err, results) { //This callback runs when all the functions complete });} 如果你想更深入了解 async.js ，请移步它的 GitHub 页面。
2. 异步 根据设计 Node.js 是单线程的。基于这点，同步代码会堵塞整个应用。比如说，多数的文件系统 API 都有它们的同步版本。下面代码演示了文件读取的同步和异步两种操作:
// Asynchronousfs.readFile('file.txt', function(err, buffer) { var content = buffer.toString();});// Synchronousvar content = fs.readFileSync('file.txt').toString(); 不过要是你执行那种长时间的阻塞操作，主线程就会被阻塞到这些操作完成为止。这大大降低你应用的性能。所以，最好确保你的代码里用的都是异步版本 API，最起码你应该在性能节点异步。而且，你在选用第三方模块的时候也要很小心。因为当你想方设法把同步操作从你代码中剔除之后，一个外部库的同步调用会让你前功尽弃，降低你的应用性能。
3. 缓存 如果你用到一些不经常变化的数据，你应该把它们缓存起来，改善性能。比如说，下面的代码是获取最新帖子并显示的例子:
var router = express.Router();router.route('/latestPosts').get(function(req, res) { Post.getLatest(function(err, posts) { if (err) { throw err; } res.render('posts', { posts: posts }); });}); 如果你不经常发贴的话，你可以把帖子列表缓存起来，然后一段时间之后再把它们清理掉。比如，我们可以用 Redis 模块来达到这个目的。当然，你必须在你的服务器上装 Redis。然后你可以用叫做 node_redis 的客户端来保存键/值对。下面的例子演示我们怎么缓存帖子:
var redis = require('redis'), client = redis.createClient(null, null, { detect_buffers: true }), router = express.Router();router.route('/latestPosts').get(function(req,res){ client.get('posts', function (err, posts) { if (posts) { return res.render('posts', { posts: JSON.parse(posts) }); } Post.getLatest(function(err, posts) { if (err) { throw err; } client.set('posts', JSON.stringify(posts)); res.render('posts', { posts: posts }); }); });}); 看到了吧，我们首先检查 Redis 缓存，看看是否有帖子。如果有，我们从缓存中拿这些帖子列表。否则我们就检索数据库内容，然后把结果缓存。此外，一定时间之后，我们可以清理 Redis 缓存，这样就可以更新内容了。
4. gzip 压缩 开启 gzip 压缩对你的 Web 应用会产生巨大影响。当一个 gzip 压缩浏览器请求某些资源的时候，服务器会在响应返回给浏览器之前进行压缩。如果你不用 gzip 压缩你的静态资源，浏览器拿到它们可能会花费更长时间。
在 Express 应用中，我们可以用内建 express.static() 中间件来处理静态内容。此外，还可以用 compression 中间件压缩和处理静态内容。下面是使用例:
var compression = require('compression');app.use(compression()); //use compression app.use(express.static(path.join(__dirname, 'public')));5. 如果可以，在用客户端渲染 现在有超多功能强劲的客户端 MVC/MVVM 框架，比如说 AngularJS, Ember, Meteor, 等等，构建一个单页面应用变得非常简单。基本上，你只要公开一个 API，返回 JSON 响应给客户端就可以了，而不需要在服务端渲染页面。在客户端，你可以用框架来组织 JSON 然后把它们显示在 UI 上。服务端只发送 JSON 响应可以节省带宽，改善性能，因为你不需要在每个响应里面都返回布局标记了，对吧，你只需要返回纯 JSON，然后在客户端渲染它们。
看下我的这个教程，它是关于怎样用 Express 4 公开一个 RESTful APIs的。我还写了另一篇教程，演示了怎样把这些 APIs 和 AngularJS 结合起来。
6. 不要在 Sessions 存储太多数据 典型的 Express 页面应用， Session 数据默认是保存在内存中的。当你把太多数据保存在 Session 的时候，会导致服务器开销显著增大。所以，要么你切换到别的储存方式来保存 Session 数据，要么尽量减少存储在 Session 中的数据量。
比如说，当用户登录到你的应用的时候，你可以只在 Session 中保存他们的 ID 而不是整个用户数据对象。还有，对于那些你能够从 id 拿到对象的查询，你应该会喜欢用 MongoDB 或者 Redis 来存储 session 数据。
7. 优化查询 假设你有个博客，你要在主页上显示最新帖子。你可能会通过 Mongoose 这样取数据:
Post.find().limit(10).exec(function(err, posts) { //send posts to client}); 不过问题是 Mongoose 的 find() 方法会把对象的所有字段都查询出来，而许多字段在主页上并不要求。比如说，commentsis 保存的是特定帖子的回复。我们不需要显示文章回复，所以我们可以在查询的时候把它给剔除掉。这无疑会提高速度。可以像这样优化上面那条查询:
Post.find().limit(10).exclude('comments').exec(function(err, posts) { //send posts to client});8. 用标准的 V8 方法 集合上的一些操作，比如 map，reduce，和 forEach 不一定支持所有浏览器。我们可以通过前台的库解决部分浏览器兼容性问题。但对于 Node.js，你要确切知道 Google 的 V8 JavaScript 引擎支持哪些操作。这样，你就可以在服务端直接用这些内建方法来操作集合了。
9. 在 Node 前面用 Nginx Nginx 是个微小型轻量 Web 服务器，用它可以降低你的 Node.js 服务器的负载。你可以把静态资源配置到 nginx 上，而不是在 Node 上。你可以在 nginx 上用 gzip 压缩响应，让所有的响应都变得更小。所以，如果你有个正在营运的产品，我觉得你应该会想用 nginx 来改善运行速度的。
10. 打包 JavaScript 最后，你还可以大大提高页面应用速度，通过把多个 JS 文件打包。当浏览器在页面渲染中碰到
著作权归作者所有
联系客服
