집 >헤드라인 >3년간의 인터뷰 경험 공유: 프론트엔드 인터뷰의 4단계와 3가지 결정 요인

3년간의 인터뷰 경험 공유: 프론트엔드 인터뷰의 4단계와 3가지 결정 요인

青灯夜游앞으로: 2022-12-16 15:32:333821검색

올해 취업 상황은 그야말로 암울합니다. 내년은 올해보다 더 안 좋을 것이라는 '운이 좋은 마음'으로 한달 반 동안 고민한 끝에 꽤 좋은 제안을 받았습니다. , 급여 및 플랫폼이 크게 개선되었지만 여전히 내 심리적 기대와는 큰 격차가 있습니다. 그래서 가장 큰 결론은: 노골적으로 말하지 마세요! 알몸으로 아무 말도 하지 마세요! 알몸으로 아무 말도 하지 마세요! 인터뷰를 하면서 받는 압박감과 현실과 이상의 괴리로 인한 심리적 피해는 헤아릴 수 없을 만큼 크기 때문에 그런 환경에서 살아남는 것이 좋은 선택이다.

관련 추천: 2023년 대규모 프론트엔드 면접 질문 요약(모음)

다음은 일반적인 상황에서 프론트엔드 인터뷰에서 경험하게 될 다음 4단계와 3가지 결정 요소를 요약한 것입니다. 3년간의 인터뷰 경험 공유: 프론트엔드 인터뷰의 4단계와 3가지 결정 요인

프론트엔드 직원으로서는 기술의 깊이와 폭이 1위입니다. 이때 자신의 위치와 방향을 찾아야 합니다. 둘째, 좋은 의사소통 능력과 표현력, 의상과 퍼포먼스, 기타 오프사이트 요소는 면접관의 인지도를 높일 수 있습니다. 어떤 사람들은 매우 능숙하지만 면접관은 당신이 오만하고 엉성하며 독선적이며 명확하게 표현하지 못한다고 생각하여 당신을 거부할 것입니다. 다음은 제가 받은 질문과 제가 준비한 전체 내용을 요약한 것입니다. 왜냐하면 면접 과정에서 면접관과의 의사소통은 대체로 단순한 승인이 아니기 때문에 자신의 지식을 전달하는 것이 가장 좋습니다. 요약하고 간결하게 표현한 후, 면접관의 질문에 따라 즉석에서 완성합니다. [추천 학습: 웹 프론트 엔드, 프로그래밍 교육]

1. 자기 소개

면접관은 자기 소개를 요구하며, 자기 소개의 범위를 제한하지 않습니다. 자기소개서에서 배우기 나는 당신을 알고 있으므로 소개는 짧고 원활해야 합니다. 다른 면접관을 만나도 자기소개서의 내용은 똑같을 수 있으므로 미리 단어를 준비하고 확실하게 하는 것이 중요합니다. 주의를 기울이십시오: 넘어지지 말고 자신감을 가지십시오! 원활한 표현력과 소통 능력도 면접관이 지원자를 평가하는 포인트 중 하나입니다. 나도 면접관이었는데, 자신감 있고 관대한 지원자가 선호될 가능성이 더 높습니다. 1. 기본 이력서를 포함한 개인 소개(기본 정보)는 짧아야 합니다 2. 기술적인 것과 비기술적인 것을 포함하여 자신이 잘하는 것. 기술적인 사람들은 당신의 전환을 이해할 수 있고, 기술적인 사람이 아닌 사람들은 당신을 사람으로 이해할 수 있습니다 3. 당신이 수행한 가장 핵심적인 프로젝트를 선택하고, 추천과 같은 모든 프로젝트를 소개하지 마십시오 4. 관심사나 의견, 심지어 자신의 경력 계획까지. 이것은 면접관에게 느낌을 주어야 합니다: "던지기" 또는 "생각"에 열심입니다

예: 안녕하세요 면접관님, 제 이름은 xx년에 xx대학교를 졸업했고 졸업 후 프론트엔드 개발에 종사해 왔습니다. . 일하다. 제가 잘하는 기술 스택은 vue family bucket입니다. 저는 vue2와 vue3의 사용 및 소스 코드에 대해 어느 정도 연구했습니다. 저는 webpack 및 vite 구현을 주도한 경험이 있습니다. 중대형 프로젝트를 처음부터 끝까지 수행할 수 있습니다. 이전 회사에서는 주로 xx 제품군을 담당했고, 주요 업무는 다음과 같았습니다. . . . . . 개발 관련 업무 외에도 그는 요구 사항 검토, UI/UE 상호 작용 검토 심사위원, 개발 일정 담당, 멤버 협업, 멤버 코드 검토, 정기 회의 구성 등 특정 기술 관리 경험도 보유하고 있습니다. 보통 제가 만든 블로그에 연구 기사나 연구 노트를 기록하고 있으며 독창적인 기술 기사를 작성하여 Nuggets에 게시하고 있으며 XX상을 수상했습니다.

일반적으로 자기소개는 3~5분 정도를 유지하도록 노력하세요. 간결하고 핵심을 전달하는 것이 가장 중요하며, 그다음에는 자신의 능력과 장점을 강조하세요. 일반 기술 면접관의 경우 자기 소개는 면접 전 관례적인 서두에 불과합니다. 일반적으로 이력서에 기재된 기본 정보는 이미 귀하에 대한 기본적인 이해를 충족시켰습니다. 그러나 감독자 수준의 면접관이나 HR의 경우, 그들은 귀하의 성격, 행동 습관, 스트레스 저항성 및 기타 포괄적인 능력을 중요하게 여길 것입니다. 따라서 면접 과정에서 최대한 긍정적이어야 하며, 지속적인 학습, 팀워크 등 폭넓은 취미를 가지고 있어야 하며, 무조건 야근을 할 수 있어야 합니다. 물론 치트를 허용하려는 것은 아니지만, 이런 환경에서는 이러한 '사이드 능력'도 어느 정도 경쟁력을 높일 수 있는 마법 무기이기도 하다.

2. 프로젝트 마이닝

현재 시장 상황에서 면접 통지를 받은 경우에는 귀하의 프로젝트 경험이 귀하가 모집하는 직위에 더 적합하기 때문일 가능성이 높습니다. 따라서 다음과 같이 프로젝트 준비에 특별한 주의를 기울여야 합니다.

프로젝트에 사용된 기술을 자세히 알아보세요
디자인 전반의 통제프로젝트 아이디어
프로젝트 관리운영 프로세스
팀워크 능력.
프로젝트의 최적화 포인트는 무엇인가요

자세한 내용은 사람마다 다르기 때문에 따로 언급하지 않고 각자의 상황에 맞춰서 파헤쳐보겠습니다.

3. 개인

먼저 개인에 대해 이야기해 보겠습니다. 기술 면접을 통과하고 상사 및 HR 수준에 도달하면 현재 기술이 아무리 훌륭하더라도 추가로 개인 잠재력, 학습 능력, 성격, 팀 통합 등 소프트 스킬과 관련하여 쉽게 질문할 수 있는 질문은 다음과 같습니다.

왜 직업을 바꾸셨나요?

자신의 야망을 보여주기 위해 개인 개발부터 직접 시작하세요.

저는 항상 더 나은 기술적 분위기를 가질 뿐만 아니라 더 많은 것을 배울 수 있는 더 큰 플랫폼으로 가고 싶었습니다.
나 자신을 확장하고 싶습니다. 지식 측면에서 저는 항상 x-end xx 제품을 만들어 왔습니다. 기술 스택은 비교적 간단하므로 xx로부터 배워야 합니다.
저는 이전 직장에서 편안함을 느꼈고, 그런 일만 할 수 있었습니다. 플랫폼을 변경하여 기술 범위를 넓히고, 새로운 기술 시스템을 접하고 배우는 것이 더 유익할 것입니다. 나의 개인적인 발전을 위해

당신과 평범한 프런트 엔드에 대해 알려주십시오.

1. 나는 내가 다루는 프로젝트를 종합적으로 분석하는 데 능숙합니다. 하나는 마인드 맵을 사용하여 각 모듈의 비즈니스를 분해하는 것입니다. 해결책은 기능에 따라 각 코드 모듈을 구별하는 것입니다. 다시 개발로 들어갑니다. 이것은 맹목적인 비즈니스 개발만 하는 많은 프런트엔드가 할 수 없는 일이라고 생각합니다2. 저는 주로 Vue의 소스 코드를 계속해서 배우고 있으며, 예전에 한줄 한줄 썼었는데 teleport 소스코드를 집중적으로 읽어보고, 작성하는데 30시간 정도 걸렸고, 소스코드 각 줄의 기능과 역할을 해석해봤습니다(그런데 읽기와 좋아요가 왜 이렇게 적나요) .

당신의 단점은 무엇입니까?

저는 좀 더 진지하고 내성적인 성격이라 좀 더 외향적인 사람이 되도록 노력하겠습니다. 하나는 프론트엔드 대표로서 다양한 자료를 준비하고 스피치도 해야 하고 다양한 리뷰 미팅을 해야 합니다. 그래서 저는 팀 내에서 기술 공유를 더 많이 하고 매주 정기적인 회의를 주최하는데, 이를 통해 표현하고 토론할 수 있는 용기도 얻게 됩니다.

최근 주목받고 있는 신기술이 있나요?

패키지 종속성 관리 도구 pnpm(종속성 반복 설치 없음, 플랫하지 않은 node_modules 구조, 기호 링크를 통해 종속 패키지 추가)
패키징 도구 vite(매우 빠른 개발 환경)
flutter(Google 크로스 플랫폼, 고충실도, 고성능에 초점을 맞춘 오픈 소스 모바일 애플리케이션(App) 개발 프레임워크 출시)
rust (js의 미래 기반이라고 들었는데)
turbopack, webpack의 후속 , Vite보다 10배 빠르며, webpack은 700배 빠르다고 합니다. 그렇다면 You Yuxi는 Vite보다 10배 빠르지 않다는 것을 직접 확인했습니다. 계속 연구하시겠습니까?
제 개인적인 계획은 다음과 같습니다.

