同为程序员，在细分工种下，前端和其他方向的一个最大的区别就是除了写代码之外，还要和视觉层面上的图形打交道，对我来说这也是前端最大的魅力，因为我深知图形之美以及其奥妙之处。不过并不是所有前端都会深入图形领域，但对于所有前端来说有一门图形相关的入门课倒是必修的，那就是图标管理了。

这是一道很经典的面试题，可以说考察了前端知识的各个方面，其中每个点都有很多可以展开的地方。网络上的解析也不少，但大多数也都是不那么全面，干脆自己总结一版也顺便回顾一下相关知识。当然说是全览也有些标题党了，本意是尽可能的在前端知识领域涉猎范围内记录完整。

前端性能优化的关键无非就是两个"快"——资源下载更快，资源解析更快。前端的预加载技术给予了我们精准控制浏览器下载资源行为的能力，即可以让我们合理安排资源下载逻辑来完成性能优化。

有时候我们打开一个网页会发生卡顿，动画不流畅的现象，没有耐心的用户可能等不到页面加载完成就关闭这个网页了。而决定一个网页的流畅度的原因，除了用户自身的网速外，网页性能也是一个很重要的指标。如何尽可能的优化也是开发者需要关注的问题，尽可能的减少重绘和重排就是方法之一。那么什么是重绘和重排呢？

在web开发中不可避免的会接触到路由的概念，例如Vue配套的技术栈里就有vue-router来管理前端路由的控制。那么路由究竟是什么呢？

HTML5新增了一组与本地文件进行交互的API。这组API增强了前端操作文件数据的能力，以前通常要借助后端实现的一些功能，例如断点续传，图片预览等现在也可以在前端轻松的完成了。

为了改掉自己遇事不决DIV的坏习惯，对语义化标签常用场景按照自己的理解做一个整理随时查询，争取养成使用习惯。

先看这样一个例子。

当上层的a浮动后，覆盖了下层的b。但当给b添加一个相对定位后，又覆盖了上层的a。

为什么一个relative定位属性就可以改变元素叠加的顺序呢？实际上就是元素的层叠规则在作怪。层叠规则就是CSS中的元素叠加后在视觉上谁上谁下的规则。为了深入理解这个规则，我们就从层叠顺序的应用范围——层叠上下文说起。

今天设计妹子有个要求让某个元素出现在浏览器中视口时触发某个动效。感觉是个比较常见的需求，因为浏览器中获取位置的方法实在是又多又杂，索性做个总结以后自己查起来也方便~

大家都知道，获取一个DOM元素的样式通过elem.style或者elem.getAttribute('style')都能实现。那么这两者有什么区别呢？