关于前端的性能优化问题

1. 减少http请求数
合并文件,通过把所有脚本置于一个脚本文件里或者把所有样式表放于一个样式表文件中,从而减少Http请求的数量。
CSS Sprites是减少图片请求的首选方案。把所有的背景图片合并到一张图中,使用CSS的background-image 和background-position 属性去控制展现恰当的图片区域。
内联图片使用data: URL scheme 把图片数据嵌入页面,但这会增加Html文档的大小。
2. 使用内容分布式网络
内容分布式网络(CDN)是一系列分布在不同地域的服务器的集合,能够更有效的给用户发送信息。它会根据一种衡量网域距离的方法,选取为某个用户发送数据的服务器。比如,到达用户最少跳或者最快相应速度的服务器会被选中。
3. 给头部添加一个失效期或者Cache-Control
对于静态组件:把头部的缓存期设为某个遥远的未来,使其能够“永不过期”。
对于动态组件:使用适当的Cache-Control头部帮助浏览器执行特定的请求。
4. Gzip压缩组件
在HTTP请求的头部中Accept-Encoding指定的压缩格式:
ν Accept-Encoding: gzip, deflate
ν Content-Encoding: gzip
5. 把样式表放在前面
把样式表挪到文档的头部可以让页面的加载显得更快。因为把样式表放在头部可以让页面逐步呈现。
6. 把脚本放在最后
脚本可能会堵塞并发的下载。HTTP/1.1规范建议浏览器在每个域名下只进行两个并发下载。
设置延迟加载脚本,也可以放在页面底部
7. 不使用CSS表达式
CSS表达式是一种有力的(同时也很危险的)动态设置CSS属性的方法。

CSS表达式的问题是它比大多数人期望的执行次数更频繁。表达式不仅仅在页面展现和重新设置大小的时候执行,在页面滚动,甚至用户在页面上挪动鼠标时都会执行。给CSS表达式添加一个计数器可以跟踪CSS在什么时候和怎样执行。在页面上移动鼠标可以轻易的产生一万次以上的执行。
8. 使用外部的JavaScript和CSS
在实际应用中使用外部的文件往往产生更快的页面,因为浏览器会缓存JavaScript和CSS文件。如果放在外部文件里的JavaScript和CSS被浏览器缓存,则既不用增加HTTP请求的数量,HTML文档的体积也会减少。
9. 减少DNS的查询
DNS查找给定域名的IP地址一般会耗费20-120毫秒。在DNS查找结束前,浏览器不会从目标域名那里下载任何东西。

10. 缩小JavaScript和CSS

缩小是指从代码中删除不必要的字母,减少文件体积从而提高加载速度。

缩减代码时需要移除所有的注释,以及不需要的空白(空格,新行和tab)。

减小js或css文件的大小,提高响应的性能。

代码混淆是另一个可用于源代码的优化方案。

压缩内嵌在页面中的<script>和<style>代码。

11.避免重定向 

重定向状态码:301或302

301响应的HTTP头的例子:

HTTP/1.1 301 Moved Permanently
Location: http://example.com/newuri
Content-Type: text/html

浏览器会自动把用户转向Location域中指明的Url地址。HTTP头里包含了重定向所需的所有信息。响应的主体一般是空的。301或者302响应都不会被实际缓存,除非添加额外的头部,比如 Expires或者Cache- Control指明了它应该被缓存。meta refresh标签和JavaScript也可以将用户重定向到不同的URL,但如果你必须执行重定向,最好的方法是使用标准的3XX HTTP状态代码,以便使后退按钮工作正常。

重定向会影响用户体验,在用户和HTML文档之间插入的重定向延误了页面的呈现和组件下载,因为它们都不可能在获得HTML文档之前开始。

一种最浪费性能的重定向频繁发生而网络开发者们却往往没有意识到,那就是当地址中应当有一个左斜线(/)却没有的时候。比如,访问http://astrology.yahoo.com/astrology会导致一个301效应并重定向到http://astrology.yahoo.com/astrology/(注意这里加了一个左斜线)。在Apache中,这可以使用mod_rewrite,或者在Apache事件处理中使用DirectorySlash指令来修补。

