前端一些常见问题 简单写一点 （杂文）

响应报文
HTTP响应报文也由三部分组成：响应行、响应头、响应体
display: none; visibility: hidden 区别
display:none不占位隐藏 而visibility：hidden占位隐藏
清除内浮动和外浮动的方法

第一种&::after 注意 content必须加
第二种 zoom：1; overflow：hidden
第三种 比较low的一种办法 我们在最外盒子内的底端加入一个块元素标签以达到自动撑起外盒子的效果

css3 的一些新特性（动画、伪类）
边框
border-radius：为元素添加圆角边框，border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性；
box-shadow：向框添加一个或多个阴影。
语法：box-shadow: 水平位移 垂直位移 [模糊半径 阴影尺寸 阴影颜色 inset(内部阴影)];
background-size：背景图片的尺寸。
background-origin：规定 background-position 属性相对于什么位置来定位。
background-clip：规定背景的绘制区域。

渐变
linear-gradient()：线性渐变。
语法：background: linear-gradient(方向, start-color, …, last-color);
radial-gradient()：径向渐变。

文本效果
word-break：定义如何换行。
word-wrap：允许长的内容可以自动换行。
text-overflow：指定当文本溢出包含它的元素，应该发生什么。
text-shadow：文字阴影。

转换
transform：应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
transform-origin：允许您更改转换元素的位置。2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴。
transform-style：指定嵌套元素是怎样在三维空间中呈现。

2D转换方法
rotate(angle)：定义 2D 旋转，在参数中规定角度。
translate(x,y)：指定元素在二维空间中的位移。X轴方向向右，Y轴方向向下。
translateX(n)：指定元素在X轴中的位移。
translateY(n)：指定元素在Y轴中的位移。
scale(n)：定义 2D 缩放转换。
scaleX(n)：定义 X 轴方向的缩放转换。
scaleY(n)：定义 Y 轴方向的缩放转换。
matrix(a,b,c,d,e,f)：定义 2D 转换，使用六个值的矩阵
skew(x-angle,y-angle)：定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)：定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)：定义沿着 Y 轴的 2D 倾斜转换。

3D转换方法
perspective(n)：为 3D 转换元素定义透视视图。
translate3d(x,y,z)：指定元素在三维空间中的位移。X轴方向向右，Y轴方向向下，Z轴方向向你。
translateX(x)：指定元素在X轴中的位移。
translateY(y)：指定元素在Y轴中的位移。
translateZ(z)：指定元素在Z轴中的位移。
scale3d(x,y,z)：定义 3D 缩放转换。
scaleX(x)：通过设置 X 轴的值来定义缩放转换。
scaleY(y)：通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)：通过设置 Z 轴的值来定义缩放转换。
rotate3d(x,y,z,angle)：定义 3D 旋转。
rotateX(x)：定义沿着 X 轴的 3D 旋转。
rotateY(y)：定义沿着 Y 轴的 3D 旋转。
rotateZ(z)：定义沿着 Z 轴的 3D 旋转。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)：定义 3D 转换，使用 16 个值的 4x4 矩阵。

css新增的一些伪类
1、p:first-of-type
:first-of-type 选择器匹配属于其父元素的特定类型的首个子元素的每个元素。
2、p:last-of-type
:last-of-type 选择器匹配属于其父元素的特定类型的最后一个子元素的每个元素。
3、p:only-of-type
:only-of-type 选择器匹配属于其父元素的特定类型的唯一子元素的每个元素。
4、p:only-child
:only-child 选择器匹配属于其父元素的唯一子元素的每个元素。
5、p:nth-child(2)
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
n 可以是数字、关键词或公式。
6、:enabled :disabled
表单控件的禁用状态。
7、:checked
:checked 选择器匹配每个选中的输入元素（仅适用于单选按钮或复选框）。

如何使用CSS实现硬件加速, GPU渲染

1. transfrom: translate3D(100, 0, 0): 写上Z轴 会使用伪 GPU渲染
2. will-change: 绝对的GPU渲染

闭包
各种专业文献上的"闭包"（closure）定义非常抽象，很难看懂。我的理解是，闭包就是能够读取其他函数内部变量的函数。
由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。
所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁
闭包的作用
闭包常常用来「间接访问一个变量」。换句话说，「隐藏一个变量」。

JS数据类型
Object Number String Boolean Null undefinde Symbol 其中五种基本类型 :Number String Boolean Null undefinde

防抖 节流
所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，
则会重新计算函数执行时间。
所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数
例子:
oninput
sug 200ms 如果使用 防抖 只要用户在不停输入 并且输入间隔时间小于 200 取消上一次的
输入 不会触发后台 这就属于节流

常见的一些状态码
200 正常 成功
204 没有新文档，浏览器应该继续显示原来的文档。如果用户定期地刷新页面，而Servlet可以确定用户文档足够新，这个状态代码是很有用的
301 客户请求的文档在其他地方，新的URL在Location头中给出，浏览器应该自动地访问新的URL。
302 Found
303 类似于301/302，不同之处在于，如果原来的请求是POST，Location头指定的重定向目标文档应该通过GET提取（HTTP 1.1新）。
304: 使用本地的缓存 (强缓存 协商缓存)
400 请求出现语法错误。
401 客户试图未经授权访问受密码保护的页面。应答中会包含一个WWW-Authenticate头，浏览器据此显示用户名字/密码对话框，然后在填 写合适的Authorization头后再次发出请求。
403 资源不可用。服务器理解客户的请求，但拒绝处理它。通常由于服务器上文件或目录的权限设置导致。
404 无法找到指定位置的资源。这也是一个常用的应答。
500 服务器遇到了意料不到的情况，不能完成客户的请求。
501 服务器不支持实现请求所需要的功能。例如，客户发出了一个服务器不支持的PUT请求。
503 服务器由于维护或者负载过重未能应答。例如，Servlet可能在数据库连接池已满的情况下返回503。服务器返回503时可以提供一个 Retry-After头。
504 由作为代理或网关的服务器使用，表示不能及时地从远程服务器获得应答。（HTTP 1.1新）

微任务、宏任务

• 宏任务 setTimeout setInterval
• 微任务 Promise
  执行顺序 同步任务 > 微任务 > 宏任务