本文为大家分享了浏览器的工作原理和渲染过程，如计算 CSS 样式，构建 Render Tree， Layout 等过程。

译者注：昨天一篇工作仅一年的前端工程师面试几个大厂的文章 （1 月前端面试记） 在掘金火爆起来。一方面大家觉得作者太厉害了，工作近一年，能力竟然这么强（大叔我表示惭愧），另一方面几个微信面试题引起很多讨论。其中我比较感兴趣的一个题目是关于 JavaScript 和 CSS 阻塞 DOM 的。…

这就触到了本人的知识盲区了，本着扫盲的目的，研究了下 link 标签，发现这个小东西功能还是挺强大的，上面的就是为了实现预加载功能，懂点儿英文的，一看见preload 就大致知道了。 之前也有预加载技术，像 prefetch，subresource 等，关于这两者和 prelo…

hello~各位亲爱的看官老爷们大家好。估计大家都听过，尽量将CSS放头部，JS放底部，这样可以提高页面的性能。然而，为什么呢？大家有考虑过么？很长一段时间，我都是知其然而不知其所以然，强行背下来应付考核当然可以，但实际应用中必然一塌糊涂。因此洗（wang）心（yang）革（b…

现在网上也有很多关于前端文件加载的性能优化，我相信大部分的前端程序猿，应该都听说过雅虎的14条优化原则 1. 尽可能的减少 HTTP 的请求数 content 2. 使用 CDN（Content Delivery Network） server 3. 添加 Expires 头(或…

“假设有一个超超超大型的 Web 项目，JS 源代码压缩之后超过 10MB（实际怎么可能会有这么大的嘛 =。=），每次更新之后都需要用户重新加载 JS 是不可接受的，那么怎么样从工程的角度解决这种问题？”

缓存（cache）一直是前端性能优化的重头戏，利用好静态资源的缓存机制，可以使我们的 web 应用更加快速和稳定。仅仅简单的资源缓存是不够的，我们还要为不断更新的资源做持久化缓存（Long term cache）。

本文只提供推理方式和分析方法，不保证样本及计算的精准性，慎读！

本文主要从工作效率、速度性能、稳定性、响应式、兼容性、搜索 SEO、信息无障碍等方面进行讲解。 前端优化是一个让人技术提升的 point，希望你也能从这里学到一些东西。