フロントエンドのインタビューの中で最も完全なセット（2）

1.ウィル持っている特性の一部の閉鎖

A：クロージャは3つの機能を持っています：

1.函数嵌套函数
2.函数内部可以引用外部的参数和变量
3.参数和变量不会被垃圾回收机制回收

注意：閉鎖（closure）JSは難しい言語ですが、また、そのユニークな特性、多くの高度なアプリケーションでクロージャを達成するために頼らなければなりません。

 

ダウンロードリンク：https://www.yinxiangit.com

2、自分の長所と短所クロージャの定義

 

定義： 闭包 当一个函数的返回值是另外一个函数,而返回的那个函数如果调用了其父函数内部的变量,且返回的这个函数在外部被执行，就产生了闭包.闭包是一个环境，具体指的就是外部函数--高阶函数。说白了就是一个环境，能够读取其他函数内部的变量。本质上，闭包是将函数内部和函数外部连接起来的桥梁。

 

使用方法：1は、内部変数の関数を読み込み;.

          2.これらの変数の値は、メモリ内に残っていると、自動的に外側の関数呼び出しの後にクリアされていません。

 

利点：1：メモリ内の変数の長期存在;

 

           2：グローバル変数の汚染を避けるために、

 

           3：プライベートメンバがあります。

 

特徴：1：機能セット関数;

 

           2：内部関数は、外部のローカル変数またはパラメータの関数として使用することができます。

 

           3：変数またはパラメータは、GCのガベージコレクションメカニズムを回復していません。

 

短所：

 

永久メモリはメモリリークを引き起こす可能性があり、メモリ使用量不適切な使用が増加します

 

詳細：

（1）の閉鎖に起因するそれ以外の場合は、メモリリークにつながる可能性がIEでのパフォーマンスの問題のWebページが発生します、それは閉鎖を悪用されることができない、メモリの消費量が大きい場合には、変数の関数がメモリに格納されているようになります。ソリューションは、すべてのローカル変数が使用されていない削除する関数を終了する前に、あります。

 

（2）クロージャは、親関数は、内部変数の値を変更し、親の外に機能します。あなたはその私有財産（非公開の値）のような内部変数として、そのパブリックメソッド（パブリック・メソッド）の閉鎖を使用するオブジェクト（オブジェクト）として親関数を取るのであれば、あなたはないように注意しなければなりませんちょうど内部変数の親関数の値を変更します。

 

 

ジャバスクリプトの3、ガベージコレクションの原則

（1）におけるjavascript中央、オブジェクトがもはや参照されている場合、オブジェクトはされGC回収されない。 
（2）、2つのオブジェクトがお互いを参照する場合、代わりにされるの3で参照は、2つの参照お互いにオブジェクトは、再利用することができます。

 

 

図4は、4つの振っ戦略の3ウェイハンドシェイクTCP送信について話します

 

スリーウェイハンドシェイクTCP接続

1. まず、送信者に送信SYN看板の反対側にデータパケットを。
2. 受信後にリターンして、受信したSYN/ACK送達確認情報を伝える表示するパケットフラグ。
3. 最後に、送信側帯域が復路ACK「ハンドシェーク」端のパケットフラグ担当。
   いくつかのステージが不可解ハンドシェイク中に中断した場合、TCPプロトコルが再び同じ順序で同じデータパケットを送信します。

フォーウェイハンドシェイク（振る）TCP接続を切断

 

1. 最初の波：イニシアチブはクローズを送りFIN、それが閉じているアクティブ側パッシブ側へのデータ転送を停止するパッシブ近い側に伝えるために、正方形を閉じるためのイニシアチブを取るために、私はフィンパッケージに（もちろん、あなたのデータを与えることはありません作りました以前に送信されたデータ、対応する肯定応答メッセージACKを受信しない場合、依然として積極的に閉じた側がデータを再送）、しかし、この時間積極閉じ側がデータを受け入れることができます。
2. 第二波：パッシブシャットダウンが受信したFINパケット、送信ACK相手、受付番号の確認応答番号に+1（SYN同じFINシーケンス番号を占有します）。
3. 第三の波は：パッシブクローズを送信しFIN、データ転送の側を閉鎖するためのイニシアチブを取るために受動的に近い側を閉じるために、それがパーティーを閉じるためのイニシアチブを伝えるために、ですが、私はまた、上でデータを送信する、あなたがデータを送信与えることはありません。
4. 第四の波：イニシアチブが近い受信したFIN送信後にACKパッシブ側が閉じられ、受付番号+1のための確認応答番号これは、四の光波を完了する。

 

