フロントエンドのインタビュー（4）要約記事の中で最も完全なセット

その他 2019-09-13 17:00:16 訪問数: null 
インタビューに注意してください。
特にWebフロントエンド技術として、約3分で、最も適切な、短すぎる、長すぎるではないではない自分自身を紹介
インタビューの態様は、ポイントの多くを言って、私は学習、プロジェクトの実践、本の未来の計画から回し
3自己紹介のWebフロントエンドのインタビューを書き留めます。

 出典：https://www.yinxiangit.com

フロントエンドの開発者インタビューは、知識の包括的なコレクションを概説します：

 

HTML + CSS：
レイアウト、ボックスモデル、優先順位セレクタと使用、HTML5、CSS3、モバイル端末適応：Web標準、コアブラウザの違い、互換性、ハック、CSSの基本を理解します

 

JavaScriptの：
データ型、オブジェクト指向、継承、クロージャ、プラグイン、スコープ、クロスドメイン、プロトタイプチェーン、モジュラー、カスタムイベント、メモリリーク、イベントメカニズム、非同期コールバックローディングテンプレートエンジン、Nodejs、JSON、AJAX、等。

 

その他の知識：
HTTP、安全で、定期的に、最適化、再建、3つのフレーム、チームワーク、保守性、SEO、UED、アーキテクチャ、キャリアの応答、モバイル側の理解、フロントエンド


フロントエンドエンジニアとして、関係なく、作業年間の長さの知識ポイントを把握する必要があります。

1、DOM構造-存在してもよく、任意の2つのノード間のノード間の関係を移動する方法。
2、DOM操作-ように、追加、削除、移動、コピー、作成、およびノードを検索し、どのようにします。
3、イベント- IEと標準DOMイベントモデルとの違いだけでなく、イベントを使用する方法について説明します。
4、XMLHttpRequestが-これはエラーを検出する方法を、完全なGETリクエストを実行する方法を、どのようなものです。
5、厳密モードと混合モード-ポイントが何であるかを区別これら二つのモデルを誘発する方法。
図6に示すように、ボックスモデル-マージン、パディングと境界との間の関係のボックスモデル、およびIE8ブラウザの次のバージョンの
ブロックレベル要素とインライン要素7、 - CSSでそれらを制御する方法、およびどのように合理的彼らが使用する
要素を浮動、8 -それらを使用する方法を、彼らはどのようにこれらの問題を解決するために、問題としています。
9は、HTMLとの両方XHTML--違いは何ですか、あなたが使用して理由を言っている1だと思います。
10、JSON -効果、使用、設計構造。

 

 

HTML（インタビュー）

 DOCTYPEの役割？strictモードとプロミスキャスモードを区別するには？それらの意味は何ですか？

1、で、正面に位置<！DOCTYPE>宣言文書  < 前HTML>タグ。これは、この仕様書を解決するために、文書の種類、パーサブラウザに指示します。

ブラウザがサポートしているの2は、strictモードと操作のJSレイアウトモードでは最高水準に実行されます。

図3は、プロミスキャスモードでは、緩やかなページは、後方互換性のある方法を表示します。サイトは動作しません防ぐために、古いブラウザの挙動をシミュレートします。

図4は、DOCTYPEが存在しないか、正しくフォーマットは、プロミスキャスモードに提示文書をもたらします。

 

インライン要素は何ですか？ブロックレベル要素があるのですか？空の（空）の要素は、これらのですか？

スパンデフォルト; 1、CSSの仕様、各表示要素の属性を有し、素子の種類を決定し、各表示素子は、デフォルトの表示属性値DIV「ブロック」、「ブロックレベル」要素として、デフォルト値を有しています表示属性値「インライン」、「行」要素。

図2に示すように、線要素を有する：ABスパンIMG入力が強い選択（強調トーン）ブロックレベル要素を有する：DD H1 H2 H3 H4のDT DIV ULオールのLi DLを... P

図3は、空の要素を周知します。

<br> <hr> <img> <input> <link> <meta>

少しは知られています：

<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

