必要[辞書]フロントエンド高度なネットワークインフラ

IPアドレスを5つのクラスのTOP

ネットワークアドレス：ホストのネットワーク識別が配置されて、
ホストアドレス：識別するためのネットワーク内のホスト。

IPアドレスは、5つのカテゴリに分類されます。

1. 政府機関のために確保カテゴリ
2. クラスBは、中堅企業に割り当てられています
3. クラスCは、必要としている誰に割り当てられています
4. クラスDは、特別な目的のために使用されている。また、ラジオ演説を行うとして知られています
5. クラスEエスクロー

収容することができるアドレスの種類の数。TCP / IPノードの三種類のための前記クラスA、クラスB、およびクラスCのアドレスは、他の二つのクラスDおよびEは、特別な目的のために使用されます。

まず、あなたの予備的概念を与えるためにマップを使用します。

 

A. Aクラスの住所

最初のオクテットはネットワークセグメントアドレス、他のホストアドレス、必ずしも0最初の8つの最初の部分である
範囲：1.0.0.1-126.155.255.254、
プライベートアドレスと予約済みアドレス：
10.XXXはプライベートアドレス（いわゆるですプライベートアドレス）は、インターネット上で使用されていない、とローカルエリアネットワークアドレスに使用されています。
127.XXXは予約アドレス、使用サイクル試験です。

II。クラスBアドレス

最初のセクションとオクテットネットワークセグメントアドレスの第2オクテット、及びホストアドレス、特定のセグメント10の最初の8;
範囲：128.0.0.1-191.255.255.254。
プライベートアドレスと予約済みアドレス：
172.16.0.0-172.31.255.255がプライベートアドレスで
169.254.XXがアドレスを予約されています。あなたのIPアドレスは自動的にIPアドレスを取得し、されている場合は、ネットワーク上で利用可能なDHCPサーバーが見つかりません。あなたは1つのIPを取得します。

三。Cクラスアドレス

8つのネットワークアドレスの最初の3つのセクション、ホストアドレスの4バイトの全て、最初の8つの最初のセグメント110は一定です。
範囲：192.0.0.1-223.255.255.254。
プライベートアドレス：
192.168.xxのはプライベートアドレスです。

IV。クラスDアドレス

かかわらず、ネットワークとホストアドレスの、特定のセグメントの最初の8つの1110です。
範囲：224.0.0.1-239.255.255.254

ファイブ。Eクラスアドレス

かかわらず、ネットワークとホストアドレスの、最初のセグメントは、必ずしも最初の8つの11110です。
範囲：240.0.0.1-255.255.255.254

クロスドメインの原因と治療TOP

その理由は、クロスドメインによるものである元ポリシーのブラウザが決定しました。

元ポリシーは、他のソースからのリソースと対話するための方法を同じソースからロードされた文書やスクリプトを制限します。これは、潜在的に悪質なファイルを隔離するために使用される重要なセキュリティメカニズムです。

この引数は、いつものように、非常に公式、女神のようなああ、人はなぜ知りません。ドムクエリと同一生成元ポリシーの必要性を説明するための要求からインターフェイスの横。

インタフェース要求（全く同一生成元ポリシーを想定していません）

私たちは、シーンを見て：
1.あなたが開いてwww.taobao.com、あなたが追加したショッピングカートで購入する準備ができて、「JavaScriptの高度なプログラミングを。」
2.程度の報酬を、人はあなたにリンクが送信されている場合はwww.heiheihei.com、あなたの目が突然深刻となり、その後、ポイントの内側に躊躇しません。
3.あなたは非常にまともな、視聴しているwww.heiheihei.comコンテンツwww.heiheihei.comです無制限同一生成元ポリシー、存在しないため、アイドルではないwww.taobao.com要求を開始します！密かに、彼らはいくつかのことをやってやりたいものは何でも。

ドムクエリ（全く同一生成元ポリシーを想定していません）

1.月曜日の朝は、いつものように、あなたは通りから淘宝網、淘宝網の散歩を開くにはポイントが、今日上陸、なぜ今日、あなたは気にしないでください。
2.なぜそれに署名する必要がありますか？私は、これがすべてでは何もするこれを行うことが決定され、悪質な人、このランディングページであると仮定しますか？私は、次のコード・ページがあるとし