5、いくつかの方法でWebパフォーマンスの最適化

圧縮とパッケージングモジュール1のJavaScript 

そのうちの一つは、あなたがより速く起動時間を得ることができるということです 
一緒にパッケージ異なるモジュールをパッケージ化し、同じスクリプトファイルを置くために使用されているのを。以下、単一のファイルのHTTPリクエストを解析し、ロード時間を短縮することができます。一般的に、個々の梱包と圧縮の世話をすることができるツール。WebPACKのはそのうちの一つです。

2は、オンデマンドの負荷の資源 
需要や遅延ロードでロードされたリソース（特に写真）は、Webアプリケーションを使用すると、全体的に良いパフォーマンスを得るのを助けることができます。遅延ロードのイメージに使用されるページの数が多いために3つの重要な利点があります。

（より高速な読み込み時間のためにページの残りの部分を作るもの）サーバーへの同時要求の数を減らします

ブラウザのメモリ使用量（以下画像、少ないメモリ）を削減

サーバーの負荷を軽減

一般的な考え方は、画像をロードする直前にリソース（ビデオなど）必要な場合、そのような最初の表示、又はデンドロビウムが表示されるロードする場合など。あなたが密接な方法でないようにするには、この方法で、遅延ロード・ソリューションに関連している駅の設立以来、通常はプラグインや達成するために、他の拡張ライブラリの助けを必要としています。

 
図3は、キャッシュ 
頻繁にアクセスされる静的データを格納するためのキャッシュ・コンポーネントは、このデータが複数に応答して、またはより効率的な方法を要求することができるため、その後の要求を容易にします。Webアプリケーションが一緒に多くの取り外し可能な部品の組み合わせであるため、バッファの多くの部分は、アーキテクチャに存在することができます。例えば、バッファは、サーバとクライアントとの間の動的コンテンツに配置することができる、応答時間を改善すると同時に、公共リクエストサーバの負荷を軽減するために回避することができます。他のキャッシュがアクセスするいくつかのスクリプトのための共通のモードを最適化するために、コードの中に配置することができる、いくつかのキャッシュ犬小屋は、データベースの前に置くか、長いプロセスが実行されますがあります。

 
4、インデックスを使用してデータベースクエリを加速する 
あなたは、それは多くの時間がかかるデータベースの問題を解決する必要がある場合、それはデータベースを高速化する方法を見つけるための時間です。各データベースとデータ・モデルは、独自のトレードオフがあります。その上、データモデル、データベースの種類、具体的な実施計画、および：データベースの最適化は、あらゆる面でのテーマです。スピードはそれほど単純ではないかもしれません。インデックス：しかし、いくつかのデータベースのために役立つかもしれない提案があります。インデックスは、関連するデータが検索速度を向上させることができ、キーの内部マッピングされ、作成されたデータベースのデータ構造への高速アクセスであるプロセスです。ほとんどのデータベース・サポート・インデックスがヒット。インデックスは、リレーショナルデータベースを含む文書データベースに固有ではありません。その上で最も一般的なクエリはどのようなものがあり、または内のキー列検索を実行し、：あなたのクエリを最適化するためにインデックスを使用するには、アプリケーションのアクセスモードを調べる必要があります。

5、負荷分散 
nginxの+ tomactクラスタ、雪村を回避するための実用的なhaship負荷分散方式が失われました。 
負荷分散の使用は、直接tomcatディレクトリにアップロードされたファイルをアップロードしていないので、あなたはftpサーバを経由して、単一のファイルのアップロードに統合することができます

 

図6に示すように、移動端末の性能を最適化します

 

