検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML5におけるパフォーマンス最適化の詳細説明

HTML5におけるパフォーマンス最適化の詳細説明

黄舟
黄舟オリジナル
2017-07-27 09:56:101788ブラウズ

HTML5 パフォーマンスの最適化

-- 再描画の削減

HTML ページが表示された後、ページ要素を動的に変更したり、CSS スタイルを調整したりすると、ブラウザーの再描画が発生し、パフォーマンスの低下は動的変更の範囲に直接依存します。 : 要素の色など​​の情報を変更すると要素のみが再描画される場合、ノードの追加または削除、またはノードの位置の調整を行うと、その兄弟ノードも再描画されます。

再描画を減らすということは、再描画しないという意味ではなく、再描画の範囲に注意を払うことです。 ① DOM 要素がより深く変更されるほど影響は小さくなるため、より深いノード変更を行うようにしてください。 ② 複数の変更をいくつかにマージしてみてください。 DOM スタイルを一緒に変更します。

例として、3499910bf9dac5ae3c52d5ede7383485 タグの背景色、幅、色の変更を考えてみましょう。 


<a href="javascript:void(0);" id="example">传统的代码</a> 
<script> 
 var example = document.getElementById("example"); 
 example.ondblclick = function() { 
 example.style.backgroundColor = "red"; 
 example.style.width = "200px"; 
 example.style.color = "white"; 
 } 
</script>


上記は3回再描画されますが、JavaScriptではなくCSS経由で複数回実行した場合、再描画は1回のみです。 


<style> 
 .dblClick { 
 width: 200px; 
 background: red; 
 color: white; 
 } 
</style> 
<a href="javascript:;" id="example">CSS优化的代码</a> 
<script> 
 var example = document.getElementById("example"); 
 example.ondblclick = function() { 
 example.className = "dblClick"; 
 } 
</script>

スクリプトの読み込みブロックを避ける

ブラウザが通常のスクリプトタグを解析するとき、解析して実行する前にスクリプトがダウンロードされるまで待つ必要があり、後続の HTML コードは待つことしかできません。 CSS ファイルの導入は、HTML レンダリングに必要な要素であるため、93f0f5c25f18dab9d176bd4f6de5d30e ヘッダーに配置する必要があります。読み込みのブロックを避けるために、スクリプトはドキュメントの最後に配置し、CSS は先頭に配置する必要があります。 


<head>
<link rel="stylesheet" href="common.css">......<script src="example.js"></script>
</body>

--ノードの深いレベルのネストを避ける

深くネストされたノードは、多くの場合、初期構築中により多くのメモリを必要とし、ブラウジングとは異なり、ノードを横断するときに遅くなります。これによりブラウザは DOM ドキュメントを構築します。ブラウザは、HTML ドキュメント全体の構造を DOM の「ツリー」構造として保存します。ドキュメント ノードのネスト レベルが深くなると、構築される DOM ツリーのレベルも深くなります。

次のコードは、タグ e388a4556c0f65e1904146cc1a846bee または 45a2772a6b6107b401db3c9b82c049c2 の 1 つを完全に削除できます。 


<p>
  <span>
    <label>嵌套</label>
  </span>
</p>


ページキャッシュ

通常、キャッシュを設定しないと、ページが更新されるたびにサーバーのファイルが再読み込みされますが、キャッシュを設定すると、すべてのファイルをローカルで取得できます。ページの効率が大幅に向上することは明らかです。

ページヘッダーでexpiresを設定することでページの有効期限を定義でき、有効期限を長く設定することで「永続的な」キャッシュを実現できます。 


<meta http-equiv="expires" content="Sunday 26 October 2099 01:00 GMT" />

もちろん、プロジェクトのコードが変更された場合、クライアントはファイルをキャッシュするため、最新のファイルを取得できなくなり、必然的に表示エラーが発生します。この問題の解決策は、リンクされたファイルにタイムスタンプを追加することです。タイムスタンプが変更されると、ブラウザはそれが新しいファイルであると認識し、サーバーに最新のファイルを要求します。 


<script src="example2014-6-17.js">
</script>//如果是JSP，可以用EL表达式来取时间戳信息，这样管理更加方便
<script src="example${your time param}.js">
</script>//或者这样的写法更优秀：
<script src="example.js?time=2014-6-7"></script>
<script src="example.js?time=${your time param}"></script>


マージされたファイルを圧縮する

JavaScriptファイル、CSSファイル、画像ファイルなど、リクエストデータに関わるすべてのファイル、特に高解像度の要件がない場合は、可能な限り圧縮する必要があります。圧縮して再利用できます。大量の大きなボリュームを持つファイルは、小さなサイズのファイルよりも高速であるため、場合によっては、複数の JS ファイルと複数の CSS ファイルを一緒にマージすることを検討できます。

