ホームページ > 記事 > ウェブフロントエンド > 最新のフロントエンド筆記試験問題の概要

最新のフロントエンド筆記試験問題の概要

php中世界最好的语言オリジナル: 2017-11-18 16:59:082072ブラウズ

多くの友人がフロントエンドの筆記試験の質問を求めているのを見て、あなたのために面接の質問をいくつか集めました。これらはすべて 2017 年の最新の質問です。あなたのスキル向上に役立つことを願っています。また、働きたい会社に就職できることを願っています。

この記事では、最新の 2017 年フロントエンド筆記試験問題をより詳細に収集し、分析しています。皆さんの参考に共有してください。詳細は次のとおりです:

1. ページ上の 2 つの div がブラウザ全体をカバーするようにします。左側の div は常に 100 ピクセルであり、右側の div はブラウザのサイズに応じて変化します (たとえば、ブラウザは 500、右側のdivは400、ブラウズコンテナは900、右側のdivは800）、おおよそのCSSコードをメモしてください。

1. flex

//html
<div class=&#39;box&#39;><div class=&#39;left&#39;></div> <div class=&#39;right&#39;></div></div>
//css
.box {
    width: 400px;
    height: 100px;
    display: flex;
    flex-direction: row;
    align-items: center;
    border: 1px solid #c3c3c3;
}
.left {
    flex-basis：100px;
    -webkit-flex-basis: 100px;
    /* Safari 6.1+ */
    background-color: red;
    height: 100%;
}
.right {
    background-color: blue;
    flex-grow: 1;
}

2. フローティングレイアウト

<div id="left">Left sidebar</div>
<div id="content">Main Content</div>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
#left {
    float: left;
    width: 220px;
    background-color: green;
}
#content {
    background-color: orange;
    margin-left: 220px;
    /*==等于左边栏宽度==*/
}
</style>

2. 多ければ多いほど良い、いくつかのフロントエンドパフォーマンス最適化方法を書き留めてください

1.デプロイ前、画像圧縮、コード圧縮

3. JS コード構造を最適化し、冗長なコードを削減します

4. http リクエストを削減し、HTTP キャッシュを適切に設定します

5. 静的リソースキャッシュを高速化するために使用します

7. 画像の読み込みの遅延

3. URLを入力してページの読み込みが完了し、ページが表示されるまでのプロセスでは何が起こっていますか？ (プロセスは詳細であればあるほど良いです)

アドレスを入力します

1. ブラウザはドメイン名の IP アドレスを検索します

2. このステップには、次のような DNS の特定の検索プロセスが含まれます。ブラウザキャッシュ -> システムキャッシュ -> ルーターキャッシュ...

3. ブラウザが Web サーバーに HTTP リクエストを送信します

4. サーバーの永続的なリダイレクト応答 (http://example.com から http: //www.example.com)

5. ブラウザはリダイレクトアドレスを追跡します

6. サーバーは HTTP 応答を返します

8. ブラウザは HTML を表示します

ブラウザは HTML に埋め込まれたリソース (画像、音声、ビデオ、CSS、JS など) を取得するリクエストを送信します

10. ブラウザは非同期リクエストを送信します

4 つの制限について簡単に説明してください。ページアクセスクッキー

クロスドメインの問題

set HttpOnly

5. ブラウザの再描画とリフロー、および dom 操作によって引き起こされるリフローを改善できる方法について説明します

1. className. スタイルを動的に変更する場合は、cssText

// 不好的写法
var left = 1;
var top = 1;
el.style.left = left + "px";
el.style.top = top + "px"; // 比较好的写法
el.className += " className1";
// 比较好的写法
el.style.cssText += ";
left: " + left + "px;
top: " + top + "px;";

を使用します。 2. 操作対象の要素を「オフライン処理」し、処理後にまとめて更新します

a) DocumentFragmentを使用してキャッシュ操作を実行します。リフローと再描画をトリガーする

b) display:none テクノロジーを使用し、2 つのリフローと再描画のみをトリガーします

c) cloneNode(true または false) と replaceChild テクノロジーを使用して 1 つのリフローと再描画をトリガーします

6. Vue ライフサイクルフック

1.beforcreate

2.created

3.beformount

4.mounted

5.beforeUpdate

6.updated

7.actived

8.deatived

9 .beforeDestroy

10.destroyed

7. jsonp

を変更することによるクロスドメインリクエスト

3. クロスドメインには window.name を使用します

4. HTML5 で新しく導入された window.postMessage メソッドを使用して、ドメイン間でデータを送信します (つまり、67 はサポートしていません)

5. CORS では、サーバーがヘッダー: Access-Control-Allow-Origin。

6. nginx リバースプロキシのこの方法はめったに言及されませんが、ターゲットサーバーの協力を必要としませんが、リクエストを転送するためにトランジット nginx サーバーを構築する必要があります

8. フロントエンドエンジニアリングを理解する

開発仕様

モジュール開発

コンポーネント開発

コンポーネントウェアハウス

パフォーマンスの最適化

プロジェクトのデプロイメント

開発プロセス

開発ツール

9、JS ディープコピー方法

1. jq の $.extend(true, target, obj) を使用します

2.newobj = Object.create(sourceObj), // しかし、これには問題があります。newobj の変更はsourceobj には影響しませんが、sourceobj の変更はnewObj

3.newobj = JSON.parse(JSON.stringify(sourceObj))

10. js デザインパターン

一般に、デザインパターンは 3 つのカテゴリに分類されます:

クリエイティブパターン、合計 5 つ: ファクトリメソッドパターン、
抽象ファクトリパターン

、シングルトンパターン、

ビルダーパターン

、プロトタイプパターン。

アダプターモード

、デコレーターモード、エージェントモード、アピアランスモード、ブリッジモード、コンビネーションモード、フライウェイトモードの合計 7 つの構造モードがあります。

行動パターン、合計11: 戦略パターン、テンプレートメソッドパターン、

オブザーバーパターン、反復サブパターン、責任連鎖パターン、コマンドパターン、メモパターン、状態パターン、訪問者パターン、調停者パターン

11. 画像プレビュー

<input type="file" name="file" onchange="showPreview(this)" />
<img id="portrait" src="" width="70" height="75">
function showPreview(source) {
  var file = source.files[0];
  if(window.FileReader) {
      var fr = new FileReader();
      fr.onloadend = function(e) {
        document.getElementById("portrait").src = e.target.result;
      };
      fr.readAsDataURL(file);
  }
}

12. 多次元配列の平坦化

1. 古い方法

var result = []
function unfold(arr){
     for(var i=0;i< arr.length;i++){
      if(typeof arr[i]=="object" && arr[i].length>1) {
       unfold(arr[i]);
     } else {        
       result.push(arr[i]);
     }
  }
}
var arr = [1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];
unfold(arr)

2、使用tostring

var c=[1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];
var b = c.toString().split(&#39;,&#39;)

3、使用es6的reduce函数

var arr=[1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];
const flatten = arr => arr.reduce((a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []);
var result = flatten(arr)

十三、iframe有那些缺点？

iframe会阻塞主页面的Onload事件；

搜索引擎的检索程序无法解读这种页面，不利于SEO;

iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题。

以上就是我收集的前端笔试题以及答案，所述对大家有所帮助。

最新のフロントエンド筆記試験問題の概要

関連記事