开始渲染时间：浏览器开始绘制页面，在此之前页面都是白屏，所以也称为白屏时间。 onload：原始文档和所有引用的内容已经加载完成，用户最明显的感觉就是浏览器上loading状态结束。 高级浏览器通过DOMContentLoaded事件获取。 这个时间点很重要但是很难获取，一般都…

性能优化是把双刃剑，有好的一面也有坏的一面。好的一面就是能提升网站性能，坏的一面就是配置麻烦，或者要遵守的规则太多。并且某些性能优化规则并不适用所有场景，需要谨慎使用，请读者带着批判性的眼光来阅读本文。 本文相关的优化建议的引用资料出处均会在建议后面给出，或者放在文末。 1. …

总所周知 JS 运行在浏览器中，以单线程方式运行，每个window一个JS线程。那么浏览器是如何处理js中的I/O读取、用户点击、setTimeout等异步事件，并使其他js代码不被阻塞的呢？ 浏览器中的事件循环就是其解决方式。简单来说浏览器中的事件循环的机制是将产生的异步事件…

很久以前理解过一个URL从在浏览器地址栏输入，到呈现页面都发生了什么。前两天碰到一个nginx反向代理的问题，又回想起这个流程，我想是对这个流程理解的还不够透彻，所以特意抽出时间来总结一下。 **第9步，本地域名服务器拿到ip以后，会存入本地DNS缓存。 DNS缓存： 浏览器缓…

在开发过程中经常会涉及跨域问题，解决跨域问题的方案也有很多种，接下来就来梳理一下前端跨域的常用方法。 何为跨域，跨域是相对于同源而言。协议、域名和端口均相同，则为同源。 浏览器通过同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关…

为了防止跨域请求伪造攻击，浏览器用同源策略的机制来保证安全。同源策略必须是：协议相同，域名相同，端口相同 我们可以发送一个带callback的请求到服务端，如www.abc.com/api?callback=func, 而服务器根据你的callback来返回json数据。这个例…

将HTML构建成一个DOM树（DOM = Document Object Model 文档对象模型），DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。 根据DOM树和CSSOM来构造 Rendering Tree（渲染树…

1）浏览器在加载资源时，先根据这个资源的一些http header判断它是否命中强缓存，强缓存如果命中，浏览器直接从自己的缓存中读取资源，不会发请求到服务器。比如某个css文件，如果浏览器在加载它所在的网页时，这个css文件的缓存配置命中了强缓存，浏览器就直接从缓存中加载这个c…

Cache-Control与Expires的作用一致，都是指明当前资源的有效期，控制浏览器是否直接从浏览器缓存取数据还是重新发请求到服务器取数据。只不过Cache-Control的选择更多，设置更细致，如果同时设置的话，其优先级高于Expires sessionStorage …