前端优化总结.docx

前端优化总结.docx

《前端优化总结.docx》由会员分享，可在线阅读，更多相关《前端优化总结.docx（14页珍藏版）》请在冰豆网上搜索。

前端优化总结

前端优化总结

使用工具

1：

火狐附加组件Yslow

YSlow是Yahoo发布的一款基于FireFox的插件。

YSlow可以对网站的页面进行分析，并告诉你为了提高网站性能，如何基于某些规则而进行优化。

根据Yslow的优化建议，一步一步对页面中可以优化的点进行优化，在代码压缩和图片处理方面，Yslow工具栏中提供了可以利用的工具，效果也不错。

2：

XX站长工具

输入网页的URL地址，得到检测结果。

展开详情，将详细给出优化的建议，最后一项图片的Alt信息也可以理解为为页面SEO而设置，既可以方面XX检索，也可以为用户检索提供便利。

在Yslow中并未涉及声明图片大小对页面优化是否影响的问题，参考其他网站也只是部分图片设置为尺寸大小，因而在优化此项时，可以视具体情况而定，对于大小确定的图片，加上其尺寸，可以在一定程度上加快页面的渲染速度。

关于合并css和js选项的问题，很容易和网站的模块化产生冲突，这就需要找一个比较折中的解决方法。

3：

网站测速Gtimetric

输入待优化页面的网站

自动生成页面的Yslow得分和页面加载得分等

DownloadPDF生成页面优化详情的PDF文档（相当详细，包括图片，css代码，html标签优化各个方面）

Breakdown详细给出页面加载速度，Yslow的各个条目的得分和Timeline。

这个网站还可以进行两个页面对比，我们可以和做的比较好的网站进行对比，找出自己网站在哪个方面得分低，进行有目的的优化。

4：

CSSScript

http:

//spritegen.website-performance.org/

页面中有很多小图片就会有多次的http请求，将这些小图片合并到一张大图上，一定程度上减少http请求，可以相对提高网页的加载速度。

虽然是将多个小图片整合成一个大图片，但是图片也不能太大，控制在70Kb以下（参考淘宝网和京东商城的csssprite大图片一般都是40KB以下的）。

5：

FireWorks切图及优化

前端开发的第一步是对拿到手的页面进行分析合理的切图，FireWorks是个不错的工具，可以查看各个图层的图片并进行图片的合并，对于切图应以哪种格式保存比较重要，在即保证图片质量又减小图片大小的前提下，针对不同的图片采用不同的格式进行保存尤为重要。

文件------>新建

Ctrl+c复制第一步选定的图片，ctrl+v粘贴到新建画布上

文件------>导出向导

继续----->（网站）继续------>退出------->图像预览

格式：

选择输出图片的格式

透明方式：

选择图片是不透明或者索引色透明或者alpha透明

indextansparency是根据一个或多个颜色来透明，而alphatransparency是根据画布中图像的区域来作透明。

举个例子，在白色的背景上有一个卡通人他的眼睛也是白色的，那么使用indextansparency的话，背景和眼睛都透明了，而alphatransparency使得背景透明，眼睛不透明。

JPEG格式是一种大小与质量相平衡的压缩图片格式。

通俗一点讲，就是：

高的压缩比=低的图片质量=小的文件大小。

反之，低的压缩比=高的图片质量=大的文件大小。

由于JPEG文件无法保持100%的原始图像的像素数据，所以它不被认为是一种无损图像格式。

由于这种极其敏感的平衡特性，JPEG非常适合被应用在那些允许轻微失真的像素色彩丰富的图片（照片）场合。

反之，JPEG格式图片并不适合做简单色彩（色调少）的图片，比如LOGO，各种小图标（ICONS）。

　　GIF格式，是为使图片能够应用在在线（online）应用程序上所特别开发的图片格式。

Gif，有时也被成为“Giff”，是一种无损，8位图片格式。

“无损”是指100%的保持原始图片的像素数据信息。

专业名词“8位”是指，所能表现的颜色深度——一个8位图像仅最多只能支持256种不同颜色（一个多余256种颜色的图片若用gif图片保存会出现失真）。

　　由于8位颜色深度的限制，Gif不适合应用于各种色彩过于丰富的照片存储场合。

但它却非常适合应用在以下场合：

　　*Logo　*小图标（Icon）　*用于布局的图片（例如某个布局角落，边框等等）

　　*仅包含不超过256种色彩的简单，小型图片场合

　　PNG，初始时被作为GIF的免费替代格式所开发，采用公共专利压缩算法。

