前端优化总结.doc

前端优化总结
使用工具
1:火狐附加组件Yslow
YSlow是Yahoo发布的一款基于FireFox的插件。YSlow可以对网站的页面进行分析,并告诉你为了提高网站性能,如何基于某些规则而进行优化。
根据Yslow的优化建议,一步一步对页面中可以优化的点进行优化,在代码压缩和图片处理方面,Yslow工具栏中提供了可以利用的工具,效果也不错。
2:百度站长工具
http://zhanzhang./optimization/index
输入网页的URL地址,得到检测结果。
展开详情,将详细给出优化的建议,最后一项图片的Alt信息也可以理解为为页面SEO而设置,既可以方面百度检索,也可以为用户检索提供便利。在Yslow中并未涉及声明图片大小对页面优化是否影响的问题,参考其他网站也只是部分图片设置为尺寸大小,因而在优化此项时,可以视具体情况而定,对于大小确定的图片,加上其尺寸,可以在一定程度上加快页面的渲染速度。关于合并css和js选项的问题,很容易和网站的模块化产生冲突,这就需要找一个比较折中的解决方法。
3:网站测速Gtimetric
/
输入待优化页面的网站
自动生成页面的Yslow得分和页面加载得分等
Download PDF 生成页面优化详情的PDF文档(相当详细,包括图片,css代码,html标签优化各个方面)
Breakdown 详细给出页面加载速度,Yslow的各个条目的得分和Timeline。
这个网站还可以进行两个页面对比,我们可以和做的比较好的网站进行对比,找出自己网站在哪个方面得分低,进行有目的的优化。
4:CSS Script
-/
页面中有很多小图片就会有多次的http请求,将这些小图片合并到一张大图上,一定程度上减少http请求,可以相对提高网页的加载速度。
虽然是将多个小图片整合成一个大图片,但是图片也不能太大,控制在70Kb以下(参考淘宝网和京东商城的css sprite大图片一般都是40KB以下的)。
5:FireWorks切图及优化
前端开发的第一步是对拿到手的页面进行分析合理的切图,FireWorks是个不错的工具,可以查看各个图层的图片并进行图片的合并,对于切图应以哪种格式保存比较重要,在即保证图片质量又减小图片大小的前提下,针对不同的图片采用不同的格式进行保存尤为重要。
文件------>新建
Ctrl+c复制第一步选定的图片,ctrl+v粘贴到新建画布上
文件------>导出向导
继续----->(网站)继续------>退出------->图像预览
格式:选择输出图片的格式
透明方式:选择图片是不透明或者索引色透明或者alpha透明
index tansparency 是根据一个或多个颜色来透明,而alpha transparency是根据画布中图像的区域来作透明。举个例子,在白色的背景上有一个卡通人他的眼睛也是白色的,那么使用index tansparency 的话,背景和眼睛都透明了,而alpha transparency使得背景透明,眼睛不透明。
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