// HTML
<iframe name="taobaoo" src="www.taobaoo.com"></iframe>
// JS
// 由于没有同源策略的限制， Dom 可以直接拿到。
const iframe = window.frames['taobaoo'];
const account = iframe.document.getElementById('***')
const pw = iframe.document.getElementById('***') // 密码账号被偷走了 复制代码

上記2例から、我々は同一生成元ポリシーの予備的な理解を持って実際にセキュリティ上の同一生成元ポリシーにそれを言うためではなく、いくつかの危険を避けるが、同一生成元ポリシーは、基本的なブラウザのセキュリティ・メカニズムであると述べ、攻撃後に少しを向上させることができコスト。

クロスドメインソリューション

1. クロスドメインのJSONPにより、
2. document.domainを+ IFRAMEクロスドメイン
3. location.hash + IFRAME
4. window.name + IFRAMEクロスドメイン
5. クロスドメインのpostMessage
6. クロスオリジンリソース共有（CORS）
7. nginxのプロキシクロスドメイン
8. ドメイン間のミドルウェアエージェントをnodejs
9. ドメイン間でのWebSocketプロトコル

上記の方法は、私が話すように、いくつかを選ぶだろう

A、JSONP

JSONPの原理は、非常に単純で使用することがある<script>ラベルは、クロスドメインの脆弱性を制限するものではありません。<script>アクセスポイントアドレスにタグニーズを受信し、データ通信を必要とする場合、コールバック関数を提供します。JSONPの使い方は簡単で、互換性は良いですが、彼らは要求を取得した場合にのみ。

関数JSONP（URL、jsonpCallback、成功）{ 
  スクリプトましょう =のdocument.createElement（' スクリプト' ）
  script.src = URL 
  のスクリプトを。非同期 = 真
  script.type = ' テキスト/ javascriptの' 
  ウィンドウ[jsonpCallback] = 関数（データ）{ 
    成功 && 成功（データ）
  } 
  document.body.appendChild（スクリプト）
} 
JSONP（' HTTP：// XXX '、' コールバック' 、関数（値）{ 
  にconsole.log（値）
}）

二、CORS

CORSは、ブラウザとバックエンドのサポートを必要としています。自動的にCORSは、CORSが通信を達成通信する主要なブラウザは、バックエンドです。限りクロスドメインを達成するために、CORSのバックエンドの実装、など。設定するサーバがAccess-Control-Allow-OriginCORSを開くことができます。この属性は、ワイルドカードを設定した場合、すべてのサイトがリソースにアクセスできることを示し、ドメインがリソースにアクセスできるかを示します。

三、nginxのプロキシクロスドメイン

nginxのプロキシクロスドメインの使用を逆転します。

仮想ホストの設定

{サーバー
    聞く8080 ;＃リスニングポート
    SERVER_NAME   192.168。1.1 ;＃のconfigureアクセスドメイン
    ルート   /データ/ toor;＃サイトのルート
    error_page 502  404 /ページ/ 404 の.html;＃エラーページの
    LOCATION ^〜/ API / {＃を使用/ API / エージェントproxy_pass値
        proxy_pass HTTP：// 192.168.20.1:8080;＃プロキシアプリケーションサーバのアドレスHTTP 
    } 
}

リバースプロキシ機能を実現することができ、簡易な構成上記のコードをコピーして、クロスドメインの問題が解決されます。

あなたは、クロスドメインのトラブルに起因する問題を解決するための設定を行うproxyTableにVueの中で、このプロパティを使用することができます。以下のような構成は以下のとおりです。

proxyTable：{
     ' / Weixin ' ：{ 
        ターゲット：' http://192.168.48.11:8100/ '、// ドメインインターフェース 
        セキュア：falseに、       // このパラメータを設定する場合は、HTTPSインターフェイスが必要 
        changeOrigin：trueにし、// インタフェースクロスドメイン場合、パラメータは必要
        pathRewriteを：{
             ' ^ / Weixin '：'' 
        } 
    } 
}、

フォワードプロキシとリバースプロキシTOP

フォワードプロキシ