12.移除重复的脚本

在同一个页面中包含两个相同的脚本文件降低了性能。

13.设定ETags 

实体标签(ETags)是服务器和浏览器用于确定浏览器中缓存的组件和服务器中的是否对应的一种机制。(”entity”是组件的另一种说法:图片、脚本、样式表等等)添加 ETags用于辨别组件提供了比单纯利用“最后修改时间”更为灵活的机制。ETag是一个唯一标识组件的特定版本的字符串。它的唯一格式规范是字符串必须被引号引用。来源服务器使用ETag响应头来设定一个组件的ETag:

HTTP/1.1 200 OK
Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
ETag: “10c24bc-4ab-457e1c1f”
Content-Length: 12195

ETag的问题是它们往往在网站的一个服务器中被设为唯一的。

14.让Ajax可以缓存

Ajax 的好处之一是它能给用户提供瞬间的响应,因为它从服务端异步请求数据。但Ajax不能保证用户在等候那些异步的JavaScript和XML响应返回时什么都不做。

为了提高性能,优化Ajax响应很重要。提高Ajax性能最重要的方式是使响应缓存,可以添加一个过期期限和缓存控制头。下面这些原则同样适用于Ajax。
* Gzip组件
* 减少DNS查询
* 压缩JavaScript
* 避免重定向
* 设定ETag

 15.更早的刷新缓冲区

当用户请求一个页面,服务端会花费200至500毫秒的时间组合HTML页面。在这期间,浏览器会静静等待数据到来。PHP中有flush()函数,它允许你向浏览器发送部分就绪的HTML响应,这样浏览器可以在服务器处理余下的HTML页面时去获取组件。这样的好处主要在忙碌的后台和轻松的前台间可以看到。
在HEAD后面是放置刷新操作的好地方,因为头部的HTML代码更容易产生,而且可以让你放置任何CSS和JavaScript文件,以便浏览器在后台工作依然进行时并行开始获取组件。
例子:
… <!– css, js –>
</head>
<?php flush(); ?>
<body>
… <!– content –>
Yahoo! search先行研究并且进行了真人测试证明了使用这项技术的好处。

16.在Ajax请求中使用GET方法

Yahoo! Mail 团队发现进行XMLHttpRequest的时候,POST方法在浏览器中分两步执行:先发送头部,然后发送数据。所以最好使用只发送一个TCP包(除非你有很多的cookie)的GET方法。IE中URL的最大长度是2000,所以如果你发送超过 2000的数据就不能使用GET方法。
一个有趣的现象是,POST方法并不像GET那样实际发送数据(而Get则名副其实)。基于 HTTP规范,GET方法意味着取回数据,所以当你只是请求数据时使用GET方法更为有意义(从语义上来说),而在发送需要储存在服务器端的数据时则相反使用POST。

17.后加载组件

你可以仔细端详下你的页面然后自问:“什么是在页面初始化时必须的?”那么其余的内容和组件可以放在后面。
JavaScript是理想的用来分割onload事件之前和之后的选择。例如你有执行拖放、下拉和动画的JavaScript代码和菜单,它们可以稍后加载,因为用户在初始呈现之后才会在页面上拖动元素。其他的可以被后加载的地方包括隐藏的内容(当用户做某项操作才会展现的内容)和被折叠的图片

时间: 2024-10-05 07:00:55

关于前端的性能优化问题的相关文章

web前端之性能优化

作为一个前端工作人员,而且只会写点HTML5和CSS3的“假”前端工程师,为了能更好地理解一下前端的花花世界,最近拜读了<高性能网站建设指南>一书,对作者提出的前端性能优化的14个规则获益匪浅,为了让自己印象更深刻点,决定作此文,当做学习笔记也好,知识总结也罢,总归看过的东西要让自己很好地掌握很好地运用起来才是王道.在解读这些规则的同时,我会用我一年半多的移动网站开发经历提出一些针对移动网站的优化建议. 首先我们从三个大类讲起:一,网络服务器.二,浏览器,三代码上面,针对这三个大类总结出了下面

web前端页面性能优化小结

