HTML5におけるパフォーマンス最適化の詳細説明-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

黄舟

Jul 27, 2017 am 09:56 AM

h5html5詳しい説明

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

-- 再描画の削減

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

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

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

<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 レンダリングに必要な要素であるため、

ヘッダーに配置する必要があります。読み込みのブロックを避けるために、スクリプトはドキュメントの最後に配置し、CSS は先頭に配置する必要があります。

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

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

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

次のコードは、タグ

またはの 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个差不多），多了可能造成不同服务器连接时间差异，反而影响速度。

--避免空链接属性

如 HTML5におけるパフォーマンス最適化の詳細説明这样的设置方式是非常不可取的，即使链接为空，在旧的浏览器也会以固定步骤发送请求信息。

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

--使用图像的BASE64编码

base64是一串字符串，他可以代表一个图片的所有信息，也就是可以通过 HTML5におけるパフォーマンス最適化の詳細説明（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 までご連絡ください。

HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。