リンクと@importの違いは？

1、リンクが属するXHTMLタグを、および@ インポートCSSが提供されます。

2は、ページがロードされると、リンクにもロードされ、@ インポートページをロードする前に読み込みが完了するまで、CSSが待機する引用しました。

図3は、インポートのみIE5以上に認識し、XHTMLリンクタグ、互換性の問題されます。

4、@上記再スタイルのリンクの正しい方法権利のインポートの重み。

どのようなブラウザカーネルですか？

* IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera内核原为Presto，现为Blink；

一般的な互換性の問題？

1、PNG24ビット画像は、溶液が作られた背景IE6ブラウザ上で表示されますPNG8。

2、ブラウザのデフォルトのマージンと異なるパディング、ソリューションは、グローバルを追加することです

{* マージン：0; パディング：0;}団結します。

3、二国間のバグからIE6：ブロック属性タグフロート、横行があるマージン、

ディスプレイは、IE6での余白の設定よりも大きくなっています。

4、フローティングから製造ダブルすなわち  #box {  フロート：左;  幅：10pxの;  マージン：0  0  0  100pxに;}

図5に示すように、このような状況の下でIE 20が生成する距離PXを、溶液がされる添加--_ラベルスタイル制御フロートに表示：インライン;属性列に変換しました。（_このシンボルは唯一のIE6は認識します）

6、プログレッシブの識別方法が、徐々に地元住民からは除外します。

7は、まず、巧妙な「9」マークの使用は、IEのブラウザはすべてのケースから分離します。次に、再び「+」を使用することであろうIE8とIE7、ようIE6は、分離されたIE8は、独立して確認されて。

どのような新しいHTML5は、それらの要素を削除する必要がありますか？新しいラベルHTML5のブラウザの互換性の問題に対処するには？HTMLとHTML5を区別する方法？

1、HTML5は現在、主に画像、場所、ストレージ、マルチタスキングおよび他の特徴について増加させるために、SGMLのサブセットではありません。

2、絵画のキャンバス

 メディア再生のためのビデオとオーディオの要素

 データの長期保存のためのlocalStorageローカルのオフラインストレージのデータが失われることはありませんした後、ブラウザを閉じています。

 ブラウザを閉じるときのsessionStorageデータは自動的に削除されます

 このような物品、フッタ、ヘッダ、NAV、部として良好コンテンツ要素のセマンティクス

 フォームコントロール、カレンダー、日付、時刻、メール、URL、検索

 新技術webworker、websockt、ジオロケーション

図3に示すように、要素を削除

 純粋なパフォーマンス要素：BASEFONT、大きな、中央、フォント、S、ストライキ、TT、U;

 要素は負の可用性に影響：フレーム、フレームセット、NOFRAMESを。

4、新しいHTML5タグをサポートしています。

document.createElement法により製造IE8 / IE7 / IE6のサポートラベルは、あなたがこれらの新しいブラウザがHTML5のタグをサポートするために、この機能を使用することができ、

新しいラベルをサポートするために、ブラウザの後、ラベルが、デフォルトのスタイルを追加する必要があります。

5は、当然のことながら、最良の方法は、直接、成熟したフレームワークを使用することで、最もよく使われるの枠組みはhtml5shimです

<!--[if lt IE 9]>  <scriptsrc="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <![endif]-->

意味理解？

  1. 右のラベルに正しいことを行います！

  2. htmlの意味構造は、ページのコンテンツを作るために、ブラウザ、検索エンジンの解決に簡単です。

  3. また、CCSスタイルのケースなしで1つの文書フォーマットで利用できる、読みやすいです。

  4. 検索エンジンのクローラは、SEOを支援する各キーワードの文脈と重いの重量を決定するためのマーカーに依存しています。

  5. だから、サイトをブロックする可能性が高いWebサイトのソースコードを読み、読みやすいメンテナンスが理解しました。

 

HTML5のオフラインストレージ？

データが失われることはありません後のlocalStorageデータの長期保存には、ブラウザが閉じられています。

