1: JavaScript

1. クロージャとは何ですか? メリットとデメリットは？デメリットをどう解決するか？

クロージャとは: JS では、内部関数は外部関数の変数にアクセスできますが、外部関数はメモリ関数の変数の特性を操作できません。この機能をクロージャと呼びます。

クロージャーの利点:

スコープを分離してプライベート変数を保護します。クロージャを使用するとローカル変数が存在しますが、それ以外の場合はすべてグローバル変数になります。
コールバックを使用して他の関数内で操作してみましょう。
変数はメモリ内に長期間留まり、メモリ回復メカニズムによってリサイクルされることはありません。つまり、変数のライフサイクルを延長することはありません。

クロージャの欠点: 内部関数は外部関数変数を参照し、内部関数はメモリを占有します。メモリが解放されない場合、多すぎるとメモリリークが発生しやすくなります。

解決策: アカウントを自動的にキャンセルできない場合は、時間内に手動で回復する必要があります。使用後、関数の参照には null が割り当てられます。

2.ディープコピー

1. ディープコピーとシャローコピーの違いは何ですか?

コピーのレベルは異なります。深いコピーとは、データの各層の変更が元のオブジェクトと新しいオブジェクトに影響を与えないことを意味します。浅いコピーでは、最初の層の属性の変更のみが相互に影響しません。ディープデータの変更も相互に影響します。

浅いコピー: Object.assign
ディープコピー: JSON.stringify および JSON.parse

2. JSON の stringify および parse 処理の欠点は何ですか?

オブジェクト内の属性が関数または未定義の場合、処理後に除外されます。
属性値がオブジェクトの場合、コンストラクターによって生成されたインスタンスオブジェクトはそのオブジェクトを破棄しますconstructor。

3、$.extend()

jqueyのextendメソッドを利用するとディープコピーだけでなくディープマージも実現できます。具体的な使い方

ディープコピー: $.extend({},targetObject) // targetObject はコピーされるオブジェクトです

Deep merge: $.extend(true,{},targetObject1,targetObject2) // 2 つのオブジェクトを深くマージして、新しいオブジェクトを返すことができます

3. 空のオブジェクトをどのように判断するか? データ型を区別するにはどうすればよいですか?

空のオブジェクトを判定する

1. JSON の stringify と parse を使用して文字列に変換し、「{}」と比較します。
2. ES6 を使用して、Object.keys(targetObject) の戻り値配列の長さが 0 であるかどうかを判断します。
3. ES5 を使用して、Object.getOwnPropertyNames(targetObject) によって返された配列の長さが 0 であるかどうかを判断します。

データ型を区別する

let a = [1,2]
Object.prototype.toString.call(a)  // '[object Array]'

4. この方向を変えるにはどうすればよいですか? 違い？

電話/申し込み

let a = {
    name: 'sunq',
    fn:function(action){
        console.log(this.name + ' love ' + action);
    }
}
let b = {name:'sunLi'}

// 正常的this指向
a.fn('basketball');   // sunq love basketball
// 改变this指向，并体现call与apply的区别
a.fn.apply(b,['football']); // sunLi love football
a.fn.call(b,'football'); // sunLi love football

// call 和 apply 区别: call 和 apply 都是可以改变this 指向的问题, call 方法中传递参数要求一
// 个 一个传递参数。 但是apply 方法要求传递参数是一个数组形式。

練る

// 还是上面的示例，bind也可以实现call和apply的效果。
// bind的不同之处在于bind会返回一个新的函数。如果需要传参，需要再调用该函数并传参
a.fn.bind(b)('piano'); // sunLi love piano

5. サンドボックス分離を行うにはどうすればよいですか?

iframe、変数分離を使用することで実現できます。

6. ブラウザのストレージ、それらの違いは何ですか?

localStorage: 永続ストレージ、キーと値のペアで保存、ストレージスペース 5M
sessionStorage: タブ/ブラウザを閉じるとクリアされます
Cookie: リクエストが送信されると、有効期限を設定することで削除されます。
セッション: サーバー側に保存されます

localStorage/sessionStorage は window のプロパティ、cookie は document のメソッドです