5~7년은 충분한 지식을 축적한 후, 관심 있는 특정 방향을 선택해 깊이 있게 공부하고 해당 분야의 전문가가 되기 위해 노력할 수 있습니다

팀 규모, 팀 사양 및 개발 프로세스 사람마다 다르기 때문에 그에 맞게 준비하세요. 다양한 규모의 팀의 R&D 모델은 매우 다르기 때문입니다. 코드 검토의 목표

1. 가장 중요한 것은 코드의 유지 관리성(변수 이름 지정, 주석, 함수 통일 원칙 등)입니다.

2. 확장성: 캡슐화 기능(구성 요소 및 코드 논리 여부) 애플리케이션 재현 가능, 확장성)

3. ES 새로운 기능(es6+, ES2020, ES2021 옵셔널 체인, at)4. 기능 사용 사양(예: forEach로 맵을 사용할 때)

5. 알고리즘을 사용하여 더 우아하고 성능이 뛰어난 코드를 작성하는 방법 팀을 이끄는 방법 저는 이전 회사에서 기술 관리 직책을 맡았습니다. 0, 개발 사양 구현

, 이름 지정부터 모범 사례, 다양한 도구 라이브러리 사용까지 회사 내부 위키에 게시했습니다. 초기에는 새로운 사람이 들어오면 코드 품질에 대한 후속 조치를 우선적으로 수행합니다1.

팀 분업: 각 사람이 단독으로 제품 개발을 담당하고 그 다음에는 일반적으로 지정합니다. 소수의 사람들이 공개 모듈을 개발합니다 2. 코드 품질 보증: 우리는 매주 코드를 검토하고 코드에 대한 교차 검토를 구성하며 수정 결과의 출력 기사를 위키에 올릴 것입니다. 3 정기 회의 조직: 매주 정기 회의를 조직하여 각자의 진행 상황과 위험을 동기화하고 각자의 진행 상황에 따라 업무를 할당합니다. 4. 기술 공유: 가끔 기술 공유도 진행합니다. 처음에는 마이크로 프론트 엔드 시스템, ice stark 5의 소스 코드, Public Demand Pool 등을 공유했습니다. webpack5/vite의 업그레이드 등; pnpm 사용 소개, 토폴로지 맵 성능 최적화 6, 최적화 프로젝트: 제품의 첫 번째 버전이 나온 후 특별한 성능 최적화 프로젝트, 첫 번째 화면 로딩 성능, 패키징 볼륨 최적화도 시작했습니다. ; 해당 최적화 항목은 모두가 책임지도록 하세요

야근에 대해 어떻게 생각하시나요?

잔업을 하는 경우에는 일반적으로 두 가지 상황이 있다고 생각합니다. 첫째, 프로젝트 일정이 빡빡해서 당연히 프로젝트 진행이 우선이고, 결국 모두가 이것에 생계가 달려있습니다 둘째, 자신의 능력 문제, 사업에 익숙하지 않거나 새로운 기술 스택을 도입하면 따라잡기 위해 야근을 해야 할 뿐만 아니라, 여가 시간을 활용하여 부족한 점을 보완하고 공부해야 한다고 생각합니다

당신의 취미는 무엇입니까?

저는 주로 독서를 좋아합니다. 즉, WeChat 읽기에서 심리학, 시간 관리, 말하기 기술에 관한 책을 읽습니다. 그런 다음 기사를 씁니다. 왜냐하면 메모하는 것만으로는 잊어버리기 쉽기 때문입니다. 나는 다른 사람의 내용만 기록하고 나만의 독창적인 기사를 작성하는 과정에서 매우 높은 비율의 지식을 내 것으로 변환할 수 있습니다. 따라서 나만의 금광 기사 외에도 종종 금광 기사에 대한 의견도 있습니다. 기사는 위키로 내보내집니다. 다른 취미는 친구들과 농구하고 노래하는 것입니다.

4. 기술

기술 인터뷰에 주의하세요. 간결하고 요점을 명확하게 하세요. 적절하게 자세하게 설명해주시고, 이해가 안 되시면 이해가 안 된다고 말씀해주세요. 면접 과정은 면접관과의 대면 소통 과정이기 때문에 면접관은 핵심 내용을 말하지 않고 오랫동안 수다를 떠는 지원자를 좋아하지 않을 것이다. 동시에, 말하는 과정에서 듣는 사람은 수동적으로 반응할 것이다. 관심 없는 부분은 무시하기 때문에 특정 기술의 핵심 기능을 부각시키고 핵심을 중심으로 적절하게 확장하는 것이 필요합니다. 대기업은 기본적으로 알고리즘 질문을 통해 후보자를 선별합니다. 알고리즘에는 지름길이 없습니다. 차근차근 질문에 답한 뒤 다시 질문에 답하는 것뿐입니다. 기술 면접 과정은 주로 프론트엔드 분야와 관련된 기술에 대한 질문을 하게 됩니다. 일반적으로 면접관은 귀하의 소속을 기반으로 진행되며, 더 자주 면접관은 이전에 준비한 면접 질문을 기반으로 하거나, 프로젝트 팀이 잘 알고 있는 기술이기 때문에 질문하려면 클릭하세요. 모든 측면이 상당히 까다롭기 때문입니다. 발전 전망이 좋은 중견 기업에 입사하고 싶다면, 다른 사람의 경험만 외운다고 자신을 속일 수는 없습니다. 포인트는 종합적인 학습을 거쳐 추출한 핵심 지식 포인트 중 일부이므로 면접관의 '다양한 사고'를 두려워하지 않습니다. 면접 과정에는 일반적으로 다음 8가지 주요 지식 유형을 고려하는 과정이 포함됩니다: JS/CSS/TypeScript/프레임워크(Vue, React)/브라우저 및 네트워크/성능 최적화/프론트엔드 엔지니어링/아키텍처/기타 3년간의 인터뷰 경험 공유: 프론트엔드 인터뷰의 4단계와 3가지 결정 요인

따라서 인터뷰 전 기술적인 준비는 결코 하루아침에 이루어지지 않습니다. 또한 매일의 축적이 필요합니다. 예를 들어, 장기적으로는 작은 지식 포인트 중 하나를 종합적으로 공부하는 데 10~20분을 투자할 수 있습니다. 몇 년의 인터뷰라도 설득력있게 이야기하는 것만으로도 충분합니다 .

JS 장

JS 학습용 빨간 봉투 책과 Yu Yu 씨의 심층 JS 시리즈 블로그기본적으로 괜찮습니다. 일반적인 JS 면접 질문에는 일반적으로 다음이 포함됩니다. 프로토타입 체인? 3년간의 인터뷰 경험 공유: 프론트엔드 인터뷰의 4단계와 3가지 결정 요인

프로토타입의 본질은 객체

입니다. 생성자를 만들 때 이 함수는 기본적으로

속성을 가지며 이 속성의 값은 이 함수의 프로토타입 개체를 가리킵니다. 이 프로토타입 객체는 생성자를 통해 생성된 인스턴스 객체에 대한 공유 속성을 제공하는 데 사용됩니다. 즉, 프로토타입 기반 상속 및 속성 공유를 구현하는 데 사용됩니다. prototype따라서 생성자를 통해 생성된 인스턴스 객체 는 모두 이 함수의 프로토타입 객체는 위의 속성을 상속받습니다인스턴스의 속성을 읽을 때 찾을 수 없으면 객체와 관련된 프로토타입에서 속성을 찾습니다. 찾을 수 없으면 최상위 수준에 도달할 때까지 프로토타입의 프로토타입을 찾습니다. (최상위 수준은 Object.prototype의 프로토타입이고 값은 null입니다.) Object.prototype的原型，值为null）。所以通过原型一层层相互关联的链状结构就称为原型链。
什么是闭包？
定义：闭包是指引用了其他函数作用域中变量的函数，通常是在嵌套函数中实现的。从技术角度上所有 js 函数都是闭包。从实践角度来看，满足以下俩个条件的函数算闭包

即使创建它的上下文被销毁了，它依然存在。（比如从父函数中返回）

在代码中引用了自由变量（在函数中使用的既不是函数参数也不是函数局部变量的变量称作自由变量）

使用场景：

创建私有变量 vue 中的data，需要是一个闭包，保证每个data中数据唯一，避免多次引用该组件造成的data共享

延长变量的生命周期一般函数的词法环境在函数返回后就被销毁，但是闭包会保存对创建时所在词法环境的引用，即便创建时所在的执行上下文被销毁，但创建时所在词法环境依然存在，以达到延长变量的生命周期的目的

应用

柯里化函数

例如计数器、延迟调用、回调函数等

this 的指向
在绝大多数情况下，函数的调用方式决定了 this 的值（运行时绑定） 1、全局的this非严格模式指向window对象，严格模式指向 undefined 2、对象的属性方法中的this 指向对象本身 3、apply、call、bind 可以变更 this 指向为第一个传参 4、箭头函数中的this指向它的父级作用域，它自身不存在 this
浏览器的事件循环？
js 代码执行过程中，会创建对应的执行上下文并压入执行上下文栈中。如果遇到异步任务就会将任务挂起，交给其他线程去处理异步任务，当异步任务处理完后，会将回调结果加入事件队列中。当执行栈中所有任务执行完毕后，就是主线程处于闲置状态时，才会从事件队列中取出排在首位的事件回调结果，并把这个回调加入执行栈中然后执行其中的代码，如此反复，这个过程就被称为事件循环。事件队列分为了宏任务队列和微任务队列，在当前执行栈为空时，主线程回先查看微任务队列是否有事件存在，存在则依次执行微任务队列中的事件回调，直至微任务队列为空；不存在再去宏任务队列中处理。 常见的宏任务有setTimeout()、setInterval()、setImmediate()、I/O、用户交互操作，UI渲染 常见的微任务有promise.then()、promise.catch()、new MutationObserver、process.nextTick()그래서 프로토타입을 통해 층층이 서로 연결되는 체인형 구조를 프로토타입 체인이라고 합니다.
클로저란 무엇인가요?