1. クライアントを表します。
2. 実際の顧客を非表示、送信およびクライアントの要求を受け、実サーバのクライアントが見えません。
3. ローカルエリアネットワーク内のすべてのユーザーは、フォワードプロキシを行うには、サーバ、HTTPサーバが要求する責任があるかもしれ。
4. サーバーとの通信手段は、フォワードプロキシサーバを行っています。

リバースプロキシ

1. プロキシサーバー。
2. 真のサーバーを非表示、送信し、サーバへのリクエストを受け取ると、クライアントへの実サーバは表示されません。
3. サーバのロードバランシングは、忙しいサーバへのユーザの要求を配布します。
4. ユーザーがドメイン名解決サーバIPサーバーの負荷分散である場合に得られる、ユーザーが均衡し、サーバが直接通信読み込むことを意味し、;

一般的

1. これらは、中間層サーバーおよびクライアントとして使用されています
2. 私たちは、ウェブ攻撃を防ぐために、内部ネットワークのセキュリティを強化することができます
3. 私たちは、キャッシュメカニズムを行うことができます

具体的な用途としては、私がこの記事を書いて見ることができます話すエージェントの後に[前]と彼の妻辞書棚ぼたを

CDNもたらすパフォーマンスの最適化TOP

CDNは、コンテンツ配信ネットワーク、すなわち、コンテンツ配信ネットワークの略です。CDNのコンテンツ配信ネットワークは、ネットワークの上に構築されたエッジサーバーを中心に展開頼って、プラットフォーム、コンテンツ配信、スケジュールやその他の機能モジュールの中心を通ってロードバランシング、ユーザーは、あなたが近く必要なものを取得するネットワークの輻輳を軽減し、ユーザーのアクセスを改善することができます応答速度とヒット率。CDNメインコンテンツ保管・流通技術のキーテクノロジー。

例えば

ショッピングの淘宝網
淘宝網で買い物を、ただ一つの場所で最も個々の売り手の配信、江蘇省、浙江省の外とは遅くレシートよりも思えます。

Jingdongはショッピング
と我々はJingdongはで購入自己の製品、それは意志、領収書の私達の場所で、私たちに最も近い国全体で最速配信倉庫を探して、江蘇省、浙江省、内モンゴル、チベットや新疆では、我々かどうか、領収書の私達の時間が大幅に削減されます。Jingdongのは、CDNと同様のシステムを、倉庫確立します。

CDNの利点

1. CDNは、アクセスレイテンシを大幅に低減されるクロス地域とオペレータ間のアクセスの問題を解決するためにノードと
2. CDNエッジノードのほとんどは要求を完了し、CDNは、発信局の負荷を軽減し、ストリーミング効果を果たしました。

アクセス速度が勝つために必要な魔法の武器の電気の供給業者のウェブサイトの一つです。

CDNの動作モード

カリフォルニア、フランス、インド、その他（リアル慎重Aロット）での3箇所で例えば、我々SHEINマスタールートサーバー深セン、中国、CDNサーバ。

ノーCDNサーバ

だから、6000万世界中のユーザー要求されたリソースは、中国深センの部屋から送られてきた、カリフォルニアの遅延で、このようなユーザーは、彼女は洗練された外観をアップ塗装家を開くのに十分であり得ます。（PS：深センフロントエンドフロントエンド開発チームの移動、需要缶プライベートの手紙私はそこにあります）

そこCDNサーバ

このとき、ユーザはまだイブニングドレスのパーティーを購入するSHEINカリフォルニア州の計画を開きたいと考えています。彼女はドレッサーに移動していない光景が、ホームは、その後、彼女は幸せなショッピングを開設されています。

これは、CDNサーバーからです。

カリフォルニアCDNサーバは、ルートノードは、リソースが来ましたコピーします。そして、我々は一度更新されますソースに戻っCDNノード10分のリソースへのメカニズムを持っています。したがって、ユーザーがリソースを要求すると、バック深センルートサーバ要求への元へ行くのではありません。ユーザーがネットワーク遅延の結果として、送信元にリソースを要求するとき、これは表示されません。

CDNは、2つのコア・ポイントを有している：一つはキャッシュされ、一方はバックソースになります。

キーテクノロジー

