web前端性能优化

时间  2019-11-10
标签 web 前端 性能 优化 栏目 HTML 繁體版
原文   原文链接

 

　　性能优化对于用户体验无疑是很是重要的，下面介绍一些性能优化的方法。javascript

 

一.减小HTTP请求　

　　http请求越多，那么消耗的时间越多，若是在加上网络很糟糕，那么问题就更多了。且若是网页中的图片、css文件、js文件不少甚至有音乐文件时，这势必会形成负担。php

　方法一： 图片地图
css

　　即多个图片排成一行做为连接到其余页面的按钮，咱们固然可使用五福图片，发送5个http请求，可是这是不合适的。html

　　咱们能够选择使用图片地图，即只用一张图片，而后使用<map>属性经过控制坐标来实现：前端

  • 　http://stevesouders.com/hpws/imagemap-no.php  这是没有使用图片地图的实例。
  •    http://stevesouders.com/hpws/imagemap.php 这是使用了图片地图的例子，速度明显加快。

　　优势： 大幅加快加载速度，减小http请求；   缺点： 手工设置坐标很是麻烦，在IE下支持的很差。java

 

　方法二：CSS Sprite（可行）webpack

　　　　即一个网页上有不少的小图片，好比有20个，若是咱们都请求一遍，就须要使用20个http请求，这是很耗时的。web

　　　　可是咱们能够把这些图片合成一个大的图片，而后将之做为 background-img插入进去， 根据不一样的图片设置不一样的background-postion便可，网易等就是采起的这种作法。chrome