ブラウザを閉じるときのsessionStorageデータは自動的に削除されます。

 

これらの欠点をiFrameに？

  1. IFRAMEは、メインページのロード時イベントをブロックします。

  2. IFRAMEは、接続プールとメインページを共有し、そしてブラウザが同じドメインを接続するに限定され、それはページの並列負荷に影響を与えます。

  3. これら二つの欠点はインラインフレームを使用する前に検討する必要があります。あなたは、好ましくはjavascriptを経由、インラインフレームを使用する必要がある場合

  4. この2つの問題をバイパスすることができるように、動的に、src属性はiframeに値を追加します。

  5.  

クッキー、のsessionStorageとのlocalStorageの違いを説明して？

  1. クッキーは、ブラウザとサーバーとの間で前後に合格しました。sessionStorageとないのlocalStorage

  2. localStorage大きいのsessionStorageと収納スペース。

  3. sessionStorageとlocalStorageをより豊富に使用するインタフェース。

  4. sessionStorageのlocalStorageと独立した収納スペース。

 

CSS（インタビュー）

 

1、CSSボックスモデルについて教えて？

  • 2、IEのボックスモデル、W3C標準のボックスモデルがありますが、コンテンツ部分は、IEの境界線とpadingが含まれています。
  • ボックスモデル：内容（コンテンツ）、充填（詰め物）、ボーダー（マージン）、フレーム（枠線）

2、CSS3の新機能がありますか？

  1. ：CSS3は、コーナー（ボーダーRADIUS丸め、シャドー（影ボックス- ：8px）10pxの）を、
  2. テキストにエフェクトを追加する（テキストシャドウ）、直線勾配（グラジエント）、回転（変換）
  3. 変換：回転（9deg）スケール（0.85、0.90）は（翻訳0PX、-30px）スキュー（-9deg、は0deg）; //回転、スケーリング、ポジショニング、傾き
  4. さらに追加CSSセレクタとより多くの背景RGBA

 

3.なぜあなたは、CSSスタイルを初期化したいん。

オンになっていない場合は、ブラウザの互換性の問題なので、別のブラウザでは、いくつかのラベルのデフォルト値は、異なる常にブラウザの表示の違いになりますCSSページの初期化。

もちろん、スタイルが初期化されますSEOのいくつかの影響力を持っているが、魚やクマの足の両方を持つことはできませんが、場合に最小限の影響を初期化しようとしました。

最も簡単な方法は、初期化することである：* { パディング：  0;  マージン：  0;}（推奨します）

もちろん、スタイルが初期化されますSEOのいくつかの影響力を持っているが、魚やクマの足の両方を持つことはできませんが、場合に最小限の影響を初期化しようとしました。

4、自分の役割を示す、値の表示を示しています。位置値、相対および絶対位置の原点は？

  1. 1。
  2. ブロック型の表示素子と同じブロック。
  3. なしデフォルト。表示素子列の型と同じ。
  4. ディスプレイが、ブロック型表示素子と同一の内容と同じ行内のインラインブロック要素。
  5. 表示素子として、対象ブロックのリスト項目の種類、およびスタイルタグのリストを追加します。
  6. 2。
  7. 絶対の
  8. 生成絶対位置決め要素に対して  第一の親要素は、静的位置の外側に配置されています。
  10. 固定（旧IEをサポートしていません）
  11. ブラウザウィンドウの位置に対する要素の絶対位置を生成します。
  13. 相対
  14. その通常の位置に相対的な位置、相対位置決め要素を生成します。
  15. 静的デフォルト。いいえ位置決め要素は、通常のストリームに表示されません
  16. （上、下、無視  左、  右のz-index文を）。
  17. 親要素の位置プロパティから継承された指定された値を継承します。
 

5、どのようにフルスクリーン「製品」という言葉のレイアウトを設計するには？

簡単な方法：
  • 100％上記のdiv幅
  • ラインまたはインラインを変更しないように、フロートと、それぞれ二つの広いDIV 50％以下。
 

 
 

 
 

ジャバスクリプト（インタビュー）
 

 
 

