프론트 엔드 인터뷰 질문의 몇 가지 예를 공유하십시오

HTML

* Doctype의 역할은 무엇인가요? 엄격 모드와 혼합 모드를 구별하는 방법은 무엇입니까?

1. 선언은 문서에서 이 태그는 문서가 어떤 HTML 또는 XHTML 사양을 사용하는지 브라우저에 알려줄 수 있습니다. 소위 표준 모드는 브라우저가 W3C 표준에 따라 코드를 구문 분석하고 실행하는 것을 의미합니다. 브라우저가 구문 분석하고 실행하는 방식이 다르기 때문에 코드를 실행하므로 이를 이상한 모드라고 부릅니다.

3. 구문 분석 시 브라우저가 표준 모드를 ​​사용하는지 이상한 모드를 사용하는지 여부는 웹 페이지의 DTD 선언과 직접적인 관련이 있습니다. DTD 선언은 브라우저가 표준 문서 유형(표준 모드 구문 분석)을 정의하도록 합니다. 해당 방법을 사용하면 DTD 선언을 무시하고 웹 페이지를 로드하고 표시하면 웹 페이지가 이상한 모드로 전환됩니다.

* 왜 HTML5에서만 을 작성하면 되나요?

doctype은 문서 유형의 약어입니다. 페이지에서 해당 페이지에서 사용하는 xhtml(또는 html)의 버전을 지정하는 데 사용됩니다. 표준을 준수하는 페이지를 만들기 위한 필수적이고 핵심적인 구성 요소는 doctype 선언입니다. 올바른 doctype이 결정되어야만 xhtml의 로고와 CSS가 정상적으로 적용됩니다. html은 이 파일이 html 형식의 웹 페이지 파일임을 브라우저에 알려줍니다. 두 개는 모두 html5 표준 웹 페이지 선언입니다. 원래는 긴 문자열이었지만 이제는 주류 브라우저에서 인식되는 간결한 형식입니다. 이 문은 html5 표준을 지원합니다.

* 인라인 요소란 무엇인가요? 블록 수준 요소란 무엇입니까? 공허한 요소는 무엇입니까?

인라인 요소에는 다음이 포함됩니다: a b span img input select Strong(강조 톤)

블록 수준 요소에는 다음이 포함됩니다: div ul ol li dl dt dd h1-h6 p

잘 알려진 빈 요소:
;hr>

공통 블록 요소

(블록 요소) - 주소 블록 인용 block dir - 디렉토리 목록 div - 공통 블록 수준 컨테이너는 CSS 레이아웃의 기본 레이블이기도 합니다. dl - 정의 목록 fieldset - 양식 제어 그룹 양식 - 대화형 양식 h1 - 제목 h2 - 자막 h3 - 수준 3 제목 h4 - 수준 4 제목 h5 - 레벨 5 제목 h6 - 레벨 6 제목 hr - 가로 구분선 isindex - 입력 프롬프트 메뉴 - 메뉴 목록 noframes - 프레임 선택적 콘텐츠(이 블록 콘텐츠는 프레임을 지원하지 않는 브라우저에 표시됨) noscript - 선택적 스크립트 콘텐츠(이 콘텐츠는 스크립트를 지원하지 않는 브라우저에 표시됨) ol - 정렬 형식 p - 단락 사전 - 서식이 지정된 텍스트 테이블 - 테이블 ul - 정렬되지 않은 목록(순서가 지정되지 않은 목록)

공통 인라인 요소

(인라인 요소) a - 앵커 포인트 abbr - 약어 약어 - 첫 글자 b - 굵은 글꼴(권장하지 않음) bdo - bidi 재정의 큰 - 큰 글꼴 br - 줄 바꿈 cite - 인용 코드 - 컴퓨터 코드(소스 코드를 인용할 때 필요) dfn - 정의 필드 em - 강조 글꼴 - 글꼴 설정(않음) 권장) i - 기울임꼴 img - 이미지 입력 ​​- 입력 상자 kbd - 키보드 텍스트 레이블 정의 - 테이블 레이블 q - 짧은 따옴표 s - 밑줄(권장하지 않음) samp - 샘플 컴퓨터 코드 정의 select - 프로젝트 선택 small - 작은 글꼴 텍스트 범위 - 공통 인라인 컨테이너, 텍스트 내의 블록 정의 취소선 - 밑줄 강함 - 굵은 강조 하위 - 아래 첨자 sup - 위 첨자 텍스트 영역 - 여러 줄 텍스트 입력 상자 tt - 텔렉스 텍스트 u - 밑줄 var - 변수 정의

