网站前后端性能优化(网摘)

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-19 00:44:04

网站前后端性能优化(网摘)的相关文章

柯南君:教你如何对待大型网站平台的性能优化? 之 二--- 应用程序调优 (长篇总结)

柯南君:教你如何对待大型网站平台的性能优化? 之 "二"--- 应用程序调优(长篇总结) 柯南君 上一章 <柯南君:教你如何对待大型电商平台的性能优化?之 一 (方法.指标.工具.定位)>讲到了一些测试方法.测试指标.以及测试工具.稍微讲了一些如何定位的方法?这一章主要讲一下"如何优化应用程序,将其性能提升". 一.基本知识  1.下面讲一些JAVA 程序性能方面的一些看法,首先给大家讲一下应用程序调优,需要调优哪些项? ① 运算的性能 : 看哪一个算法

关于大型门户网站系统的性能优化

鉴于B/S架构在维护成本和客户端配置等方面所具有的绝对优势,越来越多的系统采用了B/S架构,包括ERP.CRM等管理系统也开始向Internet靠拢.而B/S架构的系统却往往很难预计到系统并发访问数有多少,系统往往在高并发访问量的时候出现性能瓶颈,具体表现为页面提示超时信息或者提示数据库抛出的异常信息.为此,针对于B/S架构的面向Internet的系统,尤其是像淘宝.当当网等日访问量超过20余万的大型门户网站进行性能优化是势在必行! 针对大型门户网站系统的性能优化方案有以下几种: (1)页面静态

面向.Net程序员的后端性能优化实战

最近2个月没做什么新项目 完全是对于旧的系统进行性能优化 避免超时 死锁 数据处理能力不够等常见的性能问题 这里不从架构方面出发 毕竟动大手脚成本比较高 那么我们以实例为前提 从细节开始 优化角度 一.业务逻辑优化 二.DB优化 三.数据处理优化 四.锁与性能 五.cpu飙高小结 六.crash现象分析 业务逻辑优化 这一条不具有普遍性 不同的业务不同的场景 如果归纳起来 就是在不影响业务的前提下进行流程精简 1. 废弃冗余逻辑 常见于各种基于数据库的检查 很多同学在维护别人代码的时候 没有深入

运用NodeJs环境并依赖第三方库,框架等实现网站前后端分离报错问题及处理方法

运用NodeJs环境并依赖第三方库,框架等实现网站前后端分离报错问题及处理方法 问题一: SyntaxError: missing ) after argument list in .....\views\user\index.html while compiling ejs. 语法错误:失去右括号)在参数列表后面,在.....\views\user\index.html(在这个路径中的index.html)中当编译ejs时. 分析:这个时候应该是模板引擎ejs出现问题,但是ejs已经是一个写好

从数据库、代码和服务器对PHP网站Mysql做性能优化

数据库优化是PHP面试几乎都会被问到的事情,也是我们工作中应该注意的事情,当然,如果是小网站无所谓优化不优化,网站访问量大了自然会暴漏数据库的瓶颈,这个瓶颈是各方面问题综合导致的,下面我们来做下数据库优化的总结. 一:对数据库优化 1.创建索引 对于查询占主要的应用来说,索引显得尤为重要.很多时候性能问题很简单的就是因为我们忘了添加索引而造成的,或者说没有添加更为有效的索引导致.如果不加索引的话,那么查找任何哪怕只是一条特定的数据都会进行一次全表扫描,如果一张表的数据量很大而符合条件的结果又很少

网站架构之性能优化

网站架构中最核心的几个要素包括:性能,可用性,伸缩性,扩展性和安全性,而性能又是其中最为重要的,本篇简要说下网站性能优化方面所需做的一些事情: 1. 网站性能问题概要 性能问题 说明 产生原因 大都是在用户高并发访问时产生的 主要工作 改善高并发用户访问情况下的网站访问速度 主要目的 改善用户体验,让用户觉得网站很快,一切的产品都必须站在用户的角度考虑问题 2. 网站性能测试 站在不同的视角,所关注的网站性能是不一致的: 视角 关注点 说明 用户视角 用户打开浏览器网页的响应速度,网页能再多长时

扫‘雷’ 纯后端性能优化实战(已合下篇)

最近2个月没做什么新项目 完全是对于旧的系统进行性能优化 避免超时 死锁 数据处理能力不够等常见的性能问题 这里不从架构方面出发 毕竟动大手脚成本比较高 那么我们以实例为前提 从细节开始 优化角度 一.业务逻辑优化 二.DB优化 三.数据处理优化 四.锁与性能 五.cpu飙高小结 六.crash现象分析 业务逻辑优化 这一条不具有普遍性 不同的业务不同的场景 如果归纳起来 就是在不影响业务的前提下进行流程精简 1. 废弃冗余逻辑 常见于各种基于数据库的检查 很多同学在维护别人代码的时候 没有深入

从细节出发 纯后端性能优化实战小结

最近2个月没做什么新项目 完全是对于旧的系统进行性能优化 避免超时 死锁 数据处理能力不够等常见的性能问题 这里不从架构方面出发 毕竟动大手脚成本比较高 那么我们以实例为前提 从细节开始 优化角度 一.业务逻辑优化 二.DB优化 三.数据处理优化 四.锁与性能 五.细节 业务逻辑优化 这一条不具有普遍性 不同的业务不同的场景 如果归纳起来 就是在不影响业务的前提下进行流程精简 1. 废弃冗余逻辑 常见于各种基于数据库的检查 很多同学在维护别人代码的时候 没有深入理解别人的逻辑 也许别人在取数据的

前后端分离的方法

网站前后端分离的方法 如何进行前后端分离: http://blog.csdn.net/github_26672553/article/details/51864112 https://segmentfault.com/q/1010000004494530 解释了前后端的分离方法 http://www.csdn.net/article/2015-10-25/2826033