내용 인코딩: 메타문자 집합 태그와 내용 형식 헤더를 사용하는 이유 및 방법

8128 단어 browserheaderswebdev
웹 페이지의 표시 속도를 높이는 것은 일반적으로 가능한 한 브라우저의 사용을 간소화하는 것을 의미한다.브라우저에서 HTTP 응답을 수신하면 바이트로 인코딩된 텍스트가 실제로 수신됩니다. 바이트나 바이트 시퀀스는 주어진 문자를 대표합니다.만약 브라우저에 사용된 인코딩에 대한 명확한 정보가 없다면, 시간을 낭비할 수도 있고, 어떤 경우에는 실패할 수도 있다고 추측해 보세요.
비록 인터넷은 보급에 목적을 두고 있지만, 그것을 사용하는 각종 인류 집단은 모두 자신의 특징을 가지고 있다.그 중의 특징은 언어, 특히 서면 언어이다.모든 텍스트 내용은 어떤 유형이 사용하는 디렉터리의 문자로 구성되어 있다.예를 들어 가명은 일본어의 명확한 녹음에 사용되는 음성 시스템이다.

가명 Karine WIDMER의 쓰기 방향표(CC-BY-SA-3.0·Source
모든 문자를 명확하게 지정하기 위해서, 우리는 모든 문자에 유일한 식별자를 분배해야 한다.전체 식별자 집합을 문자 집합이라고 합니다.이 대응표가 정의되면, 모든 문자는 바이트 서열로 변환해서 컴퓨터 간에 저장하거나 공유할 수 있도록 해야 한다.이를 문자 인코딩이라고 합니다.
만약 내가 문자 집합을 사용하여 텍스트를 쓰고 해당하는 인코딩을 사용하여 바이트로 변환한다면 나중에 당신에게 보냅니다.내가 어떤 인코딩이나 설정을 사용했는지 모르는 상황에서 당신은 어떻게 디코딩하고 내용을 읽을 수 있습니까?결국, 당신은 가장 흔히 볼 수 있는 문자 집합 & 당신이 알고 있는 인코딩을 사용해야 합니다. 결과가 의미가 있기를 기대합니다. 무슨 문제가 생길까요?

Replace a semicolon (;) with a greek question mark (;) in your friend’s JavaScript and watch them pull their hair out over the syntax error.

Ben Johnson ( ),


그러니까 그래. 좋은 생각은 아니야.
예를 들어, 비트 시퀀스 1100011 1010 1001은 UTF-8 인코딩의 문자 "é"를 나타냅니다.만약 당신이 이 서열을 디코딩한다면, UTF-8이 아니라 라틴-1 인코딩을 사용해야 한다고 가정하면, 당신은 "é"를 읽을 것입니다.
라틴어-1에서 문자'é'는 서열 1110 1001로 표시됩니다.
브라우저가 서버에서 바이트를 받았을 때, 이 바이트로 변환된 텍스트를 쓰는 데 사용되는 알파벳과 기호의 집합, 그리고 이 변환에 사용되는 인코딩을 식별해서 반전시켜야 합니다.이러한 정보를 전송하지 않으면 브라우저는 바이트 내에서 식별 가능한 패턴을 찾아 인코딩 자체를 확인하고 일반적인 문자 집합을 시도합니다. 이것은 시간이 걸리고 페이지의 진일보한 처리를 지연시킵니다.
페이지의 표시 속도를 높이기 위해서는 HTTP 응답에서 컨텐츠 인코딩을 지정해야 합니다.

어떻게 정확한 문자 집합을 선택합니까?


한동안 수백 개의 문자 인코딩이 공존하였는데, 모두 유한해서, 세계의 모든 언어를 덮어쓸 충분한 문자를 포함할 수 없었다.때로는 단일 언어의 모든 알파벳에 적용할 수 있는 인코딩 방법이 없다.
대부분의 언어를 작성하는 데 필요한 모든 문자를 정의하는 유니버설 문자 집합 (Unicode) 은 플랫폼, 장치, 응용 프로그램, 언어에 관계없이 표준이 되었습니다.UTF-8은 Unicode 인코딩 중 하나이며 W3C에 따라 UTF-8은 웹 컨텐츠에 사용됩니다.

Everyone developing content, whether content authors or programmers, should use the UTF-8 character encoding, unless there are very special reasons for using something else. (If you decide to not use UTF-8, you must choose one of the few encodings that are interoperably implemented across all browsers.)

"Introducing Character Sets and Encodings", W3C


주의: 데이터베이스를 사용하여 서버에 내용을 저장할 경우, "utf-8"문자 집합을 사용하려고 시도할 수도 있습니다.참고: MySQL과 MariaDB에서는 "utf8mb3"의 별명입니다. UTF-8 인코딩은 "기본 다중 언어 평면"(또는 BMP) 이라고 하는데 코드 포인트당 최대 3 바이트만 저장할 수 있습니다.반대로, "utf8mb4"를 더 사용하고 싶습니다. 이것은 인코딩입니다. 코드마다 최대 4바이트를 저장합니다.그렇지 않으면 유행하는 문자를 사용할 수 없습니다. 예를 들어🚀, 'U+1F680 로켓'이라고도 합니다!

당신의 문자 인코딩을 어떻게 홍보하는지... 그리고 가장 좋은 방법.


진일보한 토론을 하기 전에, 우리 먼저 사용 중인 어휘를 봅시다.

Historically, the terms "character encoding", "character map", "character set" and "code page" were synonymous in computer science[…]. But now the terms have related but distinct meanings,[…] Regardless, the terms are still used interchangeably, with character set being nearly ubiquitous.

"Character encoding", Wikipedia


HTML 사양명세에서 [문자 세트] 또는 [문자 세트]를 사용하여 인코딩을 지정한 것을 발견했습니다.본문의 나머지 부분에서 우리도 이렇게 할 것이다.
HTML 페이지에서 문자 세트를 지정하는 가장 간단한 방법 중 하나는 요소에 태그 <meta> 를 넣는 것입니다.
<meta charset="utf-8">
이러한 방식으로 문자 집합 requires certain constraints to be respected 을 선언합니다. 이 중 하나는 문자 인코딩 설명을 포함하는 요소가 웹 브라우저가 전송하는 첫 번째 IP 패킷을 통해 정보를 수신하고 이를 사용하여 문서의 나머지 부분을 디코딩할 수 있도록 문서의 앞 1024바이트 내에 완전히 서열화되어야 한다는 것입니다.문자 세트<meta> 태그는 이러한 요구 사항이 있는 유일한 태그이므로 요소 시작 태그 뒤에 직접 배치해야 한다는 가장 일반적인 프롬프트는 다음과 같습니다.
<html >
  <head >
    <meta charset="utf-8">
만약 네가 이 점을 잊는 것이 두렵다면, 걱정하지 마라.이것은 분명히 Dareboost가 저희website quality analysis tool에서 당신을 위해 실행할 검사 중의 하나입니다.그러나, 이 성명은 충분하지 않고, 브라우저가 이 점을 고려하지 않았다는 것을 발견할 수 있습니다.왜?페이지의 내용 유형 메타데이터는 다른 문자 집합을 나타낼 수 있기 때문에 충돌이 발생할 때 이 정보(페이지 HTTP 헤더에 정의됨)에 우선순위가 있습니다.
페이지 메타데이터를 통해 전송되는 정보를 확보하기 위해 our Timeline / Waterfall feature 를 사용할 수 있습니다.컨텐트 유형 헤더를 포함하여 인코딩 메타데이터가 포함된 응답 HTTP 헤더를 보려면 기본 문서의 세부 값을 확장합니다.

이 HTTP 헤더를 변경하려면 서버를 관리하는 직원의 도움이 필요할 수 있습니다. 이것은 위탁 관리 서비스 공급자나 조직의 책임자입니다. HTTP 헤더의 설정은 현재 사용 중인 웹 서버에 매우 특정하기 때문에 이 서버 설정을 수정하려면 적당한 관리 권한이 필요합니다.
Apache 2.2+에서 UTF-8이text/plaintext/html 파일의 기본 문자 세트로 구성됨the AddDefaultCharset directive:
AddDefaultCharset utf-8
다른 유형의 파일에 대해 필요한 경우the AddCharset directive.
AddCharset utf-8 .js .css …
nginx에서 the ngx_http_charset_module is loaded 명령을 확인하고 charset 명령을 사용해야 합니다.
charset utf-8;
명령어 text/html 를 사용하여 utf-8 charset_types 이외의 다른 유형의 파일을 전달할 수 있도록 범위를 세분화할 수도 있습니다.
charset_types text/html text/css application/javascript
물론 서버 측 스크립트 코드에서 HTTP 헤더Content-Type를 구성할 수도 있습니다.예를 들어, PHP에서 사용할 수 있습니다the header() network function.문자 집합 외에 응답 바디의 미디어 유형 (또는 MIME 유형) 을 정의하는 것을 잊지 마십시오.
header('Content-type: text/html; charset=utf-8');
참고 페이지가 CDN(Content Design Network)에 의해 제공되는 경우 대부분의 헤더가 서버에서 찾은 헤더를 전달하지 않으므로 CDN 구성에서 Content-Type 헤더를 구성해야 할 수 있습니다.

기타 리소스

  • The IANA Media Types list
  • The Unicode website
  • 'Character encodings: Essential concepts', W3C 글로벌 웹 사이트
  • 여전히 문자 인코딩이 보잘것없는 문제라고 생각합니까?Andrew Nacin이 2015년 Loop Conf 대회에서 한 연설을 보십시오.
  • 좋은 웹페이지 즐겨찾기