7. 一般的に使用される配列メソッドは何ですか?

元の配列を変更します: プッシュ、ポップ、シフト、シフト解除、ソート、スプライス、リバース
元のグループを変更しないでください: concat、join、map、forEach、filter、slice

スライスとスプライスの違いは？

スライススライスの意味は、受信した開始添え字と終了添え字に従って範囲配列を取得することです。
splice は、入力パラメータの数に応じて削除および挿入操作を実装し、元の配列を直接操作できます。最初のパラメータは開始添字、2 番目は削除の数、3 番目は追加されるデータです。

配列の重みをフィルタリングするにはどうすればよいですか?

8. Dom イベントフローの順序は何ですか? イベント委任とは何ですか?

ページ上の要素をクリックすると、要素はドキュメントの下からレイヤーごとにキャプチャされます。次に、上向きに泡立ち、層ごとに刺激を与えます。

イベントデリゲーションは親要素にイベントを書き込むことであり、e.targetはイベントを取得する際の最小の要素、つまり選択された要素となります。したがって、選択した要素を e.target に従って操作できます。この方法では、イベントを各子要素にバインドする必要がなくなり、コードがより簡潔になります。

9. プロトタイプチェーンについて理解していますか?

jsはプロトタイプチェーンのシミュレーションによりオブジェクト指向を実現しており、例えばコンストラクタをインスタンス化することで各オブジェクトに独自の排他的なプロパティを実装したり、クラスのプロトタイプにメソッドを代入することで全オブジェクトに共通のメソッドとなります。各インスタンス化では、プロトタイプチェーンにメソッドが割り当てられなくなりました。

10. 手ぶれ補正とスロットリングの違いは何ですか?

違い: アンチシェイクは最後のイベントの後にのみトリガー機能を実行しますが、スロットルはイベントの頻度に関係なく、指定された期間内にイベント機能がトリガーされることを保証します。

手ぶれ補正：

原理は、タイマーを維持し、多くの同一の操作を 1 つに結合することです。関数は遅延後にトリガーされると規定されており、それより前に関数がトリガーされた場合は、前のタイミングがキャンセルされ、タイミングが再開されます。トリガーできるのは最後の操作のみです。例: リアルタイム検索の入力は、常に入力されていると送信されません。

let input = document.querySelector("input");
let time = null;//time用来控制事件的触发

input.addEventListener('input',function(){
   //防抖语句，把以前的定时删除，只执行最后一次
   if(time !== null){
     clearTimeout(time);
   }
   time = setTimeout(() => {
     console.log(this.value);//业务实现语句，这里的this指向的是input
   },500)
 })

スロットリング:

原理は、イベントをトリガーする特定の時間に達したかどうかを判断することです。関数は、一定期間に 1 回のみトリガーできます。例: 指定時間内に複数回トリガーすることは無効です

    //节流
    function throttle(fn, time) {//连续触发事件  规定的时间
        let flag = false;
        return function () {
            //使用标识判断是否在规定的时间内重复触发了函数，没有就触发，有就不触发
            if (!flag) {//不为假时 执行以下
                fn();//触发事件
                flag = true;//为真
                setTimeout(() => {//超时调用（在规定的时间内只执行一次）
                    flag = false;
                }, time);
            }
        }
    }
  
    mybtn.onclick = throttle(btn, 3000);//单击事件   节流(btn,3s时间)

2: HTML

1. 再描画と再配置 (リフロー/リファクタリング/オーバーロード) とは何ですか? 最適化するにはどうすればよいですか?

スタイルの調整により、フォントの色や背景色の調整などの再描画が発生します。
Dom の変更により、位置の変更、要素の幅や高さの調整などの再配置が発生します。

テーブル行などの DOM への循環挿入は避けてください。js サイクルで複数の dom を生成し、一度に挿入できます。

2. HTML5 の新機能は何ですか?

ローカルストレージ (localStorage、sessionStorage など)
ヘッダー、フッター、ナビゲーションなどのセマンティックタグによりコード構造が明確になり、SEO に役立ちます
キャンバス
SVG
Web ワーカーは、メインスレッドと対話できる、メインスレッドの外側に別のスレッドを作成します。
ドラッグアンドドロップ機能