HTML文書のサイズを小さくする以外にも、次のような方法もあります。

①HTM文書の実行結果に影響のないスペース、空行、コメントを削除する

②テーブルレイアウトを避ける

③HTML5を使用する

--HTML+CSS3+JavaScript はそれぞれ独自の役割を果たします

3 つの要素にそれぞれの役割を実行させることによってのみ、高性能の Web ページを作成できます: HTML はページとソースの基礎ですCSS は、CSS と Javascript を連携させることができ、ますます強力になっている CSS は、JavaScript に代わって、グラデーション、動き、その他の動的効果などを実行できます。動的データの王様。古いブラウザは動的効果の表現を js に依存していましたが、現在は CSS で js の作業も完了できるため、パフォーマンスが向上する css に作業を任せてみてください。 (これは少し大きいです)

--CSS スプライトを実装するための画像の結合

画像の結合は、実際には、Web ページ内のいくつかの背景画像を画像ファイルに統合し、CSS "background-image", " を使用します。 「background -repeat」と「background-position」は、背景の位置を指定するために使用されます。background-position では、数値を使用して背景画像の位置を正確に特定できます。 1 つのページで複数のアイコンを使用する必要がある場合は、複数のアイコンをグラフに結合することができ、CSS の配置を通じて分割アイコンを配置するだけで済みます。

-- Iframe の使用を避ける

        使用iframe并不会增加同域名下的并行下载数，浏览器对同域名的连接总是共享浏览器级别的连接池，在页面加载过程中iframe元素还会阻塞父文档onload事件的触发。并且iframe是html标签中最消耗资源的标签，它的开销比p、SCRIPT、STYLE等DOM高1~2个数量级。

避免onload事件被阻塞，可使用JavaScript动态的加载iframe元素或动态设置iframe的src属性（但其仅在高级浏览器IE9及以上有效）。


<iframe id="if"></iframe>
document.getElementById("if").setAttribute("src","url");

--多域名请求

        一般来说，浏览器对于相同域名的图片，最多用2-4个线程并行下载（不同浏览器的并发下载数是不同的）。而相同域名的其他图片，则要等到其他图片下载完后才会开始下载。

        有时候，图片数据太多，一些公司的解决方法是将图片数据分到多个域名的服务器上，这在一方面是将服务器的请求压力分到多个硬件服务器上，另一方面，是利用了浏览器的特性。（大家可以去新浪、腾讯门户网站查看，这些大型站点同一页面加载的图片可能由多个站点提供）

        注：一个HTML请求的域名也不要太多（2~3个差不多），多了可能造成不同服务器连接时间差异，反而影响速度。

--避免空链接属性

        如624a480c6387e73c22b4f60ddcc0f14e8fb0647cc270c6c60ce1679670afa6fc这样的设置方式是非常不可取的，即使链接为空，在旧的浏览器也会以固定步骤发送请求信息。

        另外9dba6f1f949f5e07bed667bf670fd9c45db79b134e9f6b82c0b36e0489ee08ed也不可取，最好的方式是在链接中加一个空的js代码af60cb7cd5eb3467eaa609628cdd0ba95db79b134e9f6b82c0b36e0489ee08ed

--使用图像的BASE64编码

        base64是一串字符串，他可以代表一个图片的所有信息，也就是可以通过09522e18412c10a262484dd8ba0b09ee（S表示一串base64码）来显示图片，这种方式不需要再向服务器发送请求，完全由浏览器解析成图片。

        目前高级浏览器都支持此功能，但要注意两点：①低版本浏览器（如IE7）不支持；②base64字符串长度随图片的大小及复杂度成正比，base64也像URL一样，也有超出长度的情况（在IE8下很常见）。所以要根据情况来使用。

--显式设置图片的宽高

        如果HTML里的图片没有指定尺寸（宽和高），或者代码描述的尺寸与实际图片的尺寸不符时，浏览器则要在图片下载完成后再“回溯”该图片并重新显示，这会消耗额外时间。


<iframe id="if"></iframe>
document.getElementById("if").setAttribute("src","url");

--显式指定文档字符集

        如果浏览器不能获知页面的编码字符集，一般都会在执行脚本和渲染页面前，把字节流缓存，然后再搜索可进行解析的字符集，或以默认的字符集来解析页面代码，这会导致消耗不必要的时间。


<iframe id="if"></iframe>
document.getElementById("if").setAttribute("src","url");

--渐进式增强设计

        渐进式增强设计的通俗解释就是：首先写一段满足所有浏览器的基本样式，再在后面针对不同高级浏览器编写更漂亮的样式

        如下代码，所有浏览器都支持background-color: #2067f5;满足了浏览器基本现实需求，而后面的background-image: -webkit-gradient等则为不同高级浏览器使用，只要浏览器识别就能执行这段代码（不识别，CSS也不会报错只会直接忽略）。


