Web前端性能优化-都联网

一、已经完成的优化项

1、html ：

       1.1在页面制作时，采用最小的html代码实现同样的效果，注重标签语意化。

       1.2在我们的结构中不要出现style和onclick这样的内联的样式和事件。希望大家能够注意结构与表现、行为的分离。

2、CSS :

       2.1在书写样式时，CSS样式注意复用性，用最少的代码实现更多地方的效果，选择器的选择不要太复杂，以免一个地方的修改牵连很多地方。

       2.2将一个页面的CSS文件尽量放到head中，即顶部。

       2.3修改CSS文件中用到了CSS expression的地方。一般不建议使用expression，因为expression对浏览器资源要求比较高，一个CSS expression会产生多次甚至无数次请求。

       2.4删掉各个CSS文件中被注释的部分，减小文件大小。

       2.5 css尽量采用外链式。

       2.6 避免使用滤镜。

       2.7 尽量采用缩写。

3、img ：

       3.1将背景图片用CSS Sprite组合，这样若干图片只需要完成一次请求，以减小请求次数。

       3.2压缩图片，采用无损压缩的方式，在保证图片质量的条件下减小图片的大小。

       3.3图片尽量少用直接插入的形式。

       3.4 尽量不在html中缩放图像。

4、js :

       4.1 删掉各个CSS文件中被注释的部分，减小文件大小。

       4.2 js尽量采用外链式。

       4.3 js脚本尽量放在底部，bottom。

5、页面：

       5.1尽量减小页面的数量，以减小加载量，这里包括应用介绍页面和下载中心页面采用选项卡模式，多个地方用到了服务协议和消费者保障等内容均链接到关于我们里相应的页面。

       5.2修改帮助反馈页面。之前该页面用到的图片太多，且图片都采用插入形式，这样造成加载困难，以至于该页面加载量较大。在网页制作中，为了使访问速度较快，凡是不做链接的图片尽量采用背景图的形式，且可以用css sprite合并，同时尽量减少图片的使用。

6、优化按钮，增加体验效果，鼠标划过和按下的效果。

7、调整兼容性，兼容各个浏览器，各个显示器。

8、减小项目文件大小：整理项目文件，这个项目是改版项目，找出并删除没用的文件及图片。

 

 

二、继续优化的项

1、研究jsp页面转化为html静态页面，以提高网站访问速度。

2、进一步研究兼容性问题，虽然我们给IE6，IE7做了判断，但是部分客户可能是用的基于这些浏览器内核的360，搜狗等浏览器。

3、继续研究CSS和JS的合并，以减少http的请求次数，加速网站访问速度。

4、压缩代码（需要压缩时）

 

另外，作为前端，应该要知道以下工具：

1、网站性能测试工具：yslow，火狐浏览器的一个插件

2、图片压缩工具：http://www.admin10000.com/document/1551.html

3、代码压缩工具：http://tool.chinaz.com/Tools/CssFormat.aspx