1、負荷最適化、（5が6をサポートした後に、Androidのサポート4 iOS版）を同時に携帯電話のブラウザが最初に同時にロードされるように要求するページの数を最小限にするために、4つの要求のための要求に応えるため、HTTPリクエストの数を減らす要求の数4以上ではありません。

2、画像の最適化圧縮画像、絵は、ほとんどのリソースの流れを占めるので、（判決の大きさに需要の前提の下で達成）を使用することが最も適切なフォーマットを選択するために彼を使用して回避しようと、右のサイズ、そして圧縮の知的ビューを使用しています同時に、コードによってオンデマンドで表示さSrcset。

図3は、CSSの最適化は、HTMLタグにスタイル属性を使用しないようにしてみてください。（HTMLタグ内のスタイルは、ページのレンダリングをブロックしますので）、CSSの表現の使用を避けます。（その高周波の実行、ときに、ページのスクロールやマウスを動かすので、彼らは、パフォーマンスの大幅な損失をもたらすであろう、実行されます）

図4に示すように、JS最適化された値は、計算された値へのすべての実行を回避するために、可変長のリストが格納されています。DOMの選択と計算キャッシュ、すべてのドムが再計算することを選択し回避。

5、GPUアクセラレーション：CSS次の属性GPUレンダリング、合理的な使用をトリガーする（CSS3トランジションは、CSS3 3Dは、不透明度、キャンバス、WebGLの、ビデオを変換します）。

 

注：これらのプロパティの過度の使用は、携帯電話は、過度の電力消費につながります

 

図遠位最適化：

 

 

CSS関連の問題

7、CSSのセレクタは何？何を継承することができます属性？どのように優先順位アルゴリズム？CSS3の新しい擬似クラスは、これらのですか？

1.id选择器（ # myid）  
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul > li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = "external"]）
9.伪类选择器（a: hover, li:nth-child）

 優先度： 

 ！重要> ID>クラス>インライン優先順位よりも重要ですが、idよりもインライン高いタグ      

    

 例では、新しい擬似クラスをCSS3：   

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 
p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 
p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。 
p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。 :enabled  :disabled 控制表单控件的禁用状态。  
:checked        单选框或复选框被选中。

  そこに新しいCSS3は何ですか？ 

css3实现圆角（border-radius），阴影（box-shadow）
css3实现圆角（border-radius），阴影（box-shadow） 
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜增加了更多的css选择器 多背景 rgba 在css3中唯一引入的伪元素是::selection. 媒体查询，多栏布局 border-image 

ボックスサイズ：CSS3ボックスモデル計算で追加しました。コンテンツ・ボックス（デフォルト）：ボックスモデルは、デフォルト値は、コンテンツ・ボックスで、新しい値はパディングボックスで、次のようにボーダー・ボックス、いくつかのボックスモデル計算要素の幅と高さの違いがあります 

CSS3ボックスのサイズ変更効果

設定するCSSボックスモデルは、標準モデルやモデルIEです。標準モデルの幅は、境界及びパディングIEを含むコンテンツのみ、二つのモデルを含みます

ボックスのサイズ変更プロパティは、3つの値のいずれかです。

1、コンテンツボックスは、デフォルト値、境界線とパディングの幅をカウントしていません

2、パディングボックス、計算幅にパディング

図3に示すように、境界ボックス、ボーダーの幅とパディングの計算に

 

8、フロントエンドのセキュリティの理解についての話、何を、どのように防ぐために、

フロントエンドのセキュリティ上の問題がXSSあり、CSRF攻撃は
XSSを：XSSを
使用する他のユーザーにページに悪意のあるコードにユーザーを可能にする、あなたは、単にjavascriptのコードインジェクションとして理解することができます。
XSSの防御：

エスケープ1、フィルタ入力と出力

使用を避けるために2、 eval、new Functionユーザの入力と確認された文字列無関係な場合を除き、など実行文字列を

3、使用cookieのhttpOnly性質に加え、このプロパティのcookieフィールドは、jsは読み書きができません

