分集(与合集同步,方便专题学习)
2023年最全前端面试题考点HTML5+CSS3+JS_参宿7的博客-CSDN博客
2023年前端面试题考点之 通信(渲染、http协议、缓存、异步、跨域)_参宿7的博客-CSDN博客
2023年最全前端React18面试题考点_参宿7的博客-CSDN博客
2023年Vue3前端面试题考点_参宿7的博客-CSDN博客
2023年最全前端面试项目考点(npm,git,webpack,框架)_参宿7的博客-CSDN博客
前端笔试常考数据结构,ACM模板,经典算法_参宿7的博客-CSDN博客
合集(方便检索,⭐表示手写 和 重要程度,*表示了解即可)
目录
HTML5
语义化标签的好处⭐⭐
Web标准和W3C标准⭐
网页组成
响应式布局⭐⭐
浏览器的渲染过程⭐⭐⭐
回流(重排)和重绘⭐⭐
CSS3
盒模型⭐⭐⭐
content-box 内容盒模型(W3C盒) 和 border-box 边框盒模型(IE 盒)
实现梯形,三角形,扇形,圆形,半圆(⭐手写)
盒子充满屏幕 (⭐手写)
选择器
ID选择器、类选择器、标签选择器(按优先级高到低排序)⭐⭐
属性选择器
伪类和伪元素选择器
优先级⭐⭐⭐
样式方式(按优先级高到低排序)⭐⭐
内联样式表(在标签内设置元素的样式)
嵌入样式表(在head标签内)
外部样式表(在head标签内)
position关键字⭐⭐⭐
水平 & 垂直对齐 (⭐手写)
水平居中
垂直居中
水平垂直居中⭐⭐⭐
flex布局⭐⭐⭐
BFC规范⭐⭐⭐
三栏布局 :左右固定,中间自适应(⭐手写)⭐⭐⭐
flex布局(强烈推荐)
grid布局
margin负值法
自身浮动
绝对定位
圣杯布局 (⭐手写)
单位⭐⭐⭐
img的 title 和 alt 有什么区别⭐
行内元素、块级元素和行内块元素⭐⭐⭐
溢出转省略 (⭐手写)⭐⭐
单行
多行
JavaScript
语言区别
BOM,DOM,文档,对象,模型
ES6新增
数据类型
基本数据类型
引用数据类型
声明和定义
Null,NaN,Undefined
toString,valueOf
==,===,Object.is()
typeof运算符,instance of运算符,isPrototypeOf() 方法,constructor,Object prototype
instance of (⭐手写)
new (⭐手写)
类型转换
转换为布尔值
type of null
事件
事件流
事件类型
事件委托(⭐手写)
发布订阅模式(⭐手写)
观察者模式(⭐手写)
Object.create (⭐手写)
寄生组合式继承(⭐手写)
Object.freeze (⭐手写)
封装事件绑定
执行上下文/作用域和作用链
this
JS预解析(变量提升)
var,let 和 const关键字
原型链
Iterator,for in,for of,forEach,map循环遍历
Iterator
for in
for of
forEach
map
匿名函数和箭头函数
call、apply、bind改变this
call (⭐手写)
apply(⭐手写)
bind(⭐手写)
闭包
正则表达式Regular Expression(RegExp) (⭐手写)
常用修饰符
常用字符
合法的URL
函数
函数的length属性
函数声明与函数表达式的区别
立即执行函数(iife)
Generator
常用方法
异或运算^
Math
Number
Map
Set
Array
Array.filter(⭐手写)
Array.map(⭐手写)
Array.reduce(⭐手写)
String
indexOf (⭐手写)
高阶函数和函数的珂里化Currying
Arguments对象
深浅拷贝
深拷贝(⭐手写)
严格模式
防抖 (⭐手写)
节流(⭐手写)
垃圾回收
内存泄漏
宏任务和微任务
JS延迟加载的方式
Vue3
React18
特点
声明式编码
单向数据流
组件化
虚拟DOM(Virtual Dom)(同Vue)
Diff算法(同Vue)
组件属性
props
state
refs
总结
受控组件和非受控组件
事件event
事件处理的几种方法
事件中this的处理
事件传参处理
鼠标事件 mouseenter与mouseover区别
跨组件通信
生命周期
状态提升
复用组件
Render Props模式
HOC高阶组件模式
Hooks
useState
useReducer
useEffect
useRef
useCallback和useMemo
自定义Hook
StrictMode严格模式
Router
路由模式(同Vue)
基础路由搭建
重定向路由
自定义全局守卫
动态路由
Redux状态管理库
应用
React脚手架
Angular,Vue,React对比
Angular
React和Vue
MVC、MVP、MVVM模式
MVC (Model View Controller)
MVP(Model View Presenter)
MVVM (Model View View Model)
服务器端渲染
基本概念
服务器端渲染
客户端渲染
浏览器从输入url到渲染页面 过程⭐⭐⭐
DNS
解析过程⭐⭐
OSI模型和TCP/IP协议⭐
HTTP协议
Http和Https区别⭐⭐⭐
GET和POST发送请求⭐⭐⭐
异同
POST的content-type数据编码
http报文
HTTP请求(Request)报文
HTTP响应(Response)报文
http版本⭐⭐⭐
http状态码⭐⭐⭐
UDP⭐
TCP⭐⭐⭐
三次握手
四次挥手
流量控制(滑动窗口机制)
拥塞控制
keep-alive持久连接
*粘包
缓存⭐⭐⭐
存储方式
强制缓存
协商缓存
本地存储
session
共同点
Cookie、localStorage和sessionStorage
存储地
内存缓存(from memory cache)
硬盘缓存(from disk cache)
应用
js的运行环境
浏览器
Node
特点
npm
数据交换格式
XML
HTML和XML
应用
JSX
Babel⭐
JSON
JSON解析和生成
异步
AJAX
原生AJAX创建
Axios⭐⭐
Promise⭐⭐⭐
Promise.all()哪怕一个请求失败了也能得到其余正确的请求结果的解决方案⭐⭐
fetch
async和await
SPA和MPA
跨域通信⭐⭐⭐
JSONP跨域
原生实现
jQuery ajax
跨域资源共享(CORS)
原生ajax
代理服务器
proxy
Nginx反向代理
正向代理和反向代理
websocket协议
web安全及防护
XSS攻击
CSRF攻击⭐⭐⭐
基于token的登录流程⭐⭐
SQL注入攻击
DDoS攻击
模块化规范
懒加载
require与import的区别和使用
js的运行环境
浏览器
Node
特点
npm
项目规范
命令
项目文件结构
package.json
package-lock.json
node_modules
git代码管理
常用命令
分支
git多人协同merge冲突
暂时保存更改
性能优化
webpack打包管理
原理
Babel
loader
plugin
loader和plugin的区别
热加载原理
共性
问项目中有哪些难点,怎么解决的
代码遇到冲突怎么办
个性
介绍
后端接口
登陆注册
分页
弹窗组件modal
笔试
范围
数据结构(选择题)
二叉树
满二叉树
完全图
最小生成树
最短路径
拓扑排序
关键路径
模式匹配
BF模式匹配
KMP模式匹配
*命名规范
常量
变量,函数
类
算法(编程题)
考核方式
ACM模式
JavaScript(V8)
JavaScript(Node)
常用输出
核心代码模式
常用方法
异或运算^
Math
Number
Map
Set
Array
String
正则表达式Regular Expression(RegExp)
常用修饰符
常用字符
合法的URL
链表
判断链表是否有环
二叉树
(反)序列化二叉树
前序遍历(迭代)
中序遍历(迭代)
后序遍历(迭代)
层序遍历
判断对称二叉树
判断完全二叉树
判断平衡二叉树
二叉树的镜像
数组和树
扁平结构(一维数组)转树
数组扁平化
排序
快速排序
*归并排序
*堆排序
回溯
全排列
N皇后
动态规划(Dynamic Programming,DP)
斐波那契(Fibonacci)数列(递归)
数塔(递推)
递归和递推的区别
最长公共子序列(LCS)
最长回文子串
最小路径和
背包
01背包
完全背包
散列/哈希Hash
数字千位分割
HTML5的设计目的是为了在移动设备上支持多媒体。
在HTML5出来之前,我们习惯于用没有语义的div来表示不同模块。
在HTML5中加入了一些语义化标签,来更清晰的表达文档结构。
web标准
对结构的要求
1、标签字母要小写
2、标签要闭合
对行为的要求
1、建议使用外链CSS和js脚本,实现结构与表现分离、结构与行为分离,能提高页面的渲染效率,更快地显示网页内容
响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套,手机端再开发一套,而使用响应式布局只要开发一套就够。
1.解析HTML的所有标签,深度遍历生成DOM Tree
2.解析CSS,构建层叠样式表模型CSSOM(CSS Object Model)
2.5.JS脚本加载
a. 普通js/sync
文档解析的过程中,如果遇到script脚本,就会停止页面的解析进行下载,当脚本都执行完毕后,才会继续解析页面。
(因为JS可以操作DOM和CSS,可能会改动DOM和CSS,所以继续解析会造成浪费)。
如果脚本是外部的,会等待脚本下载完毕,再继续解析文档。
所以常见的做法是将js放到页脚部分。
b. async(异步:HTML加载和解析,js加载)
async脚本会在加载完毕后执行。
async脚本的加载不计入DOMContentLoaded事件统计,也就是说下图两种情况都是有可能发生的:
HTML 还没有被解析完的时候,async脚本已经加载完了,那么 HTML 停止解析,去执行脚本,脚本执行完毕后触发DOMContentLoaded事件。
HTML 解析完了之后,async脚本才加载完,然后再执行脚本,那么在HTML解析完毕、async脚本还没加载完的时候就触发DOMContentLoaded事件
c. defer(推迟)
文档解析时,遇到设置了defer的脚本,就会在后台进行下载,但是并不会阻止文档的渲染,当页面解析和渲染完毕后,会等到所有的defer脚本加载完毕并按照顺序执行完毕才会触发
DOMContentLoaded事件,也就是说下图两种情况都是有可能发生的:
HTML 还没有被解析完的时候,defer脚本已经加载完了,那么 等待HTML 解析完成后执行脚本,脚本执行完毕后触发DOMContentLoaded事件。
HTML 解析完了之后,defer脚本才加载完,然后再执行脚本,脚本执行完毕后触发DOMContentLoaded事件。
defer是“渲染完再执行”:依赖于页面中的DOM元素(文档是否解析完毕),或者被其他脚本文件依赖
async是“下载完就执行”:并不关心页面中的DOM元素(文档是否解析完毕),并且也不会产生其他脚本需要的数据。
3.构建Render Tree(渲染树)
DOM和CSSOM根据一定的规则组合起来生成了Render Tree
4.布局(Layout)
确定各个元素的位置,以及大小。浏览器使用一种流式处理的方法,只需要一次绘制操作就可以布局所有的元素。
5.绘制(Painting)
浏览器会遍历Render Tree渲染树,调用“paint”方法,将渲染树的各个节点绘制到屏幕上。
回流(重排)
元素改变 尺寸,宽高,边框,内容,位置 都会引起重排,导致需要重新构建页面的时候
重绘
外观发生改变,但没有改变布局
列举一些相关的 CSS 样式:color、background、background-size、visibility、box-shadow
内容(content)、内边距/填充(padding)、外边距/边界(margin)、 边框(border);
width = content宽度
width = content宽度 + padding + border
/* HTML CODE:
正方形
*/
/* CSS CODE */
.square {
width: 100px;
height: 100px;
border-top: 50px solid red;
border-right: 50px solid green;
border-bottom: 50px solid orangered;
border-left: 50px solid blue;
}
关键:
border: 50px solid transparent; border-color设置为【透明】
border-radius: 50%;
border-top-left-radius: 50px;
详情:
CSS实现各种图形 -- 梯形,三角形,扇形,圆形,半圆 - 掘金
相对当前屏幕高度
div.test
{
background-color:red;
width:100vw;
height:100vh;
}
红色
绿色
黑色
属性选择元素
[title]
{
color:blue;
}
逻辑选择元素
nth-child(n)匹配属于其父元素的第n个子元素,不论元素类型,n可以是数字、关键词、或公式。关键词odd和even是可用于匹配下标是奇数或偶数的子元素的关键词(第一个子元素的下标是 1)
- 1
- 2
- 3
- 4