首页 > 代码库 > 关于前端的性能优化问题
关于前端的性能优化问题
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 PermanentlyLocation: http://example.com/newuriContent-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 OKLast-Modified: Tue, 12 Dec 2006 03:03:59 GMTETag: “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代码和菜单，它们可以稍后加载，因为用户在初始呈现之后才会在页面上拖动元素。其他的可以被后加载的地方包括隐藏的内容（当用户做某项操作才会展现的内容）和被折叠的图片。
关于前端的性能优化问题