【前端开发】提升站点载入速度

版权声明：转载请注明出处 https://blog.csdn.net/a503921892/article/details/37355771

尊重原创：但是出处不明......

http://www.xahl.net.cn 或者 http://www.xahl.net.cn/ ，有人会问，有差异吗？我明白的告诉你们。有！
server假设接收到的URL是没有带“/”的URL，它会本身主动又一次定向到带有“/”，尽管最后都打开了阿里巴巴中文站的首页，但是前者比后者多走了一步，重定向，显然多多少少浪费了必定的时间。因此之后咱们加URL连接的时候，别忘了把最后的“/”给加上去。
　　12. Remove duplicate scripts 去除反复的脚本
　　这个事实上没有什么好说的。你们都应该毫无条件的去遵照，但是越是明显，越是简单的事，咱们每每会作很差。固然。很是多理由的，项目时间太紧张了等等。致使代码很是乱。很是多反复的地方。
事实上谁都知道重负很差，只是还好，咱们的页面反复的脚本代码很少（至少一个页面里面，呵呵）。
只是。我到是但愿，咱们不只要作到一个页面脚本不反复，而且要作到N个页面，脚本要重用。

　　13. Configure ETags 这个好像是server端配置的问题，我不太懂，也就不乱说了。怕把你们给误导了。
　　总共13个。但是看了YAHOO的官方说明。好像另外一个AJAX CACHE（AJAX 缓存）。我却是认为这个很是重要。随着咱们AJAX应用的普遍，AJAX 缓存这个概念必定要时刻在咱们脑子中。AJAX是个好东西，但是反复的数据，无休止的向后台申请，绝对是个错误（不只是速度上仍是对server压力上来讲），因此咱们就要对咱们已经申请到的数据进行缓存。当第2次用到的时候，就直接从缓存中取。不要在去訪问咱们宝贵的server资源了。事实上这个思想不只仅适合AJAX。在所有有数据复用的应用中都应该考虑到。
　　YSLOW就分析到这里完成了。也许有些地方分析的不是很是正确，也许有人分析的比我更早，更好。但是这些的确是我从工做中去积累，发现的。并非常多都实际应用到工做中去了，顺便说下，嘿嘿。LIST页面进行优化后。在0.92版本号的YSLOW评分将达到76分，甚至80分，至关于0.8版本号的90分以上。只是评分毕竟是评分，关键仍是速度。
YSlow是yahoo美国开发的一个页面评分插件。很是的棒，从中咱们可以看出咱们页面上的很是多不足，而且可以知道咱们改怎么却改进和优化。 
　　细致研究了下YSlow跌评分规则主要有12条：
　　1. Make fewer HTTP requests 尽量少的http请求。。
咱们有141个请求（当中15个JS请求。3个CSS请求，47个CSS background images请求），多的可怕。
思考了下，为何把这个三种请求过多列为对页面载入的重要不利因素呢。而过多的IMG请求并无列为不利因素呢？ 　　发现原来这些请求都是可以避免的。
 　　15个JS和3个CSS全然可以经过特殊的办法进行合并（这个技术部已经帮咱们攻克了，实在是太感谢了，嘿嘿。）。这样合并之后，普通状况下页面上仅仅会出现一个JS和一个CSS（对JS的封装得有必定的要求）。 　　但是47个CSS background images请求改怎么解决呢？为何页面上的纯IMG请求时合理的。而CSS background images请求过多就是不利因素了呢。这个我想了很是久。总算明白，原来是这种： 　　通常页面上的ICON。栏目背景啊，图片button啊。咱们都会用图片CSS背景来实现，而通常这个图片CSS背景用到的图片都是比較小的，因此全然可以把这些图片合并成一个相对照较大的图片，这样页面上仅仅会出现一个CSS background images请求，最多也就2-3个。
