技术博客
首页 所有文章 标签 分类 关于
技术博客

目录

2022-05-07-前端面试HTML5CSS3JSTS4Vue3React18八股文手写项目笔试

 收录于 前端 前端面试
   约 259229 字   预计阅读 518 分钟 
https://bing.ee123.net/img/rand?artid=124638456
目录

前端面试HTML5+CSS3+JS+TS4+Vue3+React18+八股文+手写+项目+笔试

高频 面试考点分集，适用于 基础面 和 临时抱佛脚复习

分集 方便专题学习（ 合集因码字过多，太卡，优先更新分集，合集与分集同步率最低98% ）

⭐表示手写 和 重要程度，*表示了解即可

为了简洁，相关文章参考链接在标题里

常考考点也写的很详细，因为面试官会顺着深挖，所以导致篇幅全又长，见谅

长文不易，码字卡死，如果有帮助到你，可以点个赞吗？Thanks♪(･ω･)ﾉ

一开始就是在CSDN博客上写的，现在应部分同学的要求，我直接将博客内容复制成pdf，暂时没空整理格式，有的代码缺失还请见原文，见谅。

合集（方便检索，手机端有时文章会不显示目录，可以点下方的目录按钮）

目录

HTML5

HTML5的设计目的是为了在 移动设备 上支持多媒体。

在HTML5出来之前，我们习惯于用没有语义的 div 来表示不同模块。

在HTML5中加入了一些 语义化 标签，来更清晰的表达 文档结构 。

https://i-blog.csdnimg.cn/blog_migrate/4900f7294f749c6f158d94e48be7c86d.png

语义化标签的好处⭐⭐

  1. 用户 ：提高 体验 ，比如： title，alt 用于 解释 名词和图片信息
  2. 非技术 人员：能看懂代码，很好的呈现内容 结构 、代码结构
  3. 技术 人员：便于团队 开发与维护 ， 语义化 更具有 可读性
  4. 搜索引擎 ：利于 SEO 。语义化能和搜索引擎建立更好的联系，优化搜索

Web标准和W3C标准⭐

网页组成

web标准

https://i-blog.csdnimg.cn/blog_migrate/d172dd1ef7e7671365812dcea1266c13.png

  • 结构（骨架）：HTML用于描述页面的结构

  • 表现（皮肤）：CSS用于控制页面中元素的样式

  • 行为（交互）：JavaScript用于响应用户操作

  • W3C：World Wide Web（万维网） Consortium，对web标准提出了 代码规范 的要求

  • 对 结构 的要求

    1、标签字母要 小写

    2、标签要 闭合

  • 对 行为 的要求

    1、建议使用 外链CSS和js脚本 ，实现 结构与表现分离 、 结构与行为分离 ，能提高页面的 渲染效率 ，更快地显示网页内容

浏览器的渲染过程 ⭐⭐⭐

https://i-blog.csdnimg.cn/blog_migrate/a0f5dbd5791ce54d7c77e033b56559db.png

https://i-blog.csdnimg.cn/blog_migrate/877c25f25589e75d8e0ea1b67af91a81.png https://i-blog.csdnimg.cn/blog_migrate/4a1c7748edbdf93a9a4533094b5e0a81.png https://i-blog.csdnimg.cn/blog_migrate/37f7afb7b524797f62dab7e1d1c9a7b7.png

1.解析HTML的所有标签，深度遍历生成DOM Tree

https://i-blog.csdnimg.cn/blog_migrate/8b53f5e98369c2fa193053ddff949eb1.png

2.解析CSS，构建层叠样式表模型CSSOM(CSS Object Model)

https://i-blog.csdnimg.cn/blog_migrate/d6faf4ee936440d96f3350220169a247.png

2.5.JS脚本加载

a. 普通js/sync

文档解析的过程中，如果遇到script脚本，就会停止页面的解析进行下载，当脚本都执行完毕后，才会继续解析页面。

https://i-blog.csdnimg.cn/blog_migrate/a344e14907f77b4035eb458f539b145a.png

（因为JS可以操作DOM和CSS，可能会改动DOM和CSS，所以继续解析会造成浪费）。

如果脚本是外部的，会等待脚本下载完毕，再继续解析文档。

所以常见的做法是将js放到页脚部分。

b. async（异步：HTML加载和解析，js加载）

async脚本会在 加载完毕后执行 。

async脚本的加载不计入DOMContentLoaded事件统计，也就是说下图两种情况都是有可能发生的：

