찾다
웹 프론트엔드HTML 튜토리얼解决你的前端面试_html/css_WEB-ITnose

Github 专栏

原文地址: 这里

有时候前端的技术性面试还是很麻烦的,毕竟知识点那么多,框架迭代那么快。你不仅仅要对计算机科学基础有一个坚实的底子,还需要理解啥Web性能、构建系统以及CSS引擎等等。现在确实也有不少的相关面试的资源,(译者推荐 Front-end-Developer-Interview-Questions :H5BP出品的一系列的前端问题,不过感觉有点杂而老),不过其中比较全面的还是不多,因此我在这嘎达列个提纲,希望能对你下次面试有所帮助。

有些链接被墙,请自备梯子

面试之前

在面试之前,你要先问问你这个面试的形式。有些面试时直接在白板上面画画圈圈,而有些呢会在一个在线的编辑器里面,就像CoderPad这样的,让你现场写一些代码,提前了解你面试的环境还是非常重要的。除此之外,还需要了解下你这次面试的主题,因为有些公司除了会问你一些前端相关的问题之外,还会问你一些搜搜、排序算法相关的问题。

前端概念

HTML、CSS、JavaScript以及JavaScript设计模式都是面试中的一些关键的概念,保证列表中的每一项都了熟于心。

HTML与CSS就像前端开发中的面包和黄油,在面试的时候也会问到HTML与CSS很多细节方面,有时候也会让你现场写一些布局啊啥的。一些基本的概念列举如下:

  • CSS animations

  • CSS sprites

  • Pseudo classes

  • Grid systems

  • Semantic markup

除了这些概念之外,知道一些CSS的预处理器譬如 SASS 或者 LESS 以及他们的优势。另外知道一些CSS命名空间方面的知识,譬如 BEM and OOCSS 也是极有用的。另一个关于CSS方面的要点,就是对于CSS的最佳实践,这嘎达推荐一个Medium提供的  实践指南 ,包含了Medium如何更新迭代他们的最新框架。

早前我在文中就提醒过可能一些面试官会让你用HTML与CSS重构一些布局,譬如在CodePen中的一些实践,也可以参考 Dribbble 中的一些实例。最后,作为一个前端工程师,我们常常会在编辑器里面修改一些代码然后在浏览器里面查看最终的效果。不过在面试的时候往往不会有这种权利,所以你在准备面试的时候一定要尽可能地尝试不用看显示效果就能较好地调试代码。

如果说HTML与CSS是前端开发中的面包与黄油,那么JavaScript就是那边餐刀。一般而言在你的整个面试过程中面试官会花费很多的时间问你有关JavaScript的知识,这些问题可能攘括以下方面:

  • Prototypal inheritance

  • Scoping

  • Closures

  • The event loop

  • Event bubbling

  • Apply, call, and bind

  • Callbacks and promises

  • Variable and function hoisting

  • Currying

当你面对一个JavaScript问题时,搞明白你这个问题到底归属于哪个概念会有助于你更快地寻找到某个正确的解决方案。你可以在 这嘎达 , 这个嘎达 , 以及  这嘎达 测试下你的JavaScript知识。

设计模式能有助于你以可复用的方案来解决常见的问题,这里列举了几个常见的设计模式:

  • Decorator

  • Factory

  • Singleton

  • Revealing module

  • Facade

  • Observer

  • MVC ,  MVP ,  MVVM

除了这些常见的JavaScript设计模式之外,你还要对常见的JavaScript的框架熟悉。当然,这并不意味着你就要去学习一个新的框架,不过你要能够理解为虾米那些前端团队会去使用这些框架。另外,如果你要去面试的团队使用的是譬如React+Flux或者Angular这样的流行框架,你也要提前看下他们的文档,了解下他们的架构。

Computer Science

某些公司会在招聘前端开发者之前招聘些软件工程师,这也就意味着这些公司会期待面试者拥有一些譬如软件设计原则、可扩展的代码架构以及测试这些方面的知识。不过你的面试官一般都会先提醒你要了解下数据结构啊、算法啊这些方面的知识,否则的话你可以暂时忽略这个部分。即使你并不是计算机科班出身,也不需要紧张,大部分这里的概念还是很好理解的。

这里有些常见的数据结构应该常常存在于您脑子里。不要老纸上谈兵,找个地方去实践他们。如果你并不是很熟悉单元测试,那可以选个测试框架,譬如 Mocha 来测试你的数据结构算法。

  • Linked lists

  • Hashtables

  • Stacks

  • Queues

  • Trees (binary trees and heaps)

  • Graphs