정의: 클로저는 일반적으로 중첩된 함수에서 구현되는 다른 함수 범위의 변수를 참조하는 함수 를 나타냅니다.
기술적으로 모든 js 함수는 클로저입니다. 실용적인 관점에서 다음 두 가지 조건을 충족하는 함수는 클로저로 간주됩니다.

만든 컨텍스트가 파괴되더라도 여전히 존재합니다. (예를 들어 상위 함수에서 반환)

자유 변수는 코드에서 참조됩니다(함수 매개변수도 아니고 함수 로컬 변수도 아닌 함수에서 사용되는 변수를 자유 변수라고 합니다) 사용 시나리오:

개인 변수 만들기

vue의 데이터는 각 데이터의 데이터가 고유함을 보장하고 구성 요소에 대한 여러 참조로 인해 발생하는 데이터 공유를 방지하기 위해 클로저여야 합니다. 변수의 수명 주기 연장 🎜일반적으로 함수가 반환된 후 함수의 어휘 환경이 파괴되지만, 클로저는 함수가 생성된 실행 컨텍스트가 파괴되더라도 해당 함수가 생성된 어휘 환경에 대한 참조를 저장합니다. 확장을 달성하기 위해 여전히 존재합니다. id="heading-17">🎜this 🎜🎜🎜를 가리키는 경우 대부분의 경우 함수를 호출하는 방법에 따라 this(런타임 바인딩) 🎜🎜1의 값이 결정됩니다. 엄격 모드는 창 개체를 가리키고, 엄격 모드는 정의되지 않은 창 개체를 가리킵니다🎜🎜2. 개체의 속성 메서드에서 이는 개체 자체를 가리킵니다🎜🎜3. 첫 번째 전달된 매개변수🎜🎜4. 화살표 함수의 이 매개변수는 자체적으로 존재하지 않는 상위 범위를 가리킵니다.🎜

🎜브라우저의 이벤트 루프? 🎜🎜🎜js 코드가 실행되는 동안 해당 실행 컨텍스트가 생성되어 실행 컨텍스트 스택에 푸시됩니다. 🎜🎜비동기 작업이 발생하면 작업이 일시 중지되고 비동기 작업을 처리하기 위해 다른 스레드로 넘겨집니다. 비동기 작업이 처리되면 콜백 결과가 이벤트 대기열에 추가됩니다. 🎜🎜실행 스택의 모든 작업이 실행되면, 즉 메인 스레드가 유휴 상태일 때 가장 먼저 순위가 매겨진 이벤트 콜백 결과가 이벤트 큐에서 꺼내지고 이 콜백이 실행 스택에 추가된 다음 그 안에 있는 코드가 실행되므로 이 프로세스를 반복적으로 이벤트 루프라고 합니다. 🎜🎜이벤트 큐는 🎜매크로 작업 큐🎜와 마이크로 작업 큐로 구분됩니다. 현재 실행 스택이 비어 있으면 메인 스레드는 먼저 마이크로 작업 큐에 이벤트가 있는지 확인하고 이벤트 콜백을 수행합니다. 마이크로 작업 대기열은 마이크로 작업 대기열이 비어 있을 때까지 순차적으로 실행됩니다. 존재하지 않으면 매크로 작업 대기열에서 처리됩니다. 🎜🎜🎜일반적인 매크로 작업에는 🎜`setTimeout()`, `setInterval()`, `setImmediate()`, I/O, 사용자 상호 작용 작업, UI가 포함됩니다. 렌더링🎜🎜🎜일반적인 마이크로 작업에는🎜`promise.then()`, `promise.catch()`, `new MutationObserver`, `process.nextTick이 포함됩니다. ()`🎜🎜🎜매크로 작업과 마이크로 작업의 근본적인 차이점🎜🎜🎜🎜🎜매크로 작업에는 실행과 콜백이 필요한 명확한 비동기 작업이 있으며 다른 비동기 스레드의 지원이 필요합니다🎜🎜🎜🎜마이크로 작업 명확하지 않습니다. 비동기 작업을 실행해야 하며 콜백만 필요하며 다른 비동기 스레드 지원은 필요하지 않습니다. 🎜🎜🎜🎜🎜JavaScript에서 데이터가 스택과 힙에 저장되는 방식🎜🎜🎜1. 기본 데이터 유형은 크기가 고정되어 있고 조작하기 쉽기 때문에 참조 크기에 저장됩니다. 데이터의 종류가 불확실하므로 스택에 저장하고 메모리 신청 시 크기를 결정하도록 합니다. 🎜🎜3. 이런 방식으로 별도로 저장하면 메모리 사용량을 최소화할 수 있습니다. 스택의 효율성은 힙의 효율성보다 높습니다🎜🎜4. 스택 메모리의 변수는 실행 환경이 종료된 후 즉시 가비지 수집되며, 힙 메모리의 변수에 대한 모든 참조는 종료되기 전에 종료되어야 합니다. 재활용되세요🎜🎜🎜v8 가비지 수집에 대해 이야기해 보겠습니다🎜🎜 🎜1. 객체의 생존 시간에 따라 여러 세대로 메모리 가비지 수집을 수행한 다음 세대마다 다른 재활용 알고리즘을 사용합니다. 시간에 대한 공간 청소 알고리즘을 사용합니다. 전체 공간을 두 개의 블록으로 나누고 그 중 하나의 변수만 존재하며, 살아남은 변수는 다른 공간으로 복사되고, 살아남지 않는 변수는 재활용됩니다. 반복해서 반복됩니다🎜🎜3. 이전 세대는 마크 지우기 및 마크 정렬을 사용합니다. 마크 지우기: 모든 객체를 순회하면 해당 객체에 액세스할 수 있으며(라이브), 라이브가 아닌 객체는 가비지로 재활용됩니다. 재활용 후에는 메모리 단절을 피하기 위해 살아있는 객체를 표시 및 정렬을 통해 메모리의 한쪽 끝으로 이동한 다음 이동이 완료된 후 경계 메모리를 정리해야 합니다🎜

함수 호출 방법

1. 일반 함수는 ()를 직접 사용하여 다음과 같은 매개변수를 호출하고 전달합니다. function test(x, y) { return x + y}, test(3, 4)function直接使用()调用并传参，如：function test(x, y) { return x + y}，test(3, 4) 2、作为对象的一个属性方法调用，如：const obj = { test: function (val) { return val } }, obj.test(2) 3、使用call或apply调用，更改函数 this 指向，也就是更改函数的执行上下文 4、new可以间接调用构造函数生成对象实例

defer和async的区别

一般情况下，当执行到 script 标签时会进行下载 + 执行两步操作，这两步会阻塞 HTML 的解析； async 和 defer 能将script的下载阶段变成异步执行（和 html解析同步进行）； async下载完成后会立即执行js，此时会阻塞HTML解析； defer会等全部HTML解析完成且在DOMContentLoaded 事件之前执行。

浏览器事件机制

DOM 事件流三阶段：

捕获阶段：事件最开始由不太具体的节点最早接受事件, 而最具体的节点（触发节点）最后接受事件。为了让事件到达最终目标之前拦截事件。比如点击一个div，则 click 事件会按这种顺序触发: document => => => <div>，即由 document 捕获后沿着 DOM 树依次向下传播，并在各节点上触发捕获事件，直到到达实际目标元素。<li> 目标阶段 当事件到达目标节点的，事件就进入了目标阶段。事件在目标节点上被触发(执行事件对应的函数)，然后会逆向回流，直到传播至最外层的文档节点。 </li> <li> 冒泡阶段 事件在目标元素上触发后，会继续随着 DOM 树一层层往上冒泡，直到到达最外层的根节点。 </li> 所有事件都要经历捕获阶段和目标阶段，但有些事件会跳过冒泡阶段，比如元素获得焦点 focus 和失去焦点 blur 不会冒泡 扩展一 e.target 和 e.currentTarget 区别？ <ul> <li> <code>e.target 指向触发事件监听的对象。
e.currentTarget 指向添加监听事件的对象。

例如：

<ul>
  <li><span>hello 1</span></li>
</ul>

let ul = document.querySelectorAll(&#39;ul&#39;)[0]
let aLi = document.querySelectorAll(&#39;li&#39;)
ul.addEventListener(&#39;click&#39;,function(e){
  let oLi1 = e.target  
  let oLi2 = e.currentTarget
  console.log(oLi1)   //  被点击的li
  console.log(oLi2)   // ul
  console.og(oLi1===oLi2)  // false
})

给 ul 绑定了事件，点击其中 li 的时候，target 就是被点击的 li， currentTarget 就是被绑定事件的 ul 事件冒泡阶段（上述例子），e.currenttarget和e.target是不相等的，但是在事件的目标阶段，e.currenttarget和e.target是相等的作用： e.target可以用来实现事件委托，该原理是通过事件冒泡（或者事件捕获）给父元素添加事件监听，e.target指向引发触发事件的元素 扩展二 addEventListener 参数语法：

addEventListener(type, listener);
addEventListener(type, listener, options || useCapture);

type: 监听事件的类型，如：'click'/'scroll'/'focus'
listener: 必须是一个实现了 EventListener 接口的对象，或者是一个函数。当监听的事件类型被触发时，会执行
options：指定 listerner 有关的可选参数对象
- capture: 布尔值，表示 listener 是否在事件捕获阶段传播到 EventTarget 时触发
- once：布尔值，表示 listener 添加之后最多调用一次，为 true 则 listener 在执行一次后会移除
- passive: 布尔值，表示 listener 永远不会调用 preventDefault()
- signal：可选，AbortSignal，当它的abort()

call

apply

4. new는 간접적으로 생성자를 호출하여 객체 인스턴스

🎜defer와 async의 차이점🎜🎜🎜 일반적인 상황에서 스크립트 태그가 실행되면 다운로드 + 2단계 작업이 실행됩니다. 이 두 단계는 HTML 구문 분석을 차단합니다. 🎜🎜async 및 defer는 스크립트의 🎜다운로드 단계🎜를 비동기 실행(HTML 구문 분석과 동기화)으로 전환합니다). 🎜🎜async는 다운로드가 완료된 후 즉시 js를 실행하여 HTML 구문 분석을 차단합니다. 🎜🎜defer는 모든 HTML 구문 분석이 완료될 때까지 기다립니다. DOMContentLoaded 이벤트 이전에 완료되고 실행됩니다. 🎜

