成都网站建设
|
域名注册
|
虚拟主机
|
网站制作
|
网站案例
|
网站优化
|
网站推广
|
企业邮局
|
服务器租用
|
广告设计
首页
域名注册
虚拟主机
网站建设
服务器租用
营销推广
网站程序
前端开发
移动互联网
企业邮箱
成都网站设计
|
网站制作
|
网站建设
|
移动建站
|
商城微商开发
|
微分销系统
|
营销型网站建设
|
定制网站
|
企业品牌建设
|
网站改版
|
网站维护
网站建设
网站策划
网站方案
网页设计
网站制作
网站改版
网站维护
域名注册
英文域名
中文域名
域名转入\转出
通用网址
无线网址
虚拟主机
主机购买
数据库
主机管理
FTP上传
主机续费升级
服务器租用
web服务器
FTP服务器
服务器租用
服务器托管
云主机服务器
营销推广
seo优化
网站推广
搜索引擎
免费资源
网站程序
vb编程
asp程序
php程序
asp.net程序
C#程序
前端开发
html
div+css
css
jQuery
JavaScript教程
移动互联网
wap手机网站
app应用开发
微网站
企业邮箱
企业邮箱优势
企业邮箱设置
邮箱收发问题
邮箱功能讲解
邮箱其他问题
网站备案
备案流程指南
备案资料下载
备案常见问题
各省备案要求
当前位置:
创新互联
>>
常见问题
>>
网站建设
>>
网站策划
>>
web前端页面性能优化总结
web前端页面性能优化总结
作者:创新互联 文章来源:网站建设部 点击数:
更新时间:2009-07-03
影响用户访问的最大部分是前端的页面。网站的划分一般为二:前端和后台。我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等。而前端呢?其实应该是属于功能的表现。
而我们建设网站的目的是什么呢?不就是为了让目标人群来访问吗?所以我们可以理解成前端才是真正和用户接触的。
除了后台需要在性能上做优化外,其实前端的页面更需要在性能优化上下功夫,只有这样才能给我们的用户带来更好的用户体验。不仅仅如此,如果前端优化得好,他不仅可以为企业节约成本,他还能给用户带来更多的用户,因为增强的用户体验。说了这么多,那么我们应该如何对我们前端的页面进行性能优化呢?
前端的页面主要包括xhtml,css,js。其实xhtml就是现实中所谈到的内容,页面的内容:文字,图片,flash,视频等。
而前端开发工作者可以控制的是什么呢?那就是xhtml,css,js的代码及相应的修饰(背景)图片。下面我就根据我自己的经验来说说:
一、提倡前端开发工程师在书写xhtml的时候做到结构语义化。
结构中主要包括了head和body两个部分,但是我们经常说的是结构语义化主要是body中的标签,但是我在这里还是简单的说一下head,head中其实包括了一些对于我们seo很有用的一些东西,比如title,Description,Keywords,这些东西在蜘蛛抓取的时候都是有帮助的,当然,还有其他的一些,我在此就不一一说明了,比如设置缓存等一些其他的信息。
那么body中的话,包括的标签就很多了,我觉得作为一个合格的前端开发人员你应该去熟悉他们,比如div,span,h,ul,ol,dl,p等等这类的标签的使用。应该非常合理,还有就是注意h标签的断层,及h1标签的使用,这些都是非常重要的。
同时在我们的结构中不要出现style和onclick这样的内联的样式和事件。希望大家能够注意结构与表现、行为的分离。
二、css,js文件数量及大小的优化
那么关于css、js的优化的话,一般情况下建议css和js采用外联式。但是如果你的页面内容比较多,设计师把整个效果做得比较花的话,恐怕css就非常多了,那么这种情况下,你一定要把你的css规划好,尽量的采用缩写,这样可以减少css文件的大小,那么对css做相应的规划也可以减少css的个数,减少http请求数,js同理。
三、背景图片数量及大小的优化
当我们将设计师的设计稿还原成静态页面后,除非页面所有的修饰全是色块,内容全是文字,没有图片,如果不是这样的话,那么我们需要对图片做优化处理。当然内容图片我们是没有办法了,因为他是属于内容部分的,一般情况是由于编辑处理,当然,我在还是有一个小小的建议,如果我们的网站中需要有内容图片,希望编辑能够将他们最优化以后,在进行上传,一会儿告诉我的方法,下面我在说说,作为前端开发应该如何处理我们的修饰(背景)图片。
由于我们的背景图片数量比较多,这样的话,会给服务器带来影响,增加了http请求数,我们是否有一种好的解决办法呢?这个答案是肯定的,如果你是一个合格的前端开发,你应该清楚,在我们的css定义背景的时候,可以通过坐标来实现对背景进行定位的,既然如此,那么我们可以将这些背景合并起来,这样即可减少http请求数,同时,我们在背景整合的时候,也需要考虑图片质量,同时也需要考虑图片的大小,我在以前有写过相应的博文。
四、内容图片的大小的优化
其实刚才已经说了内容图片的问题,那么我在这里呢,告诉大家一个比较简单的方法,就是使用雅虎提供的一个工具。他就是smushit:http://www.smushit.com/
不过他这个工具我觉得对于我们需要发布的内容图片还是比较麻烦,但是他可以进行优化,优化图片的目的,最开始已经说了,图片越小,我们的用户下载速度越快,当然对企业的服务器的带宽也可以起到节省的作用。
上面是我关于前端页面性能的一些简单的看法,当然web标准中提到的结构,表现,行为,我们工作说的xhtml,css,js其实他们还有很多东西,需要我们去学习,比如结构语义化他就是一个深入研究的课题,性能优化也是如此,不过只有我们不断的去挖崛,我们才可能进步。下面对我前端开发的出品有一个简单的建议:
1、我们做还原的页面能够通过http://validator.w3.org的验证,当然css希望也能通过http://jigsaw.w3.org/css-validator/validator验证,不过有时候由于需要兼容多浏览器,会受到hack的影响,css不做强制要求。
2、作前端的我觉得应该知道yslow。如果不知道可以看看我以前写的文章,你觉得你的静态页面应该能够通过yslow2.0的classic(V1)级别的检测,检测的结果我觉得应该得到A。
3、你的背景图片保证不超过3个以上,你的css文件不超过2个,js文件不超过3个。而且良好的遵守web标准的一些规定,css放到head中,js文件放到《/body》之前或者之后。
4、当然就是希望你能够对你的页面进行裸体检查。其实就是来检验你的结构语义化是否有效果。
裸体检查:就是将你的css和js都去掉,查看你的html,看这些内容你是否能够看懂。
5、检测你的h标签是否断层。
6、建议body中增加text-align:center。
7、当然还有很多,比如什么id,class的命名呀,这些东西,我觉得应该是你的团队中应该做的事情。
8、作为大型网站来说,首页使用内联式样式表,这样可以减少http请求数的同时,也可以防止裸奔。当然其他页面需要使用外联样式表,这样才可以方便维护。因为作为大型网站来说,他的首页访问量是非常的大的,所以。。
把样式表置于顶部
把脚本置于页面底部
避免使用 CSS 表达式(Expression)
使用外部 JavaScript 和 CSS
削减 JavaScript 和 CSS
用 《link》 代替 @import
避免使用滤镜
剔除重复脚本
减少DOM访问
开发智能事件处理程序
最好的方案就是按照 HTML 规范在文档内加载你的样式表。
对于拥有较大浏览量的首页来说,有一种技术可以平衡内置代码带来的 HTTP 请求减少与通过使用外部文件进行缓存带来的好处。其中一个就是在首页中内置 JavaScript 和 CSS ,但是在页面下载完成后动态下载外部文件,在子页面中使用到这些文件时,它们已经缓存到浏览器了。
Coockie:
减小Cookie体积
对于页面内容使用无coockie域名
图片:
优化图像
优化CSS Spirite
不要在HTML中缩放图像
favicon.ico要小而且可缓存
移动应用:
保持单个内容小于25K
打包组件成复合文本
此文中谈到了编辑,其实通过我走过的公司来看,很多公司其实不止是编辑,甚至连开发,他们对xhtml的规划都还不够非常了解,所以经常会出现已经上线的页面出现一些这样那样的问题,比如注释,或者标签不闭合等等,所以我建议各个公司可以开一些关于交流的会,这样的话,各个职位间可以交互交流,其实也可以说是培训吧,只有这样,才能够打造出一个好的产品。
好了,我就谈这些,这些东西也是我的一些简单的看法,当然,你可能不赞成我说的,或者你有更好的建议,你可以单独联系我们,在些感谢大家对创新互联的支持!
网站策划的流程 -创新互联
:上一篇
网站设计策划性能优化提速
:下一篇
网站策划相关文章
网站策划的流程 -创新互联
未来网站策划的发展趋势
网站策划总述 -创新互联
网站策划运营不只你想的那么简单
合格的网站策划 -创新互联
网站策划需要注意什么
网页版面布局的原理与形式
网站设计策划性能优化提速
创新互联专业网站策划、设计、制作、维护、推广一条龙服务!
网站备案
|
企业邮箱
|
移动互联网
|
前端开发
|
网站程序
|
营销推广
|
服务器租用
|
网站建设
|
虚拟主机
|
域名注册
|
热门搜索
服务电话:028-86922220 13518219792 公司地址:成都市太升南路288号锦天国际A幢10楼2号
企业邮箱:
service@cdxwcx.com
版权所有:成都创新互联科技有限公司 蜀ICP备09010846号
成都网站建设