フロントエンド Web ページの基本パフォーマンスの最適化

今回は、フロントエンド Web ページの基本的なパフォーマンス最適化とその注意点について説明します。以下は実際のケースです。見てみましょう。

ページの最適化

静的リソースの圧縮

構築ツール (webpack、gulp) を使用して、画像、スクリプト、スタイルなどの Web ページの静的リソースを適切に圧縮します。

CSS スプライト画像、base64 インライン画像

サイト上の小さなアイコンを 1 つの画像に結合し、CSS の配置を使用して対応するアイコンをキャプチャし、インライン画像を適切に使用します。

スタイルは上部に、スクリプトは下部にあります

このページは段階的なレンダリングプロセスであり、上部のスタイルは上部の タグによってページをより速く表示できます。ページの背後にあるリソースのダウンロード。

外部リンクの css と js を使用します

複数のページがパブリック静的リソースを参照し、リソースの再利用により追加の http リクエストが削減されます。

空の src を含む画像を避けてください

不必要な http リクエストを避けてください。

HTML での画像の拡大縮小は避けてください

大きな画像を読み込んで縮小するのではなく、必要に応じて指定されたサイズの画像を使用するようにしてください。

Preload プリロード

preload 属性をリンク タグの rel に設定します。これにより、ブラウザーは、メインのレンダリング メカニズムが介入する前にリソースをプリロードできるようになります。このメカニズムによりリソースを早期に取得でき、ページの初期化がブロックされません。

Document この例では css ファイルと js ファイルがプリロードされており、後続のページ レンダリングで使用されるとすぐに呼び出されます。

as のタイプを指定して、さまざまなタイプのリソースをロードできます。

スタイル

スクリプト

ビデオ

オーディオ

画像

フォント

do cument

...

この方法もドメイン間でリソースをプリロードするには、crossorigin 属性を設定するだけです。

CSS

セレクター

セレクターの優先順位は高から低まで次のとおりです:

IDセレクター

クラスセレクター

タグセレクター

隣接セレクター

h1 + p{ margin-top: 15px; } h1 要素の直後に表示される段落を選択します。 h1 要素と p 要素は共通の親要素を持ちます。

子セレクター

h1 > strong {color:red;} 子孫セレクター

h1 em {color:red;} ワイルドカードセレクター

属性セレクター

*[title] {color:red;} img[alt] {border: 5px solid red;} 疑似クラスセレクター

セレクターの使用経験:

優先クラスセレクター、複数のレイヤーを置き換えることができますタグセレクター。

使用するID セレクターは効率的ではありますが、ページ内で一意であるため、チームのコラボレーションやメンテナンスには役立ちません。

CSS 式の継承は避けてください。

セレクターのレベルを下げる 前のセレクターの優先順位に基づいて、複数のレベルのセレクターのネストを避けるように努める必要があります (できれば 3 レベル以下)。 .container .text .logo{ color: red; } /*改成*/ .container .text-logo{ color: red; }

ページ スタイル ファイルを合理化し、未使用のスタイルを削除します

ブラウザは冗長なスタイル マッチングを実行するため、レンダリング時間に影響します。また、スタイル ファイルが大きすぎると、読み込み速度にも影響します。

CSS の継承を使用してコードの量を削減します

CSS の継承可能な属性を使用すると、親要素がスタイルを設定し、子要素がスタイルを再度設定する必要がなくなります。 一般的な継承可能な属性: color、font-size、font-family など。継承できない属性: location、display、float など。

属性値が0の場合、ユニットは追加されません

cssの属性値が0の場合、コード量を減らすためにユニットは追加されません。 えー

JavaScript

使用事件委托

给多个同类DOM元素绑定事件使用事件委托。

1 2 3 // 不合理的方式：给每个元素都绑定click事件 $('#container .list').on('click', function() { var text = $(this).text(); console.log(text); }); // 事件委托方式：利用事件冒泡机制将事件统一委托给父元素 $('#container').on('click', '.list', function() { var text = $(this).text(); console.log(text); }); 需要注意的是，虽然使用事件委托时都可以将事件委托给document来做，但这是不合理的，一个是容易造成事件误判，另一个是作用域链查找效率低。应该选择最近的父元素作为委托对象。

