難しいから分からない！行動できないのは途中で辞めてしまうから

難しいから分からない！

難しいから分からない！

行動できなくなる原因は、途中で辞めてしまうからではないでしょうか？

そう思ったので、今現在わからない課題について、追求してみようと思います。

現在、わからないことが原因で行動できなくなるものについて、私が思っていることは以下の通りです。

 一遍に考えるから難しい

物事は、一遍に考えるから難しいと思ってしまいます。

説明を読んだ時には、その時点で拒否反応が働いて、めんどくさいと思ってしまいます。

それでは、ひとつもポジティブに作業を進めることができません。

だから、わからないことをひとつひとつ理解して、作業を進めてみようと思います。

細かいことを一つ一つ丁寧に理解する

細かいことを、一つ一つ丁寧に理解すれば、目の前に立ちはだかる困難な壁も、乗り越えていけるのではないか？

その精神を、身につけてみたいと思いました。

１００個まで調べれば理解できる

細かいことを調べるのに、どのくらいのことを調べれば、理解できるのだろう？

そう考えた時に、１００個まで調べれば理解できるのではないか！？

そのように考えたので、実際にやってみようと思います。

現在の自分では、１つのことに対して１００個まで調べ続ける自信はありません。

だから、途中で挫折するかもしれません。

でも、最後までやり切ることで、自信がつくことは確かです。

だから、挑戦してみようと思います。

１００個じゃ無理か！？

「メインスレッド処理の最小化」ブログのＳＥＯについて

手始めに、ブログのＳＥＯについて対応してみようと思います。

「メインスレッド処理の最小化」についてです。

私のブログでは、ＴＢＴ（Total Blocking Time）に関しては、何も対応していません。

ＴＢＴに関しても、なんのことだか、さっぱりわけがわかりません。

だから、内容を理解するところから始めたいと思います。

内容を理解してからは、どのように現在の状況を調べて何をどのようにすればいいのか？

それらが一連の流れだと思います。

だから、多分今日中には終えることはできません。

今日中どころか、何日かかるかわかりません。

でも、とりあえず最後までやり切ることを目標にしてみます。

これができれば、参考になる人もいますよね？

人の役に立つことを目標に、喜びを味わいたいと思います。

できなかったら、ごめんね！^^

内容の理解

内容の理解に関しては、まずは自分なりの解釈でいいと思います。

その理由は、目的が自分の中にインプットすることだからです。

何かを調べる場合、ただズラズラと読むだけでは、ひとつも自分の中には残りません。

自分の中に残らなければ、ひとつも理解することができないんですよ。

何かしらの形で覚えることで、自分の中にインプットできれば、イメージは捉えることができるんです。

ブラウザのレンダラ プロセスにより、ユーザーが操作できるウェブページにコードが変換されます。デフォルトでは、レンダラ プロセスのメインスレッドがほとんどのコードを処理します。つまり、HTML の解析と DOM のビルド、CSS の解析、指定されたスタイルの適用、JavaScript の解析、評価、実行を行います。

参考： メインスレッドの作業を最小限に抑える

ブラウザのレンダラプロセスって何？

恐らく、プラウザが持ってる画面を表示させるためのプロセス（機能）だと思います。

コンピューターグラフィックスで、物体の見え方を計算しながらその画像を作成していくこと。

参考：ｇｏｏ辞書「レンダリング（rendering） とは？ 意味・読み方・使い方 」

ユーザーが操作できるウェブページにコード変換

「ユーザーが操作できるウェブページにコードが変換されます。」 ということなので、恐らくプログラミング言語に変換してくれるということだと思います。

プログラマーの人なら、理解できるかもしれないけど、そうじゃない人には全く意味がわかりませんよね！？

だいたいこういうことで、これ以上理解するのは無理だと諦めてしまうんですよね！

レンダラプロセスのメインスレッドがほとんどのコードを処理

レンダラプロセスのメインスレッドが、以下の処理をやるらしいです。

メインスレッドって何？

メインスレッドとは、最小の処理単位ということなので、メインスレッドが５つの処理を起動するんだと思います。

オペレーティングシステム上で、アプリケーション内の処理を並列して行う際の、最小の処理単位。→マルチスレッド

参考：ｇｏｏ辞書「スレッド【thread】 の解説」

メインスレッドが、５つの処理を起動するということは、この５つの処理は一遍に起動することができないのだと思います。

なぜなら、一遍に同時に起動できるのなら、わざわざメインスレッドで起動する必要が無いからです。

何かしらの順番で起動する必要があるから、メインスレッドで管理する必要があるのではないかと思います。

例えば、最後の「JavaScriptの解析・評価・実行」を起動するために、他の4つは先行して処理を起動しなければならないとか。

HTMLの解析