Note: 对于图方面的知识而言,你需要了解怎么实现深度优先于广度优先遍历。在学习数据结构的时候,可以参考 SanFoundry 。虽然这里的代码都是Java作为例子,不过把它们改写成JavaScript还是很轻松的。

在你觉得你的数据结构已经很有信心之后,你可以来了解基本的排序算法。可以参考以下的列表,首先也要了解下基本的算法时间和空间复杂度的概念: time and space complexity 。

  • Binary search

  • Bubble sort

  • Insertion sort

  • Merge sort

  • Quick sort

  • Selection sort

在了解了数据结构与算法之后,可以在 Leetcode 上进行实践,也可以看看  一些技术性的JavaScript问题 。

Wrapping it up

祝大家好运~

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
HTML 문서의 루트 태그는 무엇입니까?HTML 문서의 루트 태그는 무엇입니까?Apr 29, 2025 am 12:10 AM

Theroottaginanhtmldocumentis.itservesasthetop-levellement thatenCapsulateslotherContent, 프로퍼 디코 언어 구조에있는 BrowserParsing을 보장합니다.

HTML 태그와 요소가 같은 것입니까?HTML 태그와 요소가 같은 것입니까?Apr 28, 2025 pm 05:44 PM

이 기사는 HTML 태그가 요소를 정의하는 데 사용되는 구문 마커이고 요소는 태그 및 내용을 포함한 완전한 단위라고 설명합니다. 그들은 웹 페이지를 구조화하기 위해 협력합니다. character count : 159

& lt; head & gt의 중요성은 무엇입니까? & lt; Body & Gt; html에서 태그?& lt; head & gt의 중요성은 무엇입니까? & lt; Body & Gt; html에서 태그?Apr 28, 2025 pm 05:43 PM

이 기사는 & lt; Head & gt의 역할에 대해 설명합니다. & lt; Body & Gt; HTML의 태그, 사용자 경험에 미치는 영향 및 SEO 영향. 적절한 구조화는 웹 사이트 기능 및 검색 엔진 최적화를 향상시킵니다.

& lt; strong & gt;, & lt; b & gt; 태그 및 & lt; em & gt;, & lt; i & gt; 태그?& lt; strong & gt;, & lt; b & gt; 태그 및 & lt; em & gt;, & lt; i & gt; 태그?Apr 28, 2025 pm 05:42 PM

이 기사는 HTML 태그, 등의 차이점과 시맨틱 대 프리젠 테이션 사용 및 SEO 및 접근성에 미치는 영향에 중점을 둡니다.

HTML의 문서에서 사용중인 문자 세트를 표시하는 방법을 설명해 주시겠습니까?HTML의 문서에서 사용중인 문자 세트를 표시하는 방법을 설명해 주시겠습니까?Apr 28, 2025 pm 05:41 PM

기사는 UTF-8에 중점을 둔 HTML에서 문자 인코딩 지정에 대해 논의합니다. 주요 이슈 : 올바른 텍스트 표시 보장, 멍청한 문자 방지 및 SEO 및 접근성 향상.

HTML의 다양한 형식 태그는 무엇입니까?HTML의 다양한 형식 태그는 무엇입니까?Apr 28, 2025 pm 05:39 PM

이 기사는 웹 컨텐츠를 구조화하고 스타일링하는 데 사용되는 다양한 HTML 서식 태그에 대해 논의하여 텍스트 모양에 미치는 영향과 접근성 및 SEO에 대한 시맨틱 태그의 중요성을 강조합니다.

'ID'속성과 HTML 요소의 '클래스'속성의 차이점은 무엇입니까?'ID'속성과 HTML 요소의 '클래스'속성의 차이점은 무엇입니까?Apr 28, 2025 pm 05:39 PM

이 기사는 고유성, 목적, CSS 구문 및 특이성에 중점을 둔 HTML의 'ID'와 '클래스'속성의 차이점에 대해 설명합니다. 웹 페이지 스타일링 및 기능에 어떤 영향을 미치는지 설명하고 모범 사례를 제공합니다.

HTML의 '클래스'속성은 무엇입니까?HTML의 '클래스'속성은 무엇입니까?Apr 28, 2025 pm 05:37 PM

이 기사는 스타일링 및 JavaScript 조작을위한 요소 그룹에서 HTML '클래스'속성의 역할을 고유 한 'ID'속성과 대조합니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

에디트플러스 중국어 크랙 버전

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

VSCode Windows 64비트 다운로드

VSCode Windows 64비트 다운로드

Microsoft에서 출시한 강력한 무료 IDE 편집기

SecList

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

ZendStudio 13.5.1 맥

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경