집 > 기사 > 웹 프론트엔드 > 최신 프론트엔드 필기시험 문제 요약

최신 프론트엔드 필기시험 문제 요약

php中世界最好的语言원래의: 2017-11-18 16:59:082003검색

많은 친구들이 프론트엔드 필기시험 문제를 요구하는 것을 보고, 면접 질문 몇 가지를 모아봤습니다. 모두 2017년 최신 질문들입니다. 여러분의 실력 향상에 도움이 되기를 바라겠습니다. 또한, 원하시는 회사에 합격하시길 바라겠습니다.

이 글은 2017년 최신 프론트엔드 필기시험 기출문제를 좀 더 자세히 모아 분석한 글입니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

1. 한 페이지에 있는 두 개의 div가 전체 브라우저를 덮고 있는지 확인하세요. 왼쪽 div는 항상 100px이고 오른쪽 div는 브라우저 크기에 따라 변경됩니다(예: 브라우저는 500, 오른쪽 div는 400, 찾아보기 컨테이너는 900, 오른쪽 div는 800), 대략적인 CSS 코드를 적어주세요.

1. flex

//html
<div class=&#39;box&#39;><div class=&#39;left&#39;></div> <div class=&#39;right&#39;></div></div>
//css
.box {
    width: 400px;
    height: 100px;
    display: flex;
    flex-direction: row;
    align-items: center;
    border: 1px solid #c3c3c3;
}
.left {
    flex-basis：100px;
    -webkit-flex-basis: 100px;
    /* Safari 6.1+ */
    background-color: red;
    height: 100%;
}
.right {
    background-color: blue;
    flex-grow: 1;
}

2. 플로팅 레이아웃

<div id="left">Left sidebar</div>
<div id="content">Main Content</div>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
#left {
    float: left;
    width: 220px;
    background-color: green;
}
#content {
    background-color: orange;
    margin-left: 220px;
    /*==等于左边栏宽度==*/
}
</style>

2. 프론트엔드 성능 최적화 방법을 적어주세요. 많을수록 좋습니다

1. 배포 전, 이미지 압축, 코드 압축

3. js 코드 구조를 최적화하고 중복 코드를 줄입니다

4. HTTP 요청을 줄이고 HTTP 캐시를 합리적으로 설정합니다

5. 콘텐츠 배포 CDN을 사용하여 정적 리소스 캐싱을 가속화합니다.

7. 이미지 로딩 지연

3. URL 입력부터 페이지 로딩 완료, 페이지 표시까지의 과정에서 어떤 일이 발생하나요? (프로세스가 자세할수록 좋습니다.)

주소 입력

1. 브라우저는 도메인 이름의 IP 주소를 검색합니다.

2 이 단계에는 다음을 포함하는 DNS의 특정 검색 프로세스가 포함됩니다. 캐시 -> 시스템 캐시 ->라우터 캐시...

3. 브라우저가 웹 서버에 HTTP 요청을 보냅니다

4. 서버의 영구 리디렉션 응답(http://example.com에서 http:/ /www.example.com)

5. 브라우저가 리디렉션 주소를 추적합니다

6. 서버가 요청을 처리합니다

8. 브라우저가 HTML을 표시합니다. 브라우저는 HTML에 포함된 리소스(예: 사진, 오디오, 비디오, CSS, JS 등)를 얻기 위해 요청을 보냅니다.

10. 브라우저는 비동기 요청을 보냅니다

페이지의 제한 사항을 간략하게 설명하세요. 쿠키 액세스

교차 도메인 문제

set HttpOnly

5. 브라우저 다시 그리기 및 리플로우를 설명하고 DOM 작업으로 인한 리플로우를 개선할 수 있는 방법

1. . 스타일이 동적으로 변경되는 경우 cssText

// 不好的写法
var left = 1;
var top = 1;
el.style.left = left + "px";
el.style.top = top + "px"; // 比较好的写法
el.className += " className1";
// 比较好的写法
el.style.cssText += ";
left: " + left + "px;
top: " + top + "px;";

를 사용하세요.

2. 작업할 요소를 "오프라인 처리"로 두고 처리 후 함께 업데이트하세요

a) 캐싱 작업에 DocumentFragment를 사용하여 리플로우 실행