변수 요소

변수 요소는 다음과 같습니다. 블록 요소인지 인라인 요소인지는 상황에 따라 결정됩니다[1]. 애플릿 - Java 애플릿 버튼 - 버튼 del - 텍스트 삭제 iframe - 인라인 프레임 ins - 삽입된 텍스트 맵 - 이미지 블록(맵) 객체 - 객체 객체 스크립트 - 클라이언트 스크립트

빈 요소 HTML 요소의 내용은 시작 태그와 끝 태그 사이의 내용이기 때문입니다. 일부 HTML 요소에는 내용이 비어 있습니다. (빈 콘텐츠), 빈 콘텐츠를 포함하는 HTML 요소는 빈 요소입니다. 빈 요소 [2]는 여는 태그에서 닫혀 있습니다. 예
는 닫는 태그가 없는 빈 요소입니다.

* 페이지에서 스타일을 가져올 때 link를 사용하는 것과 @import를 사용하는 것의 차이점은 무엇인가요?

(1) 링크는 CSS를 로드하는 것 외에도 RSS를 정의하고 관계 연결 속성을 정의하는 데 사용할 수 있으며 @import는 CSS에서 제공되며 로드에만 사용할 수 있습니다.

(2) 페이지가 로드되면 링크가 동시에 로드되며 @import에서 참조하는 CSS는 페이지가 로드될 때까지 기다린 후 로드됩니다.

(3) 가져오기는 CSS2에서 제안됩니다. .1 IE5 이상에서만 인식될 수 있으며 링크는 XHTML 태그이며 호환성 문제가 없습니다.

(4): dom을 사용하여 스타일을 제어할 때의 차이점. 스타일을 변경하기 위해 JavaScript를 사용하여 DOM을 제어할 때 @import는 DOM에서 제어할 수 없기 때문에 link 태그만 사용할 수 있습니다.

(5): @import는 CSS에 다른 스타일 시트를 도입할 수 있습니다. 예를 들어 기본 스타일 시트를 만들고 다른 스타일 시트를 기본 스타일 시트에 도입할 수 있습니다.

* 브라우저 핵심 이해에 대한 이해를 소개합니다. ?

주로 렌더링 엔진(레이아웃 엔지니어 또는 렌더링 엔진)과 JS 엔진의 두 부분으로 나뉩니다.

　 렌더링 엔진: 웹 페이지의 콘텐츠(HTML, XML, 이미지 등)를 가져오고, 정보를 구성(CSS 추가 등)하고, 웹 페이지의 표시 방법을 계산하는 역할을 담당하며, 모니터나 프린터로 출력합니다. 브라우저 커널에 따라 웹페이지에 대한 문법적 해석이 다르므로 렌더링 효과도 달라집니다. 웹 콘텐츠를 편집하고 표시하는 모든 웹 브라우저, 이메일 클라이언트 및 기타 애플리케이션에는 커널이 필요합니다.

　 JS 엔진: 자바스크립트를 구문 분석하고 실행하여 웹 페이지에 동적 효과를 얻습니다.

처음에는 렌더링 엔진과 JS 엔진 사이에 명확한 구분이 없었습니다. 나중에 JS 엔진은 점점 더 독립적이었으며 커널은 렌더링 엔진만 참조하는 경향이 있었습니다.

* 일반적인 브라우저 커널은 무엇입니까?

네 가지 일반적인 커널이 있습니다:

Trident: IE 브라우저에서 사용되는 커널 이 커널 프로그램은 1997년 IE4에서 처음 사용되었으며 모자이크 코드를 기반으로 Microsoft에서 수정되었으며 여전히 사용됩니다. 현재 IE9에서는. Trident는 실제로 개방형 커널이고 인터페이스 커널 설계가 상당히 성숙하여 IE 대신 IE 커널을 사용하는 브라우저(예: Maxthon, The World, TT, GreenBrowser, AvantBrowser 등)가 많이 등장했습니다.

