1、使用CSS Sprite，首屏图片全部合到一张图上,通过CSS来显示图片的一部分。
2、首屏图片检测，针对首屏外的图片延迟加载。使用延迟加载，提升首屏的加载速度。
3、首屏CSS检测，将不属于首屏的CSS代码单独打包并移到首屏之外进行延迟加载。
4、页面首屏先显示出来的话，需要将js代码的事件处理在dom树构建好之后，如同jquery的ready事件。
5、页面首屏的显示尽量不要依赖于js代码。这一点很重要，这样做的话，你的一些css和js就可以延迟加载进来，而不影响首屏的展示。
1、合并图片，合并CSS和JS文件，图片较多的页面也可以使用 lazyLoad 等技术进行优化。
2、精简js。不是压缩，而是把js的空格，空行和注释等去掉。对于稳定的js类库，建议采用这种方法精简，有工具可用，精简后可减少10%—20%的文件大小；对于开发中的 js代码，不建议精简，因为浏览器端可读性差会导致debug时不容易定位问题。
3、使用Gzip压缩技术。对传输的内容采用gzip压缩，可以显著减少传输时间。尤其是文件较大的js文件、css样式表压缩能收到显著的效果。
页面onload的时候可以考虑做一些预加载的事情，把一些其它页面需要用到的素材预先加载进来，比如加载一些大的背景图进来。
1、压缩图片和使用图片Spirit技术。不管是在CSS中的图片还是在HTML结构中的图片都会产生HTTP请求，前端优化的第一条就是减少请求数，最直接有效的方法是使用图片精灵(CSS Spirit)。图片精灵就是把许多图片放到一张大图片里面，使用CSS的background-image和background-position属性去控制展现恰当的图片区域。
2、合并文件，通过把所有脚本置于一个脚本文件里或者把所有样式表放于一个样式表文件中，从而减少Http请求的数量。
3、通过给头部添加失效期，你可以使哪些组件被缓存。这会避免下次浏览页面时不必要的HTTP请求。给图片文件的头部设置失效时间更为常用，但包括脚本文件、样式表和Flash之类的所有组件的头部都应该被设置失效时间。
1、把样式表放在前面，可以达到逐步呈现的效果，不至于白屏。
2、把脚本放在最后，可以有效防止对页面其它组件的阻塞。
3、将CSS和JS放到外部文件中引用。在实际应用中使用外部的文件往往产生更快的页面，因为浏览器会缓存JavaScript和CSS文件。而内联在页面里的JavaScript和CSS会在每次请求页面时下载。这会减少所需的HTTP请求数，但增大HTML文档的体积。而另一方面，如果放在外部文件里的JavaScript和CSS被浏览器缓存，则既不用增加HTTP请求数量，HTML文档的体积也会减少。
4、不使用CSS表达式 。使用一次性的表达式是减少CSS表达式的执行次数的一个方法，当表达式第一次执行时，CSS表达式会被一个确定的值代替。如果在页面生命周期中，样式属性必须动态的设定，使用事件处理替代CSS表达式是一个可选的方法。如果必须使用CSS表达式，要记得它们会执行上千次并影响页面的性能。
1、操作dom树的时候使用innerHtml，一次性的构造，而不是append，每次还需要调整。不过使用innerHtml也有不少的危险，比如插入script钓鱼脚本等。
2、修改和访问DOM元素会造成页面的Repaint和Reflow，循环对DOM操作更是罪恶的行为。所以请合理的使用JavaScript变量储存内容，考虑大量DOM元素中循环的性能开销，在循环结束时一次性写入。减少对DOM元素的查询和修改，查询时可将其赋值给局部变量。
3、修改dom树时尽量使用clone，而不是动态的再创建。至少可以省去不少初始化的时间。