技术最前端,专注 Web 技术学习与总结。JavaScript, JS, ES6, TypeScript, Vue, PHP, CSS3, Html5, Node, Git, Markdown 等技术文章。
浏览器缓存(Brower Caching)是浏览器在本地磁盘对用户最近请求过的文档进行存储,当访问者再次访问同一页面时,浏览器就可以直接从本地磁盘加载文档。
浏览器缓存的优点有:
减少了冗余的数据传输,节省了网费
减少了服务器的负担,大大提升了网站的性能
加快了客户端加载网页的速度
DOM:Document Object Model,浏览器将 HTML 解析成树形的数据结构,简称 DOM。
CSSOM:CSS Object Model,浏览器将 CSS 代码解析成树形的数据结构。
DOM 和 CSSOM 都是以 Bytes → characters → tokens →nodes → object model.这样的方式生成最终的数据。如下图所示:
DOM 树的构建过程是一个深度遍历过程:当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。
Render Tree:DOM 和 CSSOM 合并后生成 Render Tree,如下图:
Render Tree 和 DOM 一样,以多叉树的形式保存了每个节点的 css 属性、节点本身属性、以及节点的孩子节点。
注意:display:none 的节点不会被加入 Render Tree,而 visibility: hidden 则会,所以,如果某个节点最开始是不显示的,设为 display:none 是更优的。