🎜브라우저 이벤트 메커니즘🎜🎜🎜DOM 이벤트 흐름 3단계: 🎜

즉, 문서에 의해 캡처된 다음 DOM 트리를 따라 아래쪽으로 전파되고 🎜 실제 대상 요소에 도달할 때까지 각 노드에서 캡처 이벤트를 트리거합니다 🎜 . 🎜🎜🎜🎜🎜대상 단계🎜🎜🎜이벤트가 대상 노드에 도달하면 이벤트가 대상 단계에 들어갑니다. 🎜대상 노드에서 이벤트가 발생🎜(이벤트에 해당하는 함수 실행)한 후 가장 바깥쪽 문서 노드로 전파될 때까지 역방향으로 다시 흐릅니다. 🎜🎜🎜🎜🎜버블링 단계🎜🎜🎜이벤트가 대상 요소에서 트리거된 후 가장 바깥쪽 루트 노드에 도달할 때까지 DOM 트리를 따라 레이어별로 계속 버블링됩니다. 🎜🎜🎜🎜모든 이벤트는 캡처 단계와 대상 단계를 거쳐야 하지만 요소가 초점을 맞추고 초점을 잃는 등 일부 이벤트는 버블링 단계를 건너뜁니다. 흐림 효과는 버블링되지 않습니다 🎜🎜🎜확장된 것 🎜🎜🎜e. 타겟과 e.currentTarget의 차이점은 무엇입니까? 🎜

e.target

e.currentTarget

// 比如
<input v-model="sth" />
// 等价于
<input :value="sth" @input="sth = $event.target.value" />

e.target

e.currenttarget

e.target

이벤트 위임

// 父组件
<my-button v-model="number"></my-button>

// 子组件
<script>
export default {
  props: {
    value: Number, //  属性名必须是 value
  },

  methods: {
    add() {
      this.$emit(&#39;input&#39;, this.value + 1) // 事件名必须是 input
    },
  }
}
</script>

EventListener

함수

preventDefault()

AbortSignal

abort()

Vue 기사

vue와 React의 차이점

React는 setState를 통해서만 전달될 수 있는 함수형 프로그래밍, 불변 데이터 및 단방향 데이터 흐름을 옹호합니다. 또는 onchange를 사용하여 뷰 업데이트를 구현합니다setState或者onchange来实现视图更新
Vue 基于数据可变，设计了响应式数据，通过监听数据的变化自动更新视图

React 推荐使用 jsx + inline style的形式，就是 all in js
Vue 是单文件组件（SFC）形式，在一个组件内分模块(tmplate/script/style)，当然vue也支持jsx形式，可以在开发vue的ui组件库时使用

Vue2采用双端比较，Vue3采用快速比较
react主要使用diff队列保存需要更新哪些DOM，得到patch树，再统一操作批量更新DOM。，需要使用shouldComponentUpdate()来手动优化react的渲染。

扩展：了解 react hooks吗

React Hooks 的设计目的，就是加强版函数组件，完全不使用"类"，就能写出一个全功能的组件

React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来。

vue组件通信方式

props / $emit
ref / $refs
$parent /$ root
attrs / listeners
eventBus / vuex / pinia / localStorage / sessionStorage / Cookie / window
provide / inject

vue 渲染列表为什么要加key?

Vue 在处理更新同类型 vnode 的一组子节点（比如v-for渲染的列表节点）的过程中，为了减少 DOM 频繁创建和销毁的性能开销：

对没有 key 的子节点数组更新是通过就地更新的策略。它会通过对比新旧子节点数组的长度，先以比较短的那部分长度为基准，将新子节点的那一部分直接 patch 上去。然后再判断，如果是新子节点数组的长度更长，就直接将新子节点数组剩余部分挂载；如果是新子节点数组更短，就把旧子节点多出来的那部分给卸载掉）。所以如果子节点是组件或者有状态的 DOM 元素，原有的状态会保留，就会出现渲染不正确的问题。

有 key 的子节点更新是调用的patchKeyedChildrenVue는 데이터 가변성을 기반으로 반응형 데이터를 설계하고 데이터 변경을 모니터링하여 자동으로 뷰를 업데이트합니다

2. 작성 방법

react

shouldComponentUpdate()

🎜vue 컴포넌트 통신 방법🎜🎜🎜🎜props / $emit🎜🎜ref / $refs🎜🎜

set/

xss基本概念

Xss (Cross site scripting)跨站脚本攻击，为了和 css 区别开来所以叫 xss

Xss 指黑客向 html 或 dom 中注入恶意脚本，从而在用户浏览页面的时候利用注入脚本对用户实施攻击的手段

恶意脚本可以做到：窃取 cookie 信息、监听用户行为（比如表单的输入）、修改DOM（比如伪造登录界面骗用户输入账号密码）、在页面生成浮窗广告等

恶意脚本注入方式：

存储型 xss

黑客利用站点漏洞将恶意 js 代码提交到站点服务器，用户访问页面就会导致恶意脚本获取用户的cookie等信息。
反射性 xss

用户将一段恶意代码请求提交给 web 服务器，web 服务器接收到请求后将恶意代码反射到浏览器端
基于 DOM 的 xss 攻击

通过网络劫持在页面传输过程中更改 HTML 内容

前两种属于服务端漏洞，最后一种属于前端漏洞

防止xss攻击的策略

1、服务器对输入脚本进行过滤或者转码，比如将code:<script>alert('你被xss攻击了')</script>转换成code:3f1c4e4b6b16bbbd69b2ee476dc4f83aalert('你被xss攻击了')2cacc6d41bbb37262a98f745aa00fbf0

2、充分利用内容安全策略 CSP(content-security-policy)，可以通过 http 头信息的 content-security-policy 字段控制可以加载和执行的外部资源；或者通过html的meta 标签<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:">

3、cookie设置为 http-only, cookie 就无法通过 document.cookie 来读取

csrf基本概念

Csrf（cross site request forgery）跨站请求伪造，指黑客引导用户访问黑客的网站。

CSRF 是指黑客引诱用户打开黑客的网站，在黑客的网站中，利用用户的登录状态发起的跨站请求。简单来讲，CSRF 攻击就是黑客利用了用户的登录状态，并通过第三方的站点来做一些坏事。

Csrf 攻击场景

自动发起 get 请求

比如黑客网站有个图片:
```
<img src="https://time.geekbang.org/sendcoin?user=hacker&number=100" alt="3년간의 인터뷰 경험 공유: 프론트엔드 인터뷰의 4단계와 3가지 결정 요인" >
```
黑客将转账的请求接口隐藏在 img 标签内，欺骗浏览器这是一张图片资源。当该页面被加载时，浏览器会自动发起 img 的资源请求，如果服务器没有对该请求做判断的话，那么服务器就会认为该请求是一个转账请求，于是用户账户上的 100 极客币就被转移到黑客的账户上去了。
自动发起 post 请求

黑客在页面中构建一个隐藏的表单，当用户点开链接后，表单自动提交
引诱用户点击链接

比如页面上放了一张美女图片，下面放了图片下载地址，而这个下载地址实际上是黑客用来转账的接口，一旦用户点击了这个链接，那么他的极客币就被转到黑客账户上了

防止csrf方法

1、设置 cookie 时带上SameSite: strict/Lax选项

2、验证请求的来源站点，通过 origin 和 refere 判断来源站点信息

3、csrf token，浏览器发起请求服务器生成csrf token，发起请求前会验证 csrf token是否合法。第三方网站肯定是拿不到这个token。我们的 csrf token 是前后端约定好后写死的。

websocket

websocket是一种支持双向通信的协议，就是服务器可以主动向客户端发消息，客户端也可以主动向服务器发消息。

HTTP 프로토콜을 기반으로 연결을 설정하므로 HTTP 프로토콜과 잘 호환되므로 동일 출처 제한이 없습니다.

WebSocket은 이벤트 중심 프로토콜이므로 진정한 실시간 통신에 사용할 수 있습니다. 업데이트를 지속적으로 요청해야 하는 HTTP와 달리 웹소켓을 사용하면 업데이트가 제공되는 즉시 전송됩니다.

웹소켓은 연결이 종료될 때 자동으로 복구되지 않습니다. 이는 애플리케이션 개발에서 직접 구현해야 하는 메커니즘입니다. , 클라이언트 측 오픈 소스 라이브러리가 필요한 이유 중 하나는 많습니다.

webpack 및 vite와 같은 devServer는 웹소켓을 사용하여 핫 업데이트를 구현합니다.

Post와 Get의 차이점

애플리케이션 시나리오: (GET 요청은 idempotent 요청입니다.) 일반적으로 Get 요청은 다음을 요청하는 데 사용됩니다. 웹 페이지에 대한 리소스 요청과 같이 리소스가 영향을 미치지 않는 서버 시나리오. (그리고 Post는 idempotent 요청이 아닙니다.) 일반적으로 사용자 등록과 같은 작업과 같이 서버 리소스에 영향을 미치는 시나리오에서 사용됩니다. (Idempotence는 요청 메서드를 여러 번 실행하고 한 번만 실행하는 효과가 완전히 동일하다는 의미)
캐시할지 여부: 두 가지의 적용 시나리오가 다르기 때문에 브라우저는 일반적으로 Get 요청을 캐시하지만, 드물게 게시 요청 캐싱을 요청합니다.
매개변수는 다양한 방식으로 전달됩니다. Get은 쿼리 문자열을 통해 매개변수를 전달하고 Post는 요청 본문을 통해 매개변수를 전달합니다.
보안: Get 요청은 요청된 매개변수를 URL에 넣어 서버로 보낼 수 있습니다. 이 접근 방식은 요청한 URL이 기록에 유지되므로 Post 요청보다 덜 안전합니다.
요청 길이: URL의 브라우저 길이 제한으로 인해 데이터를 보낼 때 요청 가져오기 길이에 영향을 미칩니다. 이 제한은 RFC가 아닌 브라우저에 의해 규정됩니다.
매개변수 유형: get 매개변수는 ASCII 문자만 허용하며 post 매개변수 전송은 더 많은 데이터 유형(예: 파일, 그림)을 지원합니다.

성능 최적화

성능 최적화는 중견기업과 대기업이 크게 주목하는 포인트입니다. 프론트엔드 인력의 KPI와도 밀접한 관련이 있기 때문에 자연스럽게 면접 질문이 잦아지게 됩니다.

3년간의 인터뷰 경험 공유: 프론트엔드 인터뷰의 4단계와 3가지 결정 요인

성능 최적화 방법은 무엇인가요

캐싱의 관점에서
- localstorage/sessionStorage/indexdDB를 통해 자주 변경되지 않는 대용량 데이터를 읽어보세요
- http 캐시를 사용하세요(강력한 캐시와 협상) 캐시), 메모리나 하드디스크에 콘텐츠 저장, 서버에 대한 요청 감소
네트워크에서는 정적 리소스에 CDN을 사용하는 것이 더 일반적입니다
패키징 측면에서
- - 요청 시 경로 로드
- 최적화된 패키징 최종 리소스 크기
- gzip 압축 리소스 활성화
- 필요에 따라 타사 라이브러리 로드
코드 수준
- 불필요한 요청을 줄이고 불필요한 코드를 삭제하세요
- 긴 시간을 피하세요 -메인 스레드를 차단하는 시간 js 처리(시간이 많이 걸리고 DOM과 관련 없는 스레드는 처리를 위해 웹 작업자에게 전달되거나 작은 작업으로 분할될 수 있음)
- 사진은 지연 로딩을 사용하여 로드할 수 있고 긴 목록은 가상 스크롤을 사용할 수 있음
첫 번째 화면 속도 향상
- 코드 압축, 패키지된 정적 리소스의 양 감소(Terser 플러그인/MiniCssExtratplugin)
- 경로의 지연 로딩, 첫 번째 화면은 첫 번째 경로의 관련 리소스만 요청함
- cdn을 사용하여 세 번째 가속화 -파티 라이브러리, 우리는 toB의 제품이므로 필요합니다. 인트라넷에 배포되므로 일반적으로 사용되지 않습니다. ToC는 대부분
- ssr 서버 측 렌더링으로 사용되며, 서버는 스플라이싱된 html을 직접 반환합니다. 페이지
vue 일반적인 성능 최적화 방법
- 이미지 지연 로딩: vue-lazyLoad
- 가상 스크롤
- 기능적 구성 요소
- v-show/ keep-alive DOM 재사용
- defer 지연된 렌더링 구성 요소(requestIdleCallback)
- 타임 슬라이싱