PNG格式也是一种无损压缩，但与GIF格式不同的是，PNG同时支持8位和24位的图像。

　　一个8位PNG图片，支持透明背景且像素颜色不能超过256种。

除了压缩算法不同之外，此8位PNG格式与GIF格式极其相似;

　　8位PNG图片的用途与GIF格式基本相同，

　　*Logo*小图标（Icon）*用于布局的图片（例如某个布局角落，边框等等）

　　*仅包含不超过256种色彩的简单，小型图片场合

　　24位PNG图像：

24位PNG，支持160万种不同的像素颜色且支持Alpha透明效果，这就意味着，无论透明度设置为多少，PNG图片均能够与背景很好的融合在一起。

总结：

在网页开发时针对照片，产品等图片采用jpg格式，对于logo，icon等小图片以及色彩单一的图片采用png格式。

优化细节

1：

页面图片优化方面

　1.1：

网页中出现频率高体积小的图片，使用CSSsprites技术合并

这样可以减少页面的HTTP数量，加快网页的打开速度，也就是把一些小图片，合并在一张图片中，利用CSS控制位置技术来分别调用这个合并后图片的不同部分。

1.不需要平铺的背景图片

1）将这些图片进行归类，icon的一类、button的一类、其他背景素材一类……

2）归类好后，将他们分别放入一张大的png背景图片中

3）需要使用背景的地方，通过css的background-position进行指定背景位置

2.需要平铺的背景图片

1）将横向平铺的和纵向平铺的分别归类

2）将这些图片剪裁成等宽（横向平铺）、等高（纵向平铺）。

最好宽度或者高度设为1px

3）将这些图片放入一张大的png图片中

4）使用css的background-position进行指定背景位置，并设置background-repeat为repeat-x或者repeat-y

1.2：

避免图片压缩，定义图片尺寸

网页中加载的图片尽量保证是图片的原始尺寸，Yslow建议：

DonotscaleimagesinHTML

因为如果在页面中对图片进行压缩，即消耗资源也影响页面的渲染，另外XX站长工具建议定义图片尺寸大小，如果图片大小不做定义，则页面需要重新渲染，速度受到影响。

尽量把网站中的每一个图片都加上高度以及宽度属性，这样在网页被加载的时候，浏览器会预先按照设置的高度与宽度留出一点位置，其他的网页组件可以并行下载，不需要等到图片完全加载完时，再加载其他图片下边的组件，提高了页面的并行加载数量，从而大大的提高了页面的加载速度。

1.3：

页面图片质量和大小优化

首先，设计在制作图片的过程中，要在保证图片质量的前提下，图片质量尽可能小，对于不同用途的图片，选择不同的存储格式。

其次，在图片优化方面，可以针对不同格式的图片采用不同的优化工具（网上的优化工具很多），也可以选择Yslow自带的图片优化工具。

1.4：

延迟加载

1）所需技术:

lazyload（下载地址:

2）原理：

先使用一种空白的图片grey.gif代替指定的图片元素（lazyLoad允许指定页面上那些图片需要延迟加载。

比如$（"img.lazy"）.lazyload（）表示class为lazy的图片延迟加载。

$（"img"）.lazyload（）表示所有图片都延迟加载）。

当页面滚动条滚动到该图片时，再将图片的src还原。

注意：

lazyload好处在于并不会影响页面元素的开发。

你不需要在img标签上附加任何的配置。

lazyLoad会自动将图片的src设置为空白图片grey.gif。

1.5：

图片缓存

　在网站中，其实许多图片，是固定不变的，在很长的时间内基本图片都是没有变化的，为了合理的利用缓存技术来提高页面的加载速度，我们可以给这些固定不变的图片，加上一个相对较长的过期时间，从而在下载加载的时候，可以不用向服务器请求HTTP，而是利用缓存、提高了页面的加载速度。

2：

页面css代码优化

2.1：

css代码位置

XX站长工具：

CSS说明出现在后，页面需要重新渲染，打开速度受到影响。

Yslow：

PutCSSattop

两者都要求将css代码放在body标签的前面，同时应尽量避免页内和行内样式表（特殊情况除外）

2.2：

css代码格式优化

Css代码压缩：

网上有很多专门的压缩工具，。

YUICompressor和CSSTidy都是不错的工具。

Css代码简化：

针对color，margin，padding，font等属性值的设置尽量采用简写形式。

Css定义优化：

尽量避免使用标签选择器，尽量不要使用*通配符，推荐使用ID或者Class选择器，由于样式表的匹配是由右至左进行匹配，使用标签选择器会对全文中的对应标签进行匹配，消耗资源。