　　　　说明：虽然在不一样的位置须要请求不少的图片，可是，实际上咱们查看网络只会请求一次，以下面的页面：数据库

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fa</title>
</head>
<body>
    <img src="https://www.yahoo.com/sy/uu/api/res/1.2/ONh9cdZG4FD4Bwh96ov40g--/Zmk9c3RyaW07aD0xNjA7cHlvZmY9MDtxPTgwO3c9MzQwO3NtPTE7YXBwaWQ9eXRhY2h5b24-/https://s.yimg.com/lo/api/res/1.2/R4WNmZJRFkeTMuk1.LHDtQ--~C/Zmk9Zml0O3c9MTQwNDtoPTc1NjtweG9mZj0wO3B5b2ZmPTA7O2FwcGlkPXByb2Rlc2sy/https://s.yimg.com/os/creatr-images/GLB/2017-03-25/546265e0-119a-11e7-a043-43c32d6bcebf_ivankanh.jpg.cf.jpg" alt="">  <img src="https://www.yahoo.com/sy/uu/api/res/1.2/ONh9cdZG4FD4Bwh96ov40g--/Zmk9c3RyaW07aD0xNjA7cHlvZmY9MDtxPTgwO3c9MzQwO3NtPTE7YXBwaWQ9eXRhY2h5b24-/https://s.yimg.com/lo/api/res/1.2/R4WNmZJRFkeTMuk1.LHDtQ--~C/Zmk9Zml0O3c9MTQwNDtoPTc1NjtweG9mZj0wO3B5b2ZmPTA7O2FwcGlkPXByb2Rlc2sy/https://s.yimg.com/os/creatr-images/GLB/2017-03-25/546265e0-119a-11e7-a043-43c32d6bcebf_ivankanh.jpg.cf.jpg" alt="">
    <img src="https://www.yahoo.com/sy/uu/api/res/1.2/ONh9cdZG4FD4Bwh96ov40g--/Zmk9c3RyaW07aD0xNjA7cHlvZmY9MDtxPTgwO3c9MzQwO3NtPTE7YXBwaWQ9eXRhY2h5b24-/https://s.yimg.com/lo/api/res/1.2/R4WNmZJRFkeTMuk1.LHDtQ--~C/Zmk9Zml0O3c9MTQwNDtoPTc1NjtweG9mZj0wO3B5b2ZmPTA7O2FwcGlkPXByb2Rlc2sy/https://s.yimg.com/os/creatr-images/GLB/2017-03-25/546265e0-119a-11e7-a043-43c32d6bcebf_ivankanh.jpg.cf.jpg" alt=""><img src="https://www.yahoo.com/sy/uu/api/res/1.2/ONh9cdZG4FD4Bwh96ov40g--/Zmk9c3RyaW07aD0xNjA7cHlvZmY9MDtxPTgwO3c9MzQwO3NtPTE7YXBwaWQ9eXRhY2h5b24-/https://s.yimg.com/lo/api/res/1.2/R4WNmZJRFkeTMuk1.LHDtQ--~C/Zmk9Zml0O3c9MTQwNDtoPTc1NjtweG9mZj0wO3B5b2ZmPTA7O2FwcGlkPXByb2Rlc2sy/https://s.yimg.com/os/creatr-images/GLB/2017-03-25/546265e0-119a-11e7-a043-43c32d6bcebf_ivankanh.jpg.cf.jpg" alt=""><img src="https://www.yahoo.com/sy/uu/api/res/1.2/ONh9cdZG4FD4Bwh96ov40g--/Zmk9c3RyaW07aD0xNjA7cHlvZmY9MDtxPTgwO3c9MzQwO3NtPTE7YXBwaWQ9eXRhY2h5b24-/https://s.yimg.com/lo/api/res/1.2/R4WNmZJRFkeTMuk1.LHDtQ--~C/Zmk9Zml0O3c9MTQwNDtoPTc1NjtweG9mZj0wO3B5b2ZmPTA7O2FwcGlkPXByb2Rlc2sy/https://s.yimg.com/os/creatr-images/GLB/2017-03-25/546265e0-119a-11e7-a043-43c32d6bcebf_ivankanh.jpg.cf.jpg" alt=""><img src="https://www.yahoo.com/sy/uu/api/res/1.2/ONh9cdZG4FD4Bwh96ov40g--/Zmk9c3RyaW07aD0xNjA7cHlvZmY9MDtxPTgwO3c9MzQwO3NtPTE7YXBwaWQ9eXRhY2h5b24-/https://s.yimg.com/lo/api/res/1.2/R4WNmZJRFkeTMuk1.LHDtQ--~C/Zmk9Zml0O3c9MTQwNDtoPTc1NjtweG9mZj0wO3B5b2ZmPTA7O2FwcGlkPXByb2Rlc2sy/https://s.yimg.com/os/creatr-images/GLB/2017-03-25/546265e0-119a-11e7-a043-43c32d6bcebf_ivankanh.jpg.cf.jpg" alt=""><img src="https://www.yahoo.com/sy/uu/api/res/1.2/ONh9cdZG4FD4Bwh96ov40g--/Zmk9c3RyaW07aD0xNjA7cHlvZmY9MDtxPTgwO3c9MzQwO3NtPTE7YXBwaWQ9eXRhY2h5b24-/https://s.yimg.com/lo/api/res/1.2/R4WNmZJRFkeTMuk1.LHDtQ--~C/Zmk9Zml0O3c9MTQwNDtoPTc1NjtweG9mZj0wO3B5b2ZmPTA7O2FwcGlkPXByb2Rlc2sy/https://s.yimg.com/os/creatr-images/GLB/2017-03-25/546265e0-119a-11e7-a043-43c32d6bcebf_ivankanh.jpg.cf.jpg" alt=""><img src="https://www.yahoo.com/sy/uu/api/res/1.2/ONh9cdZG4FD4Bwh96ov40g--/Zmk9c3RyaW07aD0xNjA7cHlvZmY9MDtxPTgwO3c9MzQwO3NtPTE7YXBwaWQ9eXRhY2h5b24-/https://s.yimg.com/lo/api/res/1.2/R4WNmZJRFkeTMuk1.LHDtQ--~C/Zmk9Zml0O3c9MTQwNDtoPTc1NjtweG9mZj0wO3B5b2ZmPTA7O2FwcGlkPXByb2Rlc2sy/https://s.yimg.com/os/creatr-images/GLB/2017-03-25/546265e0-119a-11e7-a043-43c32d6bcebf_ivankanh.jpg.cf.jpg" alt=""><img src="https://www.yahoo.com/sy/uu/api/res/1.2/ONh9cdZG4FD4Bwh96ov40g--/Zmk9c3RyaW07aD0xNjA7cHlvZmY9MDtxPTgwO3c9MzQwO3NtPTE7YXBwaWQ9eXRhY2h5b24-/https://s.yimg.com/lo/api/res/1.2/R4WNmZJRFkeTMuk1.LHDtQ--~C/Zmk9Zml0O3c9MTQwNDtoPTc1NjtweG9mZj0wO3B5b2ZmPTA7O2FwcGlkPXByb2Rlc2sy/https://s.yimg.com/os/creatr-images/GLB/2017-03-25/546265e0-119a-11e7-a043-43c32d6bcebf_ivankanh.jpg.cf.jpg" alt=""><img src="https://www.yahoo.com/sy/uu/api/res/1.2/ONh9cdZG4FD4Bwh96ov40g--/Zmk9c3RyaW07aD0xNjA7cHlvZmY9MDtxPTgwO3c9MzQwO3NtPTE7YXBwaWQ9eXRhY2h5b24-/https://s.yimg.com/lo/api/res/1.2/R4WNmZJRFkeTMuk1.LHDtQ--~C/Zmk9Zml0O3c9MTQwNDtoPTc1NjtweG9mZj0wO3B5b2ZmPTA7O2FwcGlkPXByb2Rlc2sy/https://s.yimg.com/os/creatr-images/GLB/2017-03-25/546265e0-119a-11e7-a043-43c32d6bcebf_ivankanh.jpg.cf.jpg" alt=""><img src="https://www.yahoo.com/sy/uu/api/res/1.2/ONh9cdZG4FD4Bwh96ov40g--/Zmk9c3RyaW07aD0xNjA7cHlvZmY9MDtxPTgwO3c9MzQwO3NtPTE7YXBwaWQ9eXRhY2h5b24-/https://s.yimg.com/lo/api/res/1.2/R4WNmZJRFkeTMuk1.LHDtQ--~C/Zmk9Zml0O3c9MTQwNDtoPTc1NjtweG9mZj0wO3B5b2ZmPTA7O2FwcGlkPXByb2Rlc2sy/https://s.yimg.com/os/creatr-images/GLB/2017-03-25/546265e0-119a-11e7-a043-43c32d6bcebf_ivankanh.jpg.cf.jpg" alt="">
