프런트엔드가 마스터해야 하는 네트워크 지식

기사 디렉토리

웹 페이지 프로세스에 액세스

URI,URL,URN

URI(Uniform Resource Identifier): 특정 규칙에 따라 자원을 고유하게 식별할 수 있는 통일 자원 식별자.
URL(Uniform Resource Locator): 유니폼 리소스 로케이터(Uniform Resource Locator).
URN(Uniform Resource Name): 통일된 리소스 이름입니다.

url과 urn은 모두 uri의 하위 집합입니다.
URI는 단지 리소스 식별자일 뿐입니다.
URL 유니폼 리소스 로케이터
- 리소스 ID
- 자원을 찾아주는 기능을 가지고 있습니다.
- 리소스를 얻는 데 사용되는 프로토콜을 지정합니다. 프로토콜 이름 + 호스트 이름 + 포트 번호 + 경로 + 파일
  (https:443, http:80, mysql:3306)
URN은 URL과 비교됩니다. 프로토콜 이름이 지정되지 않습니다.

DNS 확인

DNS
Domain Name System(영어: Domain Name System, 약어: DNS)은 인터넷 서비스입니다. 도메인 이름과 IP 주소를 서로 매핑하는 분산 데이터베이스로서 사람들이 인터넷에 보다 편리하게 접근할 수 있도록 해줍니다.
도메인 이름은 IP 주소에 해당합니다.
하나의 IP 주소는 여러 도메인 이름에 해당할 수 있습니다.
gTLD
일반 최상위 도메인(영어: 일반 최상위 도메인, gTLD로 약칭)은 IANA(Internet Authority for Assigned Names and Numbers)에서 관리하는 최상위 도메인(TLD) 중 하나입니다. 이 기관은 인터넷의 도메인 이름 시스템을 담당합니다.

일반 최상위 도메인은 1985년 1월에 만들어졌습니다. 당시에는 주로 미국에서 사용되는 6개의 일반 최상위 도메인이 있었습니다: .com
- 상업 기관에서 사용
.edu - 교육 기관에서 사용
. gov - 정부 및 산하 기관에서 사용
mil - 군사 기관에서 사용.net
- 인터넷 서비스 제공업체에서 사용.org
- 다른 gTLD 범주에 속하지 않는 조직에서 사용

DNS 확인 프로세스
로컬 DNS는 일반적으로 인터넷 서핑 시 컴퓨터의 IPv4 또는 IPv6 설정에 채워져 있는 DNS를 말합니다. 이는 수동으로 지정하거나 DHCP에 의해 자동으로 할당될 수 있습니다.
호스트 파일과 DNS
도메인 이름 및 IP 주소 간의 일대일 대응을 어떻게 실현할 것인가는 시급히 해결해야 할 문제입니다.
따라서 시스템은 로컬 HOSTS 파일을 사용하여 도메인 이름을 IP 주소로 변환하는 기능을 구현합니다.
호스트 파일에는 호스트 이름과 IP 주소 간의 대응이 포함되어 있습니다.
호스트 이름을 통해 호스트에 액세스해야 하는 경우 로컬 호스트 파일을 확인하고 파일에서 해당 IP 주소를 찾은 다음 메시지를 보냅니다. 호스트 파일에 관련 정보가 없으면 호스트 액세스가 실패합니다.

호스트 파일이 로컬에 저장되기 때문에 검색 응답은 빠르지만 단점도 매우 뚜렷합니다. 한편으로는 각 호스트의 호스트 파일을 수동으로 업데이트해야 하며, 액세스하려는 사이트의 해당 관계를 실시간으로 얻을 수 없으며 작업이 번거롭고 오류가 발생하기 쉽습니다. 인터넷 규모가 지속적으로 확장됨에 따라 연결되는 컴퓨터 수가 계속 증가하고 유지 관리가 점점 어려워지고 있으며 각 호스트의 동기 업데이트는 거의 불가능한 작업입니다.
따라서 동일한 번역 기능을 완성하려면 보다 지능적이고 간단하며 유지 관리가 쉬운 번역 메커니즘이 필요하므로 호스트 이름과 IP 주소 간의 상호 변환을 해결할 수 있는 시스템인 DNS 도메인 이름 시스템이 등장했습니다. 아무리 네트워크 규모가 커져도 작은 영역 내에서는 DNS를 통해 관리할 수 있습니다.

