はじめに
本記事では、ブラウザレンダリングについての説明は割愛します。
ブラウザレンダリングについての説明が必要な方は、
こちらの記事でわかりやすく説明されていたのでご覧ください。
また、この記事ではレンダリングブロックの中でも、JavaScriptによるものをご紹介します。
レンダリングブロックとは
ブラウザレンダリングにおいて、レンダリングを遅延させてしまうことを指します。
レンダリングブロックの要因としては、以下が挙げられます。
- JavaScriptによるもの
- CSSによるもの
いずれも、外部リソースの読み込みによる遅延が大きな原因になります。
<!-- JSによるもの -->
<script src="外部JSファイルへのパス"></script>
<!-- CSSによるもの -->
<link rel="stylesheet" href="外部CSSファイルへのパス" />
Node.jsでレンダリングブロックを検証する
今回は、JSによるレンダリングブロックを実際に検証します。
前提条件
-
Node.jsがインストールされていること
新しめのバージョンであれば大丈夫かと思います。
動作確認は14.16.1で行っています。$node -v v14.16.1
HTMLとJavaScriptのファイルを作成し、表示してみる
-
同じディレクトリ内に、以下の2つのファイルを作成する
index.html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>タイトル</title> <script type="text/javascript" src="./index.js"></script> </head> <body> コンテンツ </body> </html>index.jsconsole.log("Hello!") -
index.htmlをブラウザで表示し、コンソールに「Hello!」と表示されればOK
JavaScriptが一瞬で読み込めるのであれば、特に表示が遅いと感じることはないと思います。
では、JavaScriptの取得に時間がかかってしまった場合はどうでしょう。
JavaScriptの取得を遅延させてみる
-
先ほど作成したHTMLファイルと同じディレクトリに、以下のファイルを作成する
server.jsconst http = require('http'); const fs = require('fs'); const server = http.createServer(); server.on('request', doRequest); server.listen(1234); console.log('Server running at http://localhost:1234/'); function doRequest(req, res) { setTimeout(() => { fs.readFile('./index.js', 'UTF-8', function (err, data) { res.writeHead(200, { 'Content-Type': 'text/html' }); res.write(data); res.end(); }); }, 5000); }
setTimeoutで5000msを指定することで、JSファイルの返却を5秒遅らせています。
-
HTMLファイルの外部JSファイルのパスを修正する
index.html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>タイトル</title> <!-- srcを書き換える <script type="text/javascript" src="./index.js"></script> --> <script type="text/javascript" src="http://127.0.0.1:1234/" defer></script> </head> <body> コンテンツ </body> </html> -
Node.jsのサーバーを立てる
ファイルを作成したディレクトリで次のコマンドを実行します。node server.js -
index.htmlをブラウザで表示し、コンソールに「Hello!」と表示されればOK
ローカルのJSファイルを直接読み込んだ際に比べ、
「コンテンツ」という文字が表示されるまでに少し時間がかかったと思います。
server.jsのsetTimeoutにより、JSファイルの取得に時間がかかったため、
レンダリングがブロックされたことになります。
新しいタブでindex.htmlにアクセスすると、違いがわかりやすいかと思います。
JSによるブロックを防ぐ方法
ここでJSによるレンダリングブロックを防ぐ手法を1つご紹介します。
-
scriptタグに
deferという属性を追加するindex.html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>タイトル</title> <!-- scriptタグに、defer属性を追加する --> <script type="text/javascript" src="http://127.0.0.1:1234/" defer></script> </head> <body> コンテンツ </body> </html> -
先程と同様に、Node.jsのサーバーを立て、index.htmlをブラウザで表示する
今回は、「コンテンツ」という文字がすぐに表示されるものの、
コンソールの「Hello!」は遅れて表示されたかと思います。
deferを使うと、外部ファイルの読み込みを待たずにレンダリングを行い、
レンダリング後にJSの読み込み、実行を行うことができます。
# おわりに
レンダリングブロックを簡単に体験する方法を紹介しました。
deferはレンダリングブロックを防ぐ1つの手法に過ぎないので、
興味を持った方は、レンダリングブロックの原因や対策について詳しく調べてみてください。