使用事件委托除了性能上更优，动态创建的DOM元素也不需要再绑定事件。

DOMContentLoaded

可在DOM元素加载完毕（DOMContentLoaded）后开始处理DOM树，不必等到所有图片资源下载完后再处理。

// 原生javascript document.addEventListener("DOMContentLoaded", function(event) { console.log("DOM fully loaded and parsed"); }, false); // jquery $(document).ready(function() { console.log("ready!"); }); // $(document).ready()的简化版 $(function() { console.log("ready!"); }); 预加载和懒加载

预加载

利用浏览器空闲时间预先加载将来可能会用到的资源，如图片、样式、脚本。

无条件预加载

一旦onload触发，立即获取将来需要用到的资源。

图片资源预加载。（3种实现图片预加载的方式）。

基于用户行为的预加载

对于用户行为可能进行的操作进行判断，预先加载将来可能需要用到的资源。

当用户在搜索输入框输入时，预先加载搜索结果页可能用到的资源；

当用户去操作一个Tab选项卡时，默认显示其中一个，当要去点击（click）其他选项时，在鼠标hover时，就可先加载将来会用到的资源；

懒加载

除页面初始化需要的内容或组件之外，其他都可以延迟加载，如剪切图片的js库、不在可视范围的图片等等。

图片懒加载。（判断图片是否在可视区域范围内，若在，则将真实路径赋给图片）

避免全局查找

任何一个非局部变量在函数中被使用超过一次时，都应该将其存储为局部变量。

