前端性能优化方案

前端优化方案

1.提升页面静态资源加载速度 (1)

1.1减少Http请求 (1)

1.1.1项目首页、访问量非常大的页面有自己单独css内容 (1)

1.1.2移除重复的脚本及样式，统一网站资源（js库、css库）的使用。.2

1.1.3整理优化并合并现css文件及js文件，将所有的css文件以及js文件

分为base、common、page三层 (2)

1.2压缩静态资源文件，减少文件体积大小 (2)

1.2.1采用CSS Sprites技术将页面内所有背景小图标整合到一张图片。 .. 2

1.2.2不要在HTML使用太多大图像 (2)

1.2.3采用开源工具来压缩减小css及js文件体积 (2)

1.3内嵌图像。 (3)

1.4静态资源尽量合并到少数几个域名访问，减少DNS查询 (3)

2.加快页面的渲染展示速度 (3)

2.1 Css和js文件的位置 (3)

2.2规范img标签的使用 (3)

2.3精简页面标签，减少DOM元素 (4)

2.4规范Css代码 (4)

3.服务器端静态资源访问优化 (4)

3.1服务器部署时通过web服务器及应用服务集群配置，让静态资源通过web

服务器提供访问，提高静态资源并发访问效率 (4)

3.2通过在web服务器配置静态资源的缓存以及压缩策略，提高用户访问速度.

(4)

3.3通过第三方网络静态资源缓存服务(CDN)，提高网站访问速度，提升用户访

问体验。 (4)

1.提升页面静态资源加载速度

1.1减少Http请求

1.1.1项目首页、访问量非常大的页面有自己单独css内容

静态页面生成时直接生成到文件中，动态文件的话在模板文件中include。

1.1.2移除重复的脚本及样式，统一网站资源（js库、css库）的使用。

1.1.3整理优化并合并现css文件及js文件，将所有的css文件以及js文件分为base、common、page三层

其中base是全站通用的，部署在上；common的为某业务系统全局使用，page的则为单独页面使用，这两部分部署在业务系统中。在整理优化过程中，去掉无用的css样式以及js脚本程序

base类别的css及js统一放到res项目中统一维护。

页面中不允许出现onclick或onblur或其他方式的js小句子的使用，所有的标签事件定义及绑定以及其他js代码均要基于res中提供的统一Jquery框架，并放到在整个页面的底部。

所有项目的css以及js文件必须放置到项目根目录下的css以及js目录下，这样的目的是方便代码上传时进行压缩处理。

1.2压缩静态资源文件，减少文件体积大小

1.2.1采用CSS Sprites技术将页面内所有背景小图标整合到一张图片。

通过css中background-position来定位背景图。把多张图片组合成一个单一的形象。整体大小相同,但减少HTTP请求的数量加快页面，但是原则是大图的大小不能超多100k。

1.2.2不要在HTML使用太多大图像

图片切图尽量少和小，按所需的规格来切。切完后的图片文件不能太大，必须要压缩，且尽可能的压缩到最小。

首页等页面的图片尽量调用小图。

1.2.3采用开源工具来压缩减小css及js文件体积

在上传发布时使用开源工具（Closure Compiler，该工具压缩的js是类似于jquery一样，不可逆）将js文件进行一定的压缩。

考虑采用第三方的服务器端的压缩并合并访问技术，例如Minify等，合并对多个js或者多个js的访问请求。（这部分待同意研究后考虑决定采用何种压缩工具）

所有项目代码上传发布时，使用Closure Compiler工具将项目指定的css目录、js目录下

的css文件以及js文件进行压缩（压缩完成后要求保持文件名不变）。

1.3内嵌图像。

用data:URL scheme的方式把图片内容代码直接嵌入html代码中，这样会增大html代码的体积，改进的方式是把内嵌图片嵌入到css中（css被缓存），这样就会更好的减少http请求数而且不增大html的体积。这种方式适用于不经常变化的背景图等。

1.4静态资源尽量合并到少数几个域名访问，减少DNS查询

页面程序所调用的静态资源，应该尽可能来自于仅仅少数几个域名访问。

2.加快页面的渲染展示速度

2.1 Css和js文件的位置

Css文件必须放在header中

无论是HTML还是XHTML还是CSS都是解释型的语言，而非编译型的。所以CSS到上方的话，那么浏览器解析结构的时候，就已经可以对页面进行渲染。这样就不会出现页面结构光秃秃的先出来，然后CSS渲染，页面又突然华丽起来这种页面浏览体验了。

把Js文件放到HTML最下面

a)原因一：脚本一般是用来于用户交互的。所以如果页面还没有加载完毕时加载js

是不正确的做法，比如js里如果对页面的某以特定元素绑定事件或者修改元素内

容，也必须等页面加载完才能保证能够操作成功，所以一般的做法是

window.onload(js源生写法)或者Jquery(function(){....})，这两种做法都是当页面载入

完毕后再对元素进行操作，那么我们完全可以让js最后加载

b)原因二：当一个脚本(js或者as)在下载的时候，浏览器干不了其它的事了，事实上，

当浏览器遇到