<p class="someClass"></p> 
.someClass 
{ width: 100px; 
 height: 100px; 
 background-color: #2067f5; 
 background-image: -webkit-gradient(linear, left top, left bottom, from(#2067f5), 
to(#154096)); 
 background-image: -webkit-linear-gradient(top, #2067f5, #154096); 
 background-image: -moz-linear-gradient(top, #2067f5, #154096); 
 background-image: -ms-linear-gradient(top, #2067f5, #154096); 
 background-image: -o-linear-gradient(top, #2067f5, #154096); 
 background-image: linear-gradient(to bottom, #2067f5, #154096); 
}

--懒加载与预加载

        预加载和懒加载，是一种改善用户体验的策略，它实际上并不能提高程序性能，但是却可以明显改善用户体验或减轻服务器压力。

        预加载表示当前用户在请求到需要的数据之后，页面自动预加载下一次用户可能要看的数据，这样用户下一次操作的时候就立刻呈现，依次类推。

        懒加载表示用户请求什么再显示什么，如果一个请求要响应的时间非常长，就不推荐懒加载。

--Flush机制

ページが非常に大きく、多くのコンテンツがある場合、フラッシュの形でページに部分的に返すことができます。これにより、コンテンツの一部を表示する方が、待機するよりも作業中であることをユーザーに伝えることができます。空白の画面が長時間続く。 Java Web テクノロジでは、Flush の実装は非常に簡単です。HttpServletResponse.getWriter 出力ストリームのフラッシュ メソッドを呼び出して、ロードされたコンテンツをクライアントに書き戻すだけです。

この方法は、返されるデータが大量にあり、通常のデータの場合はリクエスト時間が特に長い場合にのみ適しており、通常のリアルタイムですべてのデータを返すことが最適です。この実装方法では、実際にはブラウザのレンダリング時間とユーザー全体の待ち時間が長くなりますが、ユーザー エクスペリエンスの観点からは優れています。

  • パフォーマンスサーバーの最適化

--CDNメカニズム

いわゆるCDNは、インテリジェントなルーティングとトラフィック管理テクノロジーを使用して、時間内に検出し、訪問者に最速の応答を提供するコンテンツ配信ネットワークです 加速ノード、訪問者のリクエストをアクセラレーション ノードに送り、コンテンツ サービスを提供します。一般的に、成都の北京の販売者 (サーバー) から商品を購入した場合、北京の販売者は速達便 (CDN サービス) で荷物を発送します。これは、この配送方法が最も速いためです。

もちろん、CDN を使用する際には次の 2 つの点に注意してください:

1. CDN アクセラレーション サービスは非常に高価であると思われる場合は、CDN を購入することを選択できます。ローカル Web サイト (Web サイトなど) の場合 地域ネットワークが非常に近いため、特定のエリアまたはローカル エリア ネットワークにのみアクセスできるため、CDN アクセラレーションの必要はありません。

-- HTTP プロトコルの合理的な使用

ブラウザのキャッシュによってもたらされるパフォーマンスの向上は誰もがよく知っていますが、ブラウザのキャッシュの有効期限、キャッシュの削除、キャッシュできるページなどについては多くの人が知りません。 HTTP プロトコルに精通していれば、ブラウザを簡単に制御できます。 拡張読書: HTTP プロトコルの深い理解

-- 静的コンテンツと動的コンテンツの分離

いわゆる動的コンテンツと静的コンテンツの分離とは、Web アプリケーション内の静的コンテンツと動的コンテンツを配置することです。それぞれ異なる Web サーバーを使用し、動的コンテンツをターゲットを絞った方法で処理し、静的コンテンツを処理してパフォーマンスの向上を実現します。 HTML に複数のドメイン名がある場合、Tomcat サーバーは静的および同時実行性の問題の処理が比較的弱いため、事前に静的と動的を分離する方法は一般に Apache+Tomcat、Nginx+Tomcat です。 、など。 Apache+Tomcat を例にとると、その動作メカニズムは次のとおりです。まずページリクエストが Apache に送信され、次に Apache はリクエストされた情報が静的か動的かを分析し、静的処理はローカルで行われ、動的処理は に引き渡されます。トムキャット。

これは実際には負荷分散のプロトタイプです。この実装では、開発者は特別な開発を行う必要はありません。このファイルが提供されるかどうかについては、 Apache または Tomcat から取得できるため、開発者はまったく注意を払う必要はありません。

--HTTP 永続接続

永続接続 (Keep-Alive) は、次回接続するときにブラウザとサーバーによってキャッシュされる TCP 接続方法です。同じサーバー、キャッシュ接続が再利用されます。 HTTP のステートレスな性質は、HTTP が長時間接続に属さないことを意味しますが、HTTP/1.1 は長時間接続のサポートを提供します (ただし、これは、HTTP の最も一般的な例として、長時間接続機能をサポートするためにブラウザーとサーバーの両方に依存する必要があります)。長い接続は「ブレークポイントダウンロード」です。

ブラウザは、リクエストのヘッダーに Connection:Keep-Alive を追加して、サーバーに「私は長い接続をサポートしています。サポートしている場合は、私との長い接続を確立してください。」と伝えます。サーバーが長い接続をサポートしている場合は、それを行います。ヘッダーに「Connection:Keep-Alive」を追加して、ブラウザに「サポートしているので、長い接続を確立しましょう」と伝えます。サーバーは、Keep-Alive:timeout=..., max=... ヘッダーを通じてブラウザに長い接続有効期限を通知することもできます。 長い接続を構成するには、通常、サーバーのサポート設定が必要です。テストデータによると、長い接続を使用した場合と使用しない場合のパフォーマンスの比較では、Tomcat を maxKeepAliveRequests を 50 に設定すると、効率が 5 倍近く向上することが示されています。

--GZIP 圧縮テクノロジー

HTTP プロトコルは GZIP 圧縮形式をサポートしており、サーバーから返された HTML 情報ヘッダーに Content-Encoding:gzip が含まれている場合、応答データが GZIP 形式に圧縮されていることをブラウザーに伝えます。 . の場合、ブラウザはデータを取得した後に解凍操作を実行する必要があるため、サーバーへのデータ送信の負荷がある程度軽減されます。

        很多服务器已经支持通过配置来自动将HTML信息压缩成GZIP，比如tomcat、又比如很火的Nginx。如果无法配置服务器级别的GZIP压缩机制，可以改为程序压缩。

 // 监视对 gzipCategory 文件夹的请求
 @WebFilter(urlPatterns = { "/gzipCategory/*" }) 
 public class GZIPFilter implements Filter { 

 @Override 
 public void doFilter(ServletRequest request, ServletResponse response, 
 FilterChain chain) throws IOException, ServletException { 
 String parameter = request.getParameter("gzip"); 
 // 判断是否包含了 Accept-Encoding 请求头部
 HttpServletRequest s = (HttpServletRequest)request; 
 String header = s.getHeader("Accept-Encoding"); 
 //"1".equals(parameter) 只是为了控制，如果传入 gzip=1，才执行压缩，目的是测试用
 if ("1".equals(parameter) && header != null && header.toLowerCase().contains("gzip")) { 
 HttpServletResponse resp = (HttpServletResponse) response; 
 final ByteArrayOutputStream buffer = new ByteArrayOutputStream(); 

 HttpServletResponseWrapper hsrw = new HttpServletResponseWrapper( 
 resp) { 

 @Override 
 public PrintWriter getWriter() throws IOException { 
 return new PrintWriter(new OutputStreamWriter(buffer, 
 getCharacterEncoding())); 
 } 

 @Override 
 public ServletOutputStream getOutputStream() throws IOException { 
 return new ServletOutputStream() { 

 @Override 
 public void write(int b) throws IOException { 
 buffer.write(b); 
 } 
 }; 
 } 

 }; 

 chain.doFilter(request, hsrw); 
 byte[] gzipData = gzip(buffer.toByteArray()); 
 resp.addHeader("Content-Encoding", "gzip"); 
 resp.setContentLength(gzipData.length); 
 ServletOutputStream output = response.getOutputStream(); 
 output.write(gzipData); 
 output.flush(); 
 } else { 
 chain.doFilter(request, response); 
 } 
 } 
 // 用 GZIP 压缩字节数组
 private byte[] gzip(byte[] data) { 
 ByteArrayOutputStream byteOutput = new ByteArrayOutputStream(10240); 
 GZIPOutputStream output = null; 
 try { 
 output = new GZIPOutputStream(byteOutput); 
 output.write(data); 
 } catch (IOException e) { 
 } finally { 
 try { 
 output.close(); 
 } catch (IOException e) { 
 } 
 } 
 return byteOutput.toByteArray(); 
 } 
……
 }

  • 总结

        细节决定成败，系统慢是由一个又一个不良的小细节造成的，所以开发初期做好充足的准备，开发中认真负责、不偷工减料，维护期更要注重代码质量，这样才能让我们的系统稳定高效。

        个人觉得一个产品的新版本质量可以从核心js文件看出来：如果核心js文件大小比上一版本大太多，明显在性能上就会有问题，我们要争做像谷歌、亚马逊这样优秀的团队--能够在功能升级的同时减小核心js文件大小。

 

以上がHTML5におけるパフォーマンス最適化の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：アンカーテキストとは何ですか?使い方？次の記事：アンカーテキストとは何ですか?使い方？

関連記事

続きを見る