linhui_dragon
- 浏览: 155882 次
- 性别:
- 来自: 北京
-
文章分类
- 全部博客 (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前端页面性能优化小结
PS：结合了精英的思想和自己的一些小小的总结~
影响用户访问的最大部分是前端的页面。网站的划分一般为二：前端和后台。我们可以理解成后台是用来实现网站的功能的，比如：实现用户注册，用户能够为文章发表评论等等。而前端呢？其实应该是属于功能的表现。
而我们建设网站的目的是什么呢？不就是为了让目标人群来访问吗？所以我们可以理解成前端才是真正和用户接触的。
除了后台需要在性能上做优化外，其实前端的页面更需要在性能优化上下功夫，只有这样才能给我们的用户带来更好的用户体验。不仅仅如此，如果前端优化得好，他不仅可以为企业节约成本，他还能给用户带来更多的用户，因为增强的用户体验。说了这么多，那么我们应该如何对我们前端的页面进行性能优化呢？
前端的页面主要包括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文件放到</body>之前或者之后。
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
用 <link> 代替 @import
避免使用滤镜
剔除重复脚本
减少DOM访问
开发智能事件处理程序
最好的方案就是按照 HTML 规范在文档 <head /> 内加载你的样式表。
对于拥有较大浏览量的首页来说，有一种技术可以平衡内置代码带来的 HTTP 请求减少与通过使用外部文件进行缓存带来的好处。其中一个就是在首页中内置 JavaScript 和 CSS ，但是在页面下载完成后动态下载外部文件，在子页面中使用到这些文件时，它们已经缓存到浏览器了。
Coockie:
减小Cookie体积
对于页面内容使用无coockie域名
图片：
优化图像
优化CSS Spirite
不要在HTML中缩放图像
favicon.ico要小而且可缓存
移动应用：
保持单个内容小于25K
打包组件成复合文本
此文中谈到了编辑，其实通过我走过的公司来看，很多公司其实不止是编辑，甚至连开发，他们对xhtml的规划都还不够非常了解，所以经常会出现已经上线的页面出现一些这样那样的问题，比如注释，或者标签不闭合等等，所以我建议各个公司可以开一些关于交流的会，这样的话，各个职位间可以交互交流，其实也可以说是培训吧，只有这样，才能够打造出一个好的产品。
好了，我就谈这些，这些东西也是我的一些简单的看法，当然，你可能不赞成我说的，或者你有更好的建议，你可以单独联系我，也可以在这帖子后面给我评论，或者叫留言。
转自blueidear:http://bbs.blueidea.com/thread-2936073-1-1.html
PS：结合了精英的思想和自己的一些小小的总结~
影响用户访问的最大部分是前端的页面。网站的划分一般为二：前端和后台。我们可以理解成后台是用来实现网站的功能的，比如：实现用户注册，用户能够为文章发表评论等等。而前端呢？其实应该是属于功能的表现。
而我们建设网站的目的是什么呢？不就是为了让目标人群来访问吗？所以我们可以理解成前端才是真正和用户接触的。
除了后台需要在性能上做优化外，其实前端的页面更需要在性能优化上下功夫，只有这样才能给我们的用户带来更好的用户体验。不仅仅如此，如果前端优化得好，他不仅可以为企业节约成本，他还能给用户带来更多的用户，因为增强的用户体验。说了这么多，那么我们应该如何对我们前端的页面进行性能优化呢？
前端的页面主要包括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文件放到</body>之前或者之后。
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
用 <link> 代替 @import
避免使用滤镜
剔除重复脚本
减少DOM访问
开发智能事件处理程序
最好的方案就是按照 HTML 规范在文档 <head /> 内加载你的样式表。
对于拥有较大浏览量的首页来说，有一种技术可以平衡内置代码带来的 HTTP 请求减少与通过使用外部文件进行缓存带来的好处。其中一个就是在首页中内置 JavaScript 和 CSS ，但是在页面下载完成后动态下载外部文件，在子页面中使用到这些文件时，它们已经缓存到浏览器了。
Coockie:
减小Cookie体积
对于页面内容使用无coockie域名
图片：
优化图像
优化CSS Spirite
不要在HTML中缩放图像
favicon.ico要小而且可缓存
移动应用：
保持单个内容小于25K
打包组件成复合文本
此文中谈到了编辑，其实通过我走过的公司来看，很多公司其实不止是编辑，甚至连开发，他们对xhtml的规划都还不够非常了解，所以经常会出现已经上线的页面出现一些这样那样的问题，比如注释，或者标签不闭合等等，所以我建议各个公司可以开一些关于交流的会，这样的话，各个职位间可以交互交流，其实也可以说是培训吧，只有这样，才能够打造出一个好的产品。
好了，我就谈这些，这些东西也是我的一些简单的看法，当然，你可能不赞成我说的，或者你有更好的建议，你可以单独联系我，也可以在这帖子后面给我评论，或者叫留言。
转自blueidear:http://bbs.blueidea.com/thread-2936073-1-1.html
分享到：
发表评论
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2014-05-06 11:07 354<meta name="viewport&qu ... -
web前端页面性能优化
2014-05-05 14:23 602web前端页面性能优化 ... -
在CSS中定义a:link、a:visited、a:hover、a:active顺序
2014-05-05 14:00 707http://blog.snsgou.com/post-2.h ... -
提高网站打开速度的7大秘籍
2014-04-25 11:11 556提高网站打开速度的7大秘籍 http://lusongs ... -
PNG8和PNG24的区别
2014-04-25 10:35 1060PNG8和PNG24的区别 内容图片的大小的优化,告诉大 ... -
jQuery与ExtJS优缺点比较
2014-03-18 11:36 2039jQuery与ExtJS优缺点比较 jQuery 主页：h ... -
LABjs、RequireJS、SeaJS 哪个最好用？为什么？
2014-03-14 11:15 594LABjs、RequireJS、SeaJS 哪 ... -
offsetHeight, clientHeight与scrollHeight的区别
2014-01-22 14:24 667offsetHeight, clientHeight与scro ... -
表单提交后不刷新当前页面
2014-01-17 15:28 1263<form name='form1' id='for ... -
input失去焦点和获得焦点jquery焦点事件
2014-01-17 14:47 995input失去焦点和获得焦点jquery焦点事件 input ... -
html5 在IE6/IE7/IE8中使用html5标签
2014-01-13 11:26 5039html5 在IE6/IE7/IE8中使用html5标签 h ... -
网站重构
2013-12-27 15:20 539网站重构 前不久听到 ... -
Html 5中自定义data-*特性
2013-11-13 15:19 542Html 5中自定义data-*特性 Html 5中支持用户 ... -
如何让表头th不滚动
2013-10-31 12:05 5705表格带滚动条 如何让表头th不滚动 <div ... -
CSS Sticky Footer: 完美的CSS绝对底部
2013-09-04 17:42 657CSS Sticky Footer: 完美的CSS绝对底部 ... -
流体布局
2013-09-04 11:53 689流体布局 在我的另一篇文章《弹性+固宽布局》http://li ... -
《弹性+固宽布局》
2013-09-04 11:32 730《弹性+固宽布局》 在 ... -
李炎恢--JS视频
2013-05-21 15:40 797李炎恢--JS视频 http://wenku.baidu.co ... -
SeaJS-----GitHub Issues
2013-05-20 16:17 755SeaJS 是直接通过 GitHub Issues 来管理， ... -
CMD 模块定义规范
2013-05-15 10:45 336CMD 模块定义规范 https://github.co ...
相关推荐
JavaScript 性能优化是前端开发中非常关键的部分，随着Web技术的不断发展，浏览器中的JavaScript性能对于用户体验有着直接的影响。性能问题不仅关系到页面加载的速度，还会影响到用户与页面交互的流畅性。由于...
开发过程中，我们可能会遇到各种问题，如性能优化、安全性考虑、缓存策略等。例如，为了提高性能，可以使用缓存技术（如Redis）来存储频繁访问的数据；在安全方面，需要防止SQL注入、XSS攻击等，使用Spring ...
总结来说，本实训项目不仅涵盖了Django的基础使用，还涉及到Web开发中的常见问题和解决方案，如数据安全、页面交互、数据可视化和性能优化，为开发者提供了全面的实践平台。通过这样的项目，学生能够提升自己的...
5. 前端性能优化：学习如何编写高效代码，利用各种技术手段提升页面的加载速度和执行效率。 二、前端高级技术 1. 单页面应用（SPA）：SPA能够在不重新加载页面的情况下，动态更新页面内容，提升用户体验。 2. Node....
页面性能优化是前端开发领域的一个重要分支，它关乎用户体验以及网站的访问速度。在支付宝新首页的改版项目中，可能涉及到以下几点性能优化的实践： 1. 代码拆分与按需加载：将JavaScript和CSS进行拆分，按需加载或...
7. **性能优化**：考虑到网页加载速度和用户体验，可能进行了代码压缩、资源合并、异步加载等方面的优化。 这些小部件可能涵盖了多种功能，比如天气预报小部件可能使用了外部API获取数据，日历小部件可能涉及到日期...
Vue 打包体积优化方案小结 在当前的前端开发中，优化应用程序的打包体积是提升用户体验的关键步骤。尤其在使用Vue CLI 3构建大型应用时，合理的优化策略能够显著减少加载时间，加快页面响应速度。本文将针对Vue项目...
理解并掌握这些技巧，能显著提升JavaScript代码的执行效率，减少对系统资源的消耗，从而优化Web应用的性能。在开发过程中，应当始终关注代码的效率，尤其是在处理大数据量或复杂逻辑时，良好的编程习惯和优化策略是...
这两者是Web前端的基础，它们共同构建出用户界面，使得后台数据能够以美观、易用的方式呈现给用户。 6. **MySQL**：MySQL是一种关系型数据库管理系统，具有高性能、高可靠性、易于维护等特点。在本系统中，MySQL...
7. **网页开发流程**：理解从设计到发布的整个网页开发流程，包括需求分析、页面布局设计、前端开发、后端编程、数据库交互、测试和维护等环节。 8. **服务器配置**：使用ASP需要IIS（Internet Information ...
标题中的“Pure JS (7)：小结”表明这是一篇关于JavaScript编程的系列教程的第七部分，重点在于总结前面几部分所讲解的核心概念和技巧。JavaScript，也称为JS，是一种广泛用于网页和网络应用的脚本语言，尤其在前端...
在Web应用中，高亮显示往往需要与前端页面结合，以动态展示高亮结果。这里提到了使用JSP页面来实现这一目标。在后端通过Lucene处理高亮逻辑，然后将高亮后的数据传递给JSP页面，由前端负责渲染。这种方式可以让前后...
【基于WEB的新闻发布系统的设计与实现】 在信息技术高度发展的今天，基于WEB的新闻发布系统已经成为企业和组织发布...在实际开发过程中，还需考虑性能优化、错误处理、安全防护等方面，以确保系统的高质量和高可用性。
以及SEO优化、性能调优、安全防护等方面的知识。 通过这个项目，学习者不仅可以掌握Web开发的基本技能，还能了解到软件工程的实践，如需求分析、设计模式、测试和维护等。这是一个全面且实用的学习过程，对于个人...
- **性能优化**：减少HTTP请求次数、压缩资源文件大小、使用CDN加速等手段提升网站加载速度。 - **安全性考虑**：避免XSS（跨站脚本攻击）和SQL注入等常见安全问题，确保用户数据的安全。 通过以上知识点的介绍，...
1.3 本章小结 本章介绍了项目所依赖的关键技术和开发环境，为后续系统的实现打下基础。 2. 系统分析 2.1 系统可行性需求分析 本系统需要考虑技术可行性、经济可行性和操作可行性。uni-app的跨平台特性解决了技术...
- 掌握高级JavaScript技术，提升Web应用性能。 #### 六、使用JsUnit测试JavaScript **6.1 JavaScript提出的问题** - **测试必要性：** - JavaScript的动态特性使得编写稳定可靠的代码变得更具挑战性。 - 单元...