前端优化

1       CSS 优化方案

1.1          使用 CSS 优化工具

a)              online CSS Optimizer ;

b)              CSS Formatter and Optimizer 。

解决方案 :选取以上一个工具进行进行优化。

 

1.2          清理 CSS

在我们写样式的时候,页面的 CSS 在经历几个版本的修改之后,可能有些样式已经用不到了,或许将某些样式 更名了而原来的忘了删除,总之页面中可能存在着一 些无用的样式。这些无用的浪费了一些服务器空间和带宽消耗,也会增大我们的维护成本。

a)              Dust-Me selector ;

b)              Page Speed ;

c)              CSS Redundancy Checker ;

d)              IntelliJ IDEA ;

e)              Expression Web 。

解决方案 :选取以上一个工具进行 CSS 清理。

 

1.3          在浏览器支持的情况下尽量使用 CSS 选择器

避免为每一个标签都定义 class 。

 

解决方案 :重构 CSS ,去除不必要的 class 。

 

1.4          减少 CSS hack 的使用

a)              尽量把浏览器默认值不相同的元素定义出来;

b)              注意 padding , margin , border 在 width 和 height 中的大小计算;

c)              注意 IE 中最小高度和 img 的使用。

解决方案 :删除不必要的 CSS hack ,然后进行细节修改。

 

1.5          避免使用内联引用和内部引用,尽量使用外部引用

a)        网页处理速度会更快一些,尤其在有很多网页共用一份 CSS 样式表时;

b)        看上去更加专业,整个网站的配色、细节等做到完全统一,具有一致性,避免内联的像素、色彩等偏差;

c)         方便维护。只要修改一个 CSS 文件,不管你有多少个网页文件,都会以你最新修改的版本为标准,不必进行散弹式修改。

解决方案 :把内联引用和内部引用的 CSS 进行抽取、提出放到外部 CSS 文件中,使用外联引用。

 

1.6          浏览器兼容

支持主流浏览器: Firefox , IE6 , IE7 , IE8 ;逐步支持 Chrome , Opera , Safari 。

解决方案 :在不同浏览器上进行测试,然后逐一修复。

 

1.7     元素合并

类似

( background-image: url(/oaweb/img/common/333.png); background-repeat: repeat-y; background-position: 0px 0px; )

可合并为( background : url(/oaweb/img/common/333.png)  repeat-y 0 0; )。

解决方案 :有此类问题的地方进行合并。

 

1.8     规范命名

a)        id 和 class 命名采用该内容的英文单词或组合命名,并第一个单词小写,第二个单词首个字母大写,如 :newRelease (最新产品 /new+Release) ;

b)        添加注释;

c)         常用命名规范(参见附件 1 )。

解决方案 :发现不符合要求的进行修改;没有注释或注释不详、不清的地方进行添加或补充、修改。

 

1.9     抽取出一些常用的 CSS

对于标签可使用 class 组合,不需要把 float:right; 类似这样常用的样式写到一组定义的 CSS 中。

    解决方案 :定义一些常用的 CSS ,在样式中去除含有这些常用样式的 style ;最后在用到该样式的标签中加上定义好的被删除的常用样式的 class 。

 

1.10  注意 class 和 id 的异同,不要滥用

id 是用来进行唯一标示,作为网站中的样式,每个页面样式需要具备一致性。因此,除特定原因外,样式尽量使用 class 。

         解决方案 :查看不符合用 class 的标签,改为 id ;反之,改为 class 。

 

1.11  满足 SEO

OA 当然不需要此项,但是在 eCooe 体验中就在所难免了。

解决方案 :凭经验可适当修改,但毕竟不是这行的专家,可买本书来研究研究。

 

1.12  恰当的使用 CSS Sprite

不要在每一处需要图片的地方都使用 CSS Sprite ,它的难维护性决定了只适用于做背景图的时候采用;对于图片,还是应该去使用 img 标签。

解决方案 :把使用了 CSS Sprite ,但不用做背景的地方改为 img 标签;反之改为使用 CSS Sprite 。

 

1.13  避免使用 expression 和 behavior

在页面渲染的过程中, expression 和 behavior 需要大量的计算,会大量地耗费客户端资源。所以不到迫不得已,请不要使用 expression 和 behavior 。

    解决方案 :删除使用了 expression 和 behavior 的地方,改之使用 JavaScript 进行替代。

附件 1

内容

命名

内容

命名

模块

module.css

主题

themes.css

基本共用

base.css

专栏

columns.css

布局、版面

layout.css

表单

forms.css

文字

font.css

补丁

mend.css

打印

print.css

header

内容

content/container

尾 / 页脚

footer

导航

nav

侧栏

sidebar

栏目

column

页面外围控制整体布局宽度