3: CSS

1. 上下左右の中央に幅が固定されていないポップアップボックスを実現するにはどうすればよいですか?

方法一：
.pop{
    width: 300px;
    height: 300px;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 1px solid red;
} 

方法二：
.chartLengend {   // 父元素
    width: 60px;
    height: 40px;
    position: relative;
    .line {       // 子元素
      width: 100%; 
      height: 3px;
      background-color: #DEA182;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 2px;
    }
}

2. 疑似クラスと疑似要素の違いは何ですか?

疑似クラスは基本的に、通常の CSS セレクターの不足を補うために使用されます。セレクターがない場合、追加のクラスを作成する必要があるため、疑似クラスと呼ばれます。

.class:last-child{}
.class:first-child{}

a:link    {color:green;}
a:visited {color:green;}
a:hover   {color:red;}
a:active  {color:yellow;}

疑似要素は基本的に、::before ::after などのコンテンツを含む仮想要素を作成します。もう1つの要素/ノードに相当するため、要素と呼ばれます

//  :before用于在某个元素之前插入某些内容。
//  :after用于在某个元素之后插入某些内容。
css
p:before{
    content:"Read this: ";
}

html:
<p>I live in Ducksburg</p>

页面展示：
Read this: I live in Ducksburg

F12看dom中：
before
Read this: I live in Ducksburg

四：Vue

1. シングルページアプリケーションとは何ですか? 長所と短所？欠点を補う方法

単一ページはルーティングを通じてエントリ DOM のコンテンツを変更し、アプリケーション全体には HTML ページが 1 つだけあります。

SPA の利点: 優れたユーザーエクスペリエンス、ページ切り替えなしで白い画面が表示されない。

SPA の欠点: 最初の画面の読み込みが遅いため、SEO には役に立たない

SPA 補償: ルートの圧縮と遅延読み込みによって最初の画面の遅さを緩和し、SSR サーバー側レンダリングを通じて SEO の問題を解決します。

2. コンポーネントと通信方法は何ですか?

2.1. コンポーネントとは何ですか?

コンポーネントは、名前が付けられた再利用可能な Vue インスタンスです。この場合は。このコンポーネントは、 new Vue によって作成された Vue ルートインスタンスのカスタム要素として使用できます。

コンポーネントの宣言

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {
   
   { count }} times.</button>'
})

コンポーネントの使用 (コンポーネントをカスタム要素として扱う)

<div id="components-demo">
  <button-counter></button-counter>
</div>

コンポーネントのインポート

new Vue({ el: '#components-demo' })

2.2. 親から子に値を渡す

Props は、コンポーネントに登録できるカスタム属性です。値が prop 属性に渡されると、その値はそのコンポーネントインスタンスのプロパティになります。タイトルをブログ投稿コンポーネントに渡すには、props オプションを使用して、コンポーネントが受け入れる props のリストにタイトルを含めることができます。

コンポーネント内でpropを宣言する

Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{
   
   { title }}</h3>'
})

親コンポーネントで呼び出され、プロパティに値を割り当て、コンポーネントに渡します。

<blog-post title="My journey with Vue"></blog-post>

2.3. 親コンポーネントが子コンポーネントのイベントをリッスンする

実際には、親コンポーネントでメソッドを宣言し、それを子コンポーネントにバインドすることによって行われます。子コンポーネント内のメソッドをトリガーする形式でパラメータを親コンポーネントに渡し、子から親に値を渡す効果を実現します。次のように

メソッドは親コンポーネントで宣言され、子コンポーネントにバインドされます。

<template>
<lineChart v-on:getQuotaVal="getQuotaVal"></lineChart>
</template>
<script>
 methods: {
    // 本事件用来监听折线图子组件，从子组件拿到指标数据
    getQuotaVal:function(obj){
      this.lineDateType = obj.lineDateType; // 这样父组件就拿到了，子组件的obj数据
    }
  },
</script>

サブコンポーネントトリガーメソッド

that.val = {};
that.$emit('getQuotaVal',that.val); // 将子组件的数据发送过去；

2.4. 兄弟コンポーネント間の相互作用