1. コンテンツの公開：それはインデックス化、キャッシング、分流、マルチキャスト（マルチキャスト）技術によるものである、コンテンツが掲載さやでユーザのリモートサービスポイント（POP）に最も近いに配信します。
2. 概要ルート：それは技術、コンテンツルーターのリダイレクト（DNS）、リモートPOP、複数のユーザの要求にバランスのメカニズム、そのユーザの要求に応答していること、最新のコンテンツソースをネットワーク負荷分散の整合性です。
3. コンテンツスイッチング：これは、サーバーの可用性のユーザのコンテンツとコンテキストの利用可能性に基づいており、アプリケーション層の切り替えを使用してPOPにおけるキャッシュサーバ、ストリーム分割、リダイレクト（ICP、WCCP）技術は、インテリジェントトラフィック負荷のバランスを取ります。
4. 性能管理：ITネットワークコンポーネントステータス情報が取得され、内部および外部の監視システムを介して、コンテンツ配信終了性能測定（例えば、パケットロス、待ち時間、平均帯域幅は、開始時間、フレームレートなど）を最適なネットワークを確保するためであります運転状態。

CDNは、多くの場合、フロントエンドの知識を理解する必要はありませんと考えられています。しかし、我々は、すべてのフロントエンドエンジニアリング・ソフトウェア・エンジニアの最初のものです。何かについての詳細を知るためには間違いなく便利です。

CDN＆静的リソース

静的リソース自体は、したがって、静的リソースローディング速度は常にフロントエンドの性能の重要な指標であり、大流量特性を引き受けるために、訪問の高い周波数を有します。CDN静的リソースは、スピードの重要な手段です。

淘宝

 

Jingdongは

 

ナゲッツ

私たちは容易にあなたがリクエストが来るCDNサーバーからそれをすべてを見ることができ、静的リソースを開くために、ウェブサイトのポイントを開きます。ベストプラクティス「静的リソースはCDNを行く」見ることができます。

 

CDN & Cookie

Cookie 是紧跟域名的。同一个域名下的所有请求，都会携带相同的 Cookie。

但是如果我们只是请求一张图片，我们在请求中还要携带一个笨重的 Cookie 来回的跑，Cookie 中的信息和图片又是没有关联的，这种情况就很让人头痛了。Cookie 虽然小，但是随着请求的越来越多，这种的不必要的 Cookie 带来的开销将是无法想象的……

静态资源往往并不需要 Cookie 携带什么认证信息。把静态资源和主页面置于不同的域名下，就可以完美地避免请求中携带不必要的 Cookie。

看起来是一个不起眼的小细节，但带来的效用却是惊人的。电商网站静态资源的流量之庞大，如果没把这个多余的 Cookie 拿下来，不仅用户体验会大打折扣，每年因性能浪费导致的开销也会非常之高。

HTTP 强缓存&协商缓存 TOP

缓存是一种保存资源副本并在下次请求时直接使用该副本的技术。 当 web 缓存发现请求的资源已经被存储，它会拦截请求，返回该资源的拷贝，而不会去源服务器重新下载。
这样带来的好处是缓解服务器端压力，提升性能(获取资源的耗时更短了)。对于网站来说，缓存是达到高性能的重要组成部分。
缓存大致可归为两类：私有缓存与共享缓存。
共享缓存能够被多个用户使用；
私有缓存只能用于单独用户；

HTTP 协议主要是通过请求头当中的一些字段来和服务器进行通信，从而采用不同的缓存策略。
HTTP 通过缓存将服务器资源的副本保留一段时间，这段时间称为新鲜度限值。这在一段时间内请求相同资源不会再通过服务器。
HTTP 协议中 Cache-Control 和 Expires 可以用来设置新鲜度的限值。

强缓存 ( Cache-Control 和 Expires )

强缓存主要是采用响应头中的 Cache-Control 和 Expires 两个字段进行控制的。

其中 Expires 是 HTTP 1.0 中定义的，它指定了一个绝对的过期时期。而 Cache-Control 是 HTTP 1.1 时出现的缓存控制字段。

Cache-Control:max-age 定义了一个最大使用期。 就是从第一次生成文档到缓存不再生效的合法生存日期。由于Expires是HTTP1.0时代的产物，因此设计之初就存在着一些缺陷，如果本地时间和服务器时间相差太大，就会导致缓存错乱。

这两个字段同时使用的时候 Cache-Control 的优先级会更高一点。

