[Dictionary] front-end advanced network infrastructure necessary

Five classes of IP addresses TOP

Network Address: network identification for the host is located;
host address: Host in the network for identifying.

IP addresses are divided into five categories:

1. A category reserved for government agencies
2. Class B is assigned to medium-sized companies
3. Class C is assigned to anyone in need
4. Class D is used for special purposes. Also known as do a radio address
5. Class E escrow

The number of different kinds of addresses that can be accommodated. Wherein Class A, Classes B, and Class C addresses for the three types of TCP / IP node, the other two classes D and E are used for special purposes.

First, use a map to give you a preliminary concept:

 

A. A Class Address

The first octet is the network segment address, a host address other, a first section of the first eight necessarily 0;
range: 1.0.0.1-126.155.255.254;
private addresses and reserved addresses:
10.XXX is a private address (the so-called the private address is not used on the Internet, and is used in local area network address).
127.XXX is reserved addresses, used cycle testing.

II. Class B addresses

The first section and the second octet of octet network segment addresses, and the host address, the first eight of a certain segment 10;
range: 128.0.0.1-191.255.255.254.
Private addresses and reserved addresses:
172.16.0.0-172.31.255.255 is a private address
169.254.XX is reserved addresses. If your IP address is automatically obtain an IP address, and you do not find an available DHCP server on the network. You will get one IP.

Three. C class address

The first three sections of eight network address, all of the 4 bytes of the host address, the first eight first segment 110 is constant.
Range: 192.0.0.1-223.255.255.254.
Private Address:
192.168.XX is a private address.

IV. Class D address

Regardless of network and host addresses, the first eight of a certain segment is 1110.
Range: 224.0.0.1-239.255.255.254

Five. E Class address

Regardless of network and host addresses, the first segment necessarily be the first eight 11110.
Range: 240.0.0.1-255.255.255.254

Cross-domain causes and treatment TOP

The reason is due to cross-domain origin policy browsers determined.

Origin policy limits the document or script loaded from the same source how to interact with resources from another source. This is an important security mechanism used to isolate potentially malicious files.

This argument, as always, very official, like a goddess Oh, people do not know why. Next to interfaces from Dom queries and requests to explain the necessity of the same origin policy.

Interface request (assuming no same-origin policy)

We look at the scene:
1. You open www.taobao.com, ready to buy in the shopping cart you have added the "JavaScript Advanced Programming."
2. When you are about to pay, there is a person sent you a link www.heiheihei.com, your eyes suddenly became serious, and then do not hesitate to point inside.
3. You are very decent viewing www.heiheihei.comcontent, www.heiheihei.comnot idle, because there is no limit same-origin policy, which is to www.taobao.cominitiate a request! Secretly do whatever they do whatever they want to do some things.

Dom query (assuming no same-origin policy)

1. Monday morning, as usual, you point to open Taobao, Taobao stroll from the street, but today you do not care why landing today.
2. Why need to sign it? I assume this is a malicious person determined to do this, this landing page to do anything at all? Suppose I have the following code page

// 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('***') // 密码账号被偷走了 复制代码

From the above two cases, we have a preliminary understanding of the same origin policy can indeed avoid some dangerous, not to say that with the same-origin policy on security, but said same-origin policy is a fundamental browser security mechanisms, after all, can improve a little attack cost.

Cross-domain solutions

1. By cross-domain jsonp
2. document.domain + iframe cross-domain
3. location.hash + iframe
4. window.name + iframe cross-domain
5. Cross-domain postMessage
6. Cross-Origin Resource Sharing (CORS)
7. nginx proxy cross-domain
8. nodejs middleware agent across domains
9. WebSocket protocol across domains

The above method I'll pick a few to speak

A, JSONP

JSONP principle is very simple, is to use the <script>label does not limit cross-domain vulnerabilities. By <script>receiving a tag needs to access point address and to provide a callback function when data communication is required. JSONP is simple to use and compatibility is good, but only if they get a request.

function jsonp(url, jsonpCallback, success) {
  let script = document.createElement('script')
  script.src = url
  script.async = true
  script.type = 'text/javascript'
  window[jsonpCallback] = function(data) {
    success && success(data)
  }
  document.body.appendChild(script)
}
jsonp('http://xxx', 'callback', function(value) {
  console.log(value)
})

Two, CORS

CORS need a browser and the backend supports. Key browser will automatically communicate CORS, CORS achieve communication is the back-end. As long as the back-end implementation of CORS, to achieve cross-domain. Set the server Access-Control-Allow-Origincan open CORS. This attribute indicates which domains can access resources, if you set a wildcard indicates that all sites can access resources.

Three, nginx proxy cross-domain

Nginx reverse proxy cross-domain use.

Virtual Host Configuration

