이번에는 2018년 최신 프론트엔드 면접 질문을 가져왔습니다. 면접은 프론트엔드 업무에 있어서 빼놓을 수 없는 부분이라는 것을 알고 있습니다. 자주 묻는 프론트엔드 면접 질문을 분류하고 요약한 목적은 여러분의 극복을 돕기 위한 것입니다. 프론트 엔드 인터뷰의 주요 어려움. 살펴보겠습니다.
[관련 추천 : 프런트엔드 면접 질문(2020)]
1. 웹사이트의 파일과 리소스를 어떻게 최적화하나요?
1. http 요청 수를 최대한 줄이고 CSS, js 및 이미지를 병합합니다.
2. CDN을 사용하여 통신 거리를 줄입니다.
3. Gzip 압축 파일 활성화
5. .Css를 페이지 상단에 배치하세요
6. 스크립트를 페이지 하단에 배치하세요
7. CSS와 js를 외부 파일에 배치하세요
10. . CSS, JS를 최소화하고 파일 크기를 줄입니다.
12. 중복 스크립트를 제거합니다.
13. 엔터티 태그를 구성합니다.
14. AJAX 캐시를 사용하여 웹사이트 콘텐츠를 일괄 로드하고 로컬로 업데이트합니다. 여러 도메인 이름으로 웹사이트 리소스를 제공하는 것이 더 효율적일까요? 브라우저는 하나의 도메인 이름에서 동시에 몇 개의 리소스를 다운로드할 수 있습니까?
1. 정적 콘텐츠와 동적 콘텐츠는 별도의 서버에 저장되며, 요청을 처리하는 데 서로 다른 서버가 사용됩니다. 동적 콘텐츠 처리는 동적 콘텐츠만 처리하며 효율성 향상을 위해 다른 어떤 것도 처리하지 않으므로 CDN(콘텐츠 배포 네트워크) 캐싱이 더욱 편리해집니다
2. 브라우저 동시성 제한을 극복하세요(G URL만 선택 가능:
https: / /
lh4.googleusercontent.com/- si4dh2myPWk/T81YkSiAI/AAAAAAAAAQ5o/LlwbBRpp58Q/w497-h373/IMG_20120603_163233.jpg, 이전 lh4를 lh3, lh6 등으로 바꾸면 지도 등에 계속 액세스할 수 있습니다. 동시성이 많이 발생하는 사이트입니다. )
3. 쿠키는 도메인 간에 전송되지 않으므로 대역폭이 절약됩니다.
3. 간단한 슬라이드쇼 효과 페이지를 작성해 주세요
<!DOCTYPE html>
<html>
<head>
<title>幻灯片</title>
<style type="text/css">
.myDiv{
width:600px;
height:400px;
margin:20px auto;
background-size:over;
background-postion:center;
-webkit-animation-name: "loop";
-webkit-animation-duration:20s;
-webkit-animation-iteration-count:infinite;
}
@-webkit-keyframes "loop"{
0%{background:url(http://img5.duitang.com/uploads/blog/201408/12/20140812150016_8NMUU.jpeg) no-repeat;}
25%{background:url(http://pic29.nipic.com/20130518/9908282_142904524164_2.jpg) no-repeat;}
50%{background:url(http://uploadfile.huiyi8.com/2014/0605/20140605114503719.jpg) no-repeat;}
75%{background:url(http://img3.redocn.com/20100322/Redocn_2010032112222793.jpg) no-repeat;}
100%{background:url(http://uploadfile.huiyi8.com/2014/0605/20140605114447934.jpg)no-repeat;}
}
</style>
</head>로그인 후 복사
웹 표준과 표준 설정 조직은 모두 웹 개발을 더욱 '건전하게' 만들기 위한 것입니다. 첫째, 브라우저 개발자가 통일된 표준을 따르도록 제약하고, 둘째, 웹 사이트 개발자를 제약하여 개발 난이도와 개발 비용을 줄입니다. , SEO가 더 좋아질 것이며, 코드 오용으로 인한 다양한 버그 및 보안 문제가 발생하지 않아 궁극적으로 웹 사이트의 유용성이 향상됩니다.
5. CSS 애니메이션과
JavaScript
애니메이션의 장점과 단점을 설명해 주세요.
JS 애니메이션
단점: (1) JavaScript는 브라우저의 메인 스레드에서 실행되며, 메인 스레드에서 실행해야 하는 다른 JavaScript 스크립트, 스타일 계산, 레이아웃, 그리기 작업 등이 있어 간섭을 받을 수 있습니다. 스레드가 차단됩니다. 이로 인해 프레임이 손실됩니다.
(2) 코드의 복잡성은 CSS 애니메이션보다 높습니다.
장점: (1) JavaScript 애니메이션 제어 기능이 매우 강력하며 애니메이션 재생 프로세스 중에 시작, 일시 정지, 재생, 종료, 취소도 모두 가능합니다. (2) 애니메이션 효과는 css3 애니메이션
보다 풍부합니다. 곡선 이동, 충격 깜박임 및 시차 스크롤 효과와 같은 일부 애니메이션 효과는 JavaScript 애니메이션으로만 완성할 수 있지만 JS는 호환성 문제가 있습니다. 대부분의 경우 호환성이 없습니다. 문제
CSS 애니메이션
단점: (1) 실행 중인 프로세스 제어가 약하고 이벤트 바인딩
콜백 기능
을 연결할 수 없습니다. CSS 애니메이션은 일시 중지만 가능하고, 애니메이션에서 특정 시점을 찾을 수 없으며, 애니메이션을 중간으로 되돌릴 수 없고, 시간 척도를 변경할 수 없으며, 특정 위치에 콜백 기능을 추가하거나 재생 이벤트를 바인딩할 수 없으며, 진행률 보고서가 없습니다(2 ) 코드가 장황합니다. 약간 더 복잡한 애니메이션을 구현하기 위해 CSS를 사용하려는 경우 CSS 코드는 결국 매우 번거로워집니다. 장점: (1) 브라우저는 애니메이션을 최적화할 수 있습니다.
브라우저는 setTimeout 및 setInterval과 비교할 때 requestAnimationFrame과 유사한 메커니즘을 사용합니다. 애니메이션 설정에 대한 requestAnimationFrame의 주요 장점은 다음과 같습니다. 1) requestAnimationFrame은 각 프레임의 모든 DOM 작업을 집중하여 한 번의 다시 그리기 또는 리플로우로 완료합니다. 간격은 일반적으로 초당 60프레임인 브라우저의 새로 고침 빈도를 밀접하게 따릅니다. 2) requestAnimationFrame은 숨겨진 요소나 보이지 않는 요소에서 다시 그리거나 리플로우하지 않습니다. 이는 물론 CPU, GPU 및 메모리 사용량이 적음을 의미합니다. 하드웨어 가속 강제 사용(GPU를 통해 애니메이션 성능 향상)
이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 관련 읽기:
2018 최신 프론트엔드 면접 질문 2
2018 최신 프론트엔드 면접 질문 3
2018 최신 프론트엔드 면접 질문 4
2018 최신 정면 -면접 질문 종료 질문 5
위 내용은 2018년 최신 프론트엔드 면접 질문 6가지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