b) display:none 기술을 사용하고 두 번의 리플로우와 다시 그리기만 실행합니다.

c) cloneNode(true 또는 false) 및 replacementChild 기술을 사용하여 한 번의 리플로우와 다시 그리기를 실행합니다.

6. 후크

1.beforcreate

2.created

3.beformount

4.mounted

5.beforeUpdate

6.updated

7.actived

8.deatived

9.파괴 전

10.destroyed

Seven.js 교차 도메인 요청에 대해 몇 가지 방법을 작성할 수 있습니다

1. document.domain을 수정하여 교차 도메인

3. . 교차 도메인에는 window.name을 사용하세요.

4. HTML5에 새로 도입된 window.postMessage 메소드를 사용하여 도메인 간에 데이터를 전송하세요(즉, 67에서는 이를 지원하지 않습니다).

5. CORS는 서버에 액세스를 설정해야 합니다. -제어-허용-원본.

6. 이 nginx 역방향 프록시 방법은 거의 언급되지 않지만 대상 서버의 협력이 필요하지 않지만 요청을 전달하려면 전송 nginx 서버를 구축해야 합니다

8. 프론트 엔드 엔지니어링 이해

개발 사양

모듈식 개발

컴포넌트 개발

컴포넌트 창고

성능 최적화

프로젝트 배포

개발 프로세스

개발 도구

Nine, js 딥 카피 방식

1. jq의 $.extend(true, target, obj)

2.newobj = Object.create(sourceObj), // 하지만 여기에는 문제가 있습니다. newobj를 변경해도 sourceobj에는 영향을 미치지 않습니다. 하지만 sourceobj의 변경 사항은 다음과 같습니다. newObj에 영향을 미칩니다

3.newobj = JSON.parse(JSON.stringify(sourceObj))

10.js 디자인 패턴

일반적으로 디자인 패턴은 세 가지 범주로 나뉩니다.

창의적인 패턴 , 총 5개: 팩토리 메소드 패턴,
추상 팩토리 패턴

, 싱글턴 패턴,

빌더 패턴

, 프로토타입 패턴.

총 7가지 구조 모드가 있습니다:

어댑터 모드

, 데코레이터 모드, 에이전트 모드, 모양 모드, 브릿지 모드, 콤비네이션 모드, 플라이웨이트 모드.

행동 패턴 총 11개: 전략 패턴, 템플릿 메소드 패턴, 관찰자 패턴, 반복 하위 패턴, 책임 체인 패턴, 명령 패턴, 메모 패턴, 상태 패턴, 방문자 패턴, 중재자 패턴

11. 사진 미리보기

<input type="file" name="file" onchange="showPreview(this)" />
<img id="portrait" src="" width="70" height="75">
function showPreview(source) {
  var file = source.files[0];
  if(window.FileReader) {
      var fr = new FileReader();
      fr.onloadend = function(e) {
        document.getElementById("portrait").src = e.target.result;
      };
      fr.readAsDataURL(file);
  }
}

12. 다차원 배열 평면화

1. 기존 방법

var result = []
function unfold(arr){
     for(var i=0;i< arr.length;i++){
      if(typeof arr[i]=="object" && arr[i].length>1) {
       unfold(arr[i]);
     } else {        
       result.push(arr[i]);
     }
  }
}
var arr = [1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];
unfold(arr)

2、使用tostring

var c=[1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];
var b = c.toString().split(&#39;,&#39;)

3、使用es6的reduce函数

var arr=[1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];
const flatten = arr => arr.reduce((a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []);
var result = flatten(arr)

十三、iframe有那些缺点？

iframe会阻塞主页面的Onload事件；

搜索引擎的检索程序无法解读这种页面，不利于SEO;

iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题。

以上就是我收集的前端笔试题以及答案，所述对大家有所帮助。

최신 프론트엔드 필기시험 문제 요약

관련 기사