</body>
</html>
View Code

 

  • 　http://stevesouders.com/examples/sprites.php  使用了CSS Sprite的实例。

　　优势： 速度快，能够和图片地图相比拟。

　　使用场景： 一些不多改变的图片（静态的），如背景、按钮、导航栏、链接等。缺点： 没有缺点。

 

　方法三：内联图片

　　　　即便用data：url的方式来内联图片，它不须要额外的http请求。

　　　　缺点：IE不支持。

  • 　　http://stevesouders.com/examples/inline-css-images.php  这是内联css图片的例子。这种状况下就没有对该图片产生请求。

　　

　方法四：合并脚本和样式表（可行）

　　　　通常来讲将css和js放在外部文件中会比内联更好一些，可是若是按照软件工程师所推荐的方式和模块化的原则将代码分开放到不一样的多个小的文件中，会下降性能，由于每一个文件都会致使一个额外的http请求。

　　　　为了清晰，咱们不建议将脚本和样式表合并在一块儿，可是多个脚本应该合并为一个脚本，多个样式表应该合并为一个样式表。

  • 　 http://stevesouders.com/examples/combo-none.php 这个是分离脚本的示例
  •     http://stevesouders.com/examples/combom.php　这个是合并脚本的示例

　　　    若是你是进行了js的模块化开发，可能以为合并是一种倒退，可是咱们可使用在生成过程当中从一组特定的模块生成一个目标文件，如使用webpack构建工具。

 

 

 

 

2、使用内容发布网络

