web前端页面性能优化

作者:itchina110 来源:经典论坛 时间:2009-08-15 12:31:00 

影响用户访问的最大部分是前端的页面。网站的划分一般为二:前端和后台。我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等。而前端呢?其实应该是属于功能的表现。

而我们建设网站的目的是什么呢?不就是为了让目标人群来访问吗?所以我们可以理解成前端才是真正和用户接触的。

除了后台需要在性能上做优化外,其实前端的页面更需要在性能优化上下功夫,只有这样才能给我们的用户带来更好的用户体验。不仅仅如此,如果前端优化得好,他不仅可以为企业节约成本,他还能给用户带来更多的用户,因为增强的用户体验。说了这么多,那么我们应该如何对我们前端的页面进行性能优化呢?

前端的页面主要包括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,前端,性能优化
0
投稿

猜你喜欢

  • Python基于递归和非递归算法求两个数最大公约数、最小公倍数示例

    2023-04-19 19:40:57
  • Python爬虫scrapy框架Cookie池(微博Cookie池)的使用

    2023-03-25 00:27:03
  • node基于express框架操作Mysql数据库的步骤

    2024-01-22 11:09:54
  • python实现微信小程序的多种支付方式

    2021-03-26 21:38:58
  • python使用matplotlib模块绘制多条折线图、散点图

    2021-07-28 06:41:20
  • 详解Python模块化--模块(Modules)和包(Packages)

    2023-03-30 01:14:27
  • MySQL因大事务导致的Insert慢实例分析

    2024-01-22 22:07:54
  • Python 可迭代对象 iterable的具体使用

    2021-08-28 08:24:32
  • Python字节单位转换(将字节转换为K M G T)

    2023-11-04 02:26:18
  • Warning: require(): open_basedir restriction in effect,目录配置open_basedir报错问题分析

    2023-06-02 23:28:18
  • Windows安装Anaconda3的方法及使用过程详解

    2022-03-03 06:20:10
  • Python列表的索引与切片

    2022-11-17 13:06:19
  • Python异常对象Exception基础类异常捕捉

    2021-10-21 03:46:25
  • 分享13款非常有用的jQuery插件

    2011-05-16 19:07:00
  • 使用sklearn对多分类的每个类别进行指标评价操作

    2022-04-20 17:19:39
  • js鼠标按键事件和键盘按键事件用法实例汇总

    2024-04-17 10:04:29
  • Python中OpenCV实现查找轮廓的实例

    2023-12-05 05:26:24
  • Python线程threading模块用法详解

    2023-01-30 03:55:01
  • T-SQL篇如何防止SQL注入的解决方法

    2024-01-23 16:51:06
  • 做新产品?悠着点

    2009-03-01 13:10:00
  • asp之家 网络编程 m.aspxhome.com