Gecko: 커널은 Netscape 6부터 채택되기 시작했고, 이후 Mozilla FireFox도 이 커널을 채택했습니다. Gecko의 특징은 코드가 완전히 개방되어 있어 개발도가 높고, 전 세계의 프로그램에서 사용됩니다. 회원은 이에 대한 코드를 작성하고 기능을 추가할 수 있습니다. Gecko 엔진의 기원은 IE와 관련이 있습니다. 앞서 언급했듯이 IE는 W3C 표준을 사용하지 않았기 때문에 Microsoft 내부의 일부 개발자들 사이에서 불만이 생겼습니다. 그들은 Netscape의 일부 직원과 함께 Mozilla를 설립했는데, 그 이후에는 업데이트가 중단되었습니다. 모자이크 커널을 기반으로 커널을 재작성하여 Geckos를 개발하였습니다. 하지만 실제로 게코 코어를 탑재한 브라우저는 여전히 가장 많은 사용자를 보유한 파이어폭스(Firefox)이기 때문에 파이어폭스 코어라고도 불린다. 또한 Gecko는 크로스 플랫폼 커널이기도 하며 Windows, BSD, Linux 및 Mac OS X에서 사용할 수 있습니다.

Presto: 현재 Opera에서 사용하는 커널입니다. 이 커널은 2003년 Opera7에서 처음 사용되었습니다. 이 엔진의 특징은 렌더링 속도가 극한까지 최적화되었다는 것입니다. 그러나 서버 코어는 웹 페이지 호환성을 희생합니다. 실제로 이것은 동적 커널이며 이전 커널과의 가장 큰 차이점은 스크립트 처리입니다. Presto는 스크립트 이벤트에 응답하여 페이지의 전부 또는 일부를 다시 구문 분석할 수 있다는 장점이 있습니다. 또한, 동일한 조건에서 테스트한 결과, 동일한 Javascript를 실행하는 데 걸리는 시간은 Trident 및 Gecko 커널의 약 1/3에 불과합니다(Trident 커널은 가장 느리지만 둘 사이에는 큰 차이가 없습니다). 불행하게도 Presto는 상용 엔진이므로 Presto의 개발을 크게 제한합니다.

웹킷: Apple의 Safari 브라우저에서 사용되는 커널이기도 한 Apple 자체 커널입니다. Webkit 엔진에는 WebCore 조판 엔진과 JavaScriptCore 구문 분석 엔진이 포함되어 있으며 둘 다 KDE의 KHTML 및 KJS 엔진에서 파생되었습니다. 이들은 GPL 조약에 따라 라이센스가 부여된 무료 소프트웨어이며 BSD 시스템 개발을 지원합니다. 따라서 Webkit은 무료 소프트웨어이자 오픈 소스이기도 합니다. 보안 측면에서는 IE와 Firefox에 의해 제한되지 않으므로 Safari 브라우저는 중국에서 여전히 매우 안전합니다. Google의 크롬도 웹킷을 커널로 사용합니다. WebKit 커널은 휴대폰에도 널리 사용됩니다. 예를 들어 Google의 Gphone, Apple의 iPhone 등에 사용되는 브라우저 커널 엔진은 모두 WebKit을 기반으로 합니다. IE Edge of Win 10도 마찬가지입니다...

* html5의 새로운 기능은 무엇이고 어떤 요소가 제거되었나요? HTML5 새 태그의 브라우저 호환성 문제를 어떻게 처리합니까? HTML과 HTML5를 구별하는 방법은 무엇입니까?

HTML5는 더 이상 SGML의 하위 집합이 아니며 주로 이미지 추가, 위치, 저장, 멀티태스킹 및 기타 기능에 관한 것입니다.

       페인팅 캔버스;

     미디어 재생을 위한 비디오 및 오디오 요소

     로컬 오프라인 저장소 localStorage는 브라우저를 닫은 후에도 데이터가 손실되지 않습니다. 브라우저를 닫은 후

기사, 바닥글, 헤더, 탐색, 섹션과 같은 더 나은 의미를 가진 콘텐츠 요소

양식 제어, 달력, 날짜, 시간, 이메일, URL, 검색

새로운 기술 webworker, , 위치정보;

제거된 요소:

순수 표현 요소: basefont, big, center, 글꼴, s, Strike, tt, u

사용성에 부정적인 영향을 미치는 요소: 프레임, 프레임셋, noframes; 호환 가능: 1.IE8/IE7/IE6은 document.createElement 메소드로 생성된 태그를 지원합니다. 이 기능을 사용하면 해당 브라우저가 HTML5 새 태그를 지원할 수 있습니다. 2. HTML5SHIM 프레임워크를 사용하세요

