前端知识分享
把前端里值得弄懂的问题，
一次讲清楚。
这里记录浏览器、CSS、JavaScript 和网页性能方面的知识。每篇只讲清一件事，尽量配上可以动手试的例子。
- Parse解析文档
- Style计算样式
- Layout计算布局
- Paint绘制内容
- Composite合成图层
全部文章 9 篇
JavaScript
-
事件循环：为什么 Promise 总比 setTimeout 先执行
只要记住“一个任务、清空微任务、可能渲染”这三步，绝大多数执行顺序题和页面卡顿问题都能想明白。
CSS
-
Flexbox 还是 Grid：一个够用的判断方法
不用背属性表。先问尺寸是由内容决定还是由版面决定，再避开几个常见的坑，布局问题就解决了大半。
-
现代 CSS：这些特性已经可以放心用了
父选择器、容器查询、原生嵌套……很多过去要靠 JavaScript 或预处理器才能做的事，现在一行 CSS 就够了。
渲染与性能
-
从 HTML 到像素：浏览器渲染流水线
弄清 Style、Layout、Paint、Composite 各自做什么，就能判断一次样式修改要付出多少代价，也知道动画该用哪些属性。
-
Core Web Vitals：LCP、INP、CLS 怎么查、怎么改
三个指标分别回答“内容多久出来”“点了有没有反应”“页面会不会乱跳”。先学会看真实用户的数据，再逐项优化。
网络与安全
-
HTTP 缓存：讲清 Cache-Control
no-cache 并不是不缓存。搞懂强缓存和协商缓存，再记住“HTML 要验证，带 hash 的资源缓存一年”这条策略就够了。
-
跨域与 CORS：报错时到底发生了什么
跨域错误是浏览器拦下了响应，不代表请求没有到达服务器。弄清这一点，再看预检和 Cookie 的规则就顺理成章了。
-
前端安全入门：XSS、CSRF 与 CSP
前端最常遇到的两类攻击是什么原理，日常开发怎样防范，再加上一层 CSP 作为兜底。
可访问性
-
网页可访问性：五件今天就能做的事
可访问性不是额外的功能。用对标签、照顾键盘、写好替代文本和对比度，就能解决大部分问题，对所有用户都有好处。