网站建设一般好久到期,wordpress加广告,网站开发和软件开发的区别,电子商务网站建设实验报告心得文章目录渲染步骤DOM树与render树回流与重绘前端路由hash模式history模式两种模式对比前端缓存HTTP缓存强缓存协商缓存一般哪些文件对应哪些缓存HTTP缓存总结缓存存储HTTP缓存存储本地存储参考本系列目录#xff1a;【前端八股文】目录总结 是以《代码随想录》八股文为主的笔记…
文章目录渲染步骤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绘制页面像素信息浏览器将各层信息发给GPUGPU将各层合成composite显示在屏幕上 注意以上步骤不一定一次性顺序完成。比如DOM树或CSS树被修改时这些操作会重复执行。
DOM树与render树
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) // n0前进n页n0后退n页
history.forward() // 前进一页
history.back() // 后退一页H5新增了两个API
/*参数说明state合法的JavaScript对象可以用在popstate对象中title标题基本忽略用nullurl: 任意有效的url将要跳转的新地址
*/
history.pushState(state, title, url) // 保留现有记录的同时将url加到历史记录中
history.replaceState(state, title, url) // 将历史记录中的当前页面替换成url
history.state // 返回当前状态对象pushState和replaceState可以改变URL但不会刷新页面浏览器也不会向服务器发送请求。
对于单页面的history模式URL的改变只能由一下情况引起
点击浏览器的前进/后退onpopstate可以监听到点击a标签在JS中触发history.pushState或history.replaceState
两种模式对比
外观hash的url有#刷新hash刷新会加载到地址栏对应页面不会发送请求history刷新会重新发送请求兼容性hash兼容IE8history只能到IE10服务端支持hash及其之后的内容变化不会导致浏览器向服务器发送请求history刷新会发送请求原理hash通过监听浏览器的onhashchange()事件查找对应路由规则history利用H5新增的pushState()和replaceState()方法改变url记录hash模式只有#后面的内容修改才会添加到新的记录栈history通过pushState设置的url与当前一样也会被记录到历史记录栈
前端缓存
讲的很清晰前端缓存浏览器缓存和http缓存详解_前端浏览器缓存_hyupeng1006的博客-CSDN博客
前端缓存技术方法主要分为http缓存和浏览器缓存。
http缓存
强缓存协商缓存
浏览器缓存
storage前端数据库应用缓存
主要内容是HTTP缓存。
HTTP缓存
HTTP缓存是可以自动保存常见文档副本的HTTP设备。当web请求抵达缓存时若本地有“已缓存”的副本则可以从本地存储设备提取这个文档而非原始服务器。
HTTP缓存的优缺点
优点
减少不必要的网络传输节约宽带更快地加载页面减少服务器负载
缺点
占内存
HTTP缓存分为
强缓存协商缓存 强缓存与协商缓存的关系
文件没过期强缓存文件过期了协商缓存问服务端文件是否改变若没改变还是用本地的缓存跟强缓存读同一个文件若改变则重新发送网络请求
强缓存
不需要发送请求到服务器直接读取浏览器本地缓存。 是否强缓存由Expires、Cache-Control、Pragma 这3个Header属性控制。
Expires Expires 的值是一个 HTTP 日期在浏览器发起请求时会根据系统时间和 Expires的值进行比较如果系统时间超过了 Expires的值缓存失效。由于和系统时间进行比较所以当系统时间和服务器时间不一致的时候会有缓存有效期不准的问题。Expires的优先级在三个 Header 属性中是最低的。 在Cache-Control可以用的时候Expires属性被废弃。
Cache-Control
Cache-Control 是 HTTP/1.1 中新增的属性在请求头和响应头中都可以使用常用的属性值如下
max-age单位是秒缓存时间计算的方式是距离发起的时间的秒数超过间隔的秒数缓存失效no-cache不使用强缓存需要与服务器验证缓存是否新鲜no-store禁止使用缓存包括协商缓存每次都向服务器请求最新的资源private专用于个人的缓存中间代理、CDN 等不能缓存此响应public响应可以被中间代理、CDN 等缓存must-revalidate在缓存过期前可以使用过期后必须向服务器验证
Pragma Pragma 只有一个属性值就是 no-cache 效果和 Cache-Control 中的 no-cache一致不使用强缓存需要与服务器验证缓存是否新鲜在 3 个头部属性中的优先级最高。 协商缓存
协商缓存就是与服务端协商后通过协商结果来判断是否使用本地缓存。 当浏览器的强缓存失效的时候或者请求头中设置了不走强缓存并且在请求头中设置了If-Modified-Since 或者 If-None-Match 的时候会将这两个属性值到服务端去验证是否命中协商缓存如果命中了协商缓存会返回 304 状态加载浏览器缓存并且响应头会设置 Last-Modified 或者 ETag 属性。 Last-Modified/If-Modified-Since Last-Modified/If-Modified-Since的值代表的是文件的最后修改时间。 第一次请求服务端会把资源的最后修改时间放到 Last-Modified响应头中。 第二次发起请求的时候请求头会带上上一次响应头中的 Last-Modified 的时间并放到 If-Modified-Since 请求头属性中。 服务端根据文件最后一次修改时间和 If-Modified-Since的值进行比较如果相等返回 304 并加载浏览器缓存。 Last-Modified/If-Modified-Since的缺点
用文件最后修改时间来判断若文件被修改了但文件内容不变加空格后删掉它那么对应的文件最后修改时间是不匹配的缓存会失效文件修改时间的最小单位是秒若文件的修改频率在秒级以下文件已经发生了修改但不会返回新文件会错误地返回304
ETag/If-None-Match
Last-Modified/If-Modified-Since的上述缺陷可以用ETag/If-None-Match来弥补。
ETag就是将原先协商缓存的比较时间戳改为比较文件指纹。文件指纹根据文件内容计算出的唯一哈希值。文件内容改变则文件指纹改变。 ETag/If-None-Match 的值是一串 hash 码代表的是一个资源的标识符当服务端的文件变化的时候它的hash码会随之改变通过请求头中的 If-None-Match 和当前文件的 hash 值进行比较如果相等则表示命中协商缓存。 关于ETag
ETag需要计算文件指纹这意味着服务端需要更多的计算开销。若文件大数量多且计算频繁那么ETag的计算会影响到服务器的性能。在这种场景下ETag不适合。ETag有强验证和弱验证。强验证ETag生成的哈希码深入每个字节文件中哪怕只有一个字节改变了哈希码都会不同。——非常消耗计算量。弱验证提取文件的部分属性来生成哈希值。速度比强验证快但准确率不高。会降低协商缓存的有效性。
Last-Modified/If-Modified-Since与ETag/If-None-Match的关系
不同于cache-control是expires的完全替代方案(翻译:能用cache-control就不要用expiress)。ETag并不是last-modified的完全替代方案而是last-modified的补充方案翻译项目中到底是用ETag还是last-modified完全取决于业务场景这两个没有谁更好谁更坏。
一般哪些文件对应哪些缓存
先说结论有哈希值的文件名设置强缓存没有哈希值的文件比如index.html设置协商缓存。
哈希值如红色划线部分 原因一般来说文件名中的哈希值是由webpack等工具打包完成后自动生成的。若对相同的文件再打包一次文件名会生成不同的哈希值。不同的文件名对协商缓存来说是不同的文件。因此文件名中有哈希值的要用强缓存。 当然文件名是否生成哈希值是可以配置的也因不同的框架而已。 HTTP缓存总结
HTTP缓存可以减少宽带流量、加快响应速度对于强缓存优先级Pragmacache-controlExpires对于协商缓存Etag或last-modified根据业务场景选择适合的方案从内存中读取的缓存比从磁盘中的快。所有带304的资源都是协商缓存所有标注从内存/磁盘 中读取 的资源都是强缓存
缓存存储 HTTP缓存存储
详情查看前端缓存与本地存储_前端本地储存是缓存吗_dayTimeAffect的博客-CSDN博客
缓存在如下四个地方查找缓存的优先级会依次从上到下匹配若都没命中就会去请求网络资源。
service workerMemory CacheDisk CachePush Cache
service 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)
