Web前端页面性能优化小结

Web前端页面性能优化小结（共3篇）

Web前端页面性能优化小结 篇1

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这样的内联的样式和事件.。希望大家能够注意结构与表现、行为的分离。(ps：标签语义化的好处：1.有利于搜索引擎;2.结构清晰的html在团队合作中的作用，就不必说了吧;3.有利于盲人屏幕阅读器。至于如何做到标签语义化，就看个人的理解了，这方面我也觉得模糊，跟个人的习惯估计也有一定的关系，总之邹惠斌老师是认为我的标签不语义的。)

二、css(http://zhi.ujiuye.com/web/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:// 规范在文档 内加载你的样式表。

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

更多知识干货分享，尽在中公优就业，>>>点击进入。

Web前端页面性能优化小结 篇2

随着网络技术的发展, 基于Web的应用程序应用越来越广, 各个高校、企业大量存在基于Web的应用系统, 如高校广泛采用的教务管理系统。这些应用系统一般有着很大的用户访问量, 因此, 此类软件系统的优化是整个软件开发过程中的一个重要环节。

1、影响Web的应用系统性前端性能的因素

用户页面加载时间大部分被花费在Web应用程序的前端响应, 而这其中的绝大多数时间是用于下载页面中的图片、样式表、脚本以及Flash等组件。减少这些组件的数量就可以减少展示页面所需的请求数, 而这是提高网页响应速度的关键。

通过研究分析发现, 这种问题的原因主要有两个:1、服务器性能;2、页面优化方案考虑不全面。

2、前端页面性能优化技术

2.1 服务器优化

1、添加Expires或Cache-Control信息头

某些经常使用到、并且不会经常做改动的图片 (Banner、Logo等) 、静态文件 (登录首页、说明文档等) 可以设置较长的有效期 (expiration date) , 这些HTTP头向客户端表明了文档的有效性和持久性。如果有缓存, 文档就可以从缓存而不是从服务器读取。接着, 客户端查看缓存中的副本, 看看是否过期或者失效, 以决定是否必须从服务器获得更新。

2、压缩文件内容

对于绝大多数站点, 压缩文件内容, 能有效减轻网络流量压力, 使传输时间更短。Web服务器既可以只压缩静态文件, 又可以同时压缩静态文件和应用程序。在压缩时可以最大程度的使用内存, 压缩html、文本、xml和asp.net等类型的文件, 在IIS中可以指定扩展名为html、htm、xml、aspx和js的文件启用压缩。

3、设置实体标签 (Etags)

Etags (Entity Tags, 实体标签) 是Web服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制 (“实体”即“内容”, 包括图片、脚本、样式表等) 。增加Etags为实体的验证提供了一个比使用“last-modified date (上次编辑时间) ”更加灵活的机制。

客户端在请求一份文件的时候, 服务端将检查客户端是否存在该文件, 如果客户端不存在该文件, 则下载该文件并返回200;如果客户端存在该文件并且该文件在规定期限内没有被修改, 服务端将返回一个304, 并不返回资源内容, 客户端将会使用之前的缓存文件。而Etags就是判断该文件是否被修改的记号, 与服务器端的资源一一关联, 所以Etags对于CGI类型的页面缓存尤其有用。需要注意的是, 使用Etags会增加服务器端的负载, 在实际应用中需要自行平衡。

2.2 Cookie优化

1、减小Cookie体积

HTTP Cookie可以用于权限验证和个性化身份等多种用途。Cookie内的有关信息是通过HTTP文件头来在Web服务器和浏览器之间进行交流的。因此保持Cookie尽可能的小以减少用户的响应时间十分重要。开发者可以使Cookie体积尽量小, 在合适的子域名上设置Cookie, 以免影响其他子域名下的响应, 并且设置合理的过期时间, 去掉不必要的Cookie。

2.、对于页面内容使用无Cookie域名

当浏览器在请求中同时请求一张静态的图片和发送Cookie时, 服务器对于这些Cookie不会做任何地使用。因此他们只是因为某些负面因素而创建的网络传输。所有你应该确定对于静态内容的请求是无Cookie的请求。创建一个子域名并用他来存放所有静态内容。

2.3 JavaScript脚本和CSS优化

1、把CSS放到代码页上端。这么做可以避免浏览器在解释一次之后, 使用CSS进行第二次解释, CSS放到最顶部, 浏览器能够有针对性的对HTML页面从顶到下进行解析和渲染;

2、避免CSS表达式。使用表达式会增加解析时间, 降低效率;

3、从页面中剥离JavaScript与CSS。剥离后, 能够有针对性的对其进行单独的处理策略, 比如压缩或者缓存策略;

4、精简JavaScript与CSS;

5、使用<link>而不是@import, 因为在IE中@import指令等同于把link标记写在HTML的底部;

6、JS尽量放到页面最下端。当一个脚本在下载的时候, 浏览器会一直处于繁忙状态, 无法响应其他请求。所以, 可以将功能性的JS放到最后端去处理;

7、页面展现尽量交给CSS完成。

2.4 图片优化

1、优化图片

尽可能的使用PNG格式的图片, 因为和GIF相比, PNG有更多的功能和更小的体积。

2、使用CSS Sprites对图片优化

即利用CSS Background相关元素进行背景图绝对定位, 将多次HTTP调用变为一次调用, 这些图像在鼠标没有经过的时候, 都是从一张图片上绝对定位出来的, 只有在鼠标放到某一张图像上时, 才会从服务器上下载gif图片, 这样可以减少 (N-1) 次HTTP请求。使用CSS Sprites的不足之处是客户端将消耗更多内存, 因为CSS Sprites会打开多个图片的副本, 目前的解决办法是按照使用频率不同, 合并成几个级别的图片, 分批次下载并在客户端展示。

3、压缩图片

在不影响用户体验的前提下可以对已有图片进行压缩, 及时是有损的。主要基于以下两点: (1) 用户未必会感觉到色彩的损失; (2) 压缩不一定会损坏图片的质量。

2.5 内容优化

1、减少DNS查找

DNS Lookup是很耗费时间的步骤, 网站上如果过多的使用了站外的Widget, DNS查找带来的问题是不容忽视。

2、尽量减少重定向

在进行站点设定时候应注意一些不必要的重定向, 例如在Web站点子目录的后面添加个“/”, 就能有效避免一次重定向。对于服务器来说, 请求http://example.com/test与请求http://example.com test/是有差异的。

3、杜绝404错误

对页面链接的充分测试加上对Web服务器错误日志的不断跟踪、分析可以有效减少404错误, 以提升用户体验。

2.6 预加载

预加载是在浏览器空闲时请求将来可能会用到的页面内容 (如图像、样式表和脚本) 。使用这种方法, 当用户要访问下一个页面时, 页面中的内容大部分已经加载到缓存中了, 因此可以大大改善访问速度。常用的预加载方法有以下几种:

1、无条件加载

当触发onload事件时, 直接加载额外的页面内容。以google.com为例, 你可以看到它的spiri image图像是怎样在onload中加载的。这个spirit image图像在google.com主页中是不需要的, 但是却可以在搜索结果页面中用到它。

2、有条件加载

根据用户的操作来有根据地判断用户下面可能去往的页面并相应的预加载页面内容。在search.yahoo.com中你可以看到如何在你输入内容时加载额外的页面内容。

3、有预期的加载

载入重新设计过的页面时使用预加载。这种情况经常出现在页面经过重新设计后, 问题可能出在用户对于旧站点建立了完整的缓存, 而对于新站点却没有任何缓存内容。可以采用在访问新站之前就加载一部内容的方式来避免这种结果的出现。在旧站中利用浏览器的空余时间加载新站中用到的图像的和脚本来提高访问速度。

3、结束语

随着互联网技术的高速发展, 网站的性能、用户交互性体验越来越受到重视。对性能优化最重要的是优化内容, 本文主要是从服务器优化、Cookie优化、Java Script脚本和CSS优化、图片优化、内容优化和预加载几个方面进行了探讨, 具有很好的参考价值。

摘要：页面性能优化是基于Web应用系统开发过程中的一个重要环节, 本文通过服务器优化、JavaScript脚本和CSS优化、预加载等几个方面进行了探讨, 提高了前端页面的性能。

关键词：Web应用系统,系统性能,优化

参考文献

[1]康长安, 基于前端的Web性能优化[J], 电脑知识与技术, 2011 (16)

[2]林丁报, Web应用前端性能优化浅析[J], 科技资讯, 2011 (19)

[3]吴胡和, 网页布局优化设计方法探析[J], 科技资讯, 2011 (18)

浅谈WEB标准与前端性能优化 篇3

HTML和XHTML页面都是由“内容、结构、表现、行为”这4个方面组成的。内容是基础, 然后附加上去结构和表现, 最后再对它们加上行为。而为什么在“前端开发”火热的现在还提遵守WEB标准这个问题?我觉得有必要站在架构的层面, 也站在众多的、辛苦的网页制作耕耘者的立场上, 全局看待web标准。

没有统计数字也可以从现在的网页产品中看到, 国内几乎大部分的网页设计师没有遵守W3C标准。非标准化的应用, FLAS H眩目的动感, 可以帮你让领导认可, 让客户点头, 让自己的工作效率快快, 产品多多。大家在匆忙中忽视或是避让了标准和规范, 暂时忘记了真理才会永恒, 然而, 每一个设计师都有追求完美的心理, 他们永远对自己的作品不满足, 一定不会给自己打满分。在这个追求完美的过程中, 他们要到达目标, 其实就是前面的标准。也许, 当网页制作中的每个成员接近或是抵达这个目标时, 内心一定非常释然。

作为一名合格页面工程师, 要学会熟读标准, 认识和了解标准。要检验你的代码是否和标准一致, 要了解W3C标准的优势和用意, 假如用语言距离, 普通话让中国人彼此能够沟通, 英语让世界人可以沟通。W3C标准就是让页面在不同的终端都可以运行, 让使用各种终端的用户都能浏览你的页面, 也就是跨越平台, 获得更大众化的用户的认可。更像一个平凡的人走向优秀, 一个产品走向品牌。

落后的页面工程师体系, 美工代劳的页面代码, 唯有IE才能浏览的页面代码, 用图形工具直接导出的页面代码, 使大量流量消耗的页面代码, 速度慢的像蜗牛的页面代码……每次改版修改都要大动干戈, 一种让页面工程师和民工一样的页面代码!网页设计师多了, 站长多了, 但质量标准却越来越差。模仿得形似神不似的韩版界面, 让我们倍感失落。似乎想看到唯美一些的网站, 打开时总需要我们有足够的耐心去等待, 或者有足够的技术安装插件。WEB标准就是一场革命, 革命——就是推翻旧的落后的体制, 建立一个全新的先进的体制。这样, 我们才会有秩序, 才会和谐发展。

如何遵循标准, 其实标准有很多, 结构标准, 表现标准, 行为标准。选择标准规范, 就优先选择W3C推荐的标准。结构标准可选项, 建议选择适合你公司和团队的标准, 其实核心理念还是让项目统一遵循一个标准, 严格的XHTML是这样的。

XHTML的媒体类型是application/xh tml+xml, 而不是被大多设备都识别的text/html。增加xml头部声明还会造成IE6的q uirks模式。总得来说, 不是通用性很强的标准, 使用的时候需要舍弃W3C的一些说明, 改良后的应该是去掉xml声明, 去掉媒体类型是application/xhtml+xml。不要给你们团队的开发造成不必要的困扰。

建议选择XHTML1.0标准的过渡型, 如果你觉得XHTML过于花俏, 不适用, HT ML4.0的严格型也是很好的选择。HTML2.0已经被HTML5所取代, 看来HTML4还是更具有向后的延续性。

前端性能优化虽然是一个技术性话题, 但对于用户体验有着非常大的影响, 如果你的网站打开要等待三、五秒或者等到浏览器提示无法连接, 用户已经对这个网站产生了负面的抵触心理。更别提流量、品牌影响、用户忠诚度。

前端性能优化和web标准有什么关系?就是对你遵循web标准的一个补偿。前端优化给Web标准提供了一个检验的机会, 用“实践是检验真理的唯一标准”来判断标准化到底好不好, 对不对, 该不该遵守。为什么要这样做就可以提升速度, 这些与Web标准有没有某种关联或者因果呢?我们暂时把这些个条目分成三类:服务端运算优化, 传输优化, 客户端运算优化。

1、服务器端优化

服务器端就是对网站动态语言的执行 (asp, php) , 数据库查询、存储速度等, 总的来说就是输入/输出的运算。这些跟前端没关系, 但是却影响着前端。看不出来?那就自行优化服务器性能, 数据库性能, 多买点服务器扩容吧。提高域名的DNS解析速度。减少DNS的解析个数。相信以后还会有先进的技术来解决。

2、传输优化

这一类很烦, 首先是字节, 字节越小越好, 怎么能小下来, 最有效的方式就是Goog le的方案, 把首页做的极其精简, 图片、htm l、静态文件都非常小, 再就是缓存, 把文件放到本地缓存区读取。还有http请求数, 减少文件传输中的排队等待。

2.1 字节优化

减少冗余html, 用结构化、语义化的ht ml来体现, 行为、表现、结构分离, 独立的ht ml文件将变得很小。这点, 禅意花园做得真好!压缩文本文件, css, html, js去掉注释、空格、换行等。降低图片字节, 选择合适的图片类型, png-8非常好, 再用工具将图片进行压缩去掉, 比如png-8的压缩工具。用合适的图片尺寸, 不要再做菜鸟, 很不负责任的把大图控制一下宽高就用上了。gzip压缩一下, 减小服务器端传输到客户端时候的字节。flash文件和flash+xml的动态flash也减小字节。

2.2 缓存

服务器端配置一下, 提高缓存的命中率和把不经常修改的文件缓存了。Add Expir es headers、Etags、ajax使用get方式便于缓存。把能分离出来的css, js分离成外部文件便于缓存。使flash和xml文件可缓存。打通不同运营商的限制, CDN提高不同类型运营商的网络传输速度, 电信, 网通, 铁通, 教育网等等。

2.3 请求数

尽量减少文件请求数, 能合并到一起的合并一下, css、js、图片等, 减小排队等待和服务器端的开销。分域提高同时加载数, 优化排队等待。避免404无效请求数。避免重定向。

2.5 延迟加载和预载

把暂时不用的文件等主体页面加载完了再加载, 把用户稍后要看浏览的内容预先加载进来, 相册浏览就是很好的例子, 先用小图片放大再把大图展示出来, 看本张图片时把下一张预载进来等等。

3、客户端优化

(1) 讨厌的IE滤镜和CSS expressions少用, 小心把浏览器挂死, CUP被100%占用。 (2) CSS放到前面去, JS能放到后面的放在代码后面, 将页面尽早展示给浏览者。 (3) 减少I FRAME的使用, 这是一个不智之举。 (4) 减少DOM个数, 降低浏览器解析压力。 (5) 使用

而不是@import Chooseover@import, 在IE中@import指 (6) 令等同于把link标记写在HTML的底部, 而这与第一条相违背。提高JS的执行效率。 (7) 缩小Cookie, 针对Web组件使用域名无关性的Cookie (Use Cookie-free Do mains for Components) 。

(8) 还有小图片的REPEAT背景会提高浏览器的CPU占用率。 (9) 合理的DOM排序, 把重要的内容代码前置, 优先加载。

除了这些, 虽然还有很多没对号入座的有关性能优化的条目, 但至少, 我们已经可以体验到网页工程师的工作是如此烦琐, 任务是如此艰巨, 需要对代码、文件、H TTP协议、缓存、服务器等内容或是技术达到精准的掌握和控制, 达到提供给浏览用户最最基本的体验, 那就是——访问速度。所有的幕后工作浏览用户是看不到的, 但不要因为他们看不到而放弃我们的目标——优化和遵守标准。Web标准的分离思想和结构化、语义化html促成了以上很多行为的实施, 这是美工时代所不能比拟的。只需要每个人的遵守, 相信WEB标准会引领我们进入一个新的时代, 想像那种境界美得像“潘多拉”一样。

摘要：国内几乎大部分的网页设计师没有遵守W3C标准。作为一名合格页面工程师, 要学会熟读标准, 认识和了解标准。要检验你的代码是否和标准一致, 要了解W3C标准的优势和用意。前端性能优化和web标准有什么关系?就是对你遵循web标准的一个补偿。