호스트 파일과 마찬가지로 DNS도 도메인 이름과 IP 주소 간의 대응을 저장합니다. 차이점은 DNS는 호스트와 독립적으로 존재하므로 사용자가 수동으로 업데이트할 필요가 없다는 것입니다. DNS는 고유한 정보를 기반으로 스토리지를 자동으로 업데이트할 수 있습니다. 재귀적 질의 방식으로, 그 값을 기록해 두면 새로운 사이트의 IP 주소를 빠르게 얻을 수 있어 접근 파싱의 효율성이 크게 향상됩니다.
그러나 호스트 파일과 마찬가지로 DNS 서버는 성능이 아무리 뛰어나더라도 모든 호스트 기록을 저장할 수 없기 때문에 도메인 이름 시스템은 분산 데이터베이스 시스템이므로 도메인 이름(호스트 이름)에서 IP 주소로의 확인이 완료될 수 있습니다. 여러 도메인 이름 서버에 의해. 각 사이트는 자체 정보 데이터베이스를 유지하고 인터넷 클라이언트의 쿼리를 위한 서버 프로그램을 실행합니다. DNS는 클라이언트와 서버 간의 통신 프로토콜뿐만 아니라 서버 간의 정보 교환을 위한 프로토콜도 제공합니다. 분산 시스템이기 때문에 단일 서버에 장애가 발생하더라도 전체 시스템에 장애가 발생하지 않으므로 단일 장애 지점이 제거됩니다.

IP 포트 번호 범위

65535
255는 1바이트(10진수)에 저장된 최대값이며, 16진수일 경우 FF입니다.

그리고 65535는 최대 저장값인 2바이트(10진수)이며, 16진수일 경우에는 FF FF입니다.

TCP

UDP

http,https

https://www.baidu.com:80/ 접속할 수 없습니다
https://www.baidu.com:443/ 일반 접속

https의 기본 포트는 443이고, http의 경우에도 마찬가지로 80입니다.

TCP 3방향 핸드셰이크

https://blog.csdn.net/jun2016425/article/details/81506353

www

http 메시지

기존 http 요청

요청 방법

8가지 요청 방법과 4가지 일반 방법

게시물 요청 방법 가져오기

http 상태 코드

304

캐시로 리디렉션

302

웹페이지로 리디렉션

404 403

500503

콘텐츠 유형 허용

Accept는 세미콜론 대신 쉼표로 구분됩니다.

브라우저 캐시

no-cache는 캐싱을 비활성화하지 않지만 캐시된 복사본을 무시하고 강제로 서버에서 리소스를 얻습니다.
캐시 제어는 prgma보다 우선순위가 높으며 새로운 프로토콜 기능은 이전 프로토콜보다 높습니다.
캐시 제어는 응답 헤더에 속합니다

그리니치 표준시 동 + 서 -, 중국은 동부 8구역, 시간은 그리니치 표준시 + 8시간

살아 유지

콘텐츠 길이

참조

http 프로토콜 버전

