今天逛网的时候，看到一种技巧是将js代码和css代码混合在一起，利用CSS parser和Js parser的解析原理，来区分两种不同的代码。这个技巧估计老早就有人知道并讨论的乱套了，我又凹凸了一回。（合并javascript和css作为一个文件，Combine CSS with JS and make it into a single download!，Squeeze CSS and JS into one file） 起初看到这个标题觉得很惊奇，细看了上面罗列的文章之后，发现也只是利用了解析器的原理（解析器本来就是这么设计的，或许不是bug吧），对<!- … 了解更多
今天在看博客的时候，萌生了这样的一种想法，目前博客更新不是很快，那么相对来说，很多内容都是在一定时间内保持不变的，那么就相当于是一个静态的内容，既然是相对静态的内容，那么每次访问的时候还从服务器的MySql数据库读取相同的内容，这就造成了一定的服务器端资源的浪费，如果可以将这些相对静态的内容使用客户端存储技术在本地存储起来，在单个用户再次访问的时候，直接从本地存储中读取静态的内容，而无需从服务端读取内容，那么页面的初始化将会是更加的快速，另一方面也可以最大化的节省流量。
关于性能优化方面的关注点，每天都能够朗朗上口，但是当具体拿出一个页面给你去优化的时候，有可能你会不知道如何去展开优化工作和步骤（前几天有个朋友让我去优化一个网站首页，开始我就处于这种状态，很杯具~），也可能是想到一点就优化一点，乱套了。从而缺乏一个整体思路性的优化步骤。当我想到了这一点，就开始着手去总结这个一个优化流程的东西。 当然了，做优化的脱离不了浏览器，也脱离不了工具，为此，你手上得准备好一下几个工具：Google的Page Speed，Yahoo的YSlow，HTTPWatch，dynaTrace AJAX，Fiddler，Firebug。现在主流浏览器都集成了开发人员工具，提供了NET面板可以查看HTTP请求瀑布图，这是个好事情。 一切前提条件都就绪了，那么接下来罗列一下我认为的优化的流程，也是将来会指导我是思维的一个流程步骤吧：
Fetch resources on-demand，中文意思大概就是按需加载资源，而这里的资源不只是CSS、JS文件，Image、swf、Content等都可以利用这种方式。特别是当前Yahoo的首页：http://www.yahoo.com，几乎页面的每一个模块都体现了按需加载的技巧：左边的导航（用户可以定制、点击异步请求更多资源）、中间的新闻、图片tab、右栏的第三方资源等等。 按需加载表面理解起来很简单，但是怎么个按需法呢？我所理解的按需，包括两个方面：一个是按用户的需要；另一个是网站本身的需要。按需加载主要解决的问题就是加快页面的初始化以及在页面初始化的时候最大化减少HTTP请求，因为有些模块比如：图片导航tab、多级菜单、内容导航等等，这些在初始化页面的时候有很多内容都是处于隐藏状态，用户是看不到的，那么这些内容对不同的用户来说有不同的需求，那么这些就可以从页面的初始化中剥离出来，按用户的需求通过异步通信来加载内容和资源。对于网站本身的需要来加载后续资源，比如Google首页对于结果页的一些js、image等资源的pre-fetch的方式，通过分析用户可能会产生的行为，为后续的页面提前加载内容，加快后续页面的初始化速度，从缓存中读取页面所需要的资源。
Js学的也差不多了，该是来总结一下Js中一些比较高级的智慧结晶了。基于Js的动态性、对象都是易变的、函数是第一对象等等其他语言所不包含的特性，可以在使用Js的时候创造出更高效、组织性更好的代码。下面提到的一些概念，是不是很熟悉： 分支、惰性实例化、惰性载入函数、单例的两种模式、享元类、函数绑定（纠正函数一个执行上下文）、函数curry化、高级定时器、保护上下文的构造函数、函数节流、自定义事件…… js中的继承、原型、构造函数这些都是老生常谈的了。但是对于构造函数式继承和原型式继承的优缺点，还是有必要了解一下的。原型式继承的主要优点就是共享方法和属性，使得从原型对象中继承出来的子对象都可以在内存中共享全部的方法和属性，这如果是在大型的继承链中将会大大的改善性能和减少内存的使用量。
今天闲来无事，就用Firebug查看首页的HTTP瀑布图，测试页面加载时间，发现在外联的css和js上时间开销还是挺大的，虽然css和js都进行了gzip压缩，但是解析延迟在某些时候还是比较厉害，不是css解析延迟就是js解析延迟，在读取缓存的时候，也有一定的读取的时间开销。 鉴于这种情况，那么干脆就将首页的css和js都嵌入到页面中吧，把css放到head、js放到body闭合标签之前，反正这两个文件在gzip压缩的条件下也总共才三四K而已，而子页面里还是使用外联css和js的方式。 经过这样倒弄，首页加载速度平均有100ms的提升，欣喜若狂。更好笑的是yslow、page speed测试都得了满分，哈哈…… 让首页嵌入css和js，而子页面外联的方式，主要是出于这样的一个目的：用户第一次浏览到首页的时候，页面可以尽快的呈现，而到了子页面，就加载css和js，这样的用户体验就有了一个类似于“稳步退化”的感觉，使得用户不会在起先的时候就有个不良感觉，而之后的访问，子页面就可以充分的利用缓存，因为子页面可能包含图片、flash等等，缓解HTTP的并发数。 还有，之前在浏览器下可能会有短暂的无样式与渲染样式之前切换的闪白，目前也得到了比较好的缓解。