1、JSデータの種類がありますか？typeof演算子の結果は、データの種類は何ですか？
 

データ型は、2つの部分から成ります：
 

基本データ型：不定、ヌル、ブール値、数値、および文字列
 

参考データ型：配列、オブジェクト
 

オペレータの種類typeof演算の結果：
 

数、文字列、ブール値、オブジェクト、関数、未定義
 

2.null、未定義の違いは？
 

「ヌル」の値は、NULLオブジェクトが定義されている意味します。
 

未定義のは、彼らがこの値を持っていなかったと述べました。
 

3.変数が定義されていないか分析
 

typeof演算bianliang ==」未定義」
 

4.変数（この質問typeofを使用しない）場合はARR配列がどのように分析
 

編曲instanceofはアレイ
 

5.イベントのデリゲートとは何ですか
 

イベントは、イベントを処理しません自体をターゲットが、その親や祖先要素、あるいはルート要素（ドキュメント）に対処するためのタスクを委託するイベントのデリゲート。
 

2つの非常に重要な方法の下で6説明JSONオブジェクト
 

JSONにJSON.parse（）// JSONオブジェクトの文字列
 

JSON.stringify（）// JSONオブジェクトを文字列に
 

7.関数getRandomNumber（STARTNUM、endNum）を書くendNumにSTARTNUM間の任意の乱数を除去
 

function getRandomNumber(startNum,endNum){
        var endRand = endNum - startNum + 1;
        //0~1中间的16位数字
        var randNum = Math.random();
        //随机取出来0~9之间的任意一个数字
        randNum = Math.floor(randNum * endRand);
        return randNum+startNum;
}
 
 

8.文字列の前後にスペースを削除するための一般的な機能を書きますか？
 

String.prototype.strim = function(){
return this.replace(/(^s|s$)/g,””);}
 

その他の問題（インタビュー）
 

1、ページへのURLを入力してから表示ページの読み込み完了は、どのようなプロセスが行われていますか？
 

查找浏览器缓存     
DNS解析、查找该域名对应的IP地址、重定向（301）、发出第二个GET请求    进行HTTP协议会话    客户端发送报头(请求报头)    
服务器回馈报头(响应报头)    html文档开始下载    文档树建立，根据标记请求所需指定MIME类型的文件    
文件显示浏览器这边做的工作大致分为以下几步： 加载：根据请求的URL进行域名解析，向服务器发起请求，接收文件（HTML、JS、CSS、图象等）。
解析：对加载到的资源（HTML、JS、CSS等）进行语法解析，建议相应的内部数据结构（比如HTML的DOM树，JS的（对象）属性表，CSS的样式规则等等）

 

 
 

2、HTTPステータスコードは、これらのですか？それはどういう意味を表しますか？
 

100-199 用于指定客户端应相应的某些动作。
200-299 用于表示请求成功。 
300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。 
400-499 用于指出客户端的错误。
400   语义有误，当前请求无法被服务器理解。
401   当前请求需要用户验证 
403  服务器已经理解请求，但是拒绝执行它。
500-599 用于支持服务器错误。 
503 – 服务不可用
 

 
 

3、定期的に識別番号を確認しますか？
 

1、//身份证正则表达式(15位)
isIDCard1=/^[1-9]d{7}((0d)|(1[0-2]))(([0|1|2]d)|3[0-1])d{3}$/;
2、//身份证正则表达式(18位)
isIDCard2=/^[1-9]d{5}[1-9]d{3}((0d)|(1[0-2]))(([0|1|2]d)|3[0-1])d{4}$/;
身份证正则合并：(^d{15})|(d17([0−9]|X))

 

