Webフロントエンド古典面の質問は何？どのように高い給与への道ができますか？Webフロントエンドは、近年では熱くなっている、多くの人はそうフロントエンド技術を学ぶための学習に投資してきた、高賃金の正面を見て、だけでなく、業界のフロントの開発の見通しを見ました。以下は、私たちはWebフロントエンド仕上げ古典的な顔の質問、あなたがより良い仕事を見つける助け、高給の前に道路の一部をまとめたもの。
1、CSS、JSのコード圧縮、およびコードCDNホスティング、写真の統合。
（1）CSS、JSコード圧縮：
これは、グッの一気-uglify、グッ-縮小化-CSS完了モジュールに適用されてもよい。UglifyJsPlugin WebPACKの圧縮がプラグを完了するために適用されてもよいです。
（2）CDN：
コンテンツ配信ネットワーク（CDN）は、分散ストレージ、負荷分散、要求のリダイレクトネットワークおよびコンテンツ管理四つの要素を含む全体のシステムによる戦略的な展開です。主な機能は次のとおりです：ローカルキャッシュは、ミラーリングサービス、リモート加速、帯域幅の最適化を加速します。キーテクノロジー：コンテンツの公開、コンテンツルーティング、コンテンツスイッチング、パフォーマンス管理。コンサルティング主導のウェブサイトのCDNとサイト加速。CDNは、ドメインネームサーバをスピードアップするために加速されていません。訪問者の比較手動でCDNを選択して、ミラーサイトを訪問するサイトをミラーリングする必要はありません。サイトを使用してCDNをそのまま使用することができた後、CDNは、加速の効果を得ます。あなたがCDNのWebページまたは古いを通して見ることができた場合は、プッシュサービスURLを通じて解決することができ、新しいURLのページや画像がプッシュする必要はありません。使用動的なページは、ページや画像の高リアルタイム要求をキャッシュすることはできません。CDNは、gitのか、SVNを使用して管理することができます。
（3）画像の統合
サイトのウェブサイトのロード時間を短縮するための最も効果的な方法の1つは、HTTPリクエストを削減することです。これを達成するための効果的な方法は、1枚の画像にCSS Sprites--複数の画像を介して行われ、その後、位置にCSSを使用します。欠点は貧しい保守性です。あなたがBaiduのFISを使用することができます/ WebPACKの管理スプライトを自動化します。
2、どのようにコードWebPACKのサーバのアップロードとトランスコーディング・テストを使用するには？
（1）コードのアップロード：
あなたは、SFTP-WebPACKの-プラグインを使用することができますが、サブフォルダはエレガントではない、抽出されます。あなたは、達成するためにがぶ飲み+のWebPACKを使用することができます。
（2）テストトランス
WebPACKのアプリケーションES6コードをオンにするバベル、オープンdevtool：ブラウザのテストに「ソースマップ」。カルマのアプリケーションまたはモカは、ユニットテストを行います。
3、行項目プロセスとは何ですか？
（1）プロセス提言
- アナログラインの開発環境
ローカルリバースプロキシは、オンライン実環境を開発することができます。（Apacheは、nginxの、nodejsを達成することができます）
- 環境シミュレーションテストライン
環境シミュレーションテストラインが、実際には、データ試験機のための本当の必要性がある、毎日の条件を取らないようお勧めします、とオンラインデータの直接の使用は十分に測定されたが、唯一のテスト環境でのプログラムに行くの一部、条件付き乗ります最高の毎日。
- あなたも、テスト環境を調整することができます
あなたも、テスト環境は2種類に分かれて調整することができます。一つは、LANセグメント内の開発およびテストされ、ホストが直接ネットワークセグメントではなく結び付けることができ、企業内に配置された仮想試験機に割り当てられたそれぞれの人は、ネットワークへのアクセスを持って、直接布アップコードそれはすることができます。
- 自動化されたオンライン・システム
自動化されたオンラインシステムは、ジェンキンスを採用することができます。そうでない場合、あなたはオンラインのシステム自体をシンプルに構築することができ、原理はライン上のCDNに配布し、タグ、コールマークタイムスタンプ、および操作を行い、ラインたびに、最新のトランクまたはマスター上のすべてを抽出することです。タグ、タグへのロールバック、展開を演奏レーン2つのインターフェイス機能、。
- 開発プロセスの前後端のための
会社、ビルド、フレームに使用されるツールに基づいた開発プロセス。原理は、独立した開発を分散させたチューニングに接続することができるホストが存在する場合であっても、互いに干渉しません。
（2）プロセス単純に動作可能
- gitの管理、新しいブランチを作成するための新しい要件、ブランチ開発、トランクリリースを介したコード
- ラインシステム上で簡単に行くためにライン上で、前のセクションを参照してください
- グッで+ WebPACKの元のコードの開発にのみ当該分配システム、統合の鍵、ローカルに接続されています
- リバースプロキシWebPACKのサーバーを経由してローカル環境
- ローカル試験機、オートコンプリートビルド+プッシュ機能に基づいてのLinuxを設定
図4は、どのように管理を設計しますか？
gulp和Webpack
5、gitのよく使用するコマンド
ワークスペース：ワークスペース
インデックス/ステージ：ステージングエリア
リポジトリ：倉庫地区（またはローカル倉庫）
リモート：リモートリポジトリ
6、Webpack 和 gulp对比
Gulp 就是为了规范前端开发流程，实现前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等功能的一个前端自动化构建工具。说的形象点，“Gulp就像是一个产品的流水线，整个产品从无到有，都要受流水线的控制，在流水线上我们可以对产品进行管理。” 另外，Gulp是通过task对整个开发过程进行构建。
Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、AMD 模块、ES6 模块、CSS、图片、JSON、Coffeescript、LESS 等。
Gulp和Webpack功能实现对比：从基本概念、启动本地Server、sass/less预编译、模块化开发、文件合并与压缩、mock数据、版本控制、组件控制八个方面对Gulp和Webpack进行对比。
7、Webpack打包文件太大怎么办?
Webpack 把我们所有的文件都打包成一个 JS 文件，这样即使你是小项目，打包后的文件也会非常大。可以从去除不必要的插件，提取第三方库，代码压缩，代码分割，设置缓存几个方面着手优化。
8、不想让别人盗用你的图片，访问你的服务器资源该怎么处理?
目前常用的防盗链方法主要有两种：
(1)设置Referer：适合不想写代码的用户，也适合喜欢开发的用户
(2)签名URL：适合喜欢开发的用户
9、精灵图和base64如何选择?
css精灵，用于一些小的图标不是特别多，一个的体积也稍大，比如大于10K(这个没有严格的界定)。
base64，用于小图标体积较小(相对于css精灵)，多少都无所谓。字体图标，用于一些别人做好的图标库(也有少数自己去做的)用起来比较方便，他的图标只能用于单色，图标用只能于一种颜色。
10、WebPACKをどのようにサードパーティのライブラリの導入？
jQueryの例を見てみましょう：
エントリー：{
ページ： 'パス/に/ page.js'、
jqueryの： 'node_modules / jqueryの/ DIST / jquery.min.js'
}
新しいHtmlWebpackPlugin（{
ファイル名：「index.htmlを」
テンプレート：「index.htmlを」
ジェクト：真、
チャンク：[「jqueryの」、「ページ」] //スクリプトタグが順番に挿入
}）
10長いと題したWebフロントエンド面の質問が発生する前に。私たちは、小さなパートナーにもっと注意を払うことができます面接のWebフロントエンドのために、我々はいくつかの助けを持っていると思ってい、コレクションについて学ぶことができます。