-차이: DOCTYPE은 HTML과 HTML5 로고를 구별하는 중요한 요소를 선언했습니다. 또한 새로운 구조와 기능 요소에 따라 구별할 수도 있습니다.

* HTML 의미론에 대한 이해를 간략하게 설명해주세요.

Semantic HTML은 콘텐츠의 구조(콘텐츠 의미론)를 준수하고 적절한 태그(코드 의미론)를 선택하는 HTML 코드로 작성되어 개발자가 보다 쉽게 ​​읽고 작성할 수 있도록 합니다. 기계는 그것을 잘 분석합니다. 　1. 의미화는 SEO에 유익하며 검색 엔진 크롤러가 웹 페이지를 더 잘 이해하도록 도와줌으로써 더 효과적인 정보를 얻고 웹 페이지의 무게를 증가시킵니다.

　2. CSS 없이도 웹페이지의 구조를 명확하게 볼 수 있어 가독성이 높아집니다.

　3. 팀 개발 및 유지 관리에 편리합니다. Semantic HTML을 사용하면 개발자가 더 쉽게 이해할 수 있어 팀의 효율성과 조정 능력이 향상됩니다.

　4. 여러 단말 장치에 대한 브라우저 렌더링을 지원합니다.

* HTML5 오프라인 저장소를 사용하는 방법의 작동 원리를 설명해 주실 수 있나요?

HTML5의 중요한 기능은 오프라인 저장소라고 불리는데, 이는 일부 리소스 파일을 로컬에 저장하므로 이후 페이지를 다시 로드할 때 오프라인에서 웹 애플리케이션에 계속 액세스할 수 있습니다. 동시에 특정 방법(관련 파일 업데이트 또는 관련 API 사용)을 사용하여 오프라인 저장소 및 기타 작업을 업데이트하고 삭제할 수 있습니다.

사용 방법

: 위에서 언급한 HTML5 오프라인 저장소는 새로 생성된 .appcache 파일을 기반으로 합니다. , 이 파일을 통해 서버의 구문 분석된 목록은 리소스를 오프라인으로 저장하며 이러한 리소스는 쿠키처럼 저장됩니다. 나중에 네트워크가 오프라인일 때 브라우저는 오프라인에 저장된 데이터를 통해 페이지를 표시합니다.

(1) 아래와 같이 페이지 헤더에 매니페스트 속성을 추가합니다. (2) 캐시.manifest 파일에 오프라인 저장소 리소스를 씁니다.

CACHEMANIFEST

#v0.11

CACHE:

js / app.js

                                                                     window.applicationCache를 사용하여  window.applicationCache를 사용하여 사용 ‐   ‐ ‐ NETWORK:

 요구사항 실현.

* 브라우저는 HTML5 오프라인 저장소 리소스를 어떻게 관리하고 로드하나요?

온라인일 때 브라우저는 html 헤더에 매니페스트 속성이 있음을 발견하고 매니페스트 파일을 요청합니다. 앱에 처음 액세스하는 경우 브라우저는 이를 기반으로 해당 리소스를 다운로드합니다. 매니페스트 파일의 내용을 저장하고 오프라인 저장을 수행합니다. 앱에 액세스했고 리소스가 오프라인으로 저장된 경우 브라우저는 오프라인 리소스를 사용하여 페이지를 로드한 다음 브라우저는 새 매니페스트 파일을 이전 매니페스트 파일과 비교합니다. 작업이 수행됩니다. 파일이 변경되면 파일의 리소스가 다시 다운로드되어 오프라인으로 저장됩니다.

오프라인일 때 브라우저는 오프라인에 저장된 리소스를 직접 사용합니다.

* 쿠키, sessionStorage, localStorage의 차이점을 설명해 주세요.

공통점: 모두 브라우저 측에 저장되며 출처가 동일합니다.