프런트엔드 모니터링 SDK 기술 포인트

window.performance
를 통해 다양한 성과 지표 데이터를 얻을 수 있습니다. 완전한 프런트엔드 모니터링 플랫폼에는 다음이 포함됩니다: 데이터 수집 및 보고, 데이터 정렬 및 저장, 데이터 표시
웹 페이지 성능 지표:
- FP(first-paint) 페이지가 로드된 후 첫 번째 픽셀이 화면에 그려지는 시간
- FCP(first-contentful-paint) ), 페이지가 로드된 시점부터 페이지 콘텐츠의 일부가 화면에서 렌더링을 완료할 때까지의 시간
- LCP(largest-contentful-paint), 페이지 로딩부터 가장 큰 텍스트 또는 이미지 요소의 렌더링이 완료될 때까지의 시간 화면에
위 지표는 PerformanceObserver
를 통해 얻을 수 있습니다.
首屏渲染时间计算：通过MutationObserver监听document对象的属性变化

如何减少回流、重绘，充分利用 GPU 加速渲染？

首先应该避免直接使用 DOM API 操作 DOM，像 vue react 虚拟 DOM 让对 DOM 的多次操作合并成了一次。

样式集中改变，好的方式是使用动态 class

读写操作分离，避免读后写，写后又读

// bad 强制刷新 触发四次重排+重绘
div.style.left = div.offsetLeft + 1 + &#39;px&#39;;
div.style.top = div.offsetTop + 1 + &#39;px&#39;;
div.style.right = div.offsetRight + 1 + &#39;px&#39;;
div.style.bottom = div.offsetBottom + 1 + &#39;px&#39;;


// good 缓存布局信息 相当于读写分离 触发一次重排+重绘
var curLeft = div.offsetLeft;
var curTop = div.offsetTop;
var curRight = div.offsetRight;
var curBottom = div.offsetBottom;

div.style.left = curLeft + 1 + &#39;px&#39;;
div.style.top = curTop + 1 + &#39;px&#39;;
div.style.right = curRight + 1 + &#39;px&#39;;
div.style.bottom = curBottom + 1 + &#39;px&#39;;

原来的操作会导致四次重排，读写分离之后实际上只触发了一次重排，这都得益于浏览器的渲染队列机制：

当我们修改了元素的几何属性，导致浏览器触发重排或重绘时。它会把该操作放进渲染队列，等到队列中的操作到了一定的数量或者到了一定的时间间隔时，浏览器就会批量执行这些操作。

使用display: none后元素不会存在渲染树中，这时对它进行各种操作，然后更改 display 显示即可（示例：向2000个div中插入一个div）
通过 documentFragment 创建 dom 片段，在它上面批量操作 dom ，操作完后再添加到文档中，这样只有一次重排（示例：一次性插入2000个div）
复制节点在副本上操作然后替换它
使用 BFC 脱离文档流，重排开销小

Css 中的transform、opacity、filter、will-change能触发硬件加速

大图片优化的方案

优化请求数
- 雪碧图，将所有图标合并成一个独立的图片文件，再通过 background-url和backgroun-position来显示图标
- 懒加载，尽量只加载用户正则浏览器或者即将浏览的图片。最简单使用监听页面滚动判断图片是否进入视野；使用 intersection Observer API；使用已知工具库；使用css的background-url来懒加载
- base64，小图标或骨架图可以使用内联 base64因为 base64相比普通图片体积大。注意首屏不需要懒加载，设置合理的占位图避免抖动。
减小图片大小
- 使用合适的格式比如WebP、svg、video替代 GIF 、渐进式 JPEG
- 削减图片质量
- 使用合适的大小和分辨率
- 删除冗余的图片信息
- Svg 压缩
缓存

代码优化

非响应式变量可以定义在created钩子中使用 this.xxx 赋值
访问局部变量比全局变量块，因为不需要切换作用域
尽可能使用 const声明变量，注意数组和对象
使用 v8 引擎时，运行期间，V8 会将创建的对象与隐藏类关联起来，以追踪它们的属性特征。能够共享相同隐藏类的对象性能会更好，v8 会针对这种情况去优化。所以为了贴合”共享隐藏类“，我们要避免”先创建再补充“式的动态属性复制以及动态删除属性（使用delete关键字）。即尽量在构造函数/对象中一次性声明所有属性。属性删除时可以设置为 null，这样可以保持隐藏类不变和继续共享。
避免内存泄露的方式
- 尽可能少创建全局变量
- 手动清除定时器
- 少用闭包
- 清除 DOM 引用
- 弱引用
避免强制同步，在修改 DOM 之前查询相关值
避免布局抖动（一次 JS 执行过程中多次执行强制布局和抖动操作），尽量不要在修改 DOM 结构时再去查询一些相关值
合理利用 css 合成动画，如果能用 css 处理就交给 css。因为合成动画会由合成线程执行，不会占用主线程
避免频繁的垃圾回收，优化存储结构，避免小颗粒对象的产生

感兴趣的可以看看我之前的一篇性能优化技巧整理的文章极意 · 代码性能优化之道

프런트엔드 엔지니어링

프론트엔드 엔지니어링은 프론트엔드 ER 성장에 있어서 가장 필수적인 스킬 포인트입니다. 프런트엔드 개발 효율성을 높일 수 있는 모든 기능은 프론트엔드의 일부라고 볼 수 있습니다. 엔지니어링을 종료합니다. 이제 막 시작한 사람들은 스캐폴딩을 처음부터 구축하는 것부터 시작할 수 있습니다10,000 단어에 달하는 긴 글은 엔터프라이즈급 vue3 + vite2+ ts4 프레임워크를 처음부터 구축하는 전체 과정을 자세히 설명합니다

인터뷰에서 가장 중요한 것은 시험은 포장 도구의 숙달입니다.

3년간의 인터뷰 경험 공유: 프론트엔드 인터뷰의 4단계와 3가지 결정 요인

webpack의 실행 프로세스 및 라이프사이클

webpack은 최신 JS 애플리케이션에 정적 리소스 패키징 기능을 제공하는 번들입니다.

핵심 프로세스는 초기화 단계, 구성 단계 및 생성 단계의 세 단계로 구성됩니다.

1 초기화 단계에서는 구성 파일, 구성 개체 및 셸 매개변수에서 초기화 매개변수를 읽어 기본 구성과 결합하여 구성합니다. 최종 매개변수는 물론 컴파일러 개체를 생성하고 실행 환경을 초기화합니다

2. 컴파일러는 run() 메서드를 실행하여 컴파일 프로세스를 시작합니다. 항목 파일에서 항목 파일 검색을 시작합니다. 직접 또는 간략하게 연관된 모든 파일에 대한 종속 개체를 생성한 다음 종속 개체를 기반으로 모듈 개체를 생성합니다. 이때 로더는 모듈을 표준으로 변환하는 데 사용됩니다. js 콘텐츠를 호출한 다음 js 인터프리터를 호출하여 콘텐츠를 AST 개체로 변환한 다음 AST에서 모듈이 의존하는 모듈을 찾고 모든 항목 종속성 파일이 이 단계에서 처리될 때까지 이 단계를 반복합니다. 마지막으로 모듈 컴파일이 완료되고, 각 모듈의 번역된 내용과 이들 사이의 종속성 그래프가 얻어집니다. 이 종속성 그래프는 프로젝트에 사용되는 모든 모듈의 매핑 관계입니다.

3. 생성 단계에서는 컴파일된 모듈을 덩어리로 결합한 후 각 덩어리를 별도의 파일로 변환하여 파일 목록에 출력합니다. 출력 내용을 결정한 후 구성에 따라 출력 경로와 파일 이름을 결정합니다. , 그리고 파일을 추가하세요. 콘텐츠는 파일 시스템에 기록됩니다