这两个字段的效果是类似的，客户端都会通过对比本地时间和服务器返回的生存时间来检测缓存是否可用。如果缓存没有超出它的生存时间，客户端就会直接采用本地的缓存。如果生存日期已经过了，这个缓存也就宣告失效。接着客户端将再次与服务器进行通信来验证这个缓存是否需要更新。

Cache-Control 通用消息头字段被用于在 http 请求和响应中通过指定指令来实现缓存机制。

可缓存性

1. public：响应可以被任何对象（客户端、代理服务器等）缓存
2. private：只能被单个用户缓存，不能作为共享缓存
3. no-cache：使用缓存副本之前，需要将请求提交给原始服务器进行验证，验证通过才可以使用
4. only-if-cached：客户端只接受已缓存的响应，并且不向原始服务器检查是否有更新的拷贝

到期

1. max-age=<seconds>：缓存存储的最大周期，超过这个时间缓存被认为过期(单位秒)。与 Expires 相反，时间是相对于请求的时间
2. s-maxage=<seconds>：覆盖 max-age 或者 Expires 头，但是仅适用于共享缓存(比如各个代理)，并且私有缓存中它被忽略
3. max-stale[=<seconds>]：表明客户端愿意接收一个已经过期的资源。可选的设置一个时间(单位秒)，表示响应不能超过的过时时间
4. min-fresh=<seconds>：表示客户端希望在指定的时间内获取最新的响应

重新验证和重新加载

1. must-revalidate：缓存必须在使用之前验证旧资源的状态，并且不可使用过期资源。
2. proxy-revalidate：与 must-revalidate 作用相同，但它仅适用于共享缓存（例如代理），并被私有缓存忽略

其他

1. no-store：彻底得禁用缓冲，本地和代理服务器都不缓冲，每次都从服务器获取
2. no-transform：不得对资源进行转换或转变。Content-Encoding, Content-Range, Content-Type 等 HTTP 头不能由代理修改。

协商缓存 ( Last-Modified 和 Etag )

协商缓存机制下，浏览器需要向服务器去询问缓存的相关信息，进而判断是重新发起请求、下载完整的响应，还是从本地获取缓存的资源。
如果服务端提示缓存资源未改动（Not Modified），资源会被重定向到浏览器缓存，这种情况下网络请求对应的状态码是 304。

Last-Modified 和 If-Modified-Since

基于资源在服务器修改时间的验证缓存过期机制

当客户端再次请求该资源的时候，会在其请求头上附带上 If-Modified-Since 字段，值就是第一次获取请求资源时响应头中返回的 Last-Modified 值。如果资源未过期，命中缓存，服务器就直接返回 304 状态码，客户端直接使用本地的资源。否则，服务器重新发送响应资源。从而保证资源的有效性。

Etag 和 If-None-Match

基于服务资源校验码的验证缓存过期机制

服务器返回的报文响应头的 Etag 字段标示服务器资源的校验码（例如文件的 hash 值），发送到客户端浏览器，浏览器收到后把资源文件缓存起来并且缓存 Etag 值，当浏览器再次请求此资源文件时，会在请求头 If-None-Match 字段带上缓存的 Etag 值。
服务器收到请求后，把请求头中 If-None-Match 字段值与服务器端资源文件的验证码进行对比，如果匹配成功直接返回 304 状态码，从浏览器本地缓存取资源文件。如果不匹配，服务器会把新的验证码放在请求头的 Etag 字段中，并且以 200 状态码返回资源。

需要注意的是当响应头中同时存在 Etag 和 Last-Modified 的时候，会先对 Etag 进行比对，随后才是 Last-Modified

Etag 的问题
相同的资源，在两台服务器产生的 Etag 是不是相同的，所以对于使用服务器集群来处理请求的网站来说，Etag 的匹配概率会大幅降低。所在在这种情况下，使用 Etag 来处理缓存，反而会有更大的开销。

相信很多人在刚接触前端或者中期时候总会遇到一些问题及瓶颈期，如学了一段时间没有方向感或者坚持不下去一个人学习枯燥乏味有问题也不知道怎么解决，对此我整理了一些资料 喜欢我的文章想与更多资深大牛一起讨论和学习的话 欢迎加入我的学习交流群 907694362