【前端八股文】浏览器系列：浏览器渲染、前端路由、前端缓存（HTTP缓存）、缓存存储（HTTP缓存存储、本地存储） |
您所在的位置：网站首页 › cache的单位 › 【前端八股文】浏览器系列：浏览器渲染、前端路由、前端缓存（HTTP缓存）、缓存存储（HTTP缓存存储、本地存储） |
【前端八股文】浏览器系列：浏览器渲染、前端路由、前端缓存（HTTP缓存）、缓存存储（HTTP缓存存储、本地存储）
|
文章目录
渲染步骤DOM树与render树回流与重绘
前端路由hash模式history模式两种模式对比
前端缓存HTTP缓存强缓存协商缓存一般哪些文件对应哪些缓存HTTP缓存总结
缓存存储HTTP缓存存储本地存储
参考
本系列目录：【前端八股文】目录总结 是以《代码随想录》八股文为主的笔记。详情参考在文末。 代码随想录的博客_CSDN博客-leecode题解,ACM题目讲解,代码随想录领域博主 渲染具体可以看：【JavaScript高级】浏览器原理：渲染引擎解析页面步骤、回流和重绘、composite合成、defer与async_karshey的博客 步骤用户看到的页面分为两个阶段：页面内容加载完成DOMContentLoaded 和 页面资源加载完成Load 阶段。 DOMContentLoaded事件触发时，仅DOM加载完成load事件触发时，页面上所有DOM、样式、脚本、图片都加载完成渲染步骤大致分为以下6步： 解析HTML，构建DOM树解析CSS，生成CSS规则树合并DOM树和CSS规则树，生成render树布局 render树（Layout/reflow），负责各元素尺寸、位置的计算绘制 render树（paint），绘制页面像素信息浏览器将各层信息发给GPU，GPU将各层合成（composite），显示在屏幕上
DOM树与render树不完全对应： display:none的元素在DOM树中，但不在render树中visibility:hidden 的元素在render树中 回流与重绘回流reflow：浏览器布局发生变化后，要倒回去重新渲染。这个回退过程为回流。 重绘repaint：改变某个元素的背景色、文字颜色等不影响周围和内部布局的属性时，会引发重绘。 注意： display:none 会触发回流，因为它不在render树中，改变了render布局visibility:hidden 只会触发重绘，它的语义是隐藏元素，元素仍然占据布局空间，只是渲染成一个空框。此属性的改变不会改变布局，因此只触发重绘。引起回流 页面的第一次渲染（初始化）DOM树的变化（如：增删节点）render树变化浏览器窗口resize获取元素的某些属性现代浏览器会对回流做优化，它会等到足够数量的变化发生，再做一次批处理回流。 浏览器为了获得正确的值也会提前触发回流，这样就使得浏览器的优化失效了，这些属性包括offsetLeft、offsetTop、offsetWidth、offsetHeight、 scrollTop/Left/Width/Height、clientTop/Left/Width/Height、调用了getComputedStyle()。 引起重绘 引起回流必然引起重绘：回流对应render树的布局，重绘对应render树的绘制，布局在绘制之前背景色、字体颜色改变等减少回流与重绘 避免逐个修改节点样式，尽量一次性修改可以将需要多次修改DOM的元素设置为display:none，操作完再显示（display:none不再render树内，则render不会发生改变，不会引发回流重绘）避免多次读取某些属性 前端路由路由：根据不同的URL展示不同的页面。 单页面应用中的路由分为hash和history模式。 hash模式 hash模式是一种把前端路由的路径用#拼接在真实URL后面的模式#后的路径发生变化时，浏览器不会重新发起请求，而会触发hashchange事件hash值的变化会在浏览器的历史中留下记录，可以用浏览器的回退返回到上一个hash值优点： 兼容性好实现前端路由无需服务器支持缺点： 有#符号，略丑 history模式在H5之前，已经有history对象了，只能用于多个页面的跳转： history.go(n) // n>0前进n页；ncache-control>Expires对于协商缓存：Etag或last-modified，根据业务场景选择适合的方案从内存中读取的缓存比从磁盘中的快。所有带304的资源都是协商缓存，所有标注从内存/磁盘 中读取 的资源都是强缓存 缓存存储
详情查看：前端缓存与本地存储_前端本地储存是缓存吗_dayTimeAffect的博客-CSDN博客 缓存在如下四个地方，查找缓存的优先级会依次从上到下匹配，若都没命中就会去请求网络资源。 service workerMemory CacheDisk CachePush Cacheservice worker 服务器与浏览器之间的中间人角色，若网站注册了service worker，则它可以拦截网站所有请求，如果可以使用缓存则不会将请求发给服务器，反之则发送请求到服务器若使用，则传输协议为：HTTPS完全异步：同步API（如XHR、localStorage）不能在service worker使用其生命周期与页面无关Memory Cache 内存中的缓存。Disk Cache 磁盘中的缓存。使用哪个？ 大的CSS、JS文件进磁盘，反之进内存内存使用率高时，文件优先进入磁盘 本地存储常用的有： cookielocalStoragesessionStorage存储大小 cookie：小，一般不超过4klocalStorage、sessionStorage：大，一般5M或更大（取决于浏览器）数据有效性 cookie：一般由服务器生成，可以设置失效时间；若没有设置失效时间，关闭浏览器cookie失效，若设置了时间，cookie就会存放在硬盘里，过期失效sessionStorage：浏览器窗口关闭之前有效localStorage：永久有效作用域 cookie、localStorage：在同源窗口中共享sessionStorage：同浏览器窗口共享通信 cookie：自动携带在同源的http请求中，即使不需要，cookie也会在浏览器和服务器之间来回传递；若用cookie保存过多数据会造成性能问题sessionStorage：只在浏览器保存，不参与和服务器的通信localStorage：只在本地保存，不会自动把数据发给服务器 参考浏览器渲染原理与过程 - 简书 (jianshu.com) 浏览器的渲染：过程与原理 - 知乎 (zhihu.com) 10分钟看懂浏览器的渲染过程及优化 - 掘金 (juejin.cn) 【JavaScript高级】浏览器原理：渲染引擎解析页面步骤、回流和重绘、composite合成、defer与async_karshey的博客-CSDN博客 前端路由模式详解（hash和history） - 掘金 (juejin.cn) hash和history两种模式的区别 - 琴时 - 博客园 (cnblogs.com) 【面试】前端路由hash和history的区别_sqwu的博客-CSDN博客 hash模式和history模式浅识_spark-chen的博客-CSDN博客 前端缓存详解 - 简书 (jianshu.com) 彻底弄懂前端缓存 - 掘金 (juejin.cn) 前端缓存（浏览器缓存和http缓存）详解_前端浏览器缓存_hyupeng1006的博客-CSDN博客 图解 HTTP 缓存 - 掘金 (juejin.cn) 彻底弄懂前端缓存 - 掘金 (juejin.cn) 前端缓存与本地存储 - 掘金 (juejin.cn) |
注意：以上步骤不一定一次性顺序完成。比如DOM树或CSS树被修改时，这些操作会重复执行。
【本文地址】
今日新闻 |
推荐新闻 |