webpack의 플러그인과 로더

loader

webpack은 JS 및 JSON 파일만 이해할 수 있습니다. 로더는 본질적으로 다른 유형의 파일을 변환할 수 있는 변환기입니다.

Loader는 webpack 빌드 단계에서 종속 객체에 의해 생성된 모듈을 표준 js 콘텐츠로 변환합니다. 예를 들어 vue-loader는 vue 파일을 js 모듈로 변환하고, 이미지 글꼴은 url-loader를 통해 데이터 URL로 변환하는 것입니다.

module.rules에서 다양한 로더를 구성하여 다양한 파일을 구문 분석할 수 있습니다

plugin

플러그인은 기본적으로 적용 함수가 있는 클래스입니다class myPlugin { apply(compiler) {} } 이 적용 함수에는 매개변수 컴파일러가 있습니다. webpack 객체의 초기화 단계에서는 컴파일러 객체에서 후크를 호출하여 다양한 후크에 대한 콜백을 등록할 수 있습니다. 이러한 후크는 전체 컴파일 수명 주기 동안 실행됩니다. 따라서 개발자는 후크 콜백을 통해 특정 코드를 여기에 삽입하여 특정 기능을 달성할 수 있습니다.

예를 들어 stylelint 플러그인은 stylelint가 확인해야 하는 파일 형식과 파일 범위를 지정할 수 있습니다. HtmlWebpackPlugin은 패키지된 템플릿 파일을 생성하는 데 사용되며 MiniCssExtactPlugin은 모든 CSS를 독립적인 청크로 추출하고 stylelintplugin은 개발 단계에서 스타일 확인 기능을 제공할 수 있습니다. .

Webpack의 해시 전략

MiniCssExtractPlugin 브라우저의 경우 페이지 리소스를 요청할 때마다 최신 리소스를 가져오길 기대하는 반면, 리소스가 있을 때 캐시된 개체를 재사용할 수 있을 것으로 기대합니다. 변경되지 않았습니다. 이때, 파일명 + 파일 해시값 방식을 이용하면 파일명만으로 리소스가 업데이트 되었는지 구별할 수 있다. Webpack에는 생성된 파일에 대해 해시 계산 방법이 내장되어 있으며 출력 파일에 해시 필드를 추가할 수 있습니다.

Webpack에는 3개의 내장 해시가 있습니다

hash: 프로젝트가 빌드될 때마다 전체 프로젝트와 관련된 해시가 생성됩니다.

해시는 각 프로젝트의 콘텐츠를 기반으로 계산되므로 불필요한 해시 변경이 발생하기 쉽고 이는 버전 관리에 도움이 되지 않습니다. 일반적으로 해시를 직접 사용할 기회는 거의 없습니다.

content hash: 단일 파일의 콘텐츠와 관련됩니다. 지정된 파일의 내용이 변경되면 해시도 변경됩니다. 내용은 변경되지 않고 해시 값도 변경되지 않습니다.

Css 파일의 경우 일반적으로 MiniCssExtractPlugin을 사용하여 별도의 CSS 파일로 추출합니다.

이 시점에서 contenthash를 사용하여 표시하면 CSS 파일의 내용이 변경될 때 해시가 업데이트될 수 있습니다.
chunk hash: 웹팩 패키징으로 생성된 청크와 관련됩니다. 각 항목에는 서로 다른 해시가 있습니다.

일반적으로 출력 파일에는 청크해시를 사용합니다.

webpack이 패키징된 후에는 각 항목 파일과 해당 종속 항목이 결국 별도의 js 파일을 생성하게 되기 때문입니다.

이때 청크해시를 사용하면 패키지된 콘텐츠 전체의 업데이트 정확성을 보장할 수 있습니다.

확장: file-loader hash 일부 학생들은 다음과 같은 질문을 할 수 있습니다.

일부 이미지 및 글꼴 파일-로더 패키징을 처리할 때 [이름]_[hash:8].[ext]를 사용하는 경우를 종종 볼 수 있습니다

그러나 index.js와 같은 다른 프로젝트 파일이 변경되면 생성된 이미지 해시가 변경되지 않았습니다.

여기서 로더 자체에 의해 정의된 자리 표시자인 file-loader의 해시 필드는 webpack의 내장 해시 필드와 일치하지 않는다는 점에 유의해야 합니다.

여기서 해시는 md4와 같은 해시 알고리즘을 사용하여 파일 내용을 해시하는 것입니다.

파일 내용이 변경되지 않는 한 해시는 일관성을 유지합니다.

Vite 원리

Vite는 주로 두 부분으로 구성됩니다

개발 환경

Vite는 브라우저를 사용하여 서버 측에서 가져오기를 구문 분석하고, 컴파일하고 요청 시 반환하므로 패키징 개념을 완전히 건너뛰고, 서버는 사용하기 쉽습니다(개발 중인 파일을 ESM 형식으로 변환하여 브라우저로 직접 보내는 것과 동일)

브라우저가 './comComponents/HelloWorld.vue'에서 import HelloWorld를 구문 분석할 때 요청을 보냅니다. 해당 리소스(ESM은 상대 경로 구문 분석 지원)에 대해 브라우저에서 직접 해당 파일을 다운로드하고 모듈 레코드로 구문 분석합니다(네트워크 패널을 열면 응답 데이터가 모두 ESM 유형 js임을 확인할 수 있습니다). ). 그런 다음 모듈에 메모리를 인스턴스화하고 할당하고 import 및export 문에 따라 모듈과 메모리 간의 매핑 관계를 설정합니다. 마지막으로 코드를 실행해 보세요.

vite는 koa 서버를 시작하여 브라우저의 ESM 요청을 가로채고, 요청 경로를 통해 디렉터리에서 해당 파일을 찾아 ESM 형식으로 처리한 후 클라이언트에 반환합니다.

Vite의 핫 로딩은 클라이언트와 서버 사이에 웹소켓 연결을 설정합니다. 코드가 수정된 후 서버는 클라이언트에게 수정된 모듈 코드를 요청하라는 메시지를 보냅니다. 핫 업데이트를 완료하려면 무엇이든 다시 요청해야 합니다. 뷰 파일이 변경됩니다. 해당 파일은 핫 업데이트 속도가 프로젝트 크기에 영향을 받지 않도록 합니다.

개발 환경은 esbuild를 사용하여 종속성에 대한 캐시를 사전 구축합니다. 첫 번째 시작은 느려지고 후속 시작은 캐시를 직접 읽습니다.
프로덕션 환경

은 롤업을 사용하여 코드를 빌드하고 다음을 제공합니다. 빌드 프로세스 최적화에 대한 지침입니다. 단점은 개발 환경과 프로덕션 환경이 일치하지 않을 수 있다는 것입니다.

webpack과 vite의 비교