、vue.$bus.on および Emit メソッドを使用しますEventBus（事件总线）。

初期化 - グローバル定義。eventBus は、vue インスタンスのプロトタイプにバインドすることも、ウィンドウオブジェクトに直接バインドすることもできます。

//main.js
Vue.prototype.$EventBus = new Vue();

トリガーイベント

this.$EventBus.$emit('eventName', param1,param2,...)

イベントを聞く

this.$EventBus.$on('eventName', (param1,param2,...)=>{
    //需要执行的代码
})

リスナーイベントを削除する

リッスン中にイベントが繰り返しトリガーされないようにするには、通常、ページが破棄されたときにイベントリスナーを削除する必要があります。または、開発プロセス中、ホットアップデートにより、イベントが複数回バインドされ監視される場合があるため、この時点でイベント監視を削除する必要があります。

this.$EventBus.$off('eventName');

3. v-if と v-show の違いは何ですか?

v-if は Dom の存在を制御し、v-show はスタイルを制御します

4. vuexとは何ですか? ご利用手順について

Vuex は、すべてのコンポーネントの状態データを一元管理する状態管理ツールです。コンポーネントを均一に管理し、コンポーネントの状態をストアファイルに抽象化し、commit メソッドを通じてミューテーションで関数をトリガーしてコンポーネントのプロパティを変更します。

コンポーネントは計算された属性を使用してデータの変更を監視し、コンポーネントの表示と非表示を制御できます。ローディングコンポーネントの栗は次のように与えられます

読み込みコンポーネントでは、読み込みデータに応じてDOMの表示/非表示を制御します。

<template>
    <div class="cover" v-show="Loading">
        <div>加载中</div>
    </div>        
</template>

<script>
  import Store from '../../store'
  export default {
    name: "Loading",
    computed:{
      Loading(){
        return Store.state.Loading; 
      }
    }
  }
</script>

Vuex は状態を一元管理し、store という js ファイルを作成します

import Vuex from 'vuex';
Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    // Loading组件
    Loading:false,
  },
  mutations: {
    // Loading组件
    ChangeLoading:function (State,Value) {
      State.Loading = Value;
    }
  },
});

読み込みを使用するコンポーネントでこれを実行します

import Store from '../../store'
Store.commit("changeFooter",true);

vuexにおけるミューテーションとアクションの違いと使い方は？

5. vue watch と computed の違いは何ですか?

計算された

結果を計算して返します。これは、計算されたプロパティが変更された場合にのみトリガーされます (つまり、計算されたプロパティの結果はキャッシュされ、依存する応答プロパティが変更されない限り、再到達されます)。

上記の読み込みコンポーネントも計算された属性を使用します。

時計

特定の値を監視し、監視している値が変化したときに関連する操作を実行します。

計算との違いは、監視は値の変更を監視し、バックグラウンドインターフェイスの要求などの対応する操作を実行するのにより適していることです。Computed は、既存の値を計算して結果を返すのに適しています。単純なデータ型のリスニング:

data(){      
    return{        
        'first':2     
    }   
},   
 watch:{      
     first(){        
         console.log(this.first)    
    }   
 },

6. Vue の仮想 Dom とは何ですか? vue diff アルゴリズムについての理解について話してください。鍵の役割は？

7. Vue の双方向バインディング原則の理解について話しますか?

双方向バインディングは主に、データを変更するときに、DOM を操作せずにビューが自動的に更新されることを意味します。ビューを操作するときにバインドされるデータもそれに応じて変更されます。

データ => 表示

Vue はインスタンスを初期化するときに、Object.defineProperty メソッドを使用してすべてのデータにセッター関数を追加し、データの変更を監視します。データが変更されると、新しい仮想 DOM ツリーが生成され、古い仮想 DOM と比較され、比較結果に従って更新が必要なノードが検出されて更新されます。

表示 => データ

ビューからデータへの移行は比較的単純で、ビューが変更された後、oninput などのモニタリングをトリガーし、バインドされたメソッドでデータを変更します。

8. Vue の最初の画面を最適化するにはどうすればよいですか?