wrapper

左 / 右 / 中

left/right/center

登录条

loginBar

标志

logo

广告

banner

页面主体

main

热点

hot

新闻

news

下载

download

子导航

subNav

菜单

menu

子菜单

submenu

搜索

search

友情链接

friendLink

版权

copyright

滚动

scroll

标签页

tab

文章列表

list

提示信息

msg

小技巧

tips

栏目标题

title

加入

joinUs

指南

guild

服务

service

注册

register

状态

status

投票

vote

合作伙伴

partner

12 号字体

font12

红色

red

浮动清除

clear

常见问题

faqs

缩略图

screenshot

最新产品

newsRelease

编辑评论

editorReview

关键词

keywords

论坛

forum

主导航

mainNav

主菜单

mainMenu

标签

tag

摘要

summary

商标

branding

法律声明

legal

网站信息

siteInfo

信誉

credits


2       JavaScript 优化方案 

2.1          测试驱动开发

为了编写可维护的 JavaScript ,测试驱动是必不可少的。因为每个测试都起到质量反馈的作用,给后期维护和修改创建了一个安全保护网并提供了一份可执行的文档。通过测试,我们可以保证所有的功能被覆盖,也避免了重写代码后再进行测试的高昂代价。

解决方案 :以后的开发中使用 JsUnit 和 JSMock 进行测试驱动。

 

2.2          框架

现在已经形成部分框架,但都不够复用和抽象。并且缺少文档说明,让后期开发人员很难进行维护和使用。

解决方案 :对框架进行封装、抽象、改进,并且完善文档。

 

2.3          文件压缩( YUI Compressor )

a)         移除注释

b)         移除额外的空格

c)         细微优化

d)         标识符替换

解决方案 :代码发布时,使用以上压缩工具进行压缩。

 

2.4          使用 JSON

JSON 是一种轻量级的数据格式,体现在它的结构定义非常简单,而且已成为当今 Web 端的主流数据格式标注。

解决方案 :把能更改为 JSON 数据格式的数据尽量进行更改。

 

2.5          浏览器兼容

Web 时代,主流浏览器兼容是必须的。而且当 IE 9 来到时,向下兼容可能会出现一些问题。时代在发展, Google 都摈弃了 IE6 , 既然都有权要求用户使用 IE 浏览器,为何不能要求用户对浏览器升级,或满足使用其它浏览器的用户呢?

       解决方案 :更改代码,使其兼容主流浏览器。

 

2.6          使用一些提高 JavaScript 效率的基本常识方法

a)         使用三元操作符代替 if…else… ;

b)         减少 DOM 访问;

c)         尽量使用 switch ;

d)         简化常用对象定义( var obj = {}; 代替 var obj = new Object(); );

e)         避免使用 Eval ;

f)          尽量使用语言本身的构造和内建函数;

g)         对高级对象采用缓存;

h)         避免过多的应用层次和不必要的方法调用。

    解决方案 :编写代码过程中遵循以上方法。

   

2.7          代码的可读性

是程序员都可以写出机器可读的代码,但是要做一名好的程序员就必须写出人类可读的代码。

解决方案 :在需要的地方增加注释;降低代码的层次嵌套;遵循代码的重用规则;规范命名等等;。

 

2.8          常量和全局变量

JavaScript 文件较多,里面的常量和全局变量过杂过乱。

解决方案 :常量单独放到一个 js 文件中进行定义和管理;全局变量应有详细的文档说明。

 

2.9          查找瓶颈

a)         局域网不慢,互联网慢则为加载慢;

b)         Chrome 不慢, IE 慢则为渲染慢;

c)         越用越慢则为内存泄露。

        解决方案 :针对 a) 可对文件进行压缩;动态加载;加载提示。针对 b) 可缓存经常用到的节点查询结果;注意 DOM 的刷新;减少加载减少解析;晚加载晚解析。针对 b) 可参见: JS内存泄露 

 

2.10       split 应使用 ascii 码

看到分割的时候使用了一些常用的字符,这样当字符串中出现该字符时,就会产生影响。

    解决方案 : split 分割时使用 ascii 码。

 

2.11       14 Rules for Faster-Loading Web Sites

解决方案 :根据实际情况选择适合的规则,逐一改进。


3 .图片优化方案

3.1.         规范命名

a)         命名有意义,让人一看便知;

b)         按标准分类,放入相应的文件夹中。

    解决方案 :对图片重新进行整理,重命名,重新分类,重新切片。牵扯到的 CSS , JavaScript 也一律进行修改。

 

3.2.         图片压缩

解决方案 :由美工进行修改。

 

3.3.         格式统一,可按照需求使用 gif 和 jpg

解决方案 :由美工进行修改。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值