図4に示すように、使用してinnerHTML、document.writeデータがユーザによって入力された場合、そのオブジェクトキー文字を濾過し、エスケープする必要がある場合、

CSRF：クロスサイトリクエストフォージェリの
事実、提出行為のサイトの一部、ハッカーによって使用されるように、あなたがハッカーのウェブサイトを訪問したときに動作させるためには、他のサイト上で動作します
CSRFの防御：

検出するために、1、http referer同じドメイン名かどうか

ログイン避けるために2、session時間はクライアントに保存されています

図3に示すように、キーコードまたは使用することを要求するtoken機構を

他のいくつかのHTTPハイジャック攻撃、ハイジャックインタフェースの動作があります。

 

9、ES6、聞かせて、constの

 

聞かせて
LETが完璧VARあります

1、変数宣言はブロックレベルのスコープを持たせ、文はまだアップグレード機能を保持しますが、盲目的にアップグレードしないようにしましょう。

2、のは、グローバル変数はグローバルオブジェクトのプロパティではありません宣言してみましょう。しないことで、window.变量名アクセスの方法

以下のような形を図3に示すように、for (let x…)ループは各繰り返しであるx新しいバインディングを作成します

 

制御フローは、変数に到達すると、誤ったトリガする前に、変数がロードされ、そう使用される定義されたコードの行に達するまで4、変数宣言を聞かせ

 

CONSTは
定数値を定義し、再割り当てすることはできないが、値がオブジェクトである場合、オブジェクトは、プロパティ値に変更してもよいです

const OBJ = {"a":1, "b":2};OBJ.a = 3;OBJ = {};// 重新赋值，报错！console.log(OBJ.a); // 3

 

10、深いコピーと浅いコピー

 1.どのような深いコピーと浅いコピーである
浅いコピーのコピーが唯一のオブジェクトへのポインタではなく、オブジェクト自体のコピー、または古いものと新しいオブジェクトが（メモリ領域が孤立していない）同じメモリを共有しています。しかし、そうでない場合は、同一のオブジェクトを作成します深いコピー、元のオブジェクトを持つ新しいオブジェクトが共有されていないメモリ（メモリ領域分離）は、新しいオブジェクトは元のオブジェクトを変更しないで変更します。多層オブジェクトの浅いコピーのみのコピーで

 

シャローコピー例：

var Chinese = {　　nation:'中国'};var Doctor ={　　career:'工程师'}function extendCopy(p) {　　var c = {};　　for (var i in p) { 　　　　c[i] = p[i];　　}　　return c;}var Doctor = extendCopy(Chinese);Doctor.career = '工程师';alert(Doctor.nation); // 中国

ディープコピー例：

function deepCopy(p, c) {　 var c = c || {};　 for (var i in p) {　　　　if (typeof p[i] === 'object') {　　　　　　c[i] = (p[i].constructor === Array) ? [] : {};　　　　　　deepCopy(p[i], c[i]);　　　　} else {　　　　　　c[i] = p[i];　　　　}　 }　 return c;}

ディープコピー実装：

•     手動コピーモードは、上記のコードのように、不利です
•     私たちは、上記の機能と同じことを達成するのを助けることができObject.assign、ES6新機能。

• var obj1 = { a: 10, b: 20, c: 30 };var obj2 = Object.assign({}, obj1);obj2.b = 100;console.log(obj1);// { a: 10, b: 20, c: 30 } <-- 沒被改到console.log(obj2);// { a: 10, b: 100, c: 30 }

JSONは背中に回すために回します

文字列にオブジェクトとJSON.stringify、その後、新しいオブジェクトに変換した文字列JSON.parse。短所：JSONに変えることができない関数として使用できるようにオブジェクトだけはJSON形式に変換することができます。

• jqueryの、それは、$ .extendが深いコピーのために使用することができます提供してきました。

1. lodash、また利用可能_.cloneDeepは深いコピーに使用しました。
2. 再帰的な深いコピー

function clone( o ) {    var temp = {};    for( var k in o ) {        if( typeof o[ k ] == 'object' ){             temp[ k ] = clone( o[ k ] );