　　CDN即 content distribute network,内容分发网络。其原理是---尽量避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。CDN系统可以实时地根据网络流量和各节点的链接、负载情况以及到用户的距离和响应时间等综合信息将用户的请求从新导向离用户最近的服务节点上。下面的这个例子能够很好的说明问题：古代打仗你们必定都知道，因为古代的交通很不发达，因此当外族进攻的时候每每不能及时的反击，等朝廷征完兵再把兵派往边境的时候那些侵略者倒是早已不见了踪迹，这个让古代的帝王非常郁闷。后来帝王们学聪明了，都将大量的兵员提早派往边境驻扎，让他们平时屯田，战时当兵，这样的策略起到了很显著的做用。

　　曾经一个网站的全部服务器都只在一个地方，可是如今不一样了，由于咱们知道http请求是耗时的，若是服务器用户更近，请求的时间不久更短了吗？ 因此能够将服务器置于多个分散的地方，而使用cdn就能够保证咱们每次从最近的地方获取到响应。

　　说明1： CDN只是用来提供静态内容的，如图片、脚本、样式表和Flash。提供动态html页面会引入特殊的存储需求 - 数据库链接、状态管理、验证、硬件和OS优化等。

　　说明2： 你所测试的CDN速度与你所处的位置、服务器位置都有很大的关系。

　　优势： 响应速度更快（大部分时间是这样的）；

　　缺点1： 依赖CDN使得你的响应时间会受到其余网站-甚至是竞争对手网站流量的影响。由于CDN服务器提供商在其全部的客户之间共享其Web服务器。

　　缺点2： 没法直接控制组件服务器所带来的特殊麻烦。  如，修改HTTP响应头必须经过服务提供商来完成，而不是你的工做团队完成。  

  • 　　http://stevesouders.com/hpws/ex-cdn.php  提供了cdn 
  •       http://stevesouders.com/hpws/ex-nocdn.php  无cdn   （本机测试，cdn多数状况下更快一些~）

　　

 

 

 

 

 

3、添加Expires头

　　在设计web页面的时候，首次访问的响应时间并非惟一须要考虑的。 若是是这样的话，咱们能够将规则1发挥到极致，而且再也不页面上放置任何图片、脚本和样式表。 而后，咱们知道，这些能够加强用户体验，这也就意味着须要更长的时间来加载这些东西。

　　虽然在第一次访问的时候须要进行不少的http请求，可是经过一个长久的Expires头，可使得这些组件被缓存，这样在后续的请求中能够避免不少没必要要的http请求，须要添加的包括图片、css、脚本，即全部的组件上。

　　http://www.cnblogs.com/zhuzhenwei918/p/6437574.html 能够参考个人这篇文章。

　　注意： Expires的缺点是必须保证浏览器和服务器的时间严格一致，不然就会出现问题。

　　注意： 只有在用户已经访问了你的网站以后，长久的Expires头才会对页面浏览产生影响。 当用户第一次访问你的网站的时候，它不会对HTTP请求的数量产生任何影响。故其性能的改进取决于用户在访问你的页面的时候是否有完整的缓存。

　　为图片使用长久的Expires头很是广泛， 可是这一最佳实践不该当仅仅用在图片上，长久的Expired头应该包括任何不常常变化的组件，包括脚本、样式表和Flash组件。可是HTML文档不该该使用长久的Expires头，由于他包含动态内容，这些内容在每次用户请求时都将不断刷新。

　　那些基本上不须要更新的内容咱们就直接缓存便可，缓存以后咱们就认为这是静态页面了。如：govclouds.cn 他的图片、大部分的css和js都是缓存的，由于大多数都不须要改变就能够了。

　　另外，目前的不少网站的形式都是相似于www.sina.com.cn即一个页面是详情页，而后其中还有插入的推荐页面（不断变化的）、还有用于收费广告的页面（须要不断变化），这些动态变化的页面大多数都是使用iframe嵌入的，而基本不变的详情页就使用了缓存，动态变化的iframe不会使用缓存。