{Server 
    the listen 8080 ; # listening port 
    server_name   192.168 . 1.1 ; # configure access domain 
    the root   / Data / toor; # Site root 
    error_page 502  404 / Page / 404 .html; # error page 
    LOCATION ^ ~ / API / {# use / api / agent proxy_pass value 
        proxy_pass HTTP: // 192.168.20.1:8080; # the address of the proxy application server HTTP 
    } 
}

Copy the code above simple configuration can achieve reverse proxy functionality, cross-domain problems will be solved.

You can use this property in Vue in proxyTable perform configuration to solve the problems caused by cross-domain trouble. Configuration is as follows:

proxyTable: {
     ' / Weixin ' : { 
        target: ' http://192.168.48.11:8100/ ' , // domain interface 
        Secure: to false ,       // if https interface need to configure this parameter 
        changeOrigin: to true , // If the interface cross-domain, the parameters required 
        pathRewrite: {
             ' ^ / Weixin ' : '' 
        } 
    }, 
},

Forward Proxy and Reverse Proxy TOP

Forward Proxy

1. Representing clients;
2. Hide the real customer, send and receive requests for the client, the client of the real server is invisible;
3. All users in a local area network may be a server to do a forward proxy, HTTP server is responsible for the request;
4. Means of communication with the server is doing a forward proxy server;

Reverse Proxy

1. Proxy server;
2. Hiding the true server, send and receive requests to the server, the real server to the client is not visible;
3. Server load balancing, to distribute the user's request to the busy server;
4. Means that users load balancing and server communicate directly, that is obtained when the user is domain name resolution server IP server load balancing;

Common

1. They are used as middle-tier server and client
2. We can enhance the security of the internal network to prevent web attacks
3. We can do caching mechanism

Specific applications can see I wrote this article [the front] and his wife dictionary windfall after speaking agent

CDN bring performance optimization TOP

CDN stands for Content Delivery Network, ie, content delivery network. CDN content distribution network is built on top of the network, relying deployed around the edge server, load balancing through the center of the platform, content distribution, scheduling and other functional modules, allowing users to get what you need nearby, reduce network congestion and improve user access response speed and hit rate. The key technology of CDN main content storage and distribution technologies.

for example

Taobao shopping
Shopping in Taobao, most individual sellers delivery just in one place, outside of Jiangsu, Zhejiang and seems slower than the receipt.

Jingdong shopping
and self-products we buy in Jingdong, then it will, at our place of receipt, looking across the country closest to us, the fastest delivery warehouse, whether we in Jiangsu, Zhejiang, Inner Mongolia, Tibet or Xinjiang, our time of receipt will be greatly reduced. Jingdong establish warehousing system, similar to CDN.

CDN advantage

1. CDN node to solve the problem of cross-regional and inter-operator access, access latency is greatly reduced;
2. Most of the CDN edge node completes the request, the CDN played streaming effect, reducing the source station load.

Access speed is one of the necessary magic weapon electricity supplier website to win.

CDN operating mode

For example, we SHEIN master root server Shenzhen, China, CDN servers in three locations in California, France, India and other (real careful a lot).

No CDN server

So 60 million worldwide users requested resource is sent from China Shenzhen room, such a user in California delay may be sufficient to open the home she painted a sophisticated look up. (PS: Shenzhen front-end front-end development team move, there is a demand can private letter I)

There CDN server

At this time, the user still wants to open SHEIN California's plan to buy an evening dress party. The sight she has not moved to the dresser, Home has been opened, then she happy shopping.

This is because the CDN server.

California CDN server, copy the root node has the resources coming. And we have a mechanism to resource CDN node ten minutes back to the source will be updated once. So when the user requests a resource is not going back to the source to Shenzhen root server requests. This does not appear when users request resources back to the source as a result of network latency.

CDN has two core points: one is the cache, one is back to the source.

Key Technology

1. Content publishing: it is by means of indexing, caching, flow splitting, multicast (Multicast) technology, content posted or delivered to the closest to the user's remote service point (POP) at;
2. SUMMARY route: it is the integrity of the network load balancing techniques, the content router redirection (DNS) mechanism, balanced on the user's request in a plurality of remote POP, so that the user requests are answered latest content source;
3. Content Switching: It is based on the availability of content and context of the user of the availability of the server, the cache server in the POP using the application layer switching, the stream splitting, the redirection (ICP, WCCP) technology intelligently balance the traffic load;
4. Performance management: it through internal and external monitoring system, network component status information is acquired, the content distribution end performance measurement (e.g., packet loss, latency, average bandwidth, start time, frame rate, etc.) to ensure optimal network is operating condition.

CDN is often considered the front end does not need to understand the knowledge. But we are first of all front-end engineering software engineer. To know more about something is definitely useful.

CDN & static resources

Static resource itself has a high frequency of visits, to undertake large flow characteristics, therefore static resource loading speed is always a key indicator of the performance of the front end. CDN static resources is an important means of speed.

Taobao

 

Jingdong

 

Nuggets

We readily open a website point to open a static resource, you can see it all from the CDN server requests come. It can be seen "static resources go CDN" best practices.

 

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