js パフォーマンスの最適化 JavaScript ページをより速く読み込む方法

js パフォーマンスの最適化 JavaScript ページをより速く読み込む方法_javascript のヒント

WBOY

リリース： 2016-05-16 17:55:03

オリジナル

1152 人が閲覧しました

确保代码尽量简洁

　　不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具，只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。

　　尽量减少DOM访问

　　使用JavaScript访问DOM元素很容易，代码更容易阅读，但是速度很慢。下面介绍几个要点：限制使用JavaScript来修饰网页布局，把针对访问元素的引用缓存起来。有时，当你的网站依赖大量的DOM改动时，就应该考虑限制你的标记。这是改用HTML5、舍弃那些原来的XHTML和HTML4的一个充分理由。你可以查看DOM元素的数量，只要在Firebug插件的控制台中输入：document.getElementsByTagName('*').length。

　　压缩代码

　　要提供经过压缩的JavaScript页面，最有效的办法就是先用JavaScript压缩工具对你的代码压缩一下，这种压缩工具可以压缩变量和参数名称，然后提供因而获得的代码，使用了gzip压缩。

　　是的，我没有压缩我的main.js，但你要检查有没有未经压缩的任何jQuery插件，别忘了压缩。下面我列出了压缩方面的几个方案。

　　◆ YUI压缩工具(jQuery开发团队就使用它)，初学者指南

(http://www.slideshare.net/nzakas/extreme-JavaScript-compression-with-yui-compressor)、第二指南 (http://vilimpoc.org/research/js-speedup/)和官方网站(http://developer.yahoo.com/yui/compressor/)。

　　◆ Dean Edwards Packer(http://dean.edwards.name/packer/)

　　◆ JSMin(http://crockford.com/JavaScript/jsmin)

　　GZip压缩：其背后的想法是，缩短在浏览器和服务器之间传送数据的时间。缩短时间后，你得到标题是Accept-Encoding: gzip,deflate的一个文件。不过这种压缩方法有一些缺点。它在服务器端和客户端都要占用处理器资源(以便压缩和解压缩)，还要占用磁盘空间。

　　避免eval()：虽然有时eval()会在时间方面带来一些效率，但使用它绝对是错误的做法。eval()导致你的代码看起来更脏，而且会逃过大多数压缩工具的压缩。

　　加快JavaScript装入速度的工具：Lab.js

　　有许多出色的工具可以加快JavaScript装入的速度。值得一提的一款工具是Lab.js。

　　借助LAB.js(装入和阻止JavaScript)，你就可以并行装入JavaScript文件，加快总的装入过程。此外，你还可以为需要装入的脚本设置某个顺序，那样就能确保依赖关系的完整性。此外，开发者声称其网站上的速度提升了2倍。

　　使用适当的CDN

　　现在许多网页使用内容分发网络(CDN)。它可以改进你的缓存机制，因为每个人都可以使用它。它还能为你节省一些带宽。你很容易使用ping检测或使用Firebug调试那些服务器，以便搞清可以从哪些方面加快数据的速度。选择CDN时，要照顾到你网站那些访客的位置。记得尽可能使用公共存储库。

　　面向jQuery的几个CDN方案：

　　◆ http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js——谷歌Ajax，关于更多库的信息请参阅http://code.google.com/apis/libraries/devguide.html#Libraries。

　　◆ http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js——微软的CDN

　　•http://code.jquery.com/jquery-1.4.2.min.js——Edgecast (mt)。

　　网页末尾装入JavaScript

　　如果你关注用户，用户因互联网连接速度慢而没有离开你的网页，这是一个非常好的做法。易用性和用户放在首位，JavaScript放在末位。这也许很痛苦，但是你应该有所准备，有些用户会禁用JavaScript。可以在头部分放置需要装入的一些JavaScript，但是前提是它以异步方式装入。

　　异步装入跟踪代码

　　这一点非常重要。我们大多数人使用谷歌分析工具(Google Analytics)来获得统计数据。这很好。现在看一下你把你的跟踪代码放在哪里。是放在头部分?还是说它使用document.write?然后，如果你没有使用谷歌分析工具异步跟踪代码，那也只能怪你自己。

Google Analytics の非同期トラッキングコードは次のようになります。これは document.write を使用する代わりに DOM を使用することを認めざるを得ませんが、これはあなたにとってより適しているかもしれません。 Web ページが読み込まれる前にこれらのイベントの一部を検出できますが、これは非常に重要です。ここで、ページがまだ読み込まれておらず、すべてのユーザーがページを閉じているという状況について考えてみましょう。ページビューの欠落に対する解決策が見つかりました。

コードをコピーしますコードは次のとおりです。

 
var _gaq = _gaq || 
 _gaq.push(['_setAccount', 'UA-XXXXXXX-XX']); 
_gaq.push(['_trackPageview']); 
(function() { 
var ga = document.createElement ('script'); ga.type = 'text/JavaScript'; 
ga.src = ('https:' == document.location.protocol ? 'https:// ssl' : 'http://www') '.m.sbmmt.com/ga.js'; 
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
})(); 

Google Analytics を使用していませんか? それは問題ありません。今日の分析プロバイダーのほとんどは非同期追跡を使用できます。

Ajax の最適化

Ajax リクエストは、Web サイトのパフォーマンスに大きな影響を与えます。以下に、Ajax 最適化に関するいくつかの重要なポイントを紹介します。

ajax をキャッシュする

まずコードを見てください。 Ajax はキャッシュ可能ですか? はい、データに依存しますが、ほとんどの Ajax リクエストはキャッシュ可能であるはずです。 jQuery では、script および jsonp データ型を除いて、リクエストはデフォルトでキャッシュされます。

Ajax リクエストには GET を使用します

POST タイプのリクエストでは、2 つの TCP パケット (最初にヘッダー、次にデータ) を送信する必要があります。 GET タイプのリクエストでは、1 つのパケットを送信するだけで済みます (これは、持っている Cookie の数によって異なる場合があります)。したがって、URL の長さが 2K 未満で、何らかのデータをリクエストする場合は、GET を使用した方がよいでしょう。

ySlow の使用

パフォーマンスに関して言えば、ySlow はシンプルでありながら非常に効果的です。 Web サイトをスコアリングし、修正が必要な領域と重点を置くべき領域を示します。

もう 1 つのトリック: JavaScript を PNG ファイルにパッケージ化します

想像してみてください: 画像の末尾に JS と CSS を追加し、それを CSS でトリミングし、単一の HTTP リクエストでアプリケーションに必要なすべての情報を取得します。

最近この方法を見つけました。基本的に、JavaScript/CSS データを PNG ファイルにパックします。その後、キャンバス API の getImageData() を使用するだけで、それを解凍できます。さらに、非常に効率的です。データを圧縮せずに、さらに約 35% 圧縮できます。そして、これは可逆圧縮です。大きなスクリプトの場合、画像がキャンバスにポイントされてピクセルが読み取られるまでに「ある程度の」読み込み時間がかかると感じることがある点を指摘しなければなりません。
英語原文：http://www.1stwebdesigner.com/design/load-JavaScript-faster/