Webpack의 핫 업데이트 원칙은 단순히 특정 종속성이 발생하면(예: a.js ）改变，就将这个依赖所处的 module 的更新，并将新的 module 发送给浏览器重新执行。每次热更新都会重新生成 bundle. 파일 하나만 수정하더라도 이론적으로 핫 업데이트 속도는 점점 더 느려질 것입니다.

Vite는 브라우저를 사용하여 가져오기를 구문 분석하고 필요에 따라 컴파일하고 서버 측에 반환하며 완전히 건너뜁니다. 패키징의 개념에 따르면 서버는 언제든지 사용할 수 있으며 핫 업데이트는 클라이언트와 서버 사이에 웹 소켓 연결을 설정하는 것입니다. 코드가 수정된 후 서버는 수정된 모듈 코드를 요청하도록 클라이언트에 알리는 메시지를 보냅니다. 어떤 파일이 변경되든 핫 업데이트를 완료하려면 다시 요청해야 합니다. 이를 통해 핫 업데이트 속도가 프로젝트 크기에 영향을 받지 않습니다.

그래서 현재 Vite의 가장 큰 특징은 서비스가 시작된다는 것입니다. 빠르고 핫 업데이트가 빨라 개발자 경험을 최적화합니다. 프로덕션 환경의 최하위 계층이 롤업이므로 롤업은 확장성 및 기능 측면에서 소규모 프로젝트에 더 적합합니다. Vite를 개발 서버로 사용하고, 프로덕션 패키징에는 webpack을 사용할 수 있습니다.

어떤 webpack 최적화를 수행했나요? 0. webpack 버전을 3리터로 업그레이드하세요. 4. 실제 테스트는 패키징 속도를 높이는 것입니다. 수십 초

2. 위의 종속 라이브러리는 비즈니스 코드에서 분리되는 것과 같습니다. 종속 라이브러리 자체의 버전이 변경되는 경우에만 다시 패키징되어 패키징 속도가 향상됩니다.

3. 로더에 oneOf를 사용할 수 있습니다

5. ESM 프로젝트는 다음과 같습니다. useExport 태그에서 tree-shaking을 사용합니다
7. 별칭은 일치 범위를 지정하고, 캐시 로더 영구 저장소를 지정합니다.

8.terserPlugin은 MiniCssExtractPlugin을 압축합니다. CSS

npm 실행 프로세스

0 스크립트 구성 항목은 package.json 파일에 정의할 수 있으며, 이는 스크립트 실행을 위한 키와 값을 정의할 수 있습니다

1. node_modules/.bin 디렉터리에 대한 스크립트 소프트 링크 , node_modules/.bin目录下，同时将./bin加入当环境变量$PATH中，所以如果在全局直接运行该命令会去全局目录里找，可能会找不到该命令就会报错。比如 npm run start，他是执行的webpack-dev-server带上参数

2、还有一种情况，就是单纯的执行脚本命令，比如 npm run build，实际运行的是 node build.js，即使用 node 执行 build.js 这个文件

ESM和CJS 的区别

ES6

ES6模块是引用，重新赋值会编译报错，不能修改其变量的指针指向，但可以改变内部属性的值；
ES6模块中的值属于动态只读引用。
对于只读来说，即不允许修改引入变量的值，import的变量是只读的，不论是基本数据类型还是复杂数据类型。当模块遇到import命令时，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。
对于动态来说，原始值发生变化，import 加载的值也会发生变化。不论是基本数据类型还是复杂数据类型。
循环加载时，ES6模块是动态引用。只要两个模块之间存在某个引用，代码就能够执行。

CommonJS

CommonJS模块是拷贝（浅拷贝），可以重新赋值，可以修改指针指向；
对于基本数据类型，属于复制。即会被模块缓存。同时，在另一个模块可以对该模块输出的变量重新赋值。
对于复杂数据类型，属于浅拷贝。由于两个模块引用的对象指向同一个内存空间，因此对该模块的值做修改时会影响另一个模块。当使用require命令加载某个模块时，就会运行整个模块的代码。
当使用require命令加载同一个模块时，不会再执行该模块，而是取到缓存之中的值。也就是说，CommonJS模块无论加载多少次，都只会在第一次加载时运行一次，以后再加载，就返回第一次运行的结果，除非手动清除系统缓存。
当循环加载时，脚本代码在require的时候，就会全部执行。一旦出现某个模块被"循环加载"，就只输出已经执行的部分，还未执行的部分不会输出。

设计模式篇

代理模式

代理模式：为对象提供一个代用品或占位符，以便控制对它的访问

例如实现图片懒加载的功能，先通过一张loading图占位，然后通过异步的方式加载图片，等图片加载好了再把完成的图片加载到img환경 변수 $PATH에 ./bin 추가

2 매개변수를 사용하여 webpack-dev-server를 실행합니다. npm run build와 같은 단순히 스크립트 명령을 실행하면 실제로 node build.js, 즉 node를 실행하는 경우도 있습니다. build.js 파일

ES6

ES6 모듈은 참고용이므로 재할당하면 컴파일 오류가 발생하므로 불가능합니다. 해당 변수의 포인터를 수정하지만 내부 속성의 값을 변경할 수 있습니다.
ES6 모듈의 값은 동적 읽기 전용 참조입니다.
읽기 전용의 경우, 즉 가져온 변수의 값은 기본 데이터 유형이든 복합 데이터 유형이든 읽기 전용입니다. 모듈이 import 명령을 만나면 읽기 전용 참조가 생성됩니다. 스크립트가 실제로 실행되면 이 읽기 전용 참조를 기반으로 로드된 모듈에서 값이 검색됩니다.
동적의 경우 원래 값이 변경되면 가져오기로 로드된 값도 변경됩니다. 기본 데이터 유형인지 복합 데이터 유형인지 여부.
루프에서 로드할 때 ES6 모듈은 동적으로 참조됩니다. 두 모듈 사이에 일부 참조가 존재하는 한 코드는 실행될 수 있습니다.

CommonJS

CommonJS 모듈은 재할당될 수 있고 포인터가 가리키는 복사본(얕은 복사본)입니다.
기본 데이터 유형의 경우; , 사본에 속합니다. 즉, 모듈에 의해 캐시됩니다. 동시에 이 모듈에서 출력된 변수는 다른 모듈에 다시 할당될 수 있습니다.
복잡한 데이터 유형의 경우 얕은 복사본입니다. 두 모듈에서 참조하는 개체는 동일한 메모리 공간을 가리키므로 모듈 값을 수정하면 다른 모듈에 영향을 미칩니다. require 명령을 사용하여 모듈을 로드하면 전체 모듈의 코드가 실행됩니다.
require 명령을 사용하여 동일한 모듈을 로드하는 경우 해당 모듈은 다시 실행되지 않지만 캐시에 있는 값을 가져옵니다. 즉, CommonJS 모듈은 아무리 많이 로드해도 처음 로드할 때 한 번만 실행됩니다. 나중에 로드할 경우 시스템 캐시가 없으면 첫 번째 실행 결과가 반환됩니다. 수동으로 지워졌습니다.
루프에서 로드할 때 필요할 때 모든 스크립트 코드가 실행됩니다. 모듈이 "루프 로드"되면 실행된 부분만 출력되고 실행되지 않은 부분은 출력되지 않습니다.

디자인 패턴

에이전트 모드

에이전트 모드: 제공 개체에 대한 액세스를 제어하기 위한 대체 또는 자리 표시자

예를 들어, 이미지 지연 로딩 기능을 구현하려면 먼저 loading 이미지 자리 표시자를 전달한 다음 이미지를 비동기식으로 로드하고, 이미지가 로드된 후 완성된 이미지를 img 태그에 로드

Decorator 모드

데코레이터 모드의 정의: 프로그램이 실행 중일 때 객체 자체를 변경하지 않고 이 기간 동안 , 메소드는 객체에 동적으로 추가됩니다

일반적으로 원래 메소드를 변경하지 않고 유지한 다음 기존 요구 사항을 충족하기 위해 원래 메소드에 다른 메소드를 마운트하는 데 사용됩니다. 🎜🎜typescript와 같은 데코레이터는 일반적인 데코레이터 패턴이며 vue🎜🎜🎜singleton 패턴🎜🎜🎜의 mixin은 클래스에 인스턴스가 하나만 있고 이에 액세스할 수 있는 전역 액세스 포인트를 제공합니다. 구현 방법은 먼저 인스턴스가 존재하는지 확인하고 존재하지 않으면 직접 생성하여 반환합니다. 이렇게 하면 클래스에 인스턴스 객체가 하나만 있는 것을 보장합니다🎜🎜예를 들어 ice stark의 경우 하위 애플리케이션은 한 번에 하나만 렌더링하도록 보장됩니다. 게시자로 간주될 수 있음), 관찰자 모드는 특정 대상에 의해 예약되는 반면 게시/구독 모드는 일정 센터에 의해 균일하게 조정되므로 구독자와 관찰자 모드의 게시자 간에 종속성이 있습니다. /subscribe 모드는 그렇지 않습니다. 🎜🎜2. 두 패턴 모두 느슨한 결합, 향상된 코드 관리 및 잠재적인 재사용을 위해 사용될 수 있습니다. 🎜🎜3. 관찰자 모드에서는 관찰자는 주체를 알고, 주체는 관찰자의 기록을 유지합니다. 그러나 게시-구독 모델에서는 게시자와 구독자가 서로의 존재를 인식하지 못합니다. 그들은 메시지 브로커를 통해서만 통신합니다🎜🎜4. 관찰자 모드는 대부분 동기식입니다. 예를 들어 이벤트가 트리거되면 주제는 관찰자 메서드를 호출합니다. 게시-구독 패턴은 대부분 비동기식입니다(메시지 대기열 사용) 🎜

Others

정규 표현식

정규 표현식은 어떤 데이터 유형인가요?

는 객체입니다. let re = /ab+c/는 let re = new RegExp('ab+c')let re = /ab+c/等价于let re = new RegExp('ab+c')

正则贪婪模式和非贪婪模式？

量词

*：0或多次； ?：0或1次； +：1到多次； {m}：出现m次； {m,}：出现至少m次； {m, n}：出现m到n次

贪婪模式

正则中，表示次数的量词默认是贪婪的，会尽可能匹配最大长度，比如a*会从第一个匹配到a的时候向后匹配尽可能多的a，直到没有a为止。

非贪婪模式

在量词后面加?就能变成非贪婪模式，非贪婪即找出长度最小且满足条件的

贪婪& 非贪婪特点

贪婪模式和非贪婪模式，都需要发生回溯才能完成相应的功能

独占模式

独占模式和贪婪模式很像，独占模式会尽可能多地去匹配，如果匹配失败就结束，不会进行回溯，这样的话就比较节省时间。

写法：量词后面使用+

优缺点：独占模式性能好，可以减少匹配的时间和 cpu 资源；但是某些情况下匹配不到，比如：

	正则	文本	结果
贪婪模式	a{1,3}ab	aaab	匹配
非贪婪模式	a{1,3}?ab	aaab	匹配
独占模式	a{1,3}+ab	aaab	不匹配

a{1,3}+ab 去匹配 aaab 字符串，a{1,3}+ 会把前面三个 a 都用掉，并且不会回溯

常见正则匹配

*: 0회 이상, ?: 0회 또는 1회 +: 1회 이상; {m}: m번 나타남; {m,}: 최소 m번 나타남; {m, n}: m번에서 n번 나타남 times

操作符	说明	实例
.	表示任何单个字符
[ ]	字符集，对单个字符给出范围	`[abc]`表示 a、b、c,[a-z]表示 a-z 的单个字符
[^ ]	非字符集，对单个字符给出排除范围	`[^abc]`表示非a或b或c的单个字符
_	前一个字符零次或无限次扩展	`abc_`表示 ab、abc、abcc、abccc 等
`	`	左右表达式的任意一个	`abc	def`表示 abc、def
$	匹配字符串结尾	`abc$`表示 abc 且在一个字符串结尾
( )	分组标记内部只能使用	`(abc)`表示 abc,`(abc	def)`表示 abc、def
D	非数字
d	数字，等价于0-9
S	可见字符
s	空白字符(空格、换行、制表符等等)
W	非单词字符
w	单词字符，等价于[a-z0-9A-Z_]
w	匹配字符串开头	`^abc`表示 abc 且在一个字符串的开头
{m,n}	扩展前一个字符 m 到 n 次	`ab{1,2}c`表示 abc、abbc
{m}	扩展前一个字符 m 次	`ab{2}c`表示 abbc
{m,}	匹配前一个字符至少m 次
？	前一个字符 0 次或 1 次扩展	`abc?`	regulargreedy 모드와 동일합니다. 그리고 비 욕심 모드?	Quantifier