采用这样的方式#page#pic_list_ul.pic_list_li.pic_list_img。

2.3：

css代码模块化

　另一种优化CSS代码的方法是按照你的习惯将CSS生命分成清晰的结构块。

将CSS文件的声明用注释分隔开并进行排版，可以更方便自己在很长时间以后重新审理这个CSS文件，到时候效率会高出许多。

3：

js代码优化

3.1：

js代码位置

XX站长工具：

JS放在页面最后，可以加快页面打开速度。

Yslow：

PutJavaScriptatbottom

两者都要求将css代码放在body标签的后面面，同时应尽量避免页内js代码（特殊情况除外）

3.2：

js代码格式优化

Js代码本身的优化（进一步研究）

Js代码压缩

4.使用CDN

CDN的全称是ContentDeliveryNetwork，即内容分发网络。

其目的是通过在现有的Internet中增加一层新的网络架构，将网站的内容发布到最接近用户的网络”边缘”，使用户可以就近取得所需的内容，解决Internet网络拥挤的状况，提高用户访问速度。

5：

更改网站根目录.htaccess文件

AddExpiresheaders

Configureentitytags（ETags）

Compresscomponentswithgzip

AddExpiresheaders（添加周期头）

周期头就是给加载的文件设置个时间，这个时间之内读取网页内容还在的话那就从本地缓存读取，如果超过设定时间就重新在服务器再请求一边数据。

设定周期头之后访问速度会比之前只要刷新一次网页就申请一边数据快很多。

ExpiresActiveOn

ExpiresDefaultA3600

ExpiresByTypeimage/gifA2592000

ExpiresByTypeimage/pngA2592000

ExpiresByTypeimage/jpegA2592000

ExpiresByTypeimage/jpgA2592000

ExpiresByTypetext/plainA604800

ExpiresByTypeapplication/x-shockwave-flashA2592000

ExpiresByTypevideo/x-flvA2592000

ExpiresByTypeapplication/pdfA2592000

ExpiresByTypetext/htmlA600

ExpiresByTypeimage/x-iconA2592000

ExpiresByTypeapplication/javascriptA604800

ExpiresByTypetext/cssA604800

Gzip压缩是减少文件体积，增加访问速率。

AddOutputFilterDEFLATEhtmlxmlphpjscss

ETags（Entitytags）是服务器和浏览器的一个功能，它用来判断浏览器缓存里的元素是否和原来服务器上的一致。

ETags比

last-modifieddate

更具有弹性，它用一个独一无二的字符串来标识一个元素的版本。

如果你不想发挥Etags提供的这个弹性验证模型的优势，你最好关掉它。

FileETagnone

6：

其它

XX站长工具中还涉及到

1：

取消重定向

2：

去除错误链接

3：

字符集声明

4：

url长度检测

5：

静态页面参数检测

6：

meta信息完善程度检测

7：

frame信息检测

8：

flash文字信息检测

项目样式表

所有页面的头部和底部样式及通用样式采用的是newindex4.css中的样式

newindex4中定义的通用样式

.hide

隐藏

.left

左浮动

.right

右浮动

.no_float

不浮动

.clear

清除浮动

.clearfix:

after

清除浮动

#page

宽度1000px居中

.f16.f14

14px16px字体

.mar_t_10.mar_t_12.mar_t_20.mar_t_30.mar_r_10.mar_r_25

.mar_b_5.mar_b_10

上右底部margin值

.index_box

边框为1pxsolid#dfdfdf的box

.more

更多链接的样式

注意：

样式设定有浮动故class为more的span应在标题的左边

首页

newindex4.css

资讯页面

newindex4.css

news.css

装修专区

newindex4.css

deco.css

实体店页面

newindex4.css

brand.css

装修图库页面

newindex4.css

zxtk.css

store_tuan

about模块下

newindex4.css

about.css

activity模块下

newindex4.css

activity.css

celiang模块下

newindex4.css

celiang.css

album模块下

newindex4.css

zxtk.css

brand模块下

newindex4.css

brand.css

user模块下

newindex4.css

user.css

search模块下

newindex4.css

search.css

purchase模块下

newindex4.css

tuan/store/purchase.css

store_my

store/my.css

store_help

help/help.css

store_passport

passport/module-register.css

store_manage

manage/manage.css

manage/mall.css

tuangou

tuangou/tuan.css

tuangou/newtuan.css

tuangou/bxtuan.css

tuangou/coupon.css