vue-chart に対応する echart などの軽量コンポーネントを使用する
Vue-cli は、gzip を使用したパッケージ圧縮とバックグラウンドアクセスを可能にします。
ルーティングの遅延ロード、下請け。
パッケージ化時にログを削除するように設定する
リソースが大きすぎる場合は、cdn モードを使用してインポートできますが、ローカルにパッケージ化されなくなります。

9. vue2 の欠点は何ですか? vue2.0配列内の特定の項目が変更されるが、ページは変更されないという状況を解決するにはどうすればよいですか?

欠点: データがオブジェクトに属性を直接追加している場合、またはデータが配列であり、添え字を付けることによって配列項目を操作する場合、ページは更新をトリガーできません。

理由: Vue はインスタンスの初期化時にプロパティのゲッター/セッター変換を実行するため、Vue がリアクティブに変換するにはプロパティがデータオブジェクトに存在する必要があります。配列に関しては、作成者は、push/pop/shift/unshift/splice/reverse/sort のメソッドを書き換えることで、対応するデータバインディングを実現します。残りの操作ではページの更新をトリガーできません。

対策: オブジェクトには Vue.$set(obj,key,value) を使用し、コンポーネントには this.$set(obj,key,value) を使用して新しいコンポーネントを追加し、Vue のプロパティを変更してそれに応じてビューを更新できます。配列は、Vue.$set(obj,key,value)、または作成者によって書き換えられたメソッドを通じて操作することもできます。

10. 非同期操作は作成された状態に配置されるべきですか?それともマウントされた状態に配置されるべきですか?

選択ドロップダウンボックスのドロップダウンコンテンツなど、初期化時に一部のデータをレンダリングする必要がある場合は、そのデータをマウントしてリクエストします。メリットは以下の通りです

ページの初期化が高速化され、ユーザーの待ち時間が短縮されます。
ssr は beforeMount およびマウントされたフック関数をサポートしていないため、これを created に置くと一貫性を保つのに役立ちます。

11. vue-router のフック機能とは何ですか?

コンポーネントの内部フック: beforeRouterEnter()、beforeRouterLeave、beforeRouterUpdate

12. ページにジャンプするにはどうすればよいですか? ページ間でパラメータを渡すにはどうすればよいですか?

ルーターリンクラベルジャンプ
以下のようにルートがジャンプし、ついでにパラメータも渡します。次のように

this.$router.push({
    path: '/url',
    query: {
        par:parid
    }
})

パラメータを受け入れる

var parid = this.$route.query.par;

13. vue サブコンポーネントのライフサイクルは何ですか? 子要素はいつマウントされますか?

親: beforeCreate は最初に親要素を初期化します。

親: 作成された親要素はデータをマウントします

親: beforeMounte 親要素が dom のマウントを開始し、子コンポーネントが tpl で検出されます。

子: beforeCeate サブコンポーネントがデータのマウントを開始する

子: 作成された子要素データが正常にマウントされました

子: beforeMount 子要素が dom のマウントを開始します

子: マウントされた子要素の dom マウントの終了

親: マウント済み親要素の dom マウントが終了しました

親: beforeUpdate 以下は dom イベントフローと同様に始まります

子：beforeUpdate

子：updated

父：updated

父：beforeDestory

子：beforeDestory

子：destroyed

父：destoryed

親要素が dom をマウントすると、子要素の読み込みが開始されます。子要素が dom のロードを完了すると、親要素は dom のマウントを終了します。後者は dom イベントフローに似ています。

14. vue のインポートとノードの require の違いは何ですか?

JS は、commonjs と ES6 という 2 つのモジュール化方法をサポートしています。

commonjs は、nodejs がモジュールを同期的にロードするために使用されます。ES6 のインポートは、スタックしないようにモジュールを非同期的に読み込みます。

Nodejs の新しいバージョンではインポートの使用もサポートされていますが、ファイル拡張子を .mjs に変更するか、package.json の type フィールドを module に設定する必要があります。

5：ES6

1. arrow 機能と es5 機能の違いは何ですか?

アロー関数のこの点は固定で、通常のこの点は可変です

let a = {
    name: 'sunq',
    fn:function(action){
        console.log(this.name + ' love ' + action);
    }
}
let b = {name:'sunLi'}