🎜🎜그리디 모드🎜🎜🎜일반 규칙에서는 횟수를 나타내는 수량자는 기본적으로 탐욕적이며 최대 길이와 최대한 일치합니다. 예를 들어 a*는 역방향으로 일치합니다. 첫 번째 경기부터 a까지 a가 하나도 남지 않을 때까지 가능한 한 많은 a를 시도합니다. 🎜🎜🎜Non-greedy 모드🎜🎜🎜Non-greedy 모드가 되려면 수량자 뒤에 ?를 추가하세요. Non-greedy는 최소 길이를 찾아 조건을 충족한다는 의미입니다. 🎜🎜🎜Greedy & Non-greedy 특징🎜🎜 🎜그리디 모드와 비그리디 모드 모두 해당 기능을 완성하기 위해 🎜백트래킹🎜이 필요합니다. 🎜🎜🎜배타 모드🎜🎜🎜배타 모드는 그리디 모드와 매우 유사하며, 해당 기능이 충족되면 종료됩니다. 일치가 실패하면 역추적이 수행되지 않아 시간이 절약됩니다. 🎜🎜작성: 수량자 뒤에 +를 사용하세요🎜🎜장점과 단점: 단독 모드는 성능이 좋고 일치 시간과 CPU 리소스를 줄일 수 있지만 다음과 같은 경우에는 일치를 달성할 수 없습니다. 🎜🎜욕심 모드🎜🎜a{1,3}ab🎜🎜aaab🎜🎜match🎜🎜🎜비 욕심 모드🎜🎜a{1,3}?ab🎜🎜aaab🎜🎜 match🎜🎜🎜독점 모드🎜🎜a{1,3}+ab🎜🎜aaab🎜🎜does not match🎜🎜🎜🎜🎜a{1,3}+ab는 aaab 문자열과 일치하고, a{1,3 }+는 이전 a 세 개를 모두 사용하며 역추적이 없습니다🎜🎜🎜일반적인 정규 매칭🎜🎜

🎜	일반	텍스트	결과

🎜🎜.🎜🎜는 단일 문자를 나타냅니다 🎜 🎜🎜🎜🎜🎜🎜 🎜🎜🎜🎜🎜[ ]🎜🎜단일 문자에 대한 범위를 제공하는 문자 세트🎜🎜[abc]는 a, b, c, [a-z]를 나타냅니다. a-z🎜🎜의 단일 문자를 나타냅니다. 🎜🎜🎜🎜🎜🎜🎜[^ ]🎜🎜단일 문자에 대한 제외 범위를 제공하는 비문자 집합🎜🎜[^abc]을 나타냅니다. a, b, c가 아닌 단일 문자🎜 🎜🎜🎜🎜🎜🎜🎜🎜_🎜🎜이전 문자는 0번 또는 무한번 확장됩니다🎜🎜abc_는 ab, abc를 의미합니다 , abcc, abccc 등 🎜🎜🎜🎜🎜🎜🎜🎜 🎜`🎜🎜`🎜🎜왼쪽 및 오른쪽 표현 중 하나 🎜🎜`abc🎜🎜def`는 abc, def🎜🎜를 의미합니다. 🎜$🎜🎜문자열 끝과 일치🎜🎜

abc$ code>는 abc를 의미하고 문자열 끝에서는 🎜🎜🎜🎜🎜🎜🎜🎜<tr>🎜( )🎜🎜만 사용할 수 있습니다. 그룹화 태그 내 🎜🎜<code>(abc)

는 abc를 의미하고 `(abc 🎜🎜def)`는 abc를 의미하며 def🎜🎜🎜🎜🎜🎜D🎜🎜non-number🎜🎜🎜🎜 🎜🎜🎜🎜🎜🎜🎜🎜d🎜🎜숫자, 0-9🎜에 해당 🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜S🎜🎜보이는 문자🎜 🎜🎜🎜🎜🎜🎜🎜🎜 🎜🎜🎜s🎜🎜공백 문자(공백, 줄 바꿈, 탭 등) 🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜W🎜🎜단어가 아닌 문자 🎜🎜🎜 🎜🎜🎜🎜 🎜🎜🎜🎜🎜일치 문자열의 시작🎜🎜^abc은 abc를 의미하며 문자열의 시작 부분에 있습니다 🎜🎜🎜🎜🎜🎜🎜🎜🎜{m,n}🎜🎜이전 문자 확장 m n번🎜🎜ab{1,2}c는 abc, abbc🎜🎜🎜 🎜🎜🎜🎜🎜🎜{m}🎜🎜이전 문자를 m번 확장합니다. 🎜🎜ab{2}c는 abbc🎜🎜🎜🎜🎜🎜🎜🎜🎜{m ,}🎜🎜이전 문자와 최소 m번 일치함을 의미합니다. 🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜? 🎜🎜이전 문자는 0번 또는 1번 확장됩니다🎜🎜abc?는 ab, abc를 의미합니다🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜

单元测试

概念：前端自动化测试领域的，用来验证独立的代码片段能否正常工作

1、可以直接用 Node 中自带的 assert 模块做断言：如果当前程序的某种状态符合 assert 的期望此程序才能正常执行，否则直接退出应用。

function multiple(a, b) {
    let result = 0;
    for (let i = 0; i < b; ++i)
        result += a;
    return result;
}

const assert = require(&#39;assert&#39;);
assert.equal(multiple(1, 2), 3));

2、常见单测工具：Jest，使用示例

const sum = require(&#39;./sum&#39;);

describe(&#39;sum function test&#39;, () => {
  it(&#39;sum(1, 2) === 3&#39;, () => {
    expect(sum(1, 2)).toBe(3);
  });
  
  // 这里 test 和 it 没有明显区别，it 是指: it should xxx, test 是指 test xxx
  test(&#39;sum(1, 2) === 3&#39;, () => {
    expect(sum(1, 2)).toBe(3);
  });
})

babel原理和用途

babel 用途

转义 esnext、typescript 到目标环境支持 js （高级语言到到低级语言叫编译，高级语言到高级语言叫转译）
代码转换（taro）
代码分析（模块分析、tree-shaking、linter 等）

bebel 如何转换的？

对源码字符串 parse 生成 AST，然后对 AST 进行增删改，然后输出目标代码字符串

转换过程

parse 阶段：首先使用 @babel/parser将源码转换成 AST
transform 阶段：接着使用@babel/traverse遍历 AST，并调用 visitor 函数修改 AST，修改过程中通过@babel/types来创建、判断 AST 节点；使用@babel/template来批量创建 AST
generate 阶段：使用@babel/generate将 AST 打印为目标代码字符串，期间遇到代码错误位置时会用到@babel/code-frame

3년간의 인터뷰 경험 공유: 프론트엔드 인터뷰의 4단계와 3가지 결정 요인

好的，以上就是我对三年前端经验通过面试题做的一个总结了，祝大家早日找到心仪的工作~

【推荐学习：web前端开发、编程基础视频教程】

연산자	설명	인스턴스	🎜	🎜
w 🎜🎜단어 문자 등 가격은 [a-z0-9A-Z_]🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜
w 🎜🎜단어 문자 등 가격은 [a-z0-9A-Z_]🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜

성명：

이 기사는 juejin.cn에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

3년간의 인터뷰 경험 공유: 프론트엔드 인터뷰의 4단계와 3가지 결정 요인

1. 자기 소개

2. 프로젝트 마이닝

3. 개인

왜 직업을 바꾸셨나요?

당신과 평범한 프런트 엔드에 대해 알려주십시오.

당신의 단점은 무엇입니까?

최근 주목받고 있는 신기술이 있나요?

5~7년은 충분한 지식을 축적한 후, 관심 있는 특정 방향을 선택해 깊이 있게 공부하고 해당 분야의 전문가가 되기 위해 노력할 수 있습니다

1. 가장 중요한 것은 코드의 유지 관리성(변수 이름 지정, 주석, 함수 통일 원칙 등)입니다.

3. ES 새로운 기능(es6+, ES2020, ES2021 옵셔널 체인, at)4. 기능 사용 사양(예: forEach로 맵을 사용할 때)

, 이름 지정부터 모범 사례, 다양한 도구 라이브러리 사용까지 회사 내부 위키에 게시했습니다. 초기에는 새로운 사람이 들어오면 코드 품질에 대한 후속 조치를 우선적으로 수행합니다1.

야근에 대해 어떻게 생각하시나요?

당신의 취미는 무엇입니까?

4. 기술

JS 장

입니다. 생성자를 만들 때 이 함수는 기본적으로

什么是闭包？

this 的指向

浏览器的事件循环？

만든 컨텍스트가 파괴되더라도 여전히 존재합니다. (예를 들어 상위 함수에서 반환)

개인 변수 만들기

함수 호출 방법

defer和async的区别

浏览器事件机制

Vue 기사

vue와 React의 차이점

vue组件通信方式

vue 渲染列表为什么要加key?

vue3 相对 vue2的响应式优化

Vue 核心diff流程

vue双向绑定原理

v-model 原理

vue 响应式原理

computed 和 watch

$nextTick 原理？

Vue 异常处理

Vuex 流程 & 原理

Vue.use函数里面具体做了哪些事

怎么编写一个vue插件

CSS篇

什么是 BFC

伪类和伪元素及使用场景

src 和 href 区别

不定宽高元素的水平垂直居中

浏览器和网络篇

跨页面通信的方法？

详细说说 HTTP 缓存

페이지 표시에 URL을 입력하는 전체 과정

TCP와 UDP의 차이점

TCP와 UDP의 차이점

Content-length 了解吗？

跨域常用方案

websocket

Post와 Get의 차이점

성능 최적화

성능 최적화 방법은 무엇인가요

프런트엔드 모니터링 SDK 기술 포인트

如何减少回流、重绘，充分利用 GPU 加速渲染？

大图片优化的方案

代码优化

프런트엔드 엔지니어링

webpack의 실행 프로세스 및 라이프사이클

webpack의 플러그인과 로더

Webpack의 해시 전략

Vite 원리

webpack과 vite의 비교

어떤 webpack 최적화를 수행했나요? 0. webpack 버전을 3리터로 업그레이드하세요. 4. 실제 테스트는 패키징 속도를 높이는 것입니다. 수십 초

npm 실행 프로세스

ESM和CJS 的区别

设计模式篇

代理模式

2 매개변수를 사용하여 webpack-dev-server를 실행합니다. npm run build와 같은 단순히 스크립트 명령을 실행하면 실제로 node build.js, 즉 node를 실행하는 경우도 있습니다. build.js 파일

CommonJS

에이전트 모드: 제공 개체에 대한 액세스를 제어하기 위한 대체 또는 자리 표시자

Others

정규 표현식

单元测试

babel原理和用途

관련 기사