[외부링크 이미지 전송에 실패했습니다. 원본 사이트에 리칭 방지 메커니즘이 있을 수 있습니다. 이미지를 저장하고 직접 업로드하는 것을 권장합니다. (img-xE9St6F1-1652268740093) (https://gitee.com/jingyu7/pic/ 원시/마스터/202202051032668.png )]

TCP 웨이브가 4번 발생합니다.

동일 원산지 정책

http 요청을 줄이는 방법

http 요청은 가장 많은 리소스를 소비하므로 http 요청을 줄여야 합니다.

바이두 홈페이지의 소스코드를 보면 http 요청을 줄이기 위해 스타일, html, js가 분리되지 않고 혼합되어 있는 것을 볼 수 있는데, 모든
프로젝트는 개발 버전과 온라인 버전으로 나누어져 있습니다. 스타일 논리.

아약스

통신의 기본은 http, 부분 로딩

도메인 간 데이터를 얻는 6가지 방법

iframe.contentWindow.name

<body>
  <iframe src="b.html" id="myIfram"></iframe>
</body>
<script>
  var myIfram = document.getElementById('myIfram');
  myIfram.onload = function(){
      
      
    console.log(myIfram.contentWindow.name)
    // 这里的name就是ifram中定义的window.name
  }
</script>

window.name 속성을 설정할 수 있습니다.
window.name이 설정되어 있는 한 창을 닫지 않고도 웹 페이지로 이동할 수 있습니다. 이 창의 window.name 속성은 절대 변경되지 않습니다.
간단한 예: 콘솔에 입력합니다. 특정 페이지의:

window.name = "hello world"
window.location = "http://www.baidu.com"

페이지가 Baidu 홈페이지로 이동하지만 window.name은 저장되어 있지만 여전히 hello world입니다.

도메인 간 사례

먼저 .html 파일을 만듭니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a.html</title>
</head>
<body>
    <script>
    let data = '';
    const ifr = document.createElement('iframe');
    ifr.src = "http://localhost:8081/b.html";
    ifr.style.display = 'none';
    document.body.appendChild(ifr);
    ifr.onload = function() {
      
      
        ifr.onload = function() {
      
      
            data = ifr.contentWindow.name;
        console.log('收到数据:', data);
        }
        ifr.src = "http://localhost:8080/c.html";
    }
    </script>
</body>
</html>

b.html 파일을 다시 만듭니다.

<script>
   window.name = "你想要的数据!";
</script>

http://localhost:8080/a.html은 원격 서버 http://localhost:8081/b.html(ifram 교차 도메인 속성)에서 데이터를 요청합니다.
a.html 아래에 새 iframe을 만들 수 있으며 iframe의 src 속성은 서버 8081/b.html을 가리킵니다.
서버 파일 b.html은 window.name 값을 설정합니다.
하지만 a.html 페이지와 페이지에 있는 iframe의 src 소스가 다르기 때문에 iframe에서는 아무것도 동작하지 못하므로 iframe의 name 값을 얻을 수 없고, 다른 도메인에 있는 iframe도 동작할 수 없습니다.
따라서 b.html이 로드된 후 동일한 출처의 html 파일을 가리키도록 src 영역을 변경하거나 about:blank로 설정해야 합니다.
현재로서는 a.html과 동일한 디렉토리에 빈 c.html만 다운로드하면 됩니다.
src를 리디렉션하지 않고 window.name을 직접 가져오면 오류가 보고됩니다.

document.domain은 현재 웹사이트 도메인 이름 'www.baidu.com'을 반환하며, 이 이름도 설정할 수 있습니다.

document.domain이 다운그레이드되었습니다.
다운그레이드란 무엇입니까?
예를 들어 http://a.justfun.me와 http://b.justfun.me 뒤에 있는 justfun.me가 동일하면
document를 사용할 수 있습니다. 도메인을 변경하려면 도메인 이름을 변경하세요. 동일한 출처를 얻으려면 justfun.me로 설정하세요.
메인도메인은 같지만 서브도메인이 다른 경우에는 document.domain을 설정하면 해결됩니다.
구체적인 방법은 document.domain = "example.com"을 각각 http://www.example.com/a.html 및 http://sub.example.com/b.html 두 파일에 추가하는 것입니다.
그런 다음 a.html 파일을 통해 iframe을 생성하여 상호 작용을 위한 iframe 창을 제어합니다.물론 이 방법은 기본 도메인은 동일하지만 보조 도메인 이름이 다른 상황만 해결할 수 있습니다.

먼저 a.html 파일을 만듭니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a.html</title>
</head>
<body>
    <script>
    //document.domain让当前的域进行降域，这样二者就可以实现相互操作和访问了。
    document.domain = 'example.com';
    let ifr = document.createElement('iframe');
    ifr.src = 'http://sub.example.com/b.html';
    ifr.style.display = 'none';
    document.body.append(ifr);
    ifr.onload = function() {
      
      
        let win = ifr.contentWindow;
        alert(win.data);
    }
    </script>
</body>
</html>

다른 b.html 파일을 만듭니다.

<script>
    document.domain = 'example.com';
    window.data = '传送的数据：1111';
</script>

HTMLIFrameElement.referrerPolicy

  <iframe src="https://www.baidu.com" id="myIfram" referrerpolicy="no-referrer"></iframe>

响应头
'X-Frame-Options'를 'sameorigin'으로 설정했기 때문에 프레임에 'https://www.baidu.com/' 표시를 거부했습니다.

window.postMessage() 메서드는 출처 간 통신
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage를 안전하게 구현할 수 있습니다.

iframe 크로스 도메인 페이지

window.parent.postMessage(JSON.stringify(data),'父页面地址')

상위 페이지

window.addEventListener('message', function(e) {
    
    
    console.log('接收到的消息:', JSON.parse(e.data));
});

URL에서 http://www.baidu.com#helloword의 #hellorad는 location.hash이며,
해시값을 변경해도 페이지가 새로고침되지 않으므로 해시값을 이용해 데이터를 전송할 수 있습니다.물론, 데이터의 양이 제한되어 있습니다.

상위 페이지는 원본이 아닌 iframe을 로드하고 해시 변경을 수신합니다.

window.addEventListener('hashchange', function(e) {
    
    
    console.log('获得的数据是：', location.hash.substring(1));
    });

데이터 변경 상위 해시에 대한 iframe 하위 페이지 요청

try {
    
    
    parent.location.hash = data;
}catch(e) {
    
    
    // ie, chrome 下的安全机制无法修改 parent.location.hash
    // 所以要利用一个中间的代理 iframe 
    var ifrproxy = document.createElement('iframe');
    ifrproxy.style.display = 'none';
    ifrproxy.src = 'http://localhost:8080/test.html#' + data; // 该文件在请求域名的域下
    document.body.appendChild(ifrproxy);
    }
}

JSONP 크로스 도메인

<html>
<script>
  let a = 1
</script>
<script>
  console.log(a) //可以打印出来a
</script>
</html>

스크립트에는 접미사가 필요하지 않으며 스크립트로 실행됩니다.

<script src="index.jsp?callback=test"></script>

스크립트는 동일한 출처의 영향을 받지 않으며 ajax를 사용하여 해당 src 원본이 아닌 도메인 이름으로 인터페이스를 요청할 수 있습니다.
제이쿼리 jsonp

Baidu 협회 단어의 jsonp
콜백 함수에 임의의 이름을 작성하는 방법
jquery JSONP 구현
백엔드에서 반환된 문자열 함수를 실행하는 방법 이
문자열 함수는 현재 페이지에 정의되어 있습니다.
윈도우 문자열 함수를 실행하는 방법은 무엇입니까?
Baidu 관련 단어 실현

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
      
      
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .wra {
      
      
            margin: 50px 0 0 100px;
        }

        input {
      
      
            width: 440px;
            height: 30px;
        }

        ul {
      
      
            display: none;
            width: 440px;
            border: 1px solid #ccc;
        }

        ul li {
      
      
            width: 522px;
            color: #000;
            font: 14px arial;
            line-height: 22px;
            padding: 0 8px;
            position: relative;
            cursor: default;
        }
    </style>
</head>

<body>
    <div class="wra">
        <input type="text">
        <ul></ul>
    </div>
    <script>
        var oinput = document.getElementsByTagName('input')[0];
        var body = document.getElementsByTagName('body')[0];

        oinput.oninput = function () {
      
       //监听 input 事件。每次触发，我们就发利用  script标签的 src  发送请求
            var oscript = document.createElement('script'); 
            oscript.src = 'https://www.baidu.com/sugrec?&prod=pc&wd=' + this.value + '&cb=Exhibition'; //拿到百度接口链接， 删除对我们无用的 参数。
                                                              // wd 后面的  是我们的 词  cb 后面 是我们的下面的函数名。注意这里的函数名，要字符串
            body.appendChild(oscript);
            oscript.remove();           // 每次发送完数据后， 把 script标签给删除，不然每发送一次，就 创建一个标签， 等下页面会有很多 script标签
        }

        function Exhibition(data) {
      
      
            var g = data.g;
            var str = '';
            var oUl = document.getElementsByTagName('ul')[0];
            if (g) {
      
      
                oUl.style.display = 'block';
                g.forEach(function (ele, index) {
      
      
                    str += '<li>' + ele.q + '</li>'  //拿到数据  遍历它，然后添加到  li标签
                })
                oUl.innerHTML = str;
            }
        }
    </script>
</body>
</html>

폭포의 흐름

img를 차단하도록 설정해야 하는 이유는 무엇입니까?

학생들은 일반적으로 기본 간격을 없애기 위해 그림을 블록 요소로 설정합니다. 예:

그림은 인라인 요소이고 텍스트 속성을 가지므로 기본적으로 간격이 있습니다. 2

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
    
    
      background-color: pink;
      width: 100px;
    }

    img{
    
    
      height: 100%;
      width: 100%;
      /* 加block 也可以设置font-size,但不推荐*/
      display: block;
    }
  </style>
