前端优化再次被提起，高性能网站总是会得到用户的肯定，加载时间短，友好的界面交互，最少的资源占用，容易被搜索引擎抓取。
就自己可以接触到的范围，记录些优化的点点滴滴。
1.减少HTTP请求：
每个HTTP请求会产生额外负担，下载一个100K的文件比下载4个25K的文件要快。
使用外部的css和js文件，这样便于压缩，便于合并，且可缓存。
使用css sprite，将小图片放于一张图片使用背景图绝对定位。PNG8会比GIF格式的图片小。
2.避免跳转，避免404：
这个在访问网站的时候的确经常遇到，而且真的是很影响体验，尤其/的问题，打开网站的时候，总重定向到加/的位置。
404神码的，最让人无语了，的确又是很影响用户体验的一个坑，但避免确实是很容易的。
3.利用各种缓存
这个专门写了一篇http://www.cnblogs.com/linda586586/p/4127103.html。
4.css放于头部，js放于尾部
把样式表放在文档底部的问题是在包括Internet Explorer在内的很多浏览器中这会中止内容的有序呈现。浏览器中止呈现是为了避免样式改变引起的页面元素重绘。用户不得不面对一个空白页面。
HTML规范清楚指出样式表要放包含在页面的<head />区域内：“和<a />不同，<link />只能出现在文档的<head />区域内，尽管它可以多次使用它”。无论是引起白屏还是出现没有样式化的内容都不值得去尝试。最好的方案就是按照HTML规范在文档<head />内加载你的样式表。
js放于尾部，是因为Javascript的阻塞特性。无论是遇到内联或者放于外部文件的javascript,页面下载过程都必须停下，等待脚本完成处理。原因是脚本可能在运行周期过程中修改页面内容。浏览器在遇到body之前，不会渲染页面的任何部分。若将脚本放置于顶端，会有一个可察觉的延迟，页面打开时，首先显示为一个空白页面，不能阅读也不能交互。新浏览器（如IE8，FF3.5）允许并行下载js文件，js之间并不会阻塞，但是js文件的下载会阻塞其他资源（如图片）的下载。故将script标签放在尽可能接近body的底部，尽可能减小对整个页面下载的影响。由于每个script标签下载时阻塞页面解析，所以减少script的数量也可以改善性能。每当页面解析碰到一个script标签时，紧接着有一段时间用于代码执行，最小化这些延迟时间可以改善页面的整体性能。
5.脚本延迟加载
使用defer(只有一些浏览器支持)
动态加载
function loadJs(jssrc, callback) { if (jssrc) { var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); if (script.readyState) { //IE script.onreadystatechange = function () { if (script.readyState == "loaded" || script.readyState == "complete") { script.onreadystatechange = null; if (callback && typeof callback == 'function') { callback(); } } }; } else { //Others script.onload = function () { if (callback && typeof callback == 'function') { callback(); } } } script.src = jssrc; head.appendChild(script); } }
无论在何处启动下载，文件的下载和运行都不会阻塞其他页面的处理。
若需要添加监听，可使用script.onload=function(){};或者IE的onreadystatechange,如上例。不过IE11-那个不再任性的IE，抛弃了onreadystatechange,也改成onload了...
图片的延迟加载也是类似的。
6.预加载
预加载和后加载看起来似乎恰恰相反，但实际上预加载是为了实现另外一种目标。预加载是在浏览器空闲时请求将来可能会用到的页面内容（如图像、样式表和脚本）。使用这种方法，当用户要访问下一个页面时，页面中的内容大部分已经加载到缓存中了，因此可以大大改善访问速度。如无条件加载：触发onload事件时，直接加载额外的内容。
7.关于javascript的性能提升
首先，要剔除重复的脚本，避免不必要的代码和注释。
数据访问：直接量和局部变量的访问速度要快于数组项和对象成员的访问速度。
在函数运行的过程中，每遇到一个变量，标识符识别过程要决定从哪里获得或者存储数据。此过程搜索运行期上下文的作用域链，查找同名的标识符。搜索从运行函数的激活目标的作用域链的前端开始。若找到了，就使用它，若没有找到，搜索将进入作用域链的下一个对象，一直持续直到找到，或没有更多的对象可以搜索。这种情况标识符被认为是未定义的。这个搜索过程会影响性能。在运行期上下文的作用域链中，一个标识符所处的位置越深，它的读写速度就越慢。所以全局变量最慢（优化的引擎在某些情况下可以改变这个情况）。所以，使用局部变量存储本地范围外且需要在函数总的使用次数多于一次的变量。
闭包：通常一个函数的激活对象与运行期上下文一同销毁，当涉及闭包时激活对象就无法销毁了，因为引用仍存在于闭包的[[scope]]属性中。所以如果不合理的使用闭包，也可能会带来性能问题。
原型链：深入原型链层次越深，搜索的速度就会越慢。
8.关于富网页应用中javascript中DOM操作的优化
首先，应该尽量减少DOM元素的数量，精简和优化HTML
DOM操作分三类
访问和修改DOM元素
减少DOM元素的访问次数，具体来说，就是访问-用局部变量存储，修改-一次性写入innerHTML.
关于innerHTML和DOM方法：在老式浏览器（IE6）上innerHTML快，新浏览器中有一些（如Webkit内核的）使用DOM方法更快。如果修改大块的DOM，innerHTML在大多数浏览器中更快。
在循环中使用局部变量缓存集合引用和集合元素，可提高速率。
在IE（IE6，IE7）中，nextSilibing比childNode好。遍历children比childNodes更快，因为集合项更少，HTML源码中的空格实际上是文本节点，它们不包括在children集合中。
querySelectAll()比使用js和DOM迭代更快，在IE8中已经支持。
querySelector()会返回符合条件的第一个节点。
修改DOM元素的样式造成重绘和重排版
当浏览器下载完所有的HTML标记、js、css、图片之后，它解析文件并创建两个内部结构：DOM Tree和Render Tree。
DOM改变影响到元素的几何属性（宽高等）-比如改变了边框宽度或者在段落中添加了文本，将发生一系列后续动作：浏览器需要重新计算元素的几何特性，且其他元素的几何特性和位置会因此改变而受到影响。浏览器使得渲染树上受到影响的部分失效，然后重构渲染树。这就是重排版。重排版完成时，浏览器在一个重绘进程中重新绘制屏幕上受影响的部分。不是所有的DOM改变都会影响几何属性。改变一个元素的背景不会影响宽高。
会发生重排版的情况：添加或删除可见的DOM元素；元素位置的改变；元素尺寸的改变；内容改变（如文本改变）；浏览器窗口尺寸改变。还有如滚动条出现。
获取布局信息的操作会导致刷新队列的动作，如获取offsetTop.布局信息由这些属性和方法返回最新的数据，浏览器不得不运行渲染队列中待改变的项目并重新排版以返回正确的值。
最小化重绘和重排版：减少其发生次数，应该将多个DOM风格改变合并到一个批次中，一次执行，比如使用cssText,或使用类名称的修改（适用于不依赖于逻辑不需要计算的修改）。
减少重绘（两次重排版）：从文档中摘除元素；应用多重改变；带回文档。摘除的方法：隐藏，再显示；用文档片段标记已存在的DOM之外创建一个子树，再拷贝回文档；原始元素拷贝到一个脱离文档的节点，修改副本，覆盖原始元素。对于动画元素（可折叠展开的元素）使用绝对坐标定位，当其尺寸改变时，就不会推移到页面中其他元素。
通过DOM事件处理用户响应
使用事件代理。页面中连接每个句柄都是有代价的。有时候我们会感觉到页面反应迟钝，这是因为DOM树元素中附加了过多的事件句柄并且些事件句病被频繁地触发。这就是为什么说使用event delegation（事件代理）是一种好方法了。如果你在一个div中有10个按钮，你只需要在div上附加一次事件句柄就可以了，而不用去为每一个按钮增加一个句柄。事件冒泡时你可以捕捉到事件并判断出是哪个事件发出的。
同样也不用为了操作DOM树而等待onload事件的发生。你需要做的就是等待树结构中你要访问的元素出现。你也不用等待所有图像都加载完毕。