차이점: 쿠키 데이터는 항상 동일한 출처의 http 요청에 포함되어 있습니다(필요하지 않더라도). 즉, 쿠키는 브라우저와 서버 간에 앞뒤로 전달됩니다. SessionStorage와 localStorage는 데이터를 자동으로 서버에 보내지 않고 로컬에만 저장합니다. 쿠키 데이터에는 쿠키가 특정 경로에만 속하도록 제한할 수 있는 경로 개념도 있습니다. 저장 크기 제한도 다릅니다. 동시에 각 http 요청은 쿠키를 전달하므로 쿠키는 세션 식별자와 같은 매우 작은 데이터를 저장하는 데만 적합합니다. sessionStorage와 localStorage에도 저장 크기 제한이 있지만 쿠키보다 훨씬 크고 5M 이상에 도달할 수 있습니다. 데이터 유효기간이 다릅니다. sessionStorage: 현재 브라우저 창이 닫힐 때까지만 유효하며 당연히 지속되지 않습니다. localStorage: 항상 유효하며 창이나 브라우저를 닫아도 저장되므로 영구 저장됩니다. 데이터, 쿠키는 쿠키에만 설정되어 있으며, 창이나 브라우저를 닫아도 만료일까지 유효합니다. 범위가 다르면 sessionStorage는 동일한 페이지에서도 다른 브라우저 창에서 공유되지 않습니다. localStorage는 모든 동일한 출처 창에서 공유됩니다. 웹 스토리지는 데이터 업데이트 알림을 리스너에게 보낼 수 있는 이벤트 알림 메커니즘을 지원합니다. Web Storage의 API 인터페이스가 사용하기 더 편리합니다.

* iframe의 장점과 단점은 무엇인가요?

iframe의 장점:
1. iframe은 삽입된 웹페이지를 그대로 표시할 수 있습니다.
2. iframe을 참조하는 웹페이지가 여러 개 있는 경우 iframe의 콘텐츠만 수정하면 호출되는 각 페이지의 콘텐츠가 변경되므로 편리하고 빠릅니다.
3. 스타일 통일을 위해 웹페이지의 헤더와 버전이 동일한 경우에는 한 페이지로 작성하고 iframe과 중첩하여 코드의 재사용성을 높일 수 있습니다.
4. 아이콘, 광고 등 느리게 로드되는 타사 콘텐츠가 발생하는 경우 이러한 문제는 iframe으로 해결될 수 있습니다.
iframe의 단점:
1. 페이지가 많이 생성되고 관리가 쉽지 않습니다.
2. iframe 프레임 구조는 때때로 혼란스러울 수 있습니다. 프레임이 많으면 위, 아래, 왼쪽 및 오른쪽 스크롤 막대가 나타날 수 있으며 이는 방문자의 주의를 산만하게 하고 사용자 경험을 저하시킬 수 있습니다.
3. 코드가 복잡하고 일부 검색 엔진에서는 색인을 생성할 수 없습니다. 이는 매우 중요합니다. 현재 검색 엔진 크롤러는 iframe의 콘텐츠를 제대로 처리할 수 없으므로 iframe을 사용하면 검색 엔진 최적화에 해로울 수 있습니다.
4. 많은 모바일 장치(PDA 휴대폰)는 프레임을 완전히 표시할 수 없으며 장치 호환성이 좋지 않습니다.
5.iframe 페이지에서는 서버의 http 요청이 증가하므로 대규모 웹사이트에는 권장되지 않습니다.

그렇게 분석한 결과 Ajax는 기본적으로 iframe을 대체하는 데 사용되므로 iframe은 점차 프런트엔드 개발에서 물러납니다.

* 라벨의 기능은 무엇인가요? 어떻게 사용되나요? (for 또는 로 감싸기)

라벨 라벨은 입력 요소에 대한 라벨(마커)을 정의합니다.
label 요소는 사용자에게 특별한 효과를 제공하지 않습니다. 그러나 마우스 사용자의 유용성은 향상됩니다. 이 컨트롤은 레이블 요소 내부의 텍스트를 클릭하면 트리거됩니다. 즉, 사용자가 레이블을 선택하면 브라우저는 자동으로 레이블과 관련된 양식 컨트롤로 초점을 돌립니다.
Label에는 매우 유용한 두 가지 속성이 있습니다. 하나는 FOR이고 다른 하나는 ACCESSKEY입니다.
FOR 속성:
함수: Label 태그에 바인딩될 HTML 요소를 나타냅니다. 이 태그를 클릭하면 바인딩된 요소가 포커스를 받습니다.
ACCESSKEY 속성:

Function: Label 태그에 바인딩된 요소에 액세스하기 위한 단축키를 나타냅니다. 단축키를 누르면 바인딩된 요소가 포커스를 받습니다.

