前端面试基础知识总结（一）：大纲 & HTML

前言

我在去年春天为了暑期实习做了很多准备，也参加了近30场技术面试，最终拿到了大厂的offer。之前准备的面经知识总结有些零碎，所以想重新整理一下，一方面自己在整理过程中可以重温知识点，另一方面如果未来被“毕业”了也可以掏出来复习。

前端知识大纲

下图是我总结的面试常考知识点的大纲：

我把前端面试中常考核的内容分成七个模块：基础、框架、前端工程化、浏览器原理、计算机网络、算法与数据结构、服务器基础。其中基础固然是最重要的，HTML、CSS、JavaScript、Dom是每一个前端er必须掌握好的内容。CSS常考核的知识点都在上面的思维导图上来，HTML考核的频次较少。JavaScript会考核的较为细致，除了会问一些基础概念，也会出手写题或者让你看代码说输出结果。同时ES6（即ES2015）从2015年后每年都会出新版本，像Promise、Class类在实际生产中非常常用，也经常在面试中考核。

根据你简历上的技术栈，Vue和React框架一般择其一考察。基本面试官都会问你更熟悉哪个技术栈再考察该框架的知识点，所以尤其要深入准备一个框架，除了吃透API、生命周期的基本概念，还要去了解底层原理，如果能了解该框架最新的发展趋势就更好了。同时还需要了解框架通识，比如MVVM和MVC的区别，Virtual Dom是什么，Vue和React的区别和各自优势等。

计算机网络、数据结构和算法这俩算是计算机科班人都会的基础知识。当然前端也会考核，但不会那么难。考核的趋势是一年比一年难，所以还是要做好心理准备。算法题上LeetCode刷上100~200道题绝对够用了，同时还需要掌握手写JS题（手写Promise等）。至于设计模式和编程范式不一定会考核，但最好也有所了解。在计算机网络领域，前端面试就喜欢问跨域问题，一定要深入、再深入的准备。Web安全、HTTPS、TCPIP之类的都是老生常谈了。

浏览器原理主要考核浏览器渲染方面。经典面试题“输入一个url到地址栏，浏览器经历了哪些变化”出现频率之高令人咂舌，默默吐槽一下感觉每个公司面试都会问到！在前端工程化领域，面试官经常会考核webpack和性能优化，也会问你对前端工程化的理解，会对前端发展趋势的看法。服务器基础的知识属于加分项，会最好，不会问题也不大。主要NodeJs太常用了，不了解说不过去。

除了上述知识点，项目经历的考核也占据了面试的半壁江山。一般而言，如果你的项目经历越出众，面试官越会对你的项目更感兴趣，从而提问更长的时间。这时候你要做的就是好好复盘整个项目，并准备好与该项目技术栈相关的发散性的各方面知识点。正所谓，不需要面面俱到，但要深入一二。

基础：HTML

大纲

HTML是什么？

超文本标记语言 (英语：Hypertext Markup Language，简称：HTML ) 是一种用来结构化 Web 网页及其内容的标记语言。

HTML版本

  • HTML4：标签可以不结束
  • HTML5：新增内容
  • XHTML
    • 目的是传输和存储数据，而不是描述数据
    • 比HTML更严格：标签必须结束，属性必须带引号，属性必须有值，标签属性必须有值

HTML元素分类

  • 块级元素block（方块形状，占据一整行）：div ul ol li dl dt dd h1~h5 p
  • 行内元素inline(一行中的某个位置)：a b span img input select strong
  • inline-block(行内，有宽高属性)：selection
  • 空元素: br、meta、hr、link、input、img

嵌套关系：

  • 块级元素可以包含行内元素
  • 块级元素不一定能包含块级元素(p标签不能包含div标签)
  • 行内元素“一般”不能包含块级元素（a包含div是可以的）

HTML5新增内容

  1. 更好的语义化标签

    <section>用于对网站和页面内容分块，划分单独的模块区域
    <article>独立的文章展示
    <aside>页面中的附属侧边信息
    <header>定义页面或内容的头部区域
    <footer>定义页面或内容的底部区域
    <nav>定义页面导航
    <figure>表示一个独立的内容

  • 作用：1.利于SEO 2.增强代码可读性
  1. Web Workers：运行在后台的 JavaScript，实现多线程
  2. 应用缓存：通过创建manifest 文件，可以轻松地创建 web 应用的离线版本
  3. requestAnimationFrame：保证回调函数在屏幕每一次的刷新建个中只执行一次，动画不掉帧
  4. 增加了canvas，拖放api，地理定位Geolocatio…

面试题

Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?

<!DOCTYPE>声明位于位于HTML文档中的第一行，处于<html>标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

  • 严格模式：排版和JS运作模式都是以该浏览器支持的最高标准运行。

  • 混杂模式(兼容模式)：页面以宽松的向后兼容的方式显示, 模拟老式浏览器的行为以防止站点无法工作。

HTML全局属性(global attribute)有哪些？

全局属性可用于任何 HTML 元素:

  • class：为元素设置类标识
  • id id标识符
  • draggable: 是否可拖拽
  • data-*： 为元素增加⾃定义属性
  • style 行内元素

为什么script标签在body底部，style标签在head上？

浏览器解析HTML文档是自上而下的，遇到默认的<script>标签，会导致浏览器必须先加载并执行脚本，之后才能继续解析。对于那些需要很多JavaScript代码的页面来说，这无疑会导致浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口中将是一片空白。

同理浏览器解析HTML文档是自上而下的，这样<style>标签里的样式就会作用到body里的元素上。如果<style>标签写在<body>标签下面，在这之前的元素的样式就不会生效，会导致页面结构出来了，而CSS还没开始渲染。

<style>标签还有两个属性：

async属性:

  1. 对于普通脚本，如果存在 async 属性，那么普通脚本会被并行请求，并尽快解析和执行。
  2. 对于模块脚本，如果存在 async 属性，那么脚本及其所有依赖都会在延缓队列中执行，因此它们会被并行请求，并尽快解析和执行。

defer属性:

  1. 并行请求，将在文档完成解析后，触发 DOMContentLoaded 事件前执行。
  2. 对模块脚本没有作用 —— 他们默认 defer

TBC.

前端面试基础知识总结
front-end interview HTML

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！