前端优化再次被提起，高性能网站总是会得到用户的肯定，加载时间短，友好的界面交互，最少的资源占用，容易被搜索引擎抓取。
就自己可以接触到的范围，记录些优化的点点滴滴。
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); } }