* HTML5 형식에서 자동 완성 기능을 끄는 방법은 무엇입니까?

autocomplete 속성은 양식의 자동 완성 기능을 활성화해야 하는지 여부를 지정합니다.
자동 완성을 통해 브라우저는 필드에 대한 입력을 예측할 수 있습니다. 사용자가 필드에 입력을 시작하면 브라우저는 이전에 입력한 값을 기반으로 필드를 채울 수 있는 옵션을 표시해야 합니다. <form autocomplete="on/off">
기본값. 자동 완성 기능이 활성화되도록 지정합니다.

off는 자동 완성을 비활성화하도록 지정합니다.

* 브라우저의 여러 탭 간 통신을 구현하는 방법은 무엇입니까? (Alibaba)

곧 출시될 SharedWorker API는 iframe 또는 브라우저 탭이나 창에서도 데이터를 전송할 수 있습니다. 몇 년 전에 Chrome에 구현되었고 얼마 전에 Firefox에 구현되었지만 IE와 Safari에서는 여전히 파악하기 어렵습니다.
(다음 응용 프로그램 시나리오에 대한 우아한 솔루션을 찾아야 합니다. 어떤 사람이 귀하의 웹 사이트를 방문한다고 가정합니다. 그는 로그인하고 두 번째 탭을 열고 해당 탭에서 로그아웃하기로 선택합니다. 이때 그가 연 세 번째 탭은 A 탭이 여전히 로그인된 것처럼 보이지만 모든 작업이 로그인 페이지로 리디렉션되거나 로그인을 방해하게 됩니다. 더 매력적인 해결책은 사용자가 로그인했는지 확인하는 것입니다. , 사용자에게 재인증을 요청하는 대화 상자를 표시하거나 원래 로그인 보기를 표시할 수 있습니다.)
이 기능은 WebSocket API를 통해 구현할 수 있지만 이는 약간 과잉입니다. 결국 큰 칼로 닭을 죽일 수 있는 방법은 없기 때문에 크로스탭 통신을 위한 다른 방법을 찾기 시작했습니다. 가장 먼저 생각한 것은 쿠키를 사용하여 setInterval을 통해 사용자의 로그인 여부를 주기적으로 확인하는 것이었습니다. 결코 충족되지 않을 수도 있는 조건을 확인하는 데 많은 CPU 주기가 낭비되기 때문에 이 솔루션이 마음에 들지 않습니다. 이때는 그냥 "comet"(폴링이라고도 함), 서버 측 이벤트 또는 WebSocket을 사용하는 것이 더 낫다고 생각했습니다.
당나귀를 타고 당나귀를 찾고 있다는 사실을 알고도 여전히 놀랐습니다. 왜냐하면 대답은 내내 localStorage였기 때문입니다!

localStorage가 이벤트를 트리거한다는 사실을 알고 계셨나요? 특히, 다른 탐색 컨텍스트에서 항목이 추가, 수정 또는 삭제될 때마다 이벤트가 트리거됩니다. 실제로 이는 어떤 브라우저 탭이 localStorage에 액세스하든 다른 모든 탭이 창 개체를 통해 이 이벤트를 수신할 수 있음을 의미합니다. 탭이 localStorage를 수정할 때마다 모든 태그 트리거 이벤트에 영향을 미칩니다. 즉, localStorage에 값을 할당하기만 하면 브라우저 탭을 통해 통신할 수 있습니다.

* webSocket은 저사양 브라우저와 어떻게 호환되나요? (Alibaba)

(WebSocket 프로토콜은 HTML5의 새로운 프로토콜입니다. 브라우저와 서버 간의 전이중 통신을 구현합니다. 브라우저에서는 http, Comet을 통해 단방향 통신만 가능합니다. 양방향 통신 어느 정도 시뮬레이션할 수 있지만 효율성이 낮고 좋은 서버 지원이 필요합니다. 플래시의 소켓과 xmlsocket은 진정한 양방향 통신을 달성할 수 있으며 flex ajax 브리지를 통해 이 두 기능을 javascript에서 사용할 수 있습니다. WebSocket이 브라우저에 구현되면 위의 두 기술을 대체하고 널리 사용됩니다.)
WebSocket은 현재 브라우저의 "유일한" 소켓 표준이며, 하위 버전에 액세스하기 위해 제공되는 브라우저 API 내에서 전달됩니다. 브라우저에는 WebSocket 표준이 없습니다. 이는 이러한 브라우저에서 사용자가 이를 통해 소켓 통신을 구현하는 것을 허용하지 않는다는 것을 의미합니다. 호환성에 대한 해결책은 Ajax + 서버 측 스크립트 백업 솔루션 세트를 준비하는 것입니다.
기타 솔루션: Adobe Flash Socket, ActiveX HTMLFile(IE), 멀티파트 인코딩 기반 XHR 전송, 긴 폴링 기반 XHR

