[開発日記]面接後期

少し前にニンジンスーパーの実習面接に参加しました.準備ができていなかったので不安でしたが、やっぱりしっかり面接できませんでした.
それでも面接をしてから、自分を見直す時間があります.
あとで.
基本的な技術をよく整理する.
面接の質問には基本的な知識を聞く質問がたくさんあります.質問を受けてもわかるコンセプトでしたが、正しく答えられず残念でした.知っているからといっていいかげんに言わないで、整理しなさい.
使用理由と目的を整理してみましょう.
開発中にライブラリや複数のテクノロジーを使用することが多く、なぜこのテクノロジーを使用する理由がより良いのかを考えてみましょう.
ネットワーク駆動の学習に努める
フロントエンドの開発者になりたい人は、Webの駆動方法をよく知らないので、自分を怒らせます.よく勉強して理解しなければなりません.
記憶する
今回の面接質問で最も印象に残った2つの質問を簡単に整理したいと思います.いつか私が再びこの質問を受け取ったとき、完璧に答えられるように準備し直します.
RepaintとReflowとは?
本当に初めて聞いた面接後、私は資料を探しながら勉強し、フロント開発を学びながら、Webレンダリングの過程さえ知らないことを反省しました.概念をしっかり確立しなければならない.ReflowとRepaintとは何かをまとめる前に、ブラウザのレンダリング手順について説明します.
レンダー(Render)HTML, CSS, Javascript등의 문서를 브라우저에서 그래픽 형태로 출력하는 과정ほとんどのブラウザにはレンダリングを実行するレンダリングエンジンがあり、各ブラウザでは同じエンジンが使用されません.
したがって,フロントエンドテスト環境では,各種ブラウザの互換性の問題を調べる必要がある.
レンダーパス(Render Passes)

DOMおよびCSSOM作成フェーズ

연산과 관리가 유리하도록 Object Model로 만든다. 
각각 DOM Tree와 CSSOM(CSS Object Model)으로 생성된다.

Render Treeフェーズ

の作成

DOM Tree와 CSSOM을 이용하여 Render Tree를 생성한다.
이때, Render Tree에는 페이지를 렌더링하는데 필요한 노드와 스타일 설정 정보가 포함된다.

Layoutフェーズ

뷰포트내에서 각 노드들의 정확한 위치와 크기(px)를 계산한다.
(Render Tree 노트들이 가지고 있는 스타일과 속성에 따라 브라우저 화면 어느 위치에 
어떤 크기로 출력될지 계산하는 단계이다.)

** 뷰포트는 그래픽이 표시되는 브라우저의 영역/크기를 의미한다.

Paint

Layout단계에서 계산된 요소들을 실제 화면에 그린다.
텍스트나 컬러나 이미지,효과 등을 모두 처리하는 단계이다.

では、ReflowとRepaintはReflowとは、イベントが発生したときにhtml要素が追加された場合、または対応するサブノードまたは親ノードを含む要素のサイズまたは位置が変更された場合に、LayoutステップRender Tree 요소들의 크기와 위치 다시 계산を再実行することを意味する.
次のリストは、Reflowが発生する可能性のある様々な状況の例です.

ページ 初期レンダリングによる初期Layoutステップ

ウィンドウサイズ変更時

ノードを追加または削除する場合、

要素の 位置またはサイズの変更(margin、 padding, border, width, height, など)

以外のフォントの変更、テキストと画像の変更など

.
ではRepaintとは何でしょうか.Repaintとは、計算された要素をRender Treeに再描画することを意味する.主にReflow以降、またはスタイルプロパティが変更された場合に発生します.(背景色、可視性などを変更)
ReflowとRepaintを減らします.ReflowとRepaintの過程が多く発生したらどうなりますか?
再計算と描画が必要なため、ページのパフォーマンスが低下する可能性があります.そのため、ReflowとRepaintが発生しないようにしたほうがいいです.それ以外にも、パフォーマンスを最適化する方法はいくつかあります.この部分はさらに学習し、深く検討する.
article、section、div
いずれも指定エリアで使用されていることは分かっていますが、説明ははっきりしていません.簡単に整理したいです.
article

독립적인 컨텐츠를 다룰 때 사용한다.
블로그나 기사 등에 사용된다.

section

제목(h1,h2등)을 가지고 있으며(필수는 아님), 서로 연관된 컨텐츠들 묶을 때 사용한다.

div(division)

관계없이 구역을 나눌 때 사용한다.

に感銘を与える
面接の時間がとても長いような気がします.準備が足りないと思います.今も足りない部分を埋め直して改めて挑戦します!!!
リファレンス
render-tree-construction
MDN