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

时间 2019-11-18

原文原文链接

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属性的方法。php

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

10. 缩小JavaScript和CSShtml

缩小是指从代码中删除没必要要的字母，减小文件体积从而提升加载速度。浏览器

缩减代码时须要移除全部的注释，以及不须要的空白（空格，新行和tab）。缓存

减少js或css文件的大小，提升响应的性能。服务器

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

压缩内嵌在页面中的<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代码和菜单，它们能够稍后加载，由于用户在初始呈现以后才会在页面上拖动元素。其余的能够被后加载的地方包括隐藏的内容（当用户作某项操做才会展示的内容）和被折叠的图片。