HTML 还没有被解析完的时候，async脚本已经加载完了，那么 HTML 停止解析，去执行脚本，脚本执行完毕后触发DOMContentLoaded事件。

https://i-blog.csdnimg.cn/blog_migrate/6272157e38013b4e28090bea9d168f9f.png

HTML 解析完了之后，async脚本才加载完，然后再执行脚本，那么在HTML解析完毕、async脚本还没加载完的时候就触发DOMContentLoaded事件

https://i-blog.csdnimg.cn/blog_migrate/df4622aeb24bf4478882bd52676d9a9f.png

c. defer(推迟)

文档解析时，遇到设置了defer的脚本，就会在后台进行下载，但是并不会阻止文档的渲染，当页面解析和渲染完毕后，会等到所有的defer脚本加载完毕并按照顺序执行完毕才会触发

DOMContentLoaded事件，也就是说下图两种情况都是有可能发生的：

HTML 还没有被解析完的时候，defer脚本已经加载完了，那么 等待HTML 解析 完成后执行脚本，脚本执行完毕后触发DOMContentLoaded事件。

https://i-blog.csdnimg.cn/blog_migrate/5afffc598c042591c48d4d3ffb175626.png

HTML 解析完了之后，defer脚本才加载完，然后再执行脚本，脚本执行完毕后触发DOMContentLoaded事件。

https://i-blog.csdnimg.cn/blog_migrate/6e84ca5634dd0eab7334f714ac835ee1.png

defer是“渲染完再执行”： 依赖于页面中的DOM元素（文档是否解析完毕），或者被其他脚本文件依赖

async是“下载完就执行”： 并不关心页面中的DOM元素（文档是否解析完毕），并且也不会产生其他脚本需要的数据。

3.构建Render Tree（渲染树）

DOM和CSSOM根据一定的规则组合起来生成了Render Tree

https://i-blog.csdnimg.cn/blog_migrate/55b3ac02a633304b386bd0f974a0f5f2.png

4.布局（Layout）

确定各个元素的位置，以及大小。浏览器使用一种 流式 处理的方法，只需要 一次绘制 操作就可以布局所有的元素。

5.绘制（Painting）

浏览器会遍历Render Tree渲染树，调用“paint”方法，将渲染树的各个节点绘制到屏幕上。

回流（ 重排 ）和重绘⭐⭐

回流（重排）

元素 改变 尺寸，宽高，边框，内容，位置 都会引起重排 ，导致需要重新构建页面的时候

  • 增删 可见的 DOM 元素的时候
  • 元素的 位置 发生改变
  • 元素的 尺寸 发生改变
  • 内容改变
  • 页面 第一次渲染 的时候

重绘

外观 发生改变，但没有改变 布局

列举一些相关的 CSS 样式 ：color、background、background-size、visibility、box-shadow

常用手写⭐

获取标签

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            div{
                color:#ff0000;
                font-size:20px;
            }
            .green{
                color:#008000;
            }
            #black{
                color:#000000;
            }
        </style>
    </head>
    <body>
        <div>红色</div>
        <div class='green'>绿色</div>
        <div id='black'>黑色</div>
    </body>
</html>
document.getElementById('id')//全局唯一
document.getElementByClassName('className')//获得数组
document.getElementByTagName('div')//获得数组

js中插入标签

let head = document.head;
let style = document.createElement("style");
style.type = "text/css";
style.innerHTML = "p {color: rgb(255,0,0);}";
head.appendChild(style);

获取第n个标签

let pArr = document.getElementsByTagName('p')
for(let i = 0; i < pArr.length; i++){
    if(i===n-1){
...
}
}
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            ul li:nth-child(2) {
                background-color: rgb(255,0,0);
            }
        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </body>
</html>

<input type="text" onkeyup="myFunction()">
//不用 "on" 前缀。例如，使用 "click" 来取代 "onclick"。
//true - 事件在捕获阶段执行
//false- 默认。事件在冒泡阶段执行
document.addEventListener(event, function[, useCapture])

鼠标事件

属性描述DOM
当用户点击某个对象时调用的事件句柄。2
当用户双击某个对象时调用的事件句柄。2
鼠标按钮被按下。2
鼠标被移动。2
鼠标移到某元素之上。2
鼠标从某元素移开。2
鼠标按键被松开。2

键盘事件

属性描述DOM
某个键盘按键被按下。2
某个键盘按键被按下并松开。2
某个键盘按键被松开。

表单事件

属性描述DOM
该事件在表单元素的内容改变时触发( , ,