function updateUI(){ var imgs = document.getElementsByTagName("img"); for (var i=0, len=imgs.length; i 在上面函数中多次使用到document全局变量，尤其在for循环中。因此将document全局变量存储为局部变量再使用是更优的方案。

function updateUI(){ var doc = document; var imgs = doc.getElementsByTagName("img"); for (var i=0, len=imgs.length; i 值得注意的一点是，在javascript代码中，任何没有使用var声明的变量都会变为全局变量，不正当的使用会带来性能问题。

避免不必要的属性查询

使用变量和数组要比访问对象上的属性更有效率，因为对象必须在原型链中对拥有该名称的属性进行搜索。

// 使用数组 var values = [5, 10]; var sum = values[0] + values[1]; alert(sum); // 使用对象 var values = { first: 5, second: 10}; var sum = values.first + values.second; alert(sum); 上面代码中，使用对象属性来计算。一次两次的属性查找不会造成性能问题，但若需要多次查找，如在循环中，就会影响性能。

在获取单个值的多重属性查找时，如：

var query = window.location.href.substring(window.location.href.indexOf("?")); 应该减少不必要的属性查找，将window.location.href缓存为变量。

var url = window.location.href; var query = url.substring(url.indexOf("?")); 函数节流

假设有一个搜索框，给搜索框绑定onkeyup事件，这样每次鼠标抬起都会发送请求。而使用节流函数，能保证用户在输入时的指定时间内的连续多次操作只触发一次请求。

// 绑定事件 document.getElementById('input').addEventListener('keyup', function() { throttle(search); }, false); // 逻辑函数 function search() { console.log('search...'); } // 节流函数 function throttle(method, context) { clearTimeout(method.tId); method.tId = setTimeout(function() { method.call(context); }, 300); } 节流函数的应用场景不局限搜索框，比如页面的滚动onscroll，拉伸窗口onresize等都应该使用节流函数提升性能。

最小化语句数

语句数量的多少也是影响操作执行速度的因素。

将多个变量声明合并为一个变量声明

// 使用多个var声明 var count = 5; var color = "blue"; var values = [1,2,3]; var now = new Date(); // 改进后 var count = 5, color = "blue", values = [1,2,3], now = new Date(); 改进的版本是只使用一个var声明，由逗号隔开。当变量很多时，只使用一个var声明要比单个var分别声明快很多。

使用数组和对象字面量

使用数组和对象字面量的方式代替逐条语句赋值的方式。

字符串拼接

早期浏览器未对加号拼接字符串方式优化。由于字符串是不可变的，就意味着要使用中间字符串来存储结果，因此频繁的创建和销毁字符串是导致它效率低下的原因。

var text = "Hello"; text+= " "; text+= "World!"; 把字符串添加到数组中，再调用数组的join方法转成字符串，就避免了使用加法运算符。

var arr = [], i = 0; arr[i++] = "Hello"; arr[i++] = " "; arr[i++] = "World!"; var text = arr.join(''); 现在的浏览器都对字符串加号拼接做了优化，所以在大多数情况下，加法运算符还是首选。

减少回流和重绘

在浏览器渲染过程中，涉及到回流和重绘，这是一个损耗性能的过程，应注意在脚本操作时减少会触发回流和重绘的动作。

回流：元素的几何属性发生了变化，需要重新构建渲染树。渲染树发生变化的过程，就叫回流；

重绘：元素的几何尺寸没有变化，某个元素的CSS样式（背景色或颜色）发生了变化。

触发重排或重绘的操作有哪些？

调整窗口大小

修改字体

增加或者移除样式表

内容变化，比如用户在 框中输入文字

操作class属性

脚本操作DOM（增加、删除或修改DOM元素）

计算offsetWidth和offsetHeight属性

设置style属性的值

如何减少重排和重绘，提升网页性能？

1、脚本操作DOM元素

将DOM元素设置为display:none，设置过程中会触发一次回流，但之后可以随意改动，修改完后再显示；

将元素clone到内存中再进行操作，修改完后重新替换元素。

2、修改元素的样式

尽量批量修改，而不是逐条修改；

预先设定好id、class，再设置元素的className。

3、为元素添加动画时将元素CSS样式设为position:fixed或position:absolute，元素脱离文档流后不会引起回流。

4、在调整窗口大小、输入框输入、页面滚动等场景时使用节流函数（上面已提到过）。

HTTP

浏览器缓存

合理设置浏览器缓存是网页优化的重要手段之一。

Expires 和 Cache-Control

Expires出自HTTP1.0，Cache-Control出自HTTP1.1，同时设置两者时，Cache-Control 会覆盖 Expires。

Expires指定的是实际过期日期而不是秒数。但Expires存在一些问题，如服务器时间不同步或不准确。所以最好使用剩余秒数而不是绝对时间来表达过期时间。

Cache-Control可设置max-age值，单位秒，指定缓存过期时间。如：Cache-Control: max-age=3600。

ETag 和 Last-Modified

ETag 和 Last-Modified都由服务器返回在response headers中，其中ETag的优先级比Last-Modified高，也就是说服务器会优先判断ETag的值。

ETag是附加到文档上的任意标签，可能是文档的序列号或版本号，或者是文档内容的校验等。当文档改变时ETag值也会随之改变。与ETag相关的是 If-None-Match，当浏览器发起请求时，会在If-None-Match字段携带ETag的值发给服务器；

Last-Modified是文档在服务器端最后被修改的时间。与Last-Modified相关的是If-Modified-Since，当浏览器发起请求时，会在If-Modified-Since字段携带Last-Modified的值发送给服务器。

强缓存和协商缓存

キャッシュの種類: 強力なキャッシュとネゴシエートされたキャッシュ。 2 つの違いは、強力なキャッシュはサーバーにリクエストを送信しませんが、ネゴシエートされたキャッシュは、一致が成功した場合はリクエストを送信し、一致が失敗した場合は 304 Not Modified を返します。 200; ブラウザは最初に強力なキャッシュを検証し、強力なキャッシュが見つからなかった場合は、ネゴシエーション キャッシュの検証を実行します。

ブラウザキャッシュの設定方法

Webサーバーの返信応答にExpiresとCache-Controlを追加します

nginxまたはApacheの設定ファイルでExpiresとCache-Controlを設定します。

なぜ HTTP リクエストを減らす必要があるのか

HTTP リクエストを減らすための対策は、パフォーマンスの最適化において大きな部分を占めます。たとえば、CSS スプライト画像を使用して複数の画像リクエストを置き換える、空の src 画像を避ける、インライン画像を使用するなどです。 、外部リンク、キャッシュなどを使用した css と js。

URL の入力からページの読み込み完了までのプロセスには以下が含まれます:

DNS 解決

TCP 接続

HTTP リクエストとレスポンス

ブラウザレンダリングページ

接続を閉じます

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

CSS実践プロジェクトでの仕様と順序の書き方

CSS+アニメーションの表示と非表示を切り替えるトランジション