</head>
<body>
  <div><img src="https://gitee.com/jingyu7/pic/raw/master/202202071254489.png" alt=""></div>
</body>
</html>

쿠키

사용자 추적
1. 추천인 웹사이트 출처
2. IP 주소
3. 사용자 로그인
4. 뚱뚱한 URL
5. 쿠키: 서버에서 사용자의 브라우저로 전송되어 로컬에 저장되는 작은 데이터 조각 -> 응답 헤더에 Set-Cookie를 추가하면 쿠키가 생성됩니다.
6. 저장공간은 쿠키의 단점을 해결해주며, 성능상의 문제가 있는 웹사이트를 방문할 때마다 쿠키가 저장됩니다.
Node.js는 쿠키를 생성합니다(http 프로토콜을 통해 열어야 하며, 로컬 웹페이지인 경우 쿠키가 설정되지 않습니다).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    document.cookie = 'name=xiaoxiong'
    console.log(document.cookie)
  </script>
</head>
<body>
</body>
</html>

// 1
document.cookie = 'name1=xiaoxiong;max-age=5000' //单位是秒
// 2
var d = new Date();
d.setDate(d.getDate()+10)
document.cookie = 'name2=xiaoxiong;expires='+d
// 以上设置了两个cookie
console.log(document.cookie)
//name1=xiaoxiong; name2=xiaoxiong