后来细致看了下雅虎美国的页面，他们的确也是这样作的，尽管这样作需要花必定的时间来有规则的合并这些ICON。栏目背景，图片button，以方便CSS调用，但是这样作绝对是合算的，而且是有必要的，YSlow也是极力推荐的。 　　2. Use a CDN这项咱们的评分是F级，最低。说实在的，我刚開始什么是CDN都不知道。后来查了GOODLE才知道。CDN的全称是Content Delivery Network。即内容分发网络。其目的是经过在现有的Internet中添加一层新的网络架构。将站点的内容公布到最接近用户的网络”边缘”，使用户可以就近取得所需的内容，解决Internet网络拥挤的情况，提升用户訪问站点的响应速度。从技术上全面解决因为网络带宽小、用户訪问量大、网点分布不均等缘由所形成的用户訪问站点响应速度慢的问题。
 　　看来上述的解释后，基本上明白了CDN是怎么回事，后来咨询了下中文站点SA。得知咱们站点眼下的确尚未作CDN的优化，但是听说咱们有更加先进的技术来解决类似的问题（详细什么技术那就保密了）。但是毕竟CDN也是个至关不错的技术，因此在咱们先进技术的基础上在作CDN优化，确定比方今更好，嘿嘿。
听说SA明年会作几个点的CND。 　　3. Add an Expires header设置过时的HTTP Header.设置Expires Header可以将脚本。 样式表， 图片， Flash等缓存在浏览器的Cache中。 　　事实上咱们站点也作了这个优化，至少图片在这个上作过优化，但是没有作全然。咱们的CSS和JS都尚未作过优化，却是外部引入的一个广告JS作了，呵呵。事实上设置过时的HTTP Header 更应该作在脚本。 样式表， Flash上。只是听说这个SA也是没有作的。但是有必定的风险，因为JS和CSS是有必定的逻辑，假设server端和client都存在缓存的话。万一出了什么问题，对咱们之后查找问题的所在和添加难度，只是我想二者中是可以权衡和并存的。 　　4. Gzip components 对咱们的页面内容进行Gzip格式的压缩，Gzip格式是一种很是广泛的压缩技术。差点儿所有的浏览器都有解压Gzip格式的能力。而且它可以压缩的比例很是大，通常压缩率为85%。就是说server端100K的页面可以压缩到25K左右的Gzip格式的数据发给client，client收到Gzip格式的数据后本身主动解压缩后显示页面。 　　5. Put CSS at the top 把CSS外部连接放到页面的顶部。 　　事实上这个原则咱们通常都遵照的，假设把CSS外部连接做为逻辑的一部分出现在页面头部下面，我我的认为这个自己就是个错误。还好。咱们的页面基本上都作到了，但是有些页面比方LIST页面。仍是出现了和逻辑挂钩的CSS连接，缘由是为了解决一些原本就不合理的产品逻辑。
因此，咱们WEB前端project师有义务杜绝这些不合理的产品逻辑破坏咱们的页面结果及页面载入速度，不能为了实现而实现。 　　6. Put JS at the bottom 把Javascript脚本尽可能放到页面底部载入。 　　一開始为觉得Javascript脚本尽可能放到页面底部载入，是指所有的JS脚本都要放究竟部，后来才发现，并不全然是这样，这里所指的脚本是指那些在载入过程当中要执行的脚本，因此通常的处理办法仍是页面头部引入JS连接。页面底部执行JS脚本程序。为何要这么作呢？呵呵，事实上很是easy，为了实现最大的下载并行，页面载入初期作的事，最好仅仅有下载，HTML的下载。CSS的下载，JS的下载，等完成下载后再去实现页面渲染。JS脚本执行。这个方面咱们还需要努力，很是多页面咱们在载入过程当中执行了一部分脚本，也许是为了实现一些功能，没有办法，只是也许有更好的办法来替代呢。。。 　　7. Avoid CSS expressions 避免CSS表达式 　　事实上在CSS中执行表达式和页面载入中执行大量的JS脚本几乎相同，也许还更慢。而且还不兼容。尽管可以使咱们在页面逻辑简单很多，但是咱们全然可以抛弃之。这个点，咱们的页面基本上都作到了。只是说实话，CSS表达式，嘿嘿，我曾经还不知道有这么回事。羞愧。
哈哈。 　　9. Reduce DNS lookups 尽量少的DNS查找。 　　这项咱们作的不是很是好。D级。有9个域名，通常不要超过4个。只是这个主要是server架构上的问题，咱们也无能为力，现在单单首页的广告域名就有好几个。好耶的广告域名。雅虎的广告域名，淘宝店广告域名，打点的域名。假设去掉这些。咱们事实上仍是够用的，一个主域名，一个图片的。一个STYLE的，最多加上IFREAM的恰好4个。
 　　10. Minify JS 对Javascript代码进行压缩。
 　　这点我很是早曾经就对此关注了。也找到了一个不错的压缩工具。yuicompressor，雅虎美国开发的JAVA压缩包yuicompressor.jar。
