文档章节

web前端页面性能优化小结

webxiaohua
 webxiaohua
发布于 2015/04/14 22:15
字数 2522
阅读 14
收藏 0

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

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

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

前端的页面主要包括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这样的内联的样式和事件。希望大家能够注意结构与表现、行为的分离。

(PS:标签语义化的好处:1.有利于搜索引擎;2.结构清晰的HTML在团队合作中的作用,就不必说了吧;3.有利于盲人屏幕阅读器。至于如何做到标签语义化,就看个人的理解了,这方面我也觉得模糊,跟个人的习惯估计也有一定的关系,总之邹惠斌老师是认为我的标签不语义的。)

二、css,js文件数量及大小的优化

那么关于css、js的优化的话,一般情况下建议css和js采用外联式。但是如果你的页面内容比较多,设计师把整个效果做得比较花的话,恐怕css就非常多了,那么这种情况下,你一定要把你的css规划好,尽量的采用缩写,这样可以减少css文件的大小,那么对css做相应的规划也可以减少css的个数,减少http请求数,js同理。

(PS:减少重复性代码,代码重复利用,在这里显得特别重要)

三、背景图片数量及大小的优化

当我们将设计师的设计稿还原成静态页面后,除非页面所有的修饰全是色块,内容全是文字,没有图片,如果不是这样的话,那么我们需要对图片做优化处理。当然内容图片我们是没有办法了,因为他是属于内容部分的,一般情况是由于编辑处理,当然,我在还是有一个小小的建议,如果我们的网站中需要有内容图片,希望编辑能够将他们最优化以后,在进行上传,一会儿告诉我的方法,下面我在说说,作为前端开发应该如何处理我们的修饰(背景)图片。

由于我们的背景图片数量比较多,这样的话,会给服务器带来影响,增加了http请求数,我们是否有一种好的解决办法呢?这个答案是肯定的,如果你是一个合格的前端开发,你应该清楚,在我们的css定义背景的时候,可以通过坐标来实现对背景进行定位的,既然如此,那么我们可以将这些背景合并起来,这样即可减少http请求数,同时,我们在背景整合的时候,也需要考虑图片质量,同时也需要考虑图片的大小,我在以前有写过相应的博文。

(PS:这里建议使用PNG8格式的图片结合css sprite,同样的图片,PNG8格式会相对来比GIF小)

四、内容图片的大小的优化

其实刚才已经说了内容图片的问题,那么我在这里呢,告诉大家一个比较简单的方法,就是使用雅虎提供的一个工具。他就是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文件放到之前或者之后。

4、当然就是希望你能够对你的页面进行裸体检查。其实就是来检验你的结构语义化是否有效果。

裸体检查:就是将你的css和js都去掉,查看你的html,看这些内容你是否能够看懂。

5、检测你的h标签是否断层。

   (PS:就是按照h1,h2,h3,h4….,不要中间漏掉h2)

6、建议body中增加text-align:center。

7、当然还有很多,比如什么id,class的命名呀,这些东西,我觉得应该是你的团队中应该做的事情。

  (PS:这里得去好好看看clsaa选择器的权重和优先级)

8、作为大型网站来说,首页使用内联式样式表,这样可以减少http请求数的同时,也可以防止裸奔。当然其他页面需要使用外联样式表,这样才可以方便维护。因为作为大型网站来说,他的首页访问量是非常的大的,所以。。

把样式表置于顶部
把脚本置于页面底部
避免使用 CSS 表达式(Expression)
使用外部 JavaScript 和 CSS
削减 JavaScript 和 CSS
用 代替 @import
避免使用滤镜
剔除重复脚本
减少DOM访问
开发智能事件处理程序

最好的方案就是按照 HTML 规范在文档  内加载你的样式表。

对于拥有较大浏览量的首页来说,有一种技术可以平衡内置代码带来的 HTTP 请求减少与通过使用外部文件进行缓存带来的好处。其中一个就是在首页中内置 JavaScript 和 CSS ,但是在页面下载完成后动态下载外部文件,在子页面中使用到这些文件时,它们已经缓存到浏览器了。

