前端优化方法

JenniferMuMu 2014-12-16

1:拆分初始化负载

Ajax和动态HTML的日益普及网页上面的js和css也变得非常庞大,web程序也变得像桌面程序一样,很大一部分代码不会在启动时候使用,而是采取插件式架构,允许动态加载模块。在一个大型结构复杂的网页上面,为了不影响用户体验,可以把js分为两部分,一部分是渲染页面必须的,剩下是一部分。这样也在一定程度上面提高用户体验,给用户第一时间看到完整的页面。再寻找哪些js可以被拆分,可以通过一些辅助工具来判断,firebug就是一个非常好的工具,可以通过查看哪些函数onload之前未被使用。通过判断可以把其中一部分拆分出来,但是有些不开始拆分,例如页面的错误处理和业务判断等js是不能拆分的,如果要拆分合理必将是一项严谨的工作。

2:优化图片

尽可能使用png格式图片

3:规范

1)把CSS样式放在页面的上方。

2)将脚本放在底部(包括内联的)

3)避免在CSS中使用Expressions

4)将javascript和css独立成外部文件

5)缓存ajax请求(看个例子。一个web2.0邮件客户端可能使用Ajax来下载用户的地址簿来做自动完成使用。如果用户在上次使用这个产品之后一直没有修改过地址簿信息,那么地址簿响应数据可以在cache里面读取,前提是那个Ajax请求返回的时候加了将来时间的Expires和Cache-Control头。浏览器必须知道什么时候用以前的cache内容,什么时候得发起一个新的请求。怎么实现呢?可以将用户地址簿的最后修改时间戳加在请求的URL里面,例如,&t=1190241612这样。如果上一次加载时修改时间没有变化的话,再次发起的请求就会从浏览器的cache里面读取了,这样就消除了额外的HTTP折返请求。如果修改时间变了,那么请求的URL就是新的,在浏览器的cache里面找不到可用的数据,浏览器就重新发起请求,更新整个数据。)

4:减少http请求

将多次请求的内容合并成一次请求(css,js)

5:反向代理服务器

相关推荐