* 페이지 가시성 API 어떤 용도로 사용할 수 있나요?

visibilityState 값과 웹페이지가 열린 시간 등을 통해 현재 페이지가 표시되어 있는지 여부를 감지합니다.

페이지가 다른 백그라운드 프로세스로 전환되면 음악 또는 비디오 재생을 자동으로 일시 중지합니다. ;

* 페이지에 로그인하는 방법 화면에 원형 클릭 가능 영역을 구현하나요?

(1) map+area 또는 svg

(2) border-radius

(3) 순수 js 구현에는 점이 원 위에 있는지 확인하고 마우스 좌표를 얻는 등의 간단한 알고리즘이 필요합니다.

* 구현 테두리를 사용하지 않고 1px 높이의 선을 그립니다. 다른 브라우저의 Quirksmode 및 CSSCompat 모드에서도 동일한 효과가 유지됩니다.

* 웹페이지 인증코드는 어떤 보안 문제에 사용되나요? 해결하려고?

악성 등록 및 무차별 대입 크래킹을 방지합니다. 소위 악성 등록 및 무차별 대입 크래킹은 모두 소프트웨어를 사용하여 수행됩니다. 수동 등록이 아무리 빨라도 정보를 하나씩 입력해야 하는데 이는 매우 느리고 기본적으로 서버에 아무런 영향을 미치지 않습니다. 소프트웨어를 사용하여 등록하는 데 인증 코드가 없으면 수천 개의 스레드가 동시에 실행되고 수천 명의 사용자가 한 번에 등록될 수 있으므로 서버의 데이터베이스가 빠르게 비대해지고 운영 효율성이 저하됩니다. 지루한 사람이나 경쟁자가 사이트에 적대적이라면 이 방법은 그 사람을 쉽게 마비시킬 수 있습니다.

* tite와 h1의 차이점, b와 Strong의 차이점, i와 em의 차이점은 무엇인가요?

tilte와 h1의 차이점

검색 엔진 관점에서 제목 태그는 이 페이지의 주제를 설명하는 데 사용되며 웹 페이지의 무게감 중 가장 높은 지점입니다. 하지만 기사 본문에는 제목 태그가 표시되지 않습니다. h1 태그는 일반적으로 기사 본문에 나타나며 방문자에게 표시되는 기사 제목입니다. 따라서 이 두 레이블은 충돌하지 않을 뿐만 아니라 협력적인 관계를 가지고 있습니다. 기사에는 제목과 h1 태그가 모두 있어야 합니다. 이는 기사의 주제를 강조할 뿐만 아니라 제목과 키워드도 강조하여 웹사이트의 이중 최적화 효과를 달성합니다. 일반적으로 제목과 h1 태그의 내용은 동일하게 작성되며 일반적으로 기사에는 하나의 h1 태그만 사용하는 것이 가장 좋습니다. h1 태그가 너무 많으면 검색 엔진이 혼란을 느끼고 기사의 주제를 인식하기 어렵게 됩니다.

b와 Strong의 차이점, 그리고 i와 em의 차이점

사실 이 두 쌍의 태그의 가장 큰 차이점은 하나는 검색 엔진용이고 다른 하나는 사용자용이라는 것입니다. b 태그와 Strong 태그를 예로 들어보겠습니다.

b 태그와 Strong 태그는 우리에게 대담하다는 주관적인 느낌을 주지만 검색 엔진에서는 b 태그와 일반 텍스트 사이에 차이가 없으며 Strong 태그는 강조 역할을 합니다. 즉, 검색 엔진이 자신의 특정 문장을 중요하게 생각하도록 하려면 강한 태그를 사용하세요. 사용자에게 굵은 글씨 효과만 표시하려면 b 태그를 사용하세요. 같은 방식으로 em 태그는 검색 엔진에서도 작동하며 i 태그는 사용자가 기울임꼴 표시만 볼 수 있도록 허용합니다.