转自blueidear:http://bbs.blueidea.com/thread-2936073-1-1.html PS:结合了精英的思想和自己的一些小小的总结~ 影响用户访问的最大部分是前端的页面.网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢?其实应该是属于功能的表现. 而我们建设网站的目的是什么呢?不就是为了让目标人群来访问吗?所以我们可以理解成前端才是真正和用户接触的. 除了后台需要在性能上做优化外,

关于前端代码性能优化问题

以下观点纯属个人看法: 对于一个刚接触前端不久的人来说,前端的代码质量是很重要的一部分,毕竟关系到性能问题.个人认为关于代码性能优化主要由这几方面:HTML.CSS.Javascript和HTTP,所以对这四个方面的优化能提高浏览器的性能.个人知识面有限,只有学到以下的知识,另外的还没涉及,不足之处还请体谅. 一. HTML 1.首先是对HTML5的充分熟悉和理解,理解标签的语义化,减少对标签的重定义. 2.命名的规范化,对id.class.name的规范命名有助于整体代码的构建,方便他人的理解

web 前端页面性能优化总结

影响用户访问的最大部分是前端的页面.网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢?其实应该是属于功能的表现. 而我们建设网站的目的是什么呢?不就是为了让目标人群来访问吗?所以我们可以理解成前端才是真正和用户接触的. 除了后台需要在性能上做优化外,其实前端的页面更需要在性能优化上下功夫,只有这样才能给我们的用户带来更好的用户体验.不仅仅如此,如果前端优化 得好,他不仅可以为企业节约成本,他还能给用户带来更多的用户

前端雅虎性能优化

1.尽量减少HTTP请求数 80%的终端用户响应时间都花在了前端上,其中大部分时间都在下载页面上的各种组件:图片,样式表,脚本,Flash等等.减少组件数必然能够减少页面提交的HTTP请求数.这是让页面更快的关键. 减少页面组件数的一种方式是简化页面设计.但有没有一种方法可以在构建复杂的页面同时加快响应时间呢?嗯,确实有鱼和熊掌兼得的办法. 合并文件是通过把所有脚本放在一个文件中的方式来减少请求数的,当然,也可以合并所有的CSS.如果各个页面的脚本和样式不一样的话,合并文件就是一项比较麻烦的工作

前端页面性能优化方式

避免内嵌/嵌入代码∞ ? 您有三种基本方法可以在您的页面上包含CSS或JavaScript: 1)内联: CSS内部定义一个style属性和JavaScript内部的一个onclick属性,例如在任何HTML标签中; 2)嵌入式: CSS在<style>标签内部定义,JavaScript内部<script>标记; 3)外部: CSS中从加载<link>和从JavaScript的src所述的属性<script>标记. 前两个选项尽管减少了HTTP请求的数量,实

前端代码性能优化

1.display:none;优于visibility:hidden;前者隐藏不占用物理空间,后者会占用.2.合并margin,padding,border的-top,-left,-right,-bottom的设置,简短简洁.3.选择器在满足效果的基础上,尽量简单,减少嵌套,查询的消耗.4.如若值为0,则去掉单位,如border-right:0px;可以写为border-right:0;5.没有边框,用border:none;优于border;0;6.在保持代码解耦的前提下,尽量合并重复的代码.

前端代码性能优化工具

转自:http://segmentfault.com/a/1190000002585760 Google Closure Compiler 官网:https://developers.google.com/closure/compiler/ Closure Compiler的使用方法有如下3种: 在命令行下使用一个google编译好的java程序 使用google提供的在线服务 使用google提供的RESTful API 首先需要下载compiler-latest.zip,由于可能有的用户没法

基于大数据的用户行为预测在前端性能优化上的应用

首先,我得说,这篇文章有点标题党了,其实内容并没有标题看起来那么高大上.其次,本文只是做一个技术方案可能性的探讨,并没有提供完善的解决方案,至多给了一个Demo供参考. 目的 如需转载,请注明转自:http://www.cnblogs.com/silenttiger/p/4929841.html 前端性能优化,我觉得最主要的目的就两个:1.提升页面加载速度:2.节约服务器资源. 这里特别提一下节约服务器资源,很多人在做前端性能优化的时候,往往只考虑前端性能的问题,而完全忽视前端的性能优化对后端服