// 正常的this指向调用他的对象
a.fn('basketball');   // sunq love basketball
// 改变this指向
a.fn.apply(b,['football']); // sunLi love football

// 如果将a对象的fn函数改成箭头函数，this.name会是undefined
// 箭头函数的this指向不会改变，且总是指向函数定义生效时所在的对象。

コンストラクターとして使用したり、アロー関数のコマンドと一緒に使用したりすることはできませんnew。それ以外の場合は、エラーがスローされます。

var Person = function(name){
    this.name = name;
}
let sunq = new Person('sq'); // {name: 'sq'}

var Person = (name) => {
    this.name = name;
}
let sunq = new Person('sq'); // 报错 Person is not a constructor

argumentsオブジェクトがありません
コマンドは使用できないyieldため、アロー関数をジェネレーター関数として使用することはできません。

2. 非同期対話を解決するために ES6 が提供する新しい方法は何ですか? 違い？

Promise、Generate、async\await

3. マクロタスクとマイクロタスクとは何ですか? 実行命令？

4. 最初に 2 つのインターフェイスを並行してリクエストし、次に 3 番目のインターフェイスをリクエストした後、どのように対処すればよいですか?

Promise.all() メソッドを使用して、2 つの Promise を all メソッドに渡し、非同期の結果を取得して、3 番目の Promise をリクエストします。

文法はよくわかるのですが、面接官に聞かれると実際の場面と結びつかないのです。

5. jsのデータ型

文字列番号 null 未定義のブールオブジェクト bigInt シンボル

6. いくつかの新しい ES6 アレイのメソッドの詳細について話す

マップインスタンスメソッド。forEach に似ていますが、新しい配列を返します。

find および findIndex インスタンスメソッドを使用し、匿名関数を渡し、修飾された項目または添え字を返します。

... 展開演算子の基本的な機能は、配列をカンマで区切られた一連のパラメータに変換することです。

7. for in と for of の違い

for in はオブジェクトの走査に適しており、配列を走査すると添字が取得されます
for of は配列の走査に適しており、配列を走査すると配列の項目が直接取得されます。for of はイテレータインターフェイスを使用して型のみをトラバースできます。

8. 複数のデータリクエストを順番に実行するにはどうすればよいですか?

Promise の then メソッドを使用するか、複数の Promise を作成し、async で await を使用して順番に実行します。

9. プロキシとdefinePropertyの理解の違いは何ですか?

プロキシはすべてのプロパティのインターセプトを直接設定し、defineProperty は指定された設定のみを設定します
プロキシがインターセプトされた後、Proxy インスタンスを使用して呼び出す必要があり、defineProperty は元のオブジェクトを直接使用できます。

// es6的proxy
let obj = {name:1,sex:2}
let p = new Proxy(obj,{
    get:(value,key)=>{
        return 'sq的'+obj[key]
    }
});
p.name // sq的1
p.sex // sq的2

// es5的代理
let newObj = {name:1,sex:2}
Object.defineProperty(newObj,'name',{
    get:function(val){  //defineProperty中get函数没有入参
        return 'sq的' + val
    }
})
newObj.name  // sq的undefined
newObj.sex // 2

10. 約束の原則について話しますか?

六：ElementUI

1. スタイルを変更する必要がある場合はどうすればよいですか?

別のスタイルシートの紹介、!重要な内容を書く
スタイルの浸透

2. 継承を通じて element-ui コンポーネントの機能を拡張するにはどうすればよいですか?

element-uiコンポーネントの機能を継承により拡張する

7: JQuery

1. 同じ cl の下の最後の li を取得するにはどうすればよいですか?

$("#id").children().eq(3).remove();

// 获取多个class中的某一个
$(".className").eq(n).attr("class") // 可行
$(".className")[n].attr("class") // 不可行

2. window.load と $(document).ready() の違いは何ですか? 実行順序は？

window.onload実行する前に、画像を含むページ内のすべての要素が読み込まれるまで待つ必要があります。
$(document).ready()DOM 構造が描画された後、読み込みが完了するまで待たずに実行されます。通常は次のように略されます$()

概要:ready イベントは、load イベントがロードされる前に完了します。

