- 浏览: 155036 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (137)
- JavaScript (23)
- get post (0)
- SSH (4)
- Hibernate (1)
- cmd (2)
- 火狐 IE (1)
- 中英文环境模板下载 (1)
- 日期 (0)
- 其他总结 (5)
- 正则校验 (3)
- Sql Server (0)
- FreeMarker (1)
- 继承 (1)
- SQL (2)
- ORACLE -- SQL Server -- Access 常见Sql语句的区别 (1)
- ORACLE -- SQL Server -- Access 常见Sql语句的区别 (0)
- 解决int和Integer不能互转 (0)
- 原子类 (1)
- Final,finally,finalize的区别 (1)
- Web前端 (12)
- Reader InputStream (1)
- 线程 (1)
- JDBC (1)
- AJAX (3)
- Linux (2)
- 素数 (1)
- 接口-----继承 (1)
- 数据库查询性能优化 (1)
- Spring MVC3 深入了解 (1)
- JS (18)
- log4j简介 (1)
- Java序列化的机制和原理 (0)
- allowTransparency属性 (1)
- 测试类 (1)
- CSS (14)
- JQuery (10)
- 多线程 (1)
- 数据库 (2)
- Spring 注解 (1)
- JSTL标签库 (1)
- HTML (8)
- 界面设计 (4)
- 测试 (4)
- 职业生涯 (1)
- 数据可视化 (1)
- UI设计 (3)
- eclipse怎样生成javadoc (2)
- redis memcache 比较 (1)
- Windows 8系统IE10无法安装Flash Player插件的解决办法 (1)
- IE7 问题 (1)
- 常用JS验证 (1)
- Hadoop,MapReduce学习步骤 (1)
- 开始-运行-命令大全 (1)
- jQuery与ExtJS优缺点比较 (1)
- Oracle (1)
- 文档转换 (1)
- Maven与Ant比较 (1)
最新评论
-
谁说我不是会员:
很给力的文章,通俗易懂
Get请求和Post请求的区别 -
Spirit_eye:
请问一个图片按钮怎么置灰
按钮置灰跟按钮不显示
web前端页面性能优化
影响用户访问的最大部分是前端的页面。网站的划分一般为二:前端和后台。我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等。而前端呢?其实应该是属于功能的表现。
而我们建设网站的目的是什么呢?不就是为了让目标人群来访问吗?所以我们可以理解成前端才是真正和用户接触的。
除了后台需要在性能上做优化外,其实前端的页面更需要在性能优化上下功夫,只有这样才能给我们的用户带来更好的用户体验。不仅仅如此,如果前端优化得好,他不仅可以为企业节约成本,他还能给用户带来更多的用户,因为增强的用户体验。说了这么多,那么我们应该如何对我们前端的页面进行性能优化呢?
前端的页面主要包括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 规范在文档 <head /> 内加载你的样式表。
对于拥有较大浏览量的首页来说,有一种技术可以平衡内置代码带来的 HTTP 请求减少与通过使用外部文件进行缓存带来的好处。其中一个就是在首页中内置 JavaScript 和 CSS ,但是在页面下载完成后动态下载外部文件,在子页面中使用到这些文件时,它们已经缓存到浏览器了。
Coockie:
减小Cookie体积
对于页面内容使用无coockie域名
图片:
优化图像
优化CSS Spirite
不要在HTML中缩放图像
favicon.ico要小而且可缓存
移动应用:
保持单个内容小于25K
打包组件成复合文本
此文中谈到了编辑,其实通过我走过的公司来看,很多公司其实不止是编辑,甚至连开发,他们对xhtml的规划都还不够非常了解,所以经常会出现已经上线的页面出现一些这样那样的问题,比如注释,或者标签不闭合等等,所以我建议各个公司可以开一些关于交流的会,这样的话,各个职位间可以交互交流,其实也可以说是培训吧,只有这样,才能够打造出一个好的产品。
影响用户访问的最大部分是前端的页面。网站的划分一般为二:前端和后台。我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等。而前端呢?其实应该是属于功能的表现。
而我们建设网站的目的是什么呢?不就是为了让目标人群来访问吗?所以我们可以理解成前端才是真正和用户接触的。
除了后台需要在性能上做优化外,其实前端的页面更需要在性能优化上下功夫,只有这样才能给我们的用户带来更好的用户体验。不仅仅如此,如果前端优化得好,他不仅可以为企业节约成本,他还能给用户带来更多的用户,因为增强的用户体验。说了这么多,那么我们应该如何对我们前端的页面进行性能优化呢?
前端的页面主要包括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 规范在文档 <head /> 内加载你的样式表。
对于拥有较大浏览量的首页来说,有一种技术可以平衡内置代码带来的 HTTP 请求减少与通过使用外部文件进行缓存带来的好处。其中一个就是在首页中内置 JavaScript 和 CSS ,但是在页面下载完成后动态下载外部文件,在子页面中使用到这些文件时,它们已经缓存到浏览器了。
Coockie:
减小Cookie体积
对于页面内容使用无coockie域名
图片:
优化图像
优化CSS Spirite
不要在HTML中缩放图像
favicon.ico要小而且可缓存
移动应用:
保持单个内容小于25K
打包组件成复合文本
此文中谈到了编辑,其实通过我走过的公司来看,很多公司其实不止是编辑,甚至连开发,他们对xhtml的规划都还不够非常了解,所以经常会出现已经上线的页面出现一些这样那样的问题,比如注释,或者标签不闭合等等,所以我建议各个公司可以开一些关于交流的会,这样的话,各个职位间可以交互交流,其实也可以说是培训吧,只有这样,才能够打造出一个好的产品。
发表评论
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2014-05-06 11:07 351<meta name="viewport&qu ... -
在CSS中定义a:link、a:visited、a:hover、a:active顺序
2014-05-05 14:00 706http://blog.snsgou.com/post-2.h ... -
提高网站打开速度的7大秘籍
2014-04-25 11:11 547提高网站打开速度的7大秘籍 http://lusongs ... -
PNG8和PNG24的区别
2014-04-25 10:35 1058PNG8和PNG24的区别 内容图片的大小的优化,告诉大 ... -
web前端页面性能优化小结
2014-04-25 10:21 635web前端页面性能优化小 ... -
LABjs、RequireJS、SeaJS 哪个最好用?为什么?
2014-03-14 11:15 591LABjs、RequireJS、SeaJS 哪 ... -
CSS Sticky Footer: 完美的CSS绝对底部
2013-09-04 17:42 655CSS Sticky Footer: 完美的CSS绝对底部 ... -
流体布局
2013-09-04 11:53 685流体布局 在我的另一篇文章《弹性+固宽布局》http://li ... -
《弹性+固宽布局》
2013-09-04 11:32 726《弹性+固宽布局》 在 ... -
前端布局
2013-03-20 11:59 666网页布局; http://www.subcide.com ... -
Web前端
2012-11-06 15:57 656HTML5迟来的API:Page Visibility ... -
腾讯Web前端
2012-11-06 15:55 0日期格式化:System.out.println(new ...
相关推荐
让你页面速度飞起来,Web前端性能优化。 让你页面速度飞起来,Web前端性能优化。百度云盘视频资料,下载直接看
### Web前端性能优化知识点 #### 一、构建优化 **1.1 文件压缩与合并** - **文件压缩**:利用工具如UglifyJS、Terser等对JavaScript、CSS等静态资源进行压缩,减少文件体积,从而加快加载速度。 - **文件合并**:...
让你页面速度飞起来 Web前端性能优化 让你页面速度飞起来 Web前端性能优化
针对web前端性能低下的问题,王成、李少元、郑黎晓、缑锦、曾梅琴、刘慧敏等学者系统地提出了一套旨在提高网页加载速度、呈现速度和用户体验的完整Web前端性能优化解决方案。该方案涵盖了服务器端优化、HTML优化、...
Web 前端性能优化的研究与应用 摘要:随着计算机技术和网络通讯技术的高速发展,Web 应用已经成为人们的一种必不可少的工具,充斥着人们生活的方方面面。然而,随着 Web 站点数量的激增和用户规模的日益庞大,其...
Web前端性能优化是提升网页用户体验和确保网站成功的关键因素之一。性能优化涉及多个方面,包括但不限于代码优化、资源加载策略、服务器配置等。本篇内容将深入探讨Web前端性能优化的思路与学习方法,结合WebQQ、QQ...
综合以上内容,可以得知郭碧青在Web前端性能优化方面拥有丰富的知识和实践经验,他不仅关注于前端代码的性能提升,还涉足前端工程化、性能监控、移动端性能优化以及页面渲染优化等多个方面。他的分享对于想要深入...
随着互联网技术的快速发展,Web前端技术也逐渐成为了互联网开发的重要一环。然而,在如今这个追求极致体验的时代,我们不仅要实现业务需求,更需要考虑如何优化用户体验,提升页面性能。本文将从JavaScript、React、...
在现代Web开发中,前端性能优化是至关重要的,它直接影响用户体验和网站的转化率。本文档将探讨如何提升WEB前端的性能,通过遵循一系列规则和使用专业的工具来达到最佳效果。我们将详细介绍YSLOW工具,这是一个非常...
Web前端性能优化是提高网页加载速度和用户体验的关键因素。Yahoo! 的 Exceptional Performance team 提出了一系列不断更新的优化策略,从最初的13条发展到现在的34条,涵盖了多个角度,包括内容、服务器、Cookie、...
Web 前端性能优化技术指南 Web 前端性能优化是指通过各种技术手段来提高 Web 应用程序的加载速度和响应速度,以提高用户体验。下面是 Web 前端性能优化的几个关键技术点: 一、加载优化 加载优化是指通过减少加载...
Web前端性能优化是提升网页加载速度和用户体验的关键环节。这篇经验分享主要涵盖了四个核心知识点,旨在帮助前端开发者理解和实践性能优化技巧。 1. 减少HTTP请求 HTTP请求是浏览器与服务器交互的基础,但每一次...
本文提供了一套详尽的前端性能优化检查表,主要内容包括:最小化iframe数量、精简HTML(去除注释和空格)、使用CDN、预加载URL、精简CSS、合并CSS文件、移除未使用的CSS、内联关键CSS、压缩图像、控制字体大小、延迟...
在IT行业的领域内,"web前端性能测试"是一项至关重要的技术环节,它直接影响着用户的体验质量和网站的整体性能表现。从给定的文件信息来看,我们可以深入探讨以下几点关键知识点: ### 1. 前端性能测试的目的 前端...
前端性能优化是指在前端开发过程中,对Web应用程序的性能进行优化,以提高用户体验和页面加载速度。本文将介绍前端性能优化的经验沉淀,包括机票双程性能优化和开发工具的使用。 一、前端性能优化 1. 机票双程性能...
这本"前端性能优化原理与实践"小册子深入探讨了如何通过一系列技术手段优化前端页面,旨在帮助开发者构建更快、更流畅的Web应用。以下是该压缩包文件中可能涉及的一些核心知识点: 1. **延迟加载(Lazy Loading)**...
【web前端性能优化】是提升网站用户体验的关键环节。在当今互联网环境下,网页的加载速度直接影响着用户的满意度和网站的留存率。以下是一些基础且实用的前端优化策略: 1. **合并CSS和JavaScript文件**:减少HTTP...
本文主要围绕"WEB前端页面性能评测和综合意见"展开,涉及了多个关键知识点,包括性能评测工具的使用、优化方法以及前端项目的评估标准。 首先,我们可以使用Google提供的PageSpeed Insights工具...