쿠키 플러그인 https://www.npmjs.com/package/js-cookie.

영구 로그인

양식 제출 확인란

<form action="a.php" method="post">
    <input type="checkbox" name="hobby[]" value="唱歌"/>唱歌
    <input type="checkbox" name="hobby[]" value="跳舞"/>跳舞
    <input type="checkbox" name="hobby[]" value="轮滑"/>轮滑
    <input type="checkbox" name="hobby[]" value="lol"/>lol
    <br/>
    <input type="submit" value="提交">
</form>

<?php 
    $hobby=$_POST['hobby'];
    echo print_r($hobby);
?>

[]를 추가하지 않고 여러 개의 데이터를 제출할 경우 배열로 제출되지 않으며 일반적으로 마지막 숫자만 제출됩니다.

양식 제출 재설정 버튼의 의미화

제출 및 재설정 버튼: 입력 -> 버튼 -> HTML 의미 개발

<form action="a.jsp" method="post" onsubmit="return true">
  <input type="text" name="username" placeholder="用户名">
  <hr>
  <input type="submit">
  <input type="reset">
  <hr>
  <button type="submit">提交</button>
  <button type="reset">重置</button>
</form>

동기 제출 및 비동기 제출

양식 제출은 동기 제출과 비동기 제출로 구분됩니다.

동기화에서 양식 규칙 확인을 수행할 수 없습니다.

onsubmit은 기본 양식이 제출되는 것을 방지합니다.
form onsubmit은 부울 값에만 유효하고 false를 반환하며 양식 제출을 금지합니다. 여기에서 양식 확인을 수행할 수 있습니다.

<form action="a.jsp" method="post" onsubmit="return submitForm()">
  <input type="text" name="username" placeholder="用户名">
  <button type="submit">提交</button>
  <button type="reset">重置</button>
</form>
<script>
  function submitForm(){
      
      
    //这里做表单校验
    if(username!==""){
      
      
      return true
    }else{
      
      
      return false
    }
  }
</script>

기본 양식이 제출되는 것을 방지하는 또 다른 방법은 외부 양식 요소를 작성하지 않는 것입니다. 그러나 이는 주로 의미 문제로 인해 권장되지 않습니다.
기본 동작을 방지하는 세 번째 방법

<form action="a.jsp" method="post">
  <input type="text" name="username" placeholder="用户名">
  <button type="submit" onclick="submitForm()">提交</button>
  <!-- onclick事件后面要加括号,函数需要执行 -->
  <button type="reset">重置</button>
</form>
<script>
  function submitForm(e){
      
      
    var e = e || window.event
    e.preventDefault()
    console.log('check form')
  }
</script>

정식 글쓰기, 타오바오 로그인 글쓰기

<form action="a.jsp" method="post">
  <input type="text" name="username" placeholder="用户名">
  <button type="submit" id="j_submit">提交</button>
  <button type="reset">重置</button>
</form>
<script>
  var j_submit = document.getElementById('j_submit')
  j_submit.onclick = function submitForm(e){
      
      
    var e = e || window.event
    e.preventDefault()
    console.log('check form')
  }
  
</script>

영구 로그인

SSO 단일 사인온 단일 사인온
토큰 ID 토큰 32비트 A-Za-z0-9 임의 문자열, 로그인할 때마다 재생성됩니다.
auth-> 존재 쿠키중: auth=ident_code:token