3. クリックイベントをバインドするにはどうすればよいですか?

// 方式一
$("#id").on('click',function(){});
// 方式二
$("#id").click(function(){});
// 方式三
$("#id").bind("click",function(){});

4. Jquery ではどのようなアニメーションが一般的に使用されますか?

8: Git の使用

1. どのような文がよく使われますか?

プル、コミット、プッシュ、リセット、マージ、ログ、ブランチ、スタッシュ

スタッシュの使い方は？

git stash -m 'xxx'
git スタッシュポップ

2. バージョンのロールバックステートメント? ソフトとハードの違いは何ですか？

git restart --ソフトのバージョン番号

git restart --ハードバージョン番号

ソフトはバックオフしますが、コードの変更は引き続きローカルに保存されます。Hard はローカルの変更を削除し、このバージョンの痕跡を完全に消去します。詳細

3. ブランチを統合する際の注意点は？

独自のブランチをターゲットブランチにマージする前に、ターゲットブランチを独自のブランチにマージして競合を解決し、その後、独自のブランチをターゲットブランチにマージし直すことをお勧めします。

4. 支店管理をどのように行うか?

9: アジャイル開発

1. アジャイル開発とは何ですか?

個人的な理解では、アジャイル開発とは、大きな要件を複数の独立した小さな要件に分割することです。それぞれの小さな要件を独立して開発、テスト、起動することができ、システム全体を段階的に完成させることができます。各バージョンのサイクルは、2 週間や 4 週間など、比較的短い場合があります。

たとえば、企業が巨大なプラットフォームを開発および保守する必要がある場合、プラットフォームを複数の企業に委託することがあります。上記の方法で並行して開発を行えば、工期を大幅に短縮できます。

各バージョンを迅速かつスムーズにオンラインにするには、完璧な役割サポートとプロセス仕様が必要です。

2. アジャイル開発の利点は何ですか?

個人的な理解ですが、チームがもう少し大きくてスケジュールが厳しい場合、バージョンの品質を秩序ある方法で確保するには効果的なプロセスが必要です。

たとえば、チームが同時に 3 つの要件を受け取り、各要件が複数のフロントエンド開発者とバックエンド開発者に配布されるとします。バージョンやプロジェクトの責任者として、全員のコードの品質、完成の進捗状況、プロセスの追跡、リスク回避をどのように管理するかは、実際には難しいです。

要件が通れば、要件の明確化、スキーム設計、設計レビュー、要件デリバリー、バージョンスケジューリング/レビュー、開発部門、バージョン開発、テストケースレビュー、社内テスト、コードレビュー、グレースケールトライアル＆テスト、バージョンリリース、業務受諾待ちプロセス全体が間違いを犯す可能性を効果的に減らすことができるからです。後の段階で責任者を見つけたり、各リンクの問題点をまとめたりするのにも便利で、チームの作業効率が向上し、配信がどんどん安定していきます。

10: オープンソースプロジェクト

一部の企業の面接要項に記載されており、オープンソースプロジェクトを維持していて星が50個ある人が優遇されます。

私は通常、管理/クライアント/サーバーを備えた個人 Web サイトを管理しています: sunq のブログ

面接中に何も言うことがないときは、恥ずかしさを和らげるためにそれについて話すことができます。

ブログのコードはすべてオープンソースです:ソースコード Github アドレス

イレブン：ネットワーク関連

1. http と https の違いは何ですか?

HTTP クリアテキスト送信、データは暗号化されず、セキュリティが低いですが、HTTPS (SSL+HTTP) データ送信プロセスは暗号化され、セキュリティはより優れています。
HTTPSプロトコルを利用するにはCA（Certificate Authority、電子証明書認証局）に証明書を申請する必要がありますが、一般に無料の証明書は少なく、一定の料金が必要となります。認証局（Symantec、Comodo、GoDaddy、GlobalSign など）
HTTP ページの応答速度は HTTPS よりも高速です。これは主に、HTTP では接続の確立に TCP スリーウェイハンドシェイクが使用され、クライアントとサーバーは 3 つのパケットを交換する必要があるのに対し、HTTPS では SSL ハンドシェイクに必要な 9 パケットが追加されるためです。 TCP の 3 つのパケットなので、合計 12 個のパッケージがあります。
httpとhttpsでは接続方法もポートも全く異なり、前者は80、後者は443です。
HTTPS は実際には SSL/TLS 上に構築された HTTP プロトコルであるため、HTTPS を比較すると、HTTP よりも多くのサーバーリソースが消費されます。