压缩的至关完美，不只把代码间的空格换行给去除掉了，而且对变量名，北部方法名都进行的简化，无心中实现了混淆脚本的做用。现在咱们仅仅作到了JS合并，并无对齐进行压缩。假设我用yuicompressor手工的去压缩，尽管实现了JS压缩，但是给咱们本身的维护量添加了一倍。因为咱们需要维护2套JS脚本，一套是压缩前的（调试用的），一套是压缩后（公布到网上的），而且要保证2套代码一致。因此最完美的作法是在公布的时候实现JS脚本合并，并对其用yuicompressor进行压缩。而后公布到晚上，把关键点移到公布的时候，这样咱们仅仅需要关心一套JS脚本（公布前的版本号）。而且我认为这个方法全然是行动通的。
 　　11. Avoid redirects 避免重定向（跳转） 　　怎么理解这点呢？ 　　通常咱们页面的连接都写成： http://www.xahl.net.cn 或者 http://www.xahl.net.cn/ ，有人会问。有差异吗？我明白的告诉你们，有。server假设接收到的URL是没有带“/”的URL。它会本身主动又一次定向到带有“/”，尽管最后都打开了阿里巴巴中文站的首页。但是前者比后者多走了一步，重定向。显然多多少少浪费了必定的时间。
因此之后咱们加URL连接的时候，别忘了把最后的“/”给加上去。 　　12. Remove duplicate scripts 去除反复的脚本 　　这个事实上没有什么好说的。你们都应该毫无条件的去遵照，但是越是明显。越是简单的事，咱们每每会作很差，固然，很是多理由的，项目时间太紧张了等等，致使代码很是乱。很是多反复的地方。事实上谁都知道重负很差，只是还好，咱们的页面反复的脚本代码很少（至少一个页面里面，呵呵）。只是，我到是但愿。咱们不只要作到一个页面脚本不反复，而且要作到N个页面。脚本要重用。
 　　13. Configure ETags 这个好像是server端配置的问题。我不太懂，也就不乱说了。怕把你们给误导了。 　　总共13个，但是看了YAHOO的官方说明，好像另外一个AJAX CACHE（AJAX 缓存）。
我却是认为这个很是重要。随着咱们AJAX应用的普遍，AJAX 缓存这个概念必定要时刻在咱们脑子中。AJAX是个好东西，但是反复的数据，无休止的向后台申请，绝对是个错误（不只是速度上仍是对server压力上来讲），因此咱们就要对咱们已经申请到的数据进行缓存，当第2次用到的时候，就直接从缓存中取，不要在去訪问咱们宝贵的server资源了。事实上这个思想不只仅适合AJAX，在所有有数据复用的应用中都应该考虑到。
 　　YSLOW就分析到这里完成了，也许有些地方分析的不是很是正确，也许有人分析的比我更早，更好，但是这些的确是我从工做中去积累。发现的，并非常多都实际应用到工做中去了，顺便说下，嘿嘿，LIST页面进行优化后，在0.92版本号的YSLOW评分将达到76分，甚至80分。至关于0.8版本号的90分以上。只是评分毕竟是评分。关键仍是速度。