図4に示すように、クロスドメインソリューションの概要
 

     
 
  1. 1：パディング（内側フィル）とJSONPの使用、すなわちJSON、名前が示唆する、それはボックスJSONを充填することです
    2.  
 
  2. 2：直接サーバ側クロスドメインリソースアクセスCORS（クロスオリジンリソース共有）に設けられ、設けられたリクエスト・ヘッダーヘッダーアクセス制御 - 許可原点は、指定されたデータ領域のために得ることができます
    3.  
 
  3. 3、：直接リクエスト絵
    4.  
 
  4. サブドメイン5を横切って、：クロスドメイン受信データwindow.nameによって、4にdocument.domainを変更することによって
    5.  
 
  5. 6：HTML5を使用して、クロスドメインのwindow.postMessage方法
    6.  

 

5、TCP / IPの4層のプロトコルアーキテクチャ？
 

上から下の順序に：
 

     
 
  1. 図1に示すように、アプリケーション層（FTPやTelnet、SMTP、RIP、NFS、DNS）
    2.  
 
  2. 図2に示すように、トランスポート層（TCP、UDP）
    3.  
 
  3. 3、インターネット層（IP、ICMP、ARP、RARP）
    4.  
 
  4. 図4に示すように、ネットワークインタフェース層
    5.  

 

 
 

五層のプロトコルアーキテクチャ？
 

     
 
  1. アプリケーション層
    2.  
 
  2. トランスポート層
    3.  
 
  3. ネットワーク層
    4.  
 
  4. データリンク層
    5.  
 
  5. 物理層
    6.  

 

 
 

OSI 7層アーキテクチャ？
 

     
 
  1. アプリケーション層
    2.  
 
  2. プレゼンテーション層
    3.  
 
  3. セッション層
    4.  
 
  4. トランスポート層
    5.  
 
  5. ネットワーク層
    6.  
 
  6. データリンク層
    7.  
 
  7. 物理層
    8.  

 

 
 

 
 

ブラウザの生成元ポリシー：
 

ブラウザのセキュリティが「同一生成元ポリシー」（同一生成元ポリシー）の基礎となるものです。いわゆる「相同な」とは、「3つの同一」とは：
 

     
 
  • 同じプロトコル
    •  
 
  • 同じドメイン
    •  
 
  • 同じポート
    •  


                    

                        
おすすめ

                        

                            
                            
                        

                    

                    
転載: www.cnblogs.com/bingerger/p/11516829.html

                    

                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                    

                    

                

            

            


                

                    

                        
                        
                        
                        
                    

                    

                        

                            

                                おすすめ
                            

                            

                        

                    

                    

                        

                        
                        
                    

                


                

                    

                        

                            

                                ランキング
                            

                            

                        

                    

                    

                        

                            

                                uni.request在接口状态码403等还是走success
                            

                        

                        

                            

                                Springboot は mybatisplus を統合しており、ページング クエリによって返される Page オブジェクトの合計は常に 0 です。
                            

                        

                        

                            

                                System.InvalidOperationExceptionが：「BuildWindowCoreは、子ウィンドウのハンドル搭乗を返しません。」
                            

                        

                        

                            

                                [Example 08] IPD system advancement: version naming rules for version management
                            

                        

                        

                            

                                カスタム NavigationBar -- UIView による描画
                            

                        

                        

                            

                                データとデータの移行を復元します（個人的なメモ、無用リーダー）
                            

                        

                        

                            

                                4. 2次元配列で検索する
                            

                        

                        

                            

                                vim的私人订制
                            

                        

                        

                            

                                Flutterのカスタムルーティング切り替えアニメーション
                            

                        

                        

                            

                                Javaコンテナの方法の簡単なアプリケーションのArrayList
                            

                        

                    

                

                

                    

                        

                            

                                アーカイブ
                            

                            

                                もっと
                            

                            

                        

                    

                    

                        

                            2024-05-12(27)
                        

                        

                            2024-05-11(31)
                        

                        

                            2024-05-10(33)
                        

                        

                            2024-05-09(30)
                        

                        

                            2024-05-08(18)
                        

                        

                            2024-05-07(34)
                        

                        

                            2024-05-06(6)
                        

                        

                            2024-05-05(0)
                        

                        

                            2024-05-04(18)
                        

                        

                            2024-05-03(8)
                        

                    

                


            


            
        

    





    

        

            
コードワールド

            
© 2018 codetd.com