ＨＴＭＬを解析して、プログラミング言語に変換する。

恐らく、何か起きた時に、ＨＴＭＬに変換しておく必要があるのだと思います。

他には影響しないので、他には依存しないのではないかと思います。

しかし、「JavaScriptの解析・評価・実行」が起動する前までには、終わっていなければならないのではないかと思います。

何か起きた時は、最新のＨＴＭＬで解析しなければならないから！

DOMのビルド

ＤＯＭのビルドというのは、プログラミング言語から参照して、色んなことができるようになることだと思います。

《document object model》ウェブページの構成やふるまいを、JavaScript (ジャバスクリプト) などのプログラミング言語で参照するための仕組み。HTMLやXMLで記述されたウェブページを、動的に変化させたり操作したりすることが可能となる。

参考：ｇｏｏ辞書「ドム【DOM】 の解説」

ソフトウエアやデジタルコンテンツなどの開発工程において、プログラムのソースファイルから実行可能なファイルを作成したり、コンテンツデータを利用可能な状態にしたりすること。

参考：ｇｏｏ辞書「ビルド【build】 の解説」

CSSの解析

「CSS（スタイルシート）の解析」ということなので、プログラミング言語に変換すること。

「ＨＴＭＬの解析」と、同じですよね。

指定されたスタイルの適用

「指定されたスタイルの適用」ということなので、スタイルシートとＨＴＭＬが指定するように、画面を表示してくれるんだと思います。

JavaScriptの解析・評価・実行

JavaScriptを解析して、評価して、実行してくれるということです。

「JavaScriptを解析」については、「CSS（スタイルシート）の解析」と「ＨＴＭＬの解析」と一緒ですよね。

評価するということは、エラーがあったらエラーの意味を教えてくれるということではないか？と思います。

エラーが無ければ、そのまま実行されるのではないかと思います。

ウェブページがユーザー操作に反応しないことがある

メインスレッドはユーザー イベントも処理します。そのため、メインスレッドが他の処理でビジー状態としているときは、ウェブページがユーザー操作に反応しないことがあります。これは、ユーザー エクスペリエンスの低下につながります。

これを見て、ピンときたのが、アドセンス広告が表示されなかったりすることがあると言うことです。

アドセンス広告を表示するのに、何かのプロセスが間に合っていなかったりすると、表示できないのではないかと思います。

サイト内の検索窓口

また、サイト内の検索窓口にしてみても、あれって常に入力されることを判断するために、スレッドがループしているんですよね！？

だから、入力されたかどうかが判断できるけど、他の影響によって起動されていなければ、入力されたかどうかがわからないので、入力しても無視をされるということですね。

Lighthouse のメインスレッド処理の監査が失敗する仕組み

Lighthouse では、ページの読み込み中にメインスレッドが 4 秒以上ビジー状態になっているページにフラグが設定されます。

私の場合、メインスレッド処理の最小化で4.6秒と指摘され、お叱りを受けてしまいました。

JavaScript の解析、コンパイル、実行にかかる時間を短縮することをご検討ください。JavaScript ペイロードのサイズを抑えるなどの方法があります。

JavaScript の解析・コンパイル（翻訳）・実行にかかる時間を短縮する。

コンピューターで、人間が理解しやすい言語や数式で記述されたプログラムを、機械語に翻訳すること。翻訳するプログラムをコンパイラーと呼ぶ。

参考：ｇｏｏ辞書「コンパイル【compile】 の解説」

JavaScript の転送データサイズを抑える。

データ通信で転送されるパケットのうち、転送先や経路を制御する付加情報（ヘッダー）を除いたデータ本体のこと。データの大きさをペイロード長という。

参考：ｇｏｏ辞書「ペイロード【payload】 の解説」

Script Evaluation

スクリプトの評価にかかった時間

スクリプト（一連の作業手順を記述したプログラム）

参考：ｇｏｏ辞書「script とは 」

Other

その他にかかった時間

Style & Layout

スタイルとレイアウトにかかった時間

Parse HTML & CSS

HTMLとCSSの解析にかかった時間

Script Parsing & Compilation

スクリプトの解析中と編集にかかった時間

Garbage Collection

Garbage（ゴミ）Collection（収集）にかかった時間

Rendering

画面を表示させるのにかかった時間

 

Lighthouse では、メインスレッド負荷の原因を特定するために、ブラウザがページを読み込む間に CPU 時間が費やされた場所の内訳が表示されます。

くじけてきた！

逃げたくなる！^^

メインスレッドの作業を最小限に抑える方法

以下のセクションは、Lighthouse でレポートされるカテゴリに基づいて構成されています。 Chromium でウェブページがレンダリングされる仕組みの概要については、フレームの構造をご覧ください。