3 年間の面接経験の共有: フロントエンド面接の 4 つの段階と 3 つの決定要因

つまり、プロトタイプを介して層ごとに相互接続されたチェーン構造は、プロトタイプチェーンと呼ばれます。

クロージャとは何ですか?

定義: クロージャは、他の関数のスコープ内の変数を参照する関数 を指し、通常はネストされた関数で実装されます。

• クロージャは、それを作成したコンテキストが破棄されても存在します。 (例:親関数から戻る)

#コード内で自由変数が参照されている(関数パラメータでも関数ローカル変数でもない関数内で使用される変数を自由変数と呼びます)

プライベート変数の作成

• vue 内のデータはクロージャである必要がありますパッケージを使用して、各データ内のデータが一意であることを確認し、コンポーネントへの複数の参照によって引き起こされるデータ共有を回避します

  #変数のライフ サイクルを延長します
##の字句環境一般的な関数が関数内にある リターン後に破棄されるが、クロージャは作成されたレキシカル環境への参照を保存する 作成された実行コンテキストが破棄されても、作成されたレキシカル環境はまだ存在する

• アプリケーション

カリー関数

• これを指す

ほとんどの場合、関数の呼び出し方法によって # の値が決まります。 ##this (実行時バインディング)

2 を指します。オブジェクトのプロパティ メソッドはオブジェクト自体を指します

js コードの実行中に、対応する実行コンテキストが作成され、実行コンテキスト スタックにプッシュされます。

非同期タスクが発生した場合、タスクは一時停止され、他のスレッドに引き渡されて非同期タスクを処理します。非同期タスクが処理されると、コールバック結果がイベント キューに追加されます。 実行スタック内のすべてのタスクが実行されると、つまりメインスレッドがアイドル状態になると、最初のイベント コールバック結果がイベント キューから取得され、このコールバックが実行スタックに追加されます。コードが実行されるなど、このプロセスはイベント ループと呼ばれます。

イベント キューは

とマイクロ タスク キューに分かれています。現在の実行スタックが空の場合、メインスレッドはまずマイクロ タスク キューにイベントがあるかどうかを確認します。 . イベントがあればマイクロタスクキューを順番に実行し、マイクロタスクキューが空になるまでタスクキュー内のイベントをコールバックし、存在しない場合はマクロタスクキューで処理します。

setTimeout()、

、setImmediate()、I/O 、ユーザー インタラクション、UI レンダリング一般的なマイクロタスクには、promise.then(),

,new MutationObserver# が含まれます##、process.nextTick()マクロ タスクとマイクロ タスクの本質的な違い

JavaScript でデータがスタックとヒープに保存される方法

• 1. 基本的なデータ型はサイズが固定されており、操作が簡単です, そのため、スタックに配置されます Storage

3. この方法でストレージを分離すると、メモリの占有量を最小限に抑えることができます。スタックの効率はヒープの効率よりも高くなります

v8 ガベージ コレクションについて話す

3. 古い世代では、マークのクリアとマークの並べ替えが使用されます。マークのクリア: すべてを走査します。オブジェクトを使用して、アクセスできる (生きている) オブジェクトをマークし、非アクティブなオブジェクトをガベージとしてリサイクルします。リサイクル後、メモリの不連続を避けるために、マーキングとソートを通じてライブオブジェクトをメモリの一端に移動し、移動が完了した後に境界メモリをクリーンアップする必要があります

関数呼び出しメソッド

1. 通常の function は () を使用して直接呼び出され、次のようなパラメータを渡します: function test(x, y) { return x y}，test(3, 4)

2. のように、オブジェクトの属性メソッドとして呼び出されます。 const obj = { test: function (val) { return val } }, obj.test(2)

3. call または ## を使用します。 #apply呼び出し、関数のこの点を変更します。つまり、関数の実行コンテキストを変更します。

newコンストラクターを間接的に呼び出してオブジェクトを生成できます。 instance

defer と async

download フェーズ は非同期実行になります (HTML 解析と同期);

ブラウザ イベント メカニズム

• キャプチャ ステージ: イベントより具体性の低いノードが最初にイベントを受信し、最も具体的なノード (トリガー ノード) が最後にイベントを受信します。イベントが最終目的地に到着する前に阻止すること。

  たとえば、div をクリックすると、クリック イベントが次の順序でトリガーされます: document =>

  =>

  =&gt ;
  、つまり、ドキュメントによってキャプチャされ、DOM ツリーに沿って下方向に伝播され、 になるまで各ノードでキャプチャ イベント がトリガーされます。実際のターゲット要素に到達します。

• ターゲット フェーズ

  イベントがターゲット ノードに到達すると、イベントはターゲット ステージに入ります。

  イベントはターゲット ノード でトリガーされ (イベントに対応する関数を実行します)、最も外側のドキュメント ノードに伝播されるまで逆に流れます。

• バブリング フェーズ

  イベントがターゲット要素でトリガーされた後、DOM ツリーに沿ってレイヤーごとにバブルが発生し続けます。最も外側のルート ノードに到達します。

すべてのイベントはキャプチャ フェーズとターゲット フェーズを通過する必要がありますが、一部のイベントはバブリング フェーズをスキップします。たとえば、要素がフォーカスを取得したり、バブリングしないフォーカス ブラーを失ったりする場合があります

拡張子 1#e.target と e.currentTarget の違いは何ですか?

e.target
• イベント リスニングをトリガーするオブジェクトを指します。
e.currentTarget
• リスニング イベントが追加されるオブジェクトを指します。
例:

