対面|3月と4月のフロントエンドインタビューの質問の記録

个人情况：2021.6年に卒業したこのインタビューは、北京にあるソーシャルリクルートです。テクノロジースタックは主にVueであるため、Vueについてはさらに質問がありますが、Reactはほとんどありません。

最近遭遇した面接の質問を記録し、面接の質問のタイプに従って分類します。

CSS関連：

さまざまなセレクターの優先順位。最終的なスタイルの結果を示すコードを参照してください
アニメーションアクセラレーションをオンにする方法、基本的な原則は何ですか？

JS関連：

プロトタイプチェーン、スコープチェーン、クロージャー、可変巻き上げなどの基本的な概念が求められています
これは、プロトタイプチェーン、マクロタスクマイクロタスクを指し、コードを見て出力を言うと、特定のコードは保存されません:(
配列の長さが任意に変更できるのはなぜですか？
関数のname属性、コードの出力を見てください。name属性は手動で変更できますか？

function a(){} 
a.name // "a"
const a = function(){} 
a.name // ES5中为"", ES6 中为 "a" 
window.a = function(){}
a.name // ES5中为"a", ES6 中为 "" 
const a = function b(){} 
a.name // "b" 
window.a = function b(){} 
a.name // "b" 
// 修改
a.name = '1111' 
a.name // 不变，还是"b"
复制代码

新規の過程で何が起こったのか、単純な新規を実装し、注文に注意を払う
ES6は、デフォルトで末尾再帰の最適化を有効にします。原理とは何ですか。また、なぜ最適化できるのですか。
ES5でconst：definePropertyを実装する
スロットル効果のあるポーリング機能を実装する
インスタンスをチェーンして呼び出すことができるクラスを実装します。このクラスにはsleepメソッドがあり、一定期間のスリープ後に呼び出すことができます。

const boy = new PlayBoy('Tom') 
boy.sayHi().sleep(1000).play('王者').sleep(2000).play('跳一跳') 
// 输出 
// 大家好我是Tom 
// 1s 之后 
// 我在玩王者 
// 2s 之后 
// 我在玩跳一跳
复制代码

非同期/待機エラーをキャッチする方法
Promise.allとPromise.raceを実装します
次のミドルウェアを正常に実行できる関数を実装します：関数カリー化

/**
 * 实现一个组合compose的方法，使其可以正确调用每个中间件
 *
 * 规定中间件写法：
 * function(val, next) {
 *    // 前置操作
 *    next(val + 1); // 触发下一个中间件
 *    // 后续操作
 * }
 */
function compose(...middlewares) {

}

function add1(x, next) {
  console.log('add1 before');
  next(x + 1);
  console.log('add1 after');
}

function add2(x, next) {
  console.log('add2 before');
  next(x + 2);
  console.log('add2 after');
}

function output(x){
    console.log('output:', x)
}

const input = 0;
compose(add1, add2, (output) => {
  console.log('output:', output);
})(input);

/**
 * 输出:
 *
 * add1 before
 * add2 before
 * output: 3
 * add2 after
 * add1 after
 */
复制代码

フレームワーク関連：

仮想DOMの利点：関数型プログラミングパターン、マルチサイドレンダリング
Vueのプラグインメカニズム、基本的な原則は何ですか
Vue2とVue3のレスポンシブ実装の違い、なぜ変更する必要があるのか
アンチシェイク機能を備えたVue入力ボックスコンポーネントを記述し、親子コンポーネントのパラメータ転送を処理します
Vuexの基本要素であるアクションとミューテーションの違いは、アクションが状態を直接変更するのでしょうか？
Vueルータールーティングガードのフックと使用シナリオ
VuenextTickの使用法と基本的な実装原則
Vue3の最適化ポイントは何ですか
Vue3は.nativeイベント修飾子を削除しました。ネイティブイベントを作成するにはどうすればよいですか？
Vueで計算された設計の動機と基本的な実装
Vueテンプレートのコンパイル方法
Vueルーターの基本原理、さまざまなモードの違い、履歴ルーティングの更新の理由と解決策404ページ
Vueプロジェクトのモデルレイヤーデザイン
Vuex 中的变量打包之后存在哪里？和全局作用域中的变量有什么区别
Vue 中 CSS scoped 的原理
Vue 中 keep-alive 的实现原理，内部使用的缓存算法是什么，缓存的是什么
$set 的使用场景

打包工具相关：

webpack tree shaking 原理
webpack babel 配置：语法层面的和 API 层面的
webpack loader 和 plugin 实现原理
webpack 生命周期，让你实现一系列的生命周期怎么实现
webpack 打包过程
webpack 有哪些可优化的地方（构建速度和包体积），具体怎么优化

网络相关：

经典面试题：输入 URL 之后发生了什么，HTML 文件中 CSS 文件和 JS 文件的加载顺序，会阻塞页面渲染吗
DNS 查询过程
websocket 的好处，怎么建立连接，心跳机制怎么做，错误怎么处理
webRTC 和 WebAssembly 了解吗
websocket 和轮询的区别
postMessage 使用场景
cookie 的有效时间设置为 0 会怎么样
PUT 方法的优点，什么时候用 PUT
HTTP2 的改进点
HTTP3 使用的传输层协议是什么，怎么保证可靠性
HTTPS 为什么安全

算法题：

二叉树层级遍历
给一个目标值，输出该目标值在二叉树中的路径
有效括号
合并两个有序列表/有序数组

対面|3月と4月のフロントエンドインタビューの質問の記録

CSS関連：

JS関連：

フレームワーク関連：

打包工具相关：

网络相关：

算法题：

おすすめ