Coockie:

减小Cookie体积
对于页面内容使用无coockie域名

图片:

优化图像
优化CSS Spirite
不要在HTML中缩放图像
favicon.ico要小而且可缓存

移动应用:

保持单个内容小于25K
打包组件成复合文本

此文中谈到了编辑,其实通过我走过的公司来看,很多公司其实不止是编辑,甚至连开发,他们对xhtml的规划都还不够非常了解,所以经常会出现已经上线的页面出现一些这样那样的问题,比如注释,或者标签不闭合等等,所以我建议各个公司可以开一些关于交流的会,这样的话,各个职位间可以交互交流,其实也可以说是培训吧,只有这样,才能够打造出一个好的产品。

© 著作权归作者所有

共有 人打赏支持
webxiaohua
粉丝 10
博文 44
码字总数 29786
作品 0
普陀
程序员
私信 提问
移动 Web 开发问题和优化小结

1.前言 到目前为止,互联网行业里,手机越来越智能化,移动端占有的比例越来越高,尤其实在电商,新闻,广告,游戏领域。用户要求越来越高,网站功能越来越好,效果越来越炫酷,这就要求我们...

守候i
2017/09/25
0
0
大型网站技术架构 核心原理与案例分析 2016-4-17

第1篇 概述 1 大型网站架构演化 2 1.1 大型网站软件系统的特点 3 1.2 大型网站架构演化发展历程 4 1.2.1 初始阶段的网站架构 4 1.2.2 应用服务和数据服务分离 4 1.2.3 使用缓存改善网站性能 ...

jayronwang
2016/04/17
122
0
WEB前端性能优化基本套路

前言 前端性能优化这是一个老生常谈的话题,但是还是有很多人没有真正的重视起来,或者说还没有产生这种意识。 当用户打开页面,首屏加载速度越慢,流失用户的概率就越大,在体验产品的时候性...

32氪
2017/07/31
0
0
线上商城系统开发需求前端开发工程师(兼职可远程)

1、负责移动端H5页面前端开发,编写HTML、CSS和JS代码,配合后台工程师完成应用开发 2、制定JS、CSS、HTML开发规范并推进执行,扎实的JS功底,精通VueMV框架(如Vue, 3、了解前端模块化,工程...

shanwell
2016/09/05
3
2
Web App 前端开发项目求前端工程师一枚

【业务需求】 1、负责移动端部分H5页面前端开发(四组),编写HTML、CSS和JS代码,配合后台工程师完成应用开发 2、制定JS、CSS、HTML开发规范并推进执行,扎实的JS功底,熟练一种或多种MV框架...

shanwell
2016/08/25
2
0

没有更多内容

加载失败,请刷新页面

加载更多

正则表达式匹配不包含

^((?!xxx).)*$

安小乐
7分钟前
1
0
python Windows tkinter应用开发3 列出目录的所有文件

在本章中,我们将编写程序来执行此操作。 1)选择文件夹。 2)在UI的标签部分打印该文件夹中的所有文件名(带文件扩展名)。 首先,修改selectFile函数以打开文件夹。主文件如下: from tki...

python测试开发人工智能安全
8分钟前
1
0
使用Laya引擎开发微信小游戏(上)

  使用一个简单的游戏开发示例,由浅入深,介绍了如何用Laya引擎开发微信小游戏。      img      作者:马晓东,腾讯前端高级工程师。      微信小游戏的推出也快一年时间了,...

SEOwhywhy
13分钟前
1
0
react程序开发问题记录

1、webpack.config.dev.js文件的publicpath配置

teamlog
26分钟前
2
0
javascript 值转换为布尔值

任意javascript 的值都可以转换为布尔值。 特别是在 if() 等判断中使用的时候: 下面这些值会被转换为 false undefined , null , 0 , -0 , NaN , "" 空字符串 来自 JavaScript 权威指南 书籍...

之渊
29分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部