tamakipedia

鎌倉でフロントエンドエンジニアをしています。Wordpress/Javascript/JQuery が得意で、現在React勉強中です!

クリエイターズ定例

いやー今日もわからない言葉てんこ盛りでしたねー!www

今日の会社のクリエイターズミーティングは特に
css と ブラウザの仕組みの部分に関しての話が多かったです。

なので今日はブラウザの仕組みを浅堀してみました!

ブラウザの仕組み!!

web開発者にとっては、ブラウザの内部構造を知ることや、
ブラウザの内部動作を学ぶことで、より適切な判断ができるようになり、
開発のベスト プラクティスの根拠を理解することができます。

そう書かれていました。そう聞きました。

ブラウザの構成要素

1 ユーザーインターフェイス  
2 ブラウザエンジン  
3 レンダリングエンジン  
4 ネットワーキング  
5 UIバックエンド  
6 javascript インタープリタ  
7 データストレージ  

f:id:okinawanpizza:20200720220700p:plain

1 ユーザーインターフェイス
アドレスバー、進むボタン、ブックマークメニューなどの総称です。
ブラウザの画面のうち、要求したページが表示されるメインウィンドウを除く全ての部分のことです!

2 ブラウザエンジン
UIとレンダリングエンジンの間の処理を整理します。

3 レンダリングエンジン コンテンツの表示を担当します。例えば、要求されたコンテンツがHTMLの場合は、HTMLと CSSを解析してコンテンツを画面に表示します。
(Geckowebkit、tridentなど)
safarichrome は同じレンダリングエンジン - webkit - を使っている模様!

4 ネットワーキング
HTTPリクエストなどのネットワークの呼び出しに使用されます。

5 UIバックエンド
コンボボックスやウィンドウなどの基本的なウィジェットの描画に使用されます。
プラットフォームに依存しない汎用的なインターフェースを公開して
オペレーティングシステムユーザーインターフェースメゾットをしています。

6 javascript インタープリンタ
永続的なレイヤーです。ブラウザではCookieなど様々なデータをハードディスクに保存する必要があります。新しいHTML使用では
ブラウザ内の完全で軽量なデータベースである「ウェブデータベース」が定義されています。

7 データストレージ
永続的なレイヤーです。ブラウザではCookieなど様々なデータをハードディスクに保存する必要があります。新しいHTML使用では
ブラウザ内の完全で軽量なデータベースである「ウェブデータベース」が定義されています。

わからん単語のお祭りですが、少しずつ定例から新知識を増やしていこうと思いまっす!ww
終わり! 

参考!

ブラウザのしくみ: 最新ウェブブラウザの内部構造 - HTML5 Rocks

Webブラウザ、レンダリングエンジン、JavaScriptエンジンを整理して図視化してみた - Qiita