PR

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

難しいから分からない こうどう
スポンサーリンク
スポンサーリンク

難しいから分からない!

難しいから分からない!

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

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

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

  • 一遍に考えるから難しい
  • 細かいことを一つ一つ丁寧に理解する
  • 100個まで調べれば理解できる

 一遍に考えるから難しい

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

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

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

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

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

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

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

100個まで調べれば理解できる

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

そう考えた時に、100個まで調べれば理解できるのではないか!?

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

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

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

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

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

100個じゃ無理か!?

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

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

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

私のブログでは、TBT(Total Blocking Time)に関しては、何も対応していません。

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

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

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

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

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

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

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

  • 内容の理解
  • 現在の状況を調べる方法
  • 何をどうすればいいか

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

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

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

内容の理解

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

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

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

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

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

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

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

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

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

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

参考:goo辞書「レンダリング(rendering) とは? 意味・読み方・使い方 」

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

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

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

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

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

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

  • HTMLの解析
  • DOMのビルド
  • CSSの解析
  • 指定されたスタイルの適用
  • JavaScriptの解析・評価・実行
メインスレッドって何?

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

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

参考:goo辞書「スレッド【thread】 の解説」

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

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

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

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

HTMLの解析

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

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

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

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

何か起きた時は、最新のHTMLで解析しなければならないから!

DOMのビルド

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

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

参考:goo辞書「ドム【DOM】 の解説」

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

参考:goo辞書「ビルド【build】 の解説」

CSSの解析

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

「HTMLの解析」と、同じですよね。

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

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

JavaScriptの解析・評価・実行

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

「JavaScriptを解析」については、「CSS(スタイルシート)の解析」と「HTMLの解析」と一緒ですよね。

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

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

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

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

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

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

サイト内の検索窓口

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

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

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

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

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

メインスレッド処理の最小化

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

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

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

参考:goo辞書「コンパイル【compile】 の解説」

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

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

参考:goo辞書「ペイロード【payload】 の解説」

Script Evaluation

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

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

参考:goo辞書「script とは 」

Other

その他にかかった時間

Style & Layout

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

Parse HTML & CSS

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

Script Parsing & Compilation

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

Garbage Collection

Garbage(ゴミ)Collection(収集)にかかった時間

Rendering

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

 

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

大半がScript Evaluation(スクリプトの評価にかかった時間)なので、内訳が表示されてもどのくらいの割合でCPU時間が費やされているのか?がわかるだけ

くじけてきた!

逃げたくなる!^^

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

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

 

関連リンクおすすめ

睡眠時間は十分取る!

コメント

タイトルとURLをコピーしました