<ul>
  <li><span>hello 1</span></li>
</ul>

let ul = document.querySelectorAll(&#39;ul&#39;)[0]
let aLi = document.querySelectorAll(&#39;li&#39;)
ul.addEventListener(&#39;click&#39;,function(e){
  let oLi1 = e.target  
  let oLi2 = e.currentTarget
  console.log(oLi1)   //  被点击的li
  console.log(oLi2)   // ul
  console.og(oLi1===oLi2)  // false
})

ログイン後にコピー

イベントは ul にバインドされています。li をクリックすると、ターゲットはクリックされた li になり、currentTarget はバインドされたイベントの ul になります

イベントのバブリング段階 (上記の例) では、

e.currenttarget

と e.target は等しくありませんが、イベントのターゲット段階では、 e.currenttarget と e.target は等しい 関数:

e.target

を使用して # を実装できます## イベント委任 、原則は、イベント バブリング (またはイベント キャプチャ) を通じて親要素をリッスンするイベントを追加することであり、e.target はトリガー イベントをトリガーする要素を指します 拡張子 2

addEventListener パラメータ

構文:

addEventListener(type, listener);
addEventListener(type, listener, options || useCapture);

ログイン後にコピー
type: リスニング イベントのタイプ (例: 'click'/'scroll) '/'focus'

• listener:
• EventListener

  インターフェイスまたは function を実装するオブジェクトである必要があります。監視対象のイベント タイプがトリガーされると、それが実行されます。

  options: リスナーに関連するオプションのパラメーター オブジェクトを指定します。

• capture: ブール値。イベント キャプチャ フェーズが EventTarget に伝播されるときにリスナーがトリガーされるかどうか

  once: リスナーが追加後に最大 1 回呼び出せることを示すブール値。true の場合、リスナーは実行後に削除されます。
  passive: ブール値、リスナーが
  • preventDefault()
  • signal: オプション、AbortSignal
  を呼び出さないことを示します。 ##abort()
  • メソッドが呼び出され、リスナーが削除されます。
  useCapture: ブール値、デフォルトは false、リスナーは最後に実行されます。イベント バブリング フェーズ。true は、キャプチャ フェーズの開始時に実行されることを意味します。この機能は、イベントのタイミングを変更して傍受/非傍受を容易にすることです。

Vue の章

著者は主に Vue 関連の開発に従事しており、反応関連のプロジェクトも行っています。プロジェクトを実行することです。履歴書に記載されているようなものです。フレームワークの価値はそれほど多くはありませんが、その本質にあります。Vue のソース コード シリーズを学ぶことで、Vue に非常に自信が持てるようになります。学習プロセスも同様で、あるフレームワークの原則をマスターできれば、他のフレームワークを学習するのは時間の問題です。



vue と React の違い

1. データの変動性

• React は関数型スタイルを支持しますプログラミング、不変データと一方向のデータ フロー、ビューの更新は setState または onchange
• Vue によってのみ実現できます。Vue はデータの変動性に基づいて応答性の高いデータを設計し、自動的に更新します。データの変化を監視するビュー

2. 記述方法

• Reactでは、jsxインラインスタイルを使用することを推奨していますが、これはすべてjs
• Vue内にあります。単一ファイル コンポーネント (SFC) の形式で、コンポーネント内でモジュール (tmplate/script/style) に分割されます。もちろん、vue は jsx 形式もサポートしており、vue の ui コンポーネント ライブラリを開発するときに使用できます。

3 、 diff アルゴリズム

• Vue2 は両端比較を使用し、Vue3 は高速比較を使用します
• react主に diff キューを使用して DOM が必要とするものを保存します更新する場合はパッチツリーを取得し、DOMを一括更新する統合操作を行います。の場合、ShouldComponentUpdate() を使用して反応レンダリングを手動で最適化する必要があります。

拡張: React フックをご存知ですか?

コンポーネント クラスの記述は非常に重く、レベルが多すぎるとメンテナンスが困難になります。 。

関数コンポーネントは純粋な関数であり、状態を含めることはできず、ライフサイクル メソッドをサポートしていないため、クラスを置き換えることはできません。

#React Hooks の設計目的は、機能コンポーネントを強化することです。「クラス」をまったく使用せずに完全に機能するコンポーネントを作成できます

#React Hooks の意味コンポーネントは可能な限り純粋な関数として作成する必要があり、外部関数と副作用が必要な場合は、フックを使用して外部コードを「フック」する必要があります。

#vue コンポーネント通信メソッド

#props / $emit

ref / $refs
• ##p$rent/親\; /\mathrm{}$##peventBus/vuex/pinia/localStorage/sessionStorage/Cookie/windowprovide/inject
• なぜ vue はレンダリング リストにキーを追加する必要があるのですか?
Vue は、同じタイプの vnode (v- によってレンダリングされるリスト ノードなど) の子ノードのグループを更新するプロセスにあります。の場合)、頻繁な作成と破棄による DOM パフォーマンスのオーバーヘッドを軽減するために:

キーのない子ノード配列の更新は、インプレース更新戦略を使用します。古い子ノード配列と新しい子ノード配列の長さを比較し、まず短い方の長さを基準として使用し、新しい子ノードの部分に直接パッチします。次に、新しい子ノード配列の長さが長い場合は、新しい子ノード配列の残りの部分を直接マウントし、新しい子ノード配列が短い場合は、古い子ノード配列の余分な部分をアンインストールするかどうかを判断します。

したがって、子ノードがコンポーネントまたはステートフル DOM 要素である場合、元の状態が保持され、不正なレンダリングが発生します。
キーを使用した子ノードの更新は、

patchKeyedChildren と呼ばれます。この関数は、コア diff アルゴリズムを実装するためのよく知られた場所です。おおよそのプロセスは、ヘッド ノードを同期し、テール ノードを同期することです。ノードを作成し、新しいノードの追加と削除を処理し、最後に最長増加サブシーケンスを解く方法を使用して未知のサブシーケンスを処理します。これは、既存のノードの再利用を最大限に高め、DOM 操作のパフォーマンスのオーバーヘッドを削減し、インプレース更新によって引き起こされる子ノードのステータス エラーの問題を回避するためです。 まとめると、v-forを使って定数を走査したり、子ノードがプレーンテキストなどの「状態」を持たないノードであれば、キーを追加せずに書く方法が使えます。ただし、実際の開発プロセスでは、より幅広いシナリオを実現し、ステータス更新エラーを回避できるように、キーを均一に追加することをお勧めします。通常、ESlint を使用してキーを v-for の必須要素として設定できます。

想详细了解这个知识点的可以去看看我之前写的文章：v-for 到底为啥要加上 key?

vue3 相对 vue2的响应式优化

vue2使用的是Object.defineProperty去监听对象属性值的变化，但是它不能监听对象属性的新增和删除，所以需要使用$set、$delete这种语法糖去实现，这其实是一种设计上的不足。

所以 vue3 采用了proxy去实现响应式监听对象属性的增删查改。

其实从api的原生性能上proxy是比Object.defineProperty要差的。

而 vue 做的响应式性能优化主要是在将嵌套层级比较深的对象变成响应式的这一过程。

vue2的做法是在组件初始化的时候就递归执行Object.defineProperty把子对象变成响应式的；

而vue3是在访问到子对象属性的时候，才会去将它转换为响应式。这种延时定义子对象响应式会对性能有一定的提升

Vue 核心diff流程

前提：当同类型的 vnode 的子节点都是一组节点（数组类型）的时候，

步骤：会走核心 diff 流程

Vue3是快速选择算法

• 同步头部节点
• 同步尾部节点
• 新增新的节点
• 删除多余节点
• 处理未知子序列（贪心 + 二分处理最长递增子序列）

Vue2是双端比较算法

在新旧字节点的头尾节点，也就是四个节点之间进行对比，找到可复用的节点，不断向中间靠拢的过程

diff目的：diff 算法的目的就是为了尽可能地复用节点，减少 DOM 频繁创建和删除带来的性能开销

vue双向绑定原理

基于 MVVM 模型，viewModel(业务逻辑层)提供了数据变化后更新视图和视图变化后更新数据这样一个功能，就是传统意义上的双向绑定。

Vue2.x 实现双向绑定核心是通过三个模块：Observer监听器、Watcher订阅者和Compile编译器。

首先监听器会监听所有的响应式对象属性，编译器会将模板进行编译，找到里面动态绑定的响应式数据并初始化视图；watchr 会去收集这些依赖；当响应式数据发生变更时Observer就会通知 Watcher；watcher接收到监听器的信号就会执行更新函数去更新视图；

vue3的变更是数据劫持部分使用了porxy 替代 Object.defineProperty，收集的依赖使用组件的副作用渲染函数替代watcher

v-model 原理

vue2 v-model 原理剖析

V-model 是用来监听用户事件然后更新数据的语法糖。

其本质还是单向数据流，内部是通过绑定元素的 value 值向下传递数据，然后通过绑定 input 事件，向上接收并处理更新数据。

单向数据流：父组件传递给子组件的值子组件不能修改，只能通过emit事件让父组件自个改。

// 比如
<input v-model="sth" />
// 等价于
<input :value="sth" @input="sth = $event.target.value" />

ログイン後にコピー

给组件添加 v-model 属性时，默认会把value 作为组件的属性，把 input作为给组件绑定事件时的事件名:

// 父组件
<my-button v-model="number"></my-button>

// 子组件
<script>
export default {
  props: {
    value: Number, //  属性名必须是 value
  },

  methods: {
    add() {
      this.$emit(&#39;input&#39;, this.value + 1) // 事件名必须是 input
    },
  }
}
</script>

ログイン後にコピー

如果想给绑定的 value 属性和 input 事件换个名称呢？可以这样：

在 Vue 2.2 及以上版本，你可以在定义组件时通过 model 选项的方式来定制 prop/event：

<script>
export default {
  model: {
    prop: &#39;num&#39;, // 自定义属性名
    event: &#39;addNum&#39; // 自定义事件名
  }
}

ログイン後にコピー

vue3 v-model 原理

实现和 vue2 基本一致

<Son v-model="modalValue"/>

ログイン後にコピー

等同于

<Son v-model="modalValue"/> 

ログイン後にコピー

自定义 model 参数

<Son v-model:visible="visible"/>
setup(props, ctx){
    ctx.emit("update:visible", false)
}

ログイン後にコピー

vue 响应式原理

不管vue2 还是 vue3，响应式的核心就是观察者模式 + 劫持数据的变化，在访问的时候做依赖收集和在修改数据的时候执行收集的依赖并更新数据。具体点就是：

vue2 的话采用的是 Object.definePorperty劫持对象的 get 和 set 方法，每个组件实例都会在渲染时初始化一个 watcher 实例，它会将组件渲染过程中所接触的响应式变量记为依赖，并且保存了组件的更新方法 update。当依赖的 setter 触发时，会通知 watcher 触发组件的 update 方法，从而更新视图。

Vue3 使用的是 ES6 的 proxy，proxy 不仅能够追踪属性的获取和修改，还可以追踪对象的增删，这在 vue2中需要 $set/$delete 才能实现。然后就是收集的依赖是用组件的副作用渲染函数替代 watcher 实例。

性能方面，从原生 api 角度，proxy 这个方法的性能是不如 Object.property，但是 vue3 强就强在一个是上面提到的可以追踪对象的增删，第二个是对嵌套对象的处理上是访问到具体属性才会把那个对象属性给转换成响应式，而 vue2 是在初始化的时候就递归调用将整个对象和他的属性都变成响应式，这部分就差了。

扩展一

vue2 通过数组下标更改数组视图为什么不会更新？

尤大：性能不好

注意：vue3 是没问题的

why 性能不好？

我们看一下响应式处理:

export class Observer {
  this.value = value
    this.dep = new Dep()
    this.vmCount = 0
    def(value, '__ob__', this)
    if (Array.isArray(value)) {
      // 这里对数组进行单独处理
      if (hasProto) {
        protoAugment(value, arrayMethods)
      } else {
        copyAugment(value, arrayMethods, arrayKeys)
      }
      this.observeArray(value)
    } else {
      // 对对象遍历所有键值
      this.walk(value)
    }
  }
  walk (obj: Object) {
    const keys = Object.keys(obj)
    for (let i = 0; i < keys.length; i++) {
      defineReactive(obj, keys[i])
    }
  }
  observeArray (items: Array<any>) {
    for (let i = 0, l = items.length; i < l; i++) {
      observe(items[i])
    }
  }
}

ログイン後にコピー

对于对象是通过Object.keys()遍历全部的键值，对数组只是observe监听已有的元素，所以通过下标更改不会触发响应式更新。

理由是数组的键相较对象多很多，当数组数据大的时候性能会很拉胯。所以不开放

computed 和 watch

Computed 的大体实现和普通的响应式数据是一致的，不过加了延时计算和缓存的功能：

在访问computed对象的时候，会触发 getter ，初始化的时候将 computed 属性创建的 watcher （vue3是副作用渲染函数）添加到与之相关的响应式数据的依赖收集器中（dep），然后根据里面一个叫 dirty 的属性判断是否要收集依赖，不需要的话直接返回上一次的计算结果，需要的话就执行更新重新渲染视图。

watchEffect?

watchEffect会自动收集回调函数中响应式变量的依赖。并在首次自动执行

推荐在大部分时候用 watch 显式的指定依赖以避免不必要的重复触发，也避免在后续代码修改或重构时不小心引入新的依赖。watchEffect 适用于一些逻辑相对简单，依赖源和逻辑强相关的场景（或者懒惰的场景 ）

$nextTick 原理？

vue有个机制，更新 DOM 是异步执行的，当数据变化会产生一个异步更行队列，要等异步队列结束后才会统一进行更新视图，所以改了数据之后立即去拿 dom 还没有更新就会拿不到最新数据。所以提供了一个 nextTick 函数，它的回调函数会在DOM 更新后立即执行。

nextTick 本质上是个异步任务，由于事件循环机制，异步任务的回调总是在同步任务执行完成后才得到执行。所以源码实现就是根据环境创建异步函数比如 Promise.then（浏览器不支持promise就会用MutationObserver，浏览器不支持MutationObserver就会用setTimeout），然后调用异步函数执行回调队列。

所以项目中不使用$nextTick的话也可以直接使用Promise.then或者SetTimeout实现相同的效果

Vue 异常处理

1、全局错误处理：Vue.config.errorHandler

Vue.config.errorHandler = function(err, vm, info) {};

如果在组件渲染时出现运行错误，错误将会被传递至全局Vue.config.errorHandler 配置函数 (如果已设置)。

比如前端监控领域的 sentry，就是利用这个钩子函数进行的 vue 相关异常捕捉处理

2、全局警告处理：Vue.config.warnHandler

Vue.config.warnHandler = function(msg, vm, trace) {};

ログイン後にコピー

注意：仅在开发环境生效

像在模板中引用一个没有定义的变量，它就会有warning

3、单个vue 实例错误处理：renderError

const app = new Vue({
    el: "#app",
    renderError(h, err) {
        return h("pre", { style: { color: "red" } }, err.stack);
    }
});

ログイン後にコピー

和组件相关，只适用于开发环境，这个用处不是很大，不如直接看控制台

4、子孙组件错误处理：errorCaptured

Vue.component("cat", {
    template: `<div><slot></slot></div>`,
    props: { name: { type: string } },
    errorCaptured(err, vm, info) {
        console.log(`cat EC: ${err.toString()}\ninfo: ${info}`);
        return false;
    }
});

ログイン後にコピー

注：只能在组件内部使用，用于捕获子孙组件的错误，一般可以用于组件开发过程中的错误处理

5、终极错误捕捉：window.onerror

window.onerror = function(message, source, line, column, error) {};

ログイン後にコピー

它是一个全局的异常处理函数，可以抓取所有的 JavaScript 异常

Vuex 流程 & 原理

Vuex 利用 vue 的mixin 机制，在beforeCreate 钩子前混入了 vuexinit 方法，这个方法实现了将 store 注入 vue 实例当中，并注册了 store 的引用属性 $store ，所以可以使用 `this.$store.xxx`去引入vuex中定义的内容。

然后 state 是利用 vue 的 data，通过new Vue({data: {$$state: state}} 将 state 转换成响应式对象，然后使用 computed 函数实时计算 getter

Vue.use函数里面具体做了哪些事

概念

可以通过全局方法Vue.use()注册插件，并能阻止多次注册相同插件，它需要在new Vue之前使用。

该方法第一个参数必须是Object或Function类型的参数。如果是Object那么该Object需要定义一个install方法；如果是Function那么这个函数就被当做install方法。

Vue.use()执行就是执行install方法，其他传参会作为install方法的参数执行。

所以**Vue.use()本质就是执行需要注入插件的install方法**。

源码实现

export function initUse (Vue: GlobalAPI) {
 Vue.use = function (plugin: Function | Object) {
  const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
  // 避免重复注册
  if (installedPlugins.indexOf(plugin) > -1) {
   return this
  }
  // 获取传入的第一个参数
  const args = toArray(arguments, 1)
  args.unshift(this)
  if (typeof plugin.install === 'function') {
   // 如果传入对象中的install属性是个函数则直接执行
   plugin.install.apply(plugin, args)
  } else if (typeof plugin === 'function') {
   // 如果传入的是函数，则直接（作为install方法）执行
   plugin.apply(null, args)
  }
  // 将已经注册的插件推入全局installedPlugins中
  installedPlugins.push(plugin)
  return this
 }
}

ログイン後にコピー

使用方式

installedPlugins import Vue from 'vue'
import Element from 'element-ui'
Vue.use(Element)

ログイン後にコピー

怎么编写一个vue插件

要暴露一个install方法，第一个参数是Vue构造器，第二个参数是一个可选的配置项对象

Myplugin.install = function(Vue, options = {}) {
  // 1、添加全局方法或属性
  Vue.myGlobalMethod = function() {}
  // 2、添加全局服务
  Vue.directive('my-directive', {
    bind(el, binding, vnode, pldVnode) {}
  })
  // 3、注入组件选项
  Vue.mixin({
    created: function() {}
  })
  // 4、添加实例方法
  Vue.prototype.$myMethod = function(methodOptions) {}
}

ログイン後にコピー

CSS篇

Css直接面试问答的题目相对来说比较少，更多的是需要你能够当场手敲代码实现功能，一般来说备一些常见的布局，熟练掌握flex基本就没有什么问题了。

什么是 BFC

Block Formatting context，块级格式上下文

BFC 是一个独立的渲染区域，相当于一个容器，在这个容器中的样式布局不会受到外界的影响。

比如浮动元素、绝对定位、overflow 除 visble 以外的值、display 为 inline/tabel-cells/flex 都能构建 BFC。

常常用于解决

• 处于同一个 BFC 的元素外边距会产生重叠（此时需要将它们放在不同 BFC 中）；

• 清除浮动（float），使用 BFC 包裹浮动的元素即可

• 阻止元素被浮动元素覆盖，应用于两列式布局，左边宽度固定，右边内容自适应宽度（左边float，右边 overflow）

伪类和伪元素及使用场景

伪类

伪类即：当元素处于特定状态时才会运用的特殊类

开头为冒号的选择器，用于选择处于特定状态的元素。比如:first-child选择第一个子元素；:hover悬浮在元素上会显示；:focus用键盘选定元素时激活；:link + :visted点击过的链接的样式;:not用于匹配不符合参数选择器的元素；:fist-child匹配元素的第一个子元素；:disabled 匹配禁用的表单元素

伪元素

伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过::before 来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。示例：

::before 在被选元素前插入内容。需要使用 content 属性来指定要插入的内容。被插入的内容实际上不在文档树中

h1:before {
    content: "Hello ";
}

ログイン後にコピー

::first-line 匹配元素中第一行的文本

src 和 href 区别

• href是Hypertext Reference的简写，表示超文本引用，指向网络资源所在位置。href 用于在当前文档和引用资源之间确立联系

• src是source的简写，目的是要把文件下载到html页面中去。src 用于替换当前内容

• 浏览器解析方式

  当浏览器遇到href会并行下载资源并且不会停止对当前文档的处理。(同时也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式)

  当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载或执行完毕。(这也是script标签为什么放在底部而不是头部的原因)

不定宽高元素的水平垂直居中

• flex

  <div class="wrapper flex-center">
    <p>horizontal and vertical</p>
  </div>
  
  .wrapper {
      width: 900px;
      height: 300px;
      border: 1px solid #ccc;
  }
  .flex-center {  // 注意是父元素
      display: flex;
      justify-content: center;  // 主轴（竖线）上的对齐方式
      align-items: center;      // 交叉轴（横轴）上的对齐方式
  }

  ログイン後にコピー

• flex + margin

  <div class="wrapper">
    <p>horizontal and vertical</p>
  </div>
  
  .wrapper {
      width: 900px;
      height: 300px;
      border: 1px solid #ccc;
      display: flex;
  }
  .wrapper > p {
      margin: auto;
  }

  ログイン後にコピー

• Transform + absolute

  <div class="wrapper">
      <img  src="test.png" alt="3 年間の面接経験の共有: フロントエンド面接の 4 つの段階と 3 つの決定要因" >
  </div>
  
  .wrapper {
      width: 300px;
      height: 300px;
      border: 1px solid #ccc;
      position: relative;
  }
  .wrapper > img {
      position: absolute;
      left: 50%;
      top: 50%;
      tansform: translate(-50%, -50%)
  }

  ログイン後にコピー

  注：使用该方法只适用于行内元素(a、img、label、br、select等)（宽度随元素的内容变化而变化），用于块级元素（独占一行）会有问题，left/top 的50%是基于图片最左侧的边来移动的，tanslate会将多移动的图片自身的半个长宽移动回去，就实现了水平垂直居中的效果

• display: table-cell

  <div class="wrapper">
    <p>absghjdgalsjdbhaksldjba</p>
  </div>
  
  .wrapper {
      width: 900px;
      height: 300px;
      border: 1px solid #ccc;
      display: table-cell;
      vertical-align: middle;
      text-align: center;
  }

  ログイン後にコピー

浏览器和网络篇

浏览器和网络是八股中最典型的案例了，无论你是几年经验，只要是前端，总会有问到你的浏览器和网络协议。

最好的学习文章是李兵老师的《浏览器工作原理与实践》



跨页面通信的方法？

这里分了同源页面和不同源页面的通信。

不同源页面可以通过 iframe 作为一个桥梁，因为 iframe 可以指定 origin 来忽略同源限制，所以可以在每个页面都嵌入同一个 iframe 然后监听 iframe 中传递的 message 就可以了。

同源页面的通信大致分为了三类：广播模式、共享存储模式和口口相传模式

第一种广播模式，就是可以通过 BroadCast Channel、Service Worker 或者 localStorage 作为广播，然后去监听广播事件中消息的变化，达到页面通信的效果。

第二种是共享存储模式，我们可以通过Shared Worker 或者 IndexedDB，创建全局共享的数据存储。然后再通过轮询去定时获取这些被存储的数据是否有变更，达到一个的通信效果。像常见cookie 也可以作为实现共享存储达到页面通信的一种方式

最后一种是口口相传模式，这个主要是在使用 window.open 的时候，会返回被打开页面的 window 的引用，而在被打开的页面可以通过 window.opener 获取打开它的页面的 window 点引用，这样，多个页面之间的 window 是能够相互获取到的，传递消息的话通过 postMessage 去传递再做一个事件监听就可以了

详细说说 HTTP 缓存

在浏览器第一次发起请求服务的过程中，会根据响应报文中的缓存标识决定是否缓存结果，是否将缓存标识和请求结果存入到浏览器缓存中。

HTTP 缓存分为强制缓存和协商缓存两类。

强制缓存就是请求的时候浏览器向缓存查找这次请求的结果，这里分了三种情况，没查找到直接发起请求（和第一次请求一致）；查找到了并且缓存结果还没有失效就直接使用缓存结果；查找到但是缓存结果失效了就会使用协商缓存。

强制缓存有 Expires 和 Cache-control 两个缓存标识，Expires 是http/1.0 的字段，是用来指定过期的具体的一个时间（如 Fri, 02 Sep 2022 08:03:35 GMT），当服务器时间和浏览器时间不一致的话，就会出现问题。所以在 http1.1 添加了 cache-control 这个字段，它的值规定了缓存的范围（public/private/no-cache/no-store），也可以规定缓存在xxx时间内失效（max-age=xxx）是个相对值，就能避免了 expires带来的问题。

ネゴシエーション キャッシュとは、強制キャッシュのキャッシュ結果が無効になる処理であり、ブラウザはキャッシュ識別子を持ってサーバーにリクエストを送信し、サーバーはキャッシュ識別子を介してキャッシュを使用するかどうかを決定します。 。

ネゴシエーション キャッシュを制御するフィールドには、last-modified / if-modified-since および Etag / if-none-match が含まれており、後者の優先順位が高くなります。

一般的なプロセスでは、リクエスト メッセージを通じて last-modified または Etag の値をサーバーに渡し、サーバー内の対応する値と比較します。応答メッセージ内の -none-match 一貫性がある場合、ネゴシエーション キャッシュは有効であり、キャッシュされた結果が使用され、304 が返されます。そうでない場合は、無効で、結果が再度要求され、200 が返されます。を使用すると、ブラウザはまずコンテンツが検索コンテンツであるか URL であるかを判断します。検索コンテンツの場合は、デフォルトの検索エンジンと組み合わせて URL を生成します。たとえば、Google ブラウザは goole.com/search? xxxx. URL の場合は、http/https などのプロトコルを結合します。ページがアップロード前時間を監視しない場合、または実行プロセスの続行に同意する場合、ブラウザのアイコン バーは読み込み状態になります。

次に、ブラウザ プロセスは、IPC プロセス間通信を介してネットワーク プロセスに URL リクエストを送信します。ネットワーク プロセスは、まずキャッシュ内のリソースを検索します。リソースがあれば、リクエストをインターセプトします。そのまま200を返します、そうでない場合はネットワークリクエスト処理に入ります。 ネットワーク リクエスト プロセスは、ネットワーク プロセスが DNS サーバーに対して、ドメイン名に対応する IP とポート番号を返すように要求します (これらが以前にキャッシュされている場合は、キャッシュされた結果が直接返されます)。はポート番号ではありません。 http のデフォルトは 80 で、https のデフォルトは 443 です。 https の場合は、暗号化されたデータ チャネルを作成するために TLS 安全な接続を確立する必要もあります。

その後、TCP スリーウェイ ハンドシェイクによりブラウザとサーバー間の接続が確立され、データ送信が行われます。データ送信が完了したら、手を 4 回振ると切断されます。

接続の場合: keep-alive

が設定されているため、常に接続を維持できます。

ネットワーク プロセスは、TCP を通じて取得したデータ パケットを解析します。まず、応答ヘッダーのコンテンツ タイプに基づいてデータ タイプが決定されます。バイト ストリームまたはファイル タイプの場合は、次のようになります。ダウンロードのためにダウンロード マネージャーに引き渡され、ナビゲーション プロセスは終了します。 text/html タイプの場合は、レンダリングするドキュメントを取得するようにブラウザ プロセスに通知されます。

ブラウザのプロセスは、レンダリング通知を受け取り、現在のページと新しく入力されたページに基づいて同じサイトであるかどうかを判断し、同じサイトである場合は、以前の Web ページで作成されたレンダリング プロセスを再利用します。レンダリングプロセスを新たに作成します。 ブラウザ プロセスは、レンダリング プロセスに「ドキュメントの送信」メッセージを送信します。レンダリング プロセスはメッセージを受信すると、ネットワーク プロセスとのデータ送信チャネルを確立します。データ送信が完了すると、戻ります。 「送信の確認」メッセージをブラウザのサーバー プロセスに送信します。

ブラウザは、レンダリング プロセスから「送信の確認」メッセージを受信すると、ブラウザのページ ステータス (セキュリティ ステータス、アドレス バー URL、前方および後方履歴メッセージなど) を更新し、Web ページを更新します。時間 ページは白紙ページ（白い画面）です。

ページ レンダリング プロセス

(キー メモリ)

最後に、レンダリング プロセスは、ページの解析とドキュメントのサブリソースの読み込みを実行します。レンダリング プロセスは、HTML をDOM ツリー構造、および CSS をスタイルシート (CSSOM) に変換します。次に、DOM ツリーをコピーし、表示されていない要素を除外して基本的なレンダリング ツリーを作成し、各 DOM ノードのスタイルを計算し、各ノードの位置レイアウト情報を計算してレイアウト ツリーを構築します。

レイヤは、レイヤ化コンテキストがある場合、またはトリミングが必要な場合に独立して作成されます。これはレイヤ化と呼ばれます。最終的にレイヤ化されたツリーが形成されます。レンダリング プロセスでは、レイヤごとに描画リストが生成され、それが送信されます。合成スレッドは、レイヤーをタイルに分割し (レイヤーのすべてのコンテンツを一度に描画することを回避し、ビューポート部分はタイルの優先順位に従ってレンダリングできます)、タイルをラスター化スレッドでビットマップに変換します。プール。 変換が完了すると、合成スレッドは描画ブロック コマンド DrawQuard をブラウザ プロセスに送信し、ブラウザは DrawQuard メッセージに基づいてページを生成し、ブラウザ上に表示します。

略記:

ブラウザのレンダリング プロセスは、HTML を dom ツリーに解析し、css を cssom ツリーに解析します。次に、最初に DOM ツリーをコピーして、次に、表示要素（display: none など）を cssom と組み合わせて各 dom ノードのレイアウト情報を計算し、レイアウト ツリーを構築します。

レイアウト ツリーが生成されると、レイヤーのスタッキング コンテキストまたはトリミングされた部分に従って階層化され、階層ツリーが形成されます。 レンダリング プロセスでは、各レイヤーの描画リストが生成され、それが合成スレッドに送信されます。一度限りのレンダリングを避けるために、合成スレッドはブロック単位でレンダリングします。レイヤーをタイルに分割して渡します。ラスタライズ スレッド プールを介してタイルをビットマップに変換します。

変換が完了すると、合成スレッドはタイルを表示するためにブラウザに描画するコマンドを送信します

TCP と UDP の違い

UDP は User Dataprogram Protocol (ユーザー データプログラム プロトコル) IP は、IP アドレス情報を介して指定されたコンピューターにデータ パケットを送信します。最後に、UDP はポート番号を通じてデータ パケットを正しいプログラムに配布できます。 UDP は、データが正しいかどうかを検証できますが、再送機構がなく、間違ったデータ パケットを破棄するだけであり、送信後に宛先に到達したかどうかを確認することはできません。 UDPはデータの信頼性は保証できませんが、伝送速度が非常に速いため、オンラインビデオやインタラクティブゲームなど、データの完全性が厳密に保証されない分野でよく使用されます。

TCP は、UDP データが失われやすく、データ パケットを正しく組み立てることができないという問題を解決するために導入された伝送制御プロトコル (Transmission Control Protocol) です。ストリーム用のベースのトランスポート層通信プロトコル。 TCP は、パケット損失に対処するための再送信メカニズムを提供し、順序が乱れたデータ パケットを完全なファイルに結合できるパケット ソート メカニズムを導入します。

TCP ヘッダーには、宛先ポートとローカル ポート番号が含まれるだけでなく、並べ替え用のシーケンス番号も提供されるため、受信側はシーケンス番号を使用してデータ パケットを並べ替えることができます。

TCP と UDP の違い

TCP 接続のライフサイクルは、リンク段階、データ送信、切断段階の 3 つの段階を経ます。

接続フェーズ

は、クライアントとサーバー間のリンクを確立するために使用され、スリーウェイ ハンドシェイクは、クライアントとサーバー間のデータ パケットの送受信を確認するために使用されます。クライアントとサーバーの能力。
1. クライアントはまず SYN メッセージを送信してサーバーがデータを送信できることを確認し、SYN_SENT 状態に入ってサーバーからの確認を待ちます
2. サーバーが SYN を受信するとクライアントは ACK 確認メッセージを送信し、サーバーもクライアントがデータを送信できるかどうかを確認するために SYN メッセージをクライアントに送信します。このとき、サーバーは SYN_RCVD 状態
3 に入ります。クライアントが ACK SYN メッセージを受信すると、データ パケットがサーバーに送信され、ESTABLISHED 状態になります (接続を確立します)。サーバーがクライアントから送信された ACK パケットを受信すると、ESTABLISHED 状態になり、3 方向通信が完了します。ハンドシェイク
#送信データ フェーズ

##このフェーズでは、受信側は各パケットを確認する必要があります;

したがって、送信側がデータ パケットを送信するとき、指定された時間内に受信されませんでした。受信側からフィードバックされた確認メッセージはパケット損失と判断され、再送信メカニズムがトリガーされます。
大きなファイルは、送信中に多くの小さなデータ パケットに分割されます。データ パケットが受信側に到着した後、TCP ヘッダーのシーケンス番号に従って並べ替えて、データの整合性を確保します。

切断フェーズ

4 回手を振って、双方が確立した接続を切断できることを確認します

1. クライアントはサーバー FIN への接続を開始します。サーバーは FIN パケットを受信し、確認パケット ACK を送信し、自身のシリアル番号を送信し、サーバーは CLOSE_WAIT 状態に入ります。この時点では、クライアントにはサーバーに送信するデータがありませんが、サーバーにクライアントに送信するデータがある場合、クライアントはそれを受信する必要があります。クライアントはACKを受信後、FIN_WAIT_2状態

#3に入ります。サーバーはデータ送信完了後、クライアントにFINパケットを送信します。このとき、サーバーはLAST_ACK状態

#になります。 ##4. クライアントは FIN を受信します パケットは確認パケット ACK を送信します このとき、クライアントは TIME_WAIT 状態に入り、2 MSL 待ってから CLOSED 状態に入り、サーバーはクライアントの ACK を受信した後に CLOSED 状態に入ります。
4 波の場合、TCP は全二重通信であるため、アクティブなクロージング側が FIN パケットを送信した後も、受信側は依然としてデータを送信する可能性があり、サーバーからクライアントへのデータ チャネルをすぐに閉じることができません。 , つまり、「サーバーからの

FIN

パケットをクライアントからの

ACK

パケットと組み合わせて送信することはできません。

ACK

は最初にのみ確認できます。そして、

FIN パケットなので、4 つの波は 4 つのパケット インタラクションである必要があります。Content-length わかりますか? Content-length は、http メッセージの長さ、つまり 10 進数で表されるバイト数です。

コンテンツの長さ > 実際の長さの場合、サーバー/クライアントはメッセージ キューの終わりを読み取るときに次のバイトを待ち続け、無応答タイムアウトが発生します

content -length < 実際の長さの場合、最初に要求されたメッセージがインターセプトされ、後続のデータ解析で混乱が生じます。

content-length の値が不明な場合は、Transfer-Encoding: chunked を使用する必要があります。これにより、長さ 0 の終了ブロックが返されるまで、返されるデータを複数のデータ チャンクに分割できます。

クロスドメインの共通ソリューション

クロスドメインとは何ですか?

プロトコルのドメイン名とポート番号が同じであれば同一ドメイン、どちらかが異なっていればクロスドメインです

解決策

1. 従来の jsonp:
著者別の最新記事
• Redis のセンチネルを詳しく理解する
  2023-04-26 17:59:18
• 【整理と共有】人気のReact状態管理ツール7選
  2023-04-26 17:47:48
• Vue2 のキーと Vue3 のキーの違いについて説明した記事
  2023-04-26 17:41:42
• Nodeのメモリ制御に関する記事
  2023-04-26 17:37:05
• Excelの実践スキルをシェア：重複値を削除する4つのヒント！
  2023-04-26 17:31:25
• Wordの実践スキルを共有：簡体字→繁体字変換機能はこんな使い方もできる！
  2023-04-26 17:27:32
• クロスドメインの問題を解決するにはどうすればよいですか?一般的なソリューションの簡単な分析
  2023-04-25 19:57:58
• JavaScript のシングルトン パターンを理解するための 1 つの記事
  2023-04-25 19:53:11
• ノードのバッファーについて詳しく見る
  2023-04-25 19:49:11
• Vue3 で単体テストを作成する方法を調べる
  2023-04-25 19:41:54
最新の問題
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1361
CSS でフローティング要素を水平ではなく垂直にスタックするにはどうすればよいですか? 片側にメインコンテンツ、もう一方に追加コンテンツがある 2 つの列を持つ Web ページを作成しようとしています。ただし、float プロパティを使用して追加の列を左に揃えているた...
から 2024-04-06 20:45:26
0
2
386
livewire遅延プレースホルダーでlaravelコンポーネントを使用する方法 laravel コンポーネントのスケルトンを livewire3 プレースホルダー内に追加したい これまでに試したこと: Laravel コンポーネントを含めることによる Live...
から 2024-04-06 20:02:10
0
2
543
Web サイトから入力要素を取得できません そこで、Twitter から入力要素を取得しようとしていますが、それを実行すると、ノード ターミナルでこのようなエラーが表示され続け、その結果、このコードによって作成されたブラウザ...
から 2024-04-06 18:59:57
0
1
442
d3.js でズームインすると散布図のポイントの値が維持されない d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...
から 2024-04-06 18:16:26
0
1
403
関連トピック
詳細>
• Python はフロントエンドですか、それともバックエンドですか?
• フロントエンドにインスタントメッセージングを実装する方法
• vue.js がエラーを報告するのはなぜですか?
• vue.js スロットの用途は何ですか?
• vue.jsでパラメータを指定してジャンプする方法
• フロントエンドとバックエンドの違い
• phpとフロントエンドの関係についての紹介
• CSSとは何ですか