2. 一般的なステータスコード

200: 正常に返されました
304: Web ページは変更されておらず、キャッシュされており、再リクエストされていません
404: 要求されたリソースは利用できません
500内部サーバーエラー
503: サーバーがタイムアウトしました

12: webpack

1. 依存関係と devDependency の違い

--save をインストールすると、-dev は devDependency に配置され、--save は依存関係に配置されます。

開発環境で使用されるパッケージは、eslint や vue-cli-serve などの devDependency にインストールされます。

依存関係にインストールされるパッケージは、vue、element、vant など、運用環境と開発環境の両方で使用する必要があるパッケージです。

devDependency の依存モジュールは実稼働環境のパッケージにパックされません。

13: ページの最適化

1. 特定のページの読み込みが遅いのですが、どの方向から問題を分析して解決すればよいでしょうか?

従来のページ

まず、インターフェイスが遅いのか、ページが遅いのかを判断します。インターフェイスが遅い場合は、バックエンドが最適化されます。

フロントエンドページの読み込みが遅い場合は、画像などのリソースが大きすぎることが原因であるかどうかを確認し、画像を形式や容量が異なるものに置き換えてみてください。それが何らかのデータ処理によるものであるかどうかを特定するには時間がかかります。あるいは、DOM をループで操作するかどうかは、js が dom を生成し、それをバッチで挿入します。

ページが直接スタックしている場合は、メモリリークが発生しているかどうかを分析する必要があります。たとえば、大画面ディスプレイのスケジュールされた更新が停止する場合、トラブルシューティングのアイデアは次のようになります。

Chrome のタスクマネージャーを使用してページを操作し、メモリ使用量の変化を観察します。どの操作が特定され、どのコード部分がメモリ使用量の急増を引き起こしているのか。

js にはキャッシュを直接解放する構文がないため、ブラウザのガベージコレクションメカニズムによってのみ自動的にクリーンアップできます。私たちがしなければならないのは、時間内に不要な変数を空にすることです。

ビッグデータのループインスタンス化後に変数が時間内に空になるかどうかに特に注意してください。タイマーなどのクロージャメソッドでメモリリークが発生していないか、マップをループで描画する際に前のマップデータをクリアするかどうかなど。

単一ページのアプリケーション

一般的に、単一のページは特定のページの読み込みが遅いということはなく、最初の画面が読み込まれるときに白い画面に長時間集中するのが一般的です。加工方法は上記を参考にして下さい。

2. キャッシュを使用する

一部のインターフェイスは、ページを開くたびにリクエストする必要がなく、Cookie をタイミングに使用できます。一定期間は再取得を行わないでください。
一部のデータは初期化中に 1 回ロードでき、Cookie によってタイミングを設定でき、一定期間内にリクエストは必要ありません。
一部のデータはローカルストレージに保存でき、入力はデフォルトで埋められ、キャッシュは更新された場合にのみ書き換えられます。これは単なるユーザーエクスペリエンスの向上です

14: Node.js

1. どのプラグイン (高速ミドルウェア) を使用しましたか?

Cors は Express のクロスドメイン問題を解決します
body-parser は投稿データを解析します
mongoClient mongodb 公式 Node.js ドライバー
暗号化は署名の暗号化と追加に使用されます
Nodemailer は電子メールの送信に使用されます

2. mongodb と mysql の違いは何ですか?

mongodbはドキュメント型の非リレーショナルデータベース、mysqlはリレーショナルデータベースです。
mongodb はデータを json 形式で保存します。フィールドは自由に追加できます。mysql フィールドは事前に決定する必要があります
MySQL の複数のテーブルは外部キーを介してのみ関係を確立できます。MySQL は複数の層にネストしたり、分割して関連付けたりできます。

2023 年のフロントエンド面接の質問の概要