　　而对于一些可能很快就要改变的，例如展现即时的新闻的页面，其图片通常就不会被缓存。如cnn.com，它对于图片的缓存就只会缓存网站的图标（基本上不会改变）和网站的一些背景图片，而对于其余内容就不会改变。

 

　　下面的两个例子分别是无Expires的示例和有Expires的示例：

  •  http://stevesouders.com/hpws/expiresoff.php   无Expires的示例
  •  http://stevesouders.com/hpws/expiresoff.php   有Expires的示例

　　经过测试能够发现，添加了Expires头的示例的速度第一次比较慢，可是后面能够缩短一半的时间。 而前者一直都很是慢！  效果很是显著。

　　关于如何观察缓存和缓存的相关问题能够看这篇文章。（包括ｕｒｌ中回车、Ｆ５和　Ｃｔｒｌ　＋　Ｆ５的区别）

　　ｕｒｌ中是能用缓存就用缓存，不请求本身没有的。

　　Ｆ５是无论咋样，我先去服务器问问再说。

　　Ｃｔｒｌ　＋　Ｆ５是无论咋样，我直接不要如今的，直接所有从服务器端获取文件。

　　显然从本地读取速度更快。

 

 

　　ctrl + shift + del  清空缓存

 

 

 

 

 

4、压缩组件

 　　使用减少文件体积的压缩已经在E-mail和FTP站点中使用了10年，目前HTTP1.1也是开始支持了。其中，web客户端能够经过HTTP请求中的Accept-Encoding来表示对压缩的支持，以下所示：

　　　

　　显然，只要是同一个客户端，都会发送这样的请求，其中，ｇｚｉｐ是免费的、标准的压缩形式，而ｄｅｆｌａｔｅ用的则很是少。　

　　服务器端接收到这样的请求以后，若是服务器将一个文件压缩就会在响应的时候包含下面的字段表示对之进行了压缩，以下所示：

     

　　

　　通常，大多数的网站都会压缩hTML、CSS和js脚本，一般不会压缩图片和PDF，由于他们原本就是已经被压缩过的。

　　另外，压缩是有成本的，由于服务器须要花费额外的CPU周期来完成对文件的压缩， 而且当压缩文件响应到了客户端时，客户端须要进行解压缩，这都要时间，若是说耗费的时间还不如节省的时间，那就不要压缩了。  美国前十的网站有9个都在压缩HTML、而css和js则是选择性的。经过压缩，能够将响应的额外的数据量较少将近70%。

　　我在地址栏输入www.aol.com的时候，查看网络信息以下：

　　能够看到，它第一次发送的请求是 http: //www.aol.com/ ，响应状态码为301（Moved Permanently），即永久移除，这时候响应头中就会包含 Location 字段，而后浏览器就会根据服务器发送回来的新的地址，从新访问，因而产生了第二条请求，以下所示：

　　

　　即，此次浏览器利用服务器响应的Location字段的值来从新发送了请求， 此次就发送成功了。 即  200 Connetion established 。  即创建了TCP创建了链接。

　　而若是咱们第一次就输入 https://www.aol.com/  这样就不会发生301的状况了，而是200 OK。

　　

　　有时候咱们能够看到在响应头中含有vary字段，如www.aol.com中的，以下所示：

　　

　　vary： “Accept-Encoding”；是什么意思呢？

　　由于当浏览器直接和服务器进行通讯时，迄今为止全部的介绍的配置都能很好的工做，可是当浏览器经过代理来发送请求时，状况就变得复杂了会形成严重的问题。

　　解决方法就是在weg服务器的响应头中添加vary头。 即web服务器告诉代理相关信息。

　　下面的例子是未压缩、只压缩HTML和压缩全部组件的例子：

  • http://stevesouders.com/hpws/nogzip.html     这是没有压缩的例子。
  • http://stevesouders.com/hpws/gzip-html.html     这是只压缩html的例子。
  • http://stevesouders.com/hpws/gzip-all.html     这是压缩全部组件的例子。

　　相对于不压缩，压缩html能够节省约为9.7%的时间（固然不是绝对的），压缩全部组件能够节约约为53.2%的时间。

　　不压缩的响应头：

　　

　　压缩了html文件的响应头：

　　实际测试时，感受响应的更快（是原做者将一个js文件也误压缩了）

　　

　　压缩了全部组件的响应头：

　　根据content-type也能够知道这是一个js文件。

　　总结：经过比较，能够发现通过压缩，响应的时间获得了很明显的提升。

 

注： content-type的值

  • html ：  text/html
  • css    :   text/css
  • js      :   application/javascript
  • gif     :   image/gif
  • jpeg  :   image/jpeg
  • json  :  application/json

 

 

5、 使用link将样式表放在顶部

　　　这条规则主要是用来解决无样式内容的闪烁（Flash of Unstyled Content, FOUC）问题。

　　若是样式表仍在加载，构建呈现树就是一种浪费，由于全部样式表加载并解析完毕以前无需绘制任何东西。不然，在其准备好以前显示内容会遇到FOUC（无样式内容的闪烁，Flash of Unstyled Content）问题。

 　　　在  http://stevesouders/hpws/css-fouc.php 中查看fouc现象。

　　    在 chrome 上仅仅是由闪烁的状况，其余浏览器甚至有可能出现白屏的状况。  白屏是浏览器再尝试修改前端工程师所犯的错误 --- 将样式表放在文档比较靠后的位置。  白屏是对FOUC问题的补充。

 

 

6、 将脚本放在底部

 　  刚刚解决了css的问题，最好放在顶部，而对于js来讲，恰好相反，即最好从顶部移动到底部（若是能够的话）。这样页面既能够逐步呈现，也能够提升下载的并行度。

　　先看这样的一个例子： 将一个页面中部放置js脚本，以下所示：

　　　　http://stevesouders.com/hpws/js-middle.php

　　能够发现， js执行须要将近10s钟，因此页面的下半部分大概要花10s钟才能呈现出来。 出现这个现象是由于js阻止了并行下载，js是单线程的。因此这就意味着将脚本放在页面越靠下的地方，意味着越多的内容可以逐步地呈现。

　　下面是一个脚本阻塞加载的实例：

　　　　http://stevesouders.com/hpws/js-blocking.php

　　下面是一个脚本放在顶部的实例：

　　　　http://stevesouders.com/hpws/js-top.php

　　下面是一个脚本放在底部的实例：

　　　　http://stevesouders.com/hpws/js-bottom.php

　　常常出现的另一种建议是使用延迟（defer）脚本，以下所示：

　　　　http://stevesouders.com/hpws/js-defer.php

 

　　

 

 

 

7、避免使用css表达式

　　这是IE5支持的，早已不被推荐使用。

 

 

 

8、使用外部的JavaScript和CSS

咱们首先来比较一下内联和外置的区别。

1、纯粹而言、内联更快一些。

　　下面的两个例子分别是内联和外置,他们文件大小都是87kb：

  • http://stevesouders.com/hpws/inlined.php
  • http://stevesouders.com/hpws/external.php

　　能够看到最开始显然是内联的要快一些。  由于内联就只有http请求。  而外置须要有5个http请求。

　　但也不是这么绝对，由于当外置的文件被缓存下来，那么真正的http请求就只有1个了。 其余的文件都会从硬盘汇总读取。 因此这个不是很比如较。

　　结论： 单纯比较, 内联快 。

 

　

2、 页面浏览量

　　若是用户常常浏览你的网页，那么用到缓存的几率就更大一些，所以，外置更占据优点。

　　可是若是用户好久（一个月）才浏览一次，那么显然使用内置会更好一些。

 

3、空缓存&&完整缓存

　　在作比较时，知道用户的缓存的可能性是很是重要的。 若是网站本质上能够为用户带来高完整缓存率，使用外部文件的受益就会很大。若是不能（或几率较小）产生完整的缓存，那么内联是更好的选择。

 

4、组件重用

　　若是你的网站中每一个页面都使用了相同的JavaScript和CSS，使用外部组文件能够提升这些组件的重用率。在这种状况下使用外部文件更加具备优点，由于当用户在页面间导航时，JavaScript和CSS组件就已经位于浏览器的缓存中了，这样进入后面的页面后，就不用http请求，而是直接使用在导航页面的缓存文件了。

　　可是若是没有任何两个页面共享相同的JavaScript和CSS，那么重用率就会很是低了。

　　最好的状况通常就是将页面划分红几种页面类型，而后为每种类型建立单独的脚本和样式表。

 

经过对比咱们仍是认为将js和css外置会更好一些。

 

 

主页

　　通常主页倾向于使用内联而不是外置，他们对响应能力有着更高的要求。

 

 

9、减小DNS查找

　　

10、 精简JavaScript

　　精简

　　精简是指从代码中移除没必要要的字符以减少其大小，进而改善加载时间。 在代码被精简以后，全部的注释以及没必要要的空白字符（空格、换行和制表符）都将被移除，对于JavaScript而言，还能够改善响应时间效率，由于须要下载的文件大小减少了。

　　

　　混淆

　　混淆是能够应用在源代码上的另一种优化方式。 和精简同样，它会移除注释和空白，同时它还会改写代码。做为改写的一部分，函数和变量的名字会被转化成更短的字符串，这时的代码更为精炼，也更难阅读。 可是这对提升性能的帮助很大。  注意：因为混淆更加复杂，因此混淆过程自己颇有可能引入错误。 

　

　　观察下面的例子：

  • http://stevesouders.com/hpws/js-large-normal.php   通常脚本
  • http://stevesouders.com/hpws/js-large-minify.php    精简后脚本
  • http://stevesouders.com/hpws/js-large-obfuscate.php   混淆后脚本

　　　　

　　

 

11、避免重定向

　　在重定向中使用的最多的状态码是 301 和 302， 而 303 和 307 是在HTTP1.1规范中添加的，用来澄清对302的使用（滥用），可是几乎没有人使用303和307，绝大多数网站仍然使用302.

　　一旦发生了重定向，就会严重阻塞html的传输。

 

12、 删除重复脚本

　　

 

十3、配置ETag

 

十4、使Ajax可缓存

 

 

　　

 

 

　

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

4.使用JSON格式来进行数据交换　

　　JSON是一种轻量级的数据交换格式，采用彻底独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript原生格式，这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包。与XML序列化相比，JSON序列化后产生的数据通常要比XML序列化后数据体积小。

 

 

 

5.减小DOM操做

　　在《高性能JavaScript》中有这样一句话：

把DOM和JavaScript各自想象成一个岛屿，它们之间用收费桥梁链接。

　　所以咱们应当尽可能减小DOM操做、若是屡次访问同一个DOM应该使用局部变量缓存该DOM、尽量使用querySelector，而不是使用获取HTML集合的API。另外DOM操做会致使一系列的重绘（repaint）、从新排版（reflow）操做。为了确保执行结果的准确性，全部的修改操做是按顺序同步执行的。大部分浏览器都不会在JavaScript的执行过程当中更新DOM。相应的，这些浏览器将对对 DOM的操做放进一个队列，并在JavaScript脚本执行完毕之后按顺序一次执行完毕。也就是说，在JavaScript执行的过程，直到发生从新排版，用户一直被阻塞。通常的浏览器中（不含IE），repaint的速度远快于reflow，因此避免reflow更重要。

 

 

 

6.压缩css文件、js文件、图片

　　css文件和js文件中的注释、额外的空格会占用更多的资源，因此压缩css和js是十分必要的。另外，对于图片咱们能够下降图片的分辨率、改变图片的格式以达到压缩图片的效果。

 

 

 

7.减小DNS查询

　　咱们知道一次DNS的解析过程会消耗20-120毫秒的 时间,在dns查询结束以前，浏览器不会下载该域名下的任何东西。因此减小dns查询的时间能够加快页面的加载速度。所以咱们建议一个页面所包含的域 名数尽可能控制在2-4个。这就须要对页面总体有一个很好的规划。

 

 

 

未完待续....

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程