杂记

• 行内元素之间的文本节点会造成空隙，可以通过加注释节点或者父元素font-size: 0；来解决。
• 浏览器渲染主要分以下几个步骤，计算样式->计算布局->绘制->组合层，transform和animation处于组合层这一步骤，而left或margin处于计算布局这一步骤，所以transform会更快，这也是常说的硬件加速。
• 负载均衡：用户发起的请求都指向调度服务器（反向代理服务器，譬如安装了nginx控制负载均衡），然后调度服务器根据实际的调度算法，分配不同的请求给对应集群中的服务器执行，然后调度器等待实际服务器的HTTP响应，并将它反馈给用户。
• CSS下载时异步，不会阻塞浏览器构建DOM树。
  但是会阻塞渲染，也就是在构建render时，会等到css下载解析完毕后才进行（这点与浏览器优化有关，防止css规则不断改变，避免了重复的构建）。
  有例外，media query（媒体查询）声明的CSS是不会阻塞渲染的。
• animation-fill-mode：设置CSS动画在执行之前和之后如何将样式应用于其目标。none/backwards：动画执行结束后回到起始位置；
  both/forwards：动画执行结束后停留在结束为止；
• 负载均衡：用户发起的请求都指向调度服务器（反向代理服务器，譬如安装了nginx控制负载均衡），然后调度服务器根据实际的调度算法，分配不同的请求给对应集群中的服务器执行，然后调度器等待实际服务器的HTTP响应，并将它反馈给用户。
• 写在css里面的图片是以背景图形式存在的，而写在html里的是以img标签形式存在的，在网页加载的过程中，以css背景图存在的图片会等到结构加载完成（网页的内容全部显示以后）才开始加载，而html中的img标签是网页结构（内容）的一部分会在加载结构的过程中加载，换句话讲，网页会加载img标签的内容再加载背景图片。
• :hover 匹配用户鼠标悬停状态。
  在 PC 浏览器中，只要鼠标移动到元素上，它的 :hover 伪类就会立即生 效，鼠标移走就会立即失效。
  在移动浏览器中，:hover 的表现类似 PC 下的 :focus：在用户点击页面其他位置时，:hover 态才会消失。