但是刷新页面会丢失（结合本地存储） query用的是path,传递的参数会在地址栏中显示。...刷新页面不会丢失(常用) params刷新页面，路由信息丢失 配合localStorage sessionStorage实现刷新页面后数据不丢失. v-for可以遍历的数据类型 数组 对象数组 对象 迭代数字...原理：diff算法 1.vue实现了一套虚拟DOM，使我们可以不直接操作DOM元素只操作数据，就可以重新渲染页面，而隐藏在背后的原理是高效的Diff算法 2.当页面数据发生变化时，Diff算法只会比较同一层级的节点...2.浏览器向CDN负载均衡发出访问，CDN负载均衡根据用户IP地址及URL,判断距离、有无内容、负载情况后返回用户所属区域的最佳cdn缓存服务器IP。...get请求页面后退时，不产生影响 post请求页面后退时，会重新提交请求 5、传输数据的大小 get一般传输数据大小不超过2k-4k（根据浏览器不同，限制不一样，但相差不大） post请求传输数据的大小根据
上节我们实现了登陆功能，但是可惜用户表中没数据。所以这节我们讲如何注册用户。 还记得我们之前在登陆页面 做的那个 注册账号的超链接么？...但是如果用户表中已存在这个用户名，那么，这个生成语句就会报错。所以我们用try来捕获这个异常，如果发送错误那就是“用户已经存在”，如实给用户返回这句话。如果没问题，那么就返回 注册成功。...我们现在写好了，那就直接重启就好了，如果过程中按照教程出现其他报错，请留言即可我会耐心解答。 现在我们刷新页面来测试，先登陆一个账号： 用户名 测试开发干货 密码123。...然后顺便把这个登陆状态也就是成功的用户名当作session写进用户的浏览器内，之后用户就可以成功进入各个页面了。...django重启，然后刷新页面我们再进行上述测试！
这就要用到浏览器的缓存策略了。所谓的浏览器缓存指的是浏览器将用户请求过的静态资源，存储到电脑本地磁盘中，当浏览器再次访问时，就可以直接从本地加载，不需要再去服务端请求了。...还有就是 Trident 内核的大量 Bug 等安全问题没有得到解决，加上一些专家学者公开自己认为 IE 浏览器不安全的观点，使很多用户开始转向其他浏览器。...异步：IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。...当渲染对象被创建并添加到树中，它们并没有位置和大小，所以当浏览器生成渲染树以后，就会根据渲染树来进行布局（也可以叫做回流）。这一阶段浏览器要做的事情是要弄清楚各个节点在页面中的确切位置和大小。...用户按 Ctrl+F5（强制刷新）： 浏览器不仅会对本地文件过期，而且不会带上 If-Modifed-Since，If-None-Match，相当于之前从来没有请求过，返回结果是 200。
若用户把 URI 保存成书签，但不会像 301 状态码出现时那样去更新书签，而是仍旧保留返回 302 状态码的页面对应的 URI。同时，搜索引擎会抓取新的内容而保留旧的网址。...303 状态码通常作为 PUT 或 POST 操作的返回结果，它表示重定向链接指向的不是新上传的资源，而是另外一个页面，比如消息确认页面或上传进度页面。而请求重定向页面的方法要总是使用 GET。...4. requestAnimationFrame4.1 60fps与设备刷新率目前大多数设备的屏幕刷新率为60次/秒，如果在页面中有一个动画或者渐变效果，或者用户正在滚动页面，那么浏览器渲染动画或页面的每一帧的速率也需要跟设备屏幕的刷新率保持一致...此外，使用这个API，一旦页面不处于浏览器的当前标签，就会自动停止刷新。这就节省了CPU、GPU和电力。requestAnimationFrame 是在主线程上完成。...这样可以保证无法复用的业务逻辑代码尽量留在 Page 中，而可以抽象复用的部分放入 components 中。
用户按 Ctrl+F5（强制刷新）： 浏览器不仅会对本地文件过期，而且不会带上 If-Modifed-Since，If-None-Match，相当于之前从来没有请求过，返回结果是 200。...优点：1.体验好，不刷新，减少 请求 数据ajax异步获取 页面流程；2.前后端分离3.减轻服务端压力4.共用一套后端程序代码，适配多端缺点：1.首屏加载过慢；2.SEO 不利于搜索引擎抓取setInterval...初次登录的时候，前端调后调的登录接口，发送用户名和密码，后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token，和一个用户信息的值，前端拿到token，将token储存到Vuex中，然后从...把用户信息存到Vuex然后再存储到LocalStroage中,然后跳转到下一个页面，根据后端接口的要求，只要不登录就不能访问的页面需要在前端每次跳转页面师判断Cookies中是否有token，没有就跳转到登录页...token，有token，就拿到token并验证token是否过期，在这里过期会返回无效的token然后有个跳回登录页面重新登录并且清除本地用户的信息
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是需要设置设计响应式的页面，@media 是非常有用的。当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。...懒加载适用于图片较多，页面列表较长（长列表）的场景中。如何实现浏览器内多个标签页之间的通信?实现多个标签页之间的通信，本质上都是通过中介者模式来实现的。...对于如何优化动画，我们知道，一般情况下，动画需要频繁的操作DOM，就就会导致页面的性能问题，我们可以将动画的position属性设置为absolute或者fixed，将动画脱离文档流，这样他的回流就不会影响到页面了...如果不命中则根据头信息向服务器发起请求，使用协商缓存，如果协商缓存命中的话，则服务器不返回资源，浏览器直接使用本地资源的副本，如果协商缓存不命中，则浏览器返回最新的资源给浏览器。...用户按 Ctrl+F5（强制刷新）： 浏览器不仅会对本地文件过期，而且不会带上 If-Modifed-Since，If-None-Match，相当于之前从来没有请求过，返回结果是 200。
因为浏览器需要通过回流计算最新值 回流必将引起重绘，而重绘不一定会引起回流 如何最小化重绘(repaint)和回流(reflow)？...同步：浏览器访问服务器请求，用户看得到页面刷新，重新发请求,等请求完，页面刷新，新内容出现，用户看到新内容,进行下一步操作 异步：浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。...等请求完，页面不刷新，新内容也会出现，用户看到新内容 documen.write 和 innerHTML 的区别 document.write 只能重绘整个页面 innerHTML 可以重绘页面的一部分...我们举例说明：比如一个黑客程序，他利用 Iframe 把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过 Javascript 读取到你的表单中 input 中的内容...我们设想一下，如果 JavaScript 是多线程的，现在我们在浏览器中同时操作一个 DOM，一个线程要求浏览器在这个 DOM 中添加节点，而另一个线程却要求浏览器删掉这个 DOM 节点，那这个时候浏览器就会很郁闷
我们都知道，传统的页面应用是用一些超链接来实现页面切换和跳转的，而单页面应用是使用各自的路由系统来管理前端的每一个页面切换，例如 vue-router、react-router 等，跳转时仅刷新局部资源...window.addEventListener('hashchange', function() { // 上报【进入页面】事件 }, true) 需要注意的是，在新版 vue-router 中如果浏览器支持...PopState 是浏览器返回事件的回调，但是更新路由的 pushState、replaceState 并没有回调事件，因此，还需要分别在 history.pushState() 和 history.replaceState...一般情况下，捕获 JS 异常不推荐使用 addEventListener(‘error’)，主要是因为它没有堆栈信息，而且还需要对捕获到的信息做区分，因为它会将所有异常信息捕获到，包括资源加载错误等。...因为日志上报并不是应用的主要功能逻辑，优先级比较低，所以我们在确保日志数据上报更高效的同时，还应该考虑如何尽可能地减少与其他关键操作的资源争抢。
后来，改变发生了－Ajax 出现了，它允许人们在不刷新页面的情况下发起请求；与之共生的，还有“不刷新页面即可更新页面内容”这种需求。在这样的背景下，出现了SPA（单页面应用）。...SPA 极大地提升了用户体验，它允许页面在不刷新的情况下更新页面内容，使内容的切换更加流畅。...当用户刷新页面时，浏览器会默认根据当前 URL 对资源进行重新定位（发送请求）。这个动作对 SPA 是不必要的，因为 SPA 作为单页面，无论如何也只会有一个资源与之对应。...此时若走正常的请求-刷新流程，反而会使用户的前进后退操作无法被记录； 2. 单页面应用对服务端来说，就是一个 URL、一套资源，那么如何做到用“不同的 URL”来映射不同的视图内容呢？...拦截用户的刷新操作，避免服务端盲目响应、返回不符合预期的资源内容，把刷新这个动作完全放到前端逻辑里消化掉； 2. 感知 URL 的变化。这里不是说要改造 URL、凭空制造出 N 个 URL 来。
在标准模式中，浏览器以其支持的最高标准呈现页面。BackCompat：怪异模式(混杂模式)(Quick mode)，浏览器使用自己的怪异模式解析渲染页面。...而RequestAnimationFrame则完全不同，当页面处理未激活的状态下，该页面的屏幕刷新任务也会被系统暂停，因此跟着系统走的RequestAnimationFrame也会停止渲染，当页面被激活时...减少DOM操作：requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60...对 Cookie 进行双重验证，服务器在用户访问网站页面时，向请求域名注入一个Cookie，内容为随机字符串，然后当用户再次向服务器发送请求的时候，从 cookie 中取出这个字符串，添加到 URL 参数中...，那么他就不会被第二个参数不活了，而是被后面的catch捕获到。
概述 本地同一浏览器访问本地HTML文件和访问服务器端HTML文件，本地Iframe没有自适应高度，而服务器端的Ifrane自适应了高度。...iframe跨域丢失Session问题 在开发中,我们经常会遇到使用Frame来工作,而且有时是为了跟其他网站集成,应用到多域的情况下,而Iframe是不能保存Session的因此,网上 … 在IE浏览器中...script 2.2 使用document.domain 2.3使用HTML5新属性postMessage 2.4 利用iframe和loc … IFrame跨域访问自定义高度 由于JS禁止跨域访问,如何实现不同域的子页面将高度返回给父页面本身...那么在不刷新界面的情况下实现文件的上传呢?...注意:如果你使 … ASP.NET Core Web APi获取原始请求内容 前言 我们讲过ASP.NET Core Web APi路由绑定,本节我们来讲讲如何获取客户端请求过来的内容.
事实上，React 中的 CSR 有其优缺点。从积极的方面来看，Web 应用提供了平滑、快速的过渡，这减少了页面加载时间，因为响应式组件可以在不触发页面刷新的情况下根据用户交互更新。...我们现在有两种 React 渲染风格：服务端风格：能够从组件树中渲染静态 HTML，客户端风格：能够使页面变得交互。...从那时起，服务器在需要时以增量方式静态提供页面的新版本，使 ISR 成为介于 SSG 和传统 SSR 之间的混合方法。然而，ISR 未解决“内容过时”的问题，即用户可能在页面完成再生前访问该页面。...服务器组件安全地将敏感数据和逻辑保留在浏览器之外。这得益于个人令牌和 API 密钥是在安全服务器上执行，而不是客户端。渲染结果可以在后续请求甚至不同会话之间缓存和重用。...为了看到页面加载期间发生的所有事情，我们将访问 Chrome DevTools 中的“性能”标签，并点击“重新加载”按钮以重新加载页面并捕获一个概况。
--link Prefetching Page Visibility 页面可见性API 该API可以用来检测页面对于用户的可见性，即返回用户当前浏览的页面或标签tap的状态变化。...在最小化浏览器、切换tap页面时生效.(如需对app中几个webview进行切换操作时，可使用pageVisibility接口进行相应的事件监听和处理。)...我们可以对那些定期刷新内容的页面进行控制，当该页面不可见则不刷新，可见则刷新 我们还可以根据页面的是否可见来暂停和继续音频，视频的播放 我们还可以根据页面可见去计算我们网站的用户停留在本页面的更为精确的数据...，而不仅仅是打开页面而不停留在本页面。...（假设这些页面并不大） 预先加载在网站中许多网页都会用到的图片 预先加载网站搜索的结果的页面 参考链接 http://davidwalsh.name/
二.项目功能提问 vue后台项目(这几个功能点要求都能用自己的话说出来) 1.路由守卫 / 导航守卫 既然是守卫，首先是对咱们后台页面访问的一层保护，如果我没有进行登陆过，后台的操作页面是不允许用户访问的...（重要） 防抖的作用是：当用户多次触发回调函数时，只触发最后一次操作的，其余的全部忽略掉； 函数节流：是确保函数特定的时间内至多执行一次 17.讲解下浏览器的重绘和回流（重要） 回流 (Reflow)...,而POST不会,除非手动设置 GET请求只能进行url编码,而POST支持多种编码方式 GET请求参数会被完整保留在浏览器历史记录里,而POST的参数不会保留 GET请求在URL中传送的参数有长度限制...地址栏显示，刷新不丢失，类似get params 地址栏不显示，隐藏传参，刷新丢失类似post /:id 动态传参，刷新不丢失同query 29.ES6 Promise 用法，以及使用场景？....promise如何使用 有什么作用(必背) promise是es6中新增的一个构造函数，是为了解决异步操作中数据调用嵌套(回调地狱)的问题。
这是一项昂贵的操作，这一直是MEB产品的主要痛点。 克隆插件（在MySQL 8.0.17引入，使克隆MySQL变得更加容易）推出的功能，用于跟踪InnoDB修改后的页面。...该缓冲区会定期刷新到重做日志文件，从而允许InnoDB将页面的内存副本延迟刷新到磁盘来减少非顺序写操作，因为崩溃中丢失的任何数据都可以从重做日志中轻松恢复。...它们使我们了解了更改的顺序，因此可以使用LSN跟踪InnoDB内部的各种操作，并且根据其用法以不同的名称进行调用。我们将集中讨论其中的一个子集。...可以将检查点LSN视为一种标记，它告诉我们所有刷新到磁盘的页面何时进行的更改，而检查点则是使该标记不时向前移动的过程。...这样做的目的是我们不希望再次跟踪已跟踪的页面，并且页面LSN> =跟踪LSN意味着启用跟踪后页面已被刷新并跟踪，页面LSN指的是磁盘上的最新LSN。
网页如何防止刷新重复提交与如何防止后退的解决方法 提交后禁用提交按钮（大部分人都是这样做的） 如果客户提交后,按F5刷新怎么办?...防止网页后退--禁止缓存 我们在进行数据库添加操作的时候，如果允许后退，而正巧有刷新了页面，就会再次执行添加操作，无疑这不是我们需要的，像一般网上很多禁止缓存的代码，有时并不可靠，这时你只要在操作的页面加上就可以了...不太明白你说的重复刷新是什么概念 6 ajax 无刷新提交 7 Web开发中防止浏览器的刷新键引起系统操作重复提交 怎么解决呢？...后来，看到竟然有那么多的人想要禁用这个后退按钮，我也就释然（想要禁用的只有后退按钮，不包括浏览器的前进按钮）。因为在默认情况下，用户提交表单之后可以通过后退按钮返回表单页面（而不是使用“编辑”按钮！）...参考推荐： 网页如何防止刷新重复提交与如何防止后退的解决方法
刷新页面。 history.back()回退。 整个页面重新加载，浏览器历史可以显示每一个地址。考虑到安全性但是JS代码中是无法操作的。 2. Hash路由方式。...并不刷新页面。 #后跟的就是页面Hash，同样hash的改变也会推进浏览器历史记录中。 支持后退前进。...可以改变网址(存在跨域限制)而不刷新页面，这个强大的特性后来用到了单页面应用如：vue-router，react-router-dom中。...相对于hash路由来讲前端只能控制#后的url地址，而history api允许在同源策略下进行任意的自由路由设置而不刷新页面。...因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 oursite.com/user/id 就会返回 404，这就不好看了。
content="关键词" />（3）description，页面描述：页面描述内容" />（4）refresh，页面重定向和刷新：而阻塞时，对已获得的资源保持不放。不剥夺条件：进程已获得的资源在未使用完之前，不能剥夺，只能在使用完时由自己释放。...事件是用户操作网页时发生的交互动作或者网页本身的一些操作，现代浏览器一共有三种事件模型：DOM0 级事件模型，这种模型不会传播，所以没有事件流的概念，但是现在有的浏览器支持以冒泡的方式实现，它可以在网页中直接定义监听函数...对于如何优化动画，我们知道，一般情况下，动画需要频繁的操作DOM，就就会导致页面的性能问题，我们可以将动画的position属性设置为absolute或者fixed，将动画脱离文档流，这样他的回流就不会影响到页面了...： （1）GUI渲染线程 负责渲染浏览器页面，解析HTML、CSS，构建DOM树、构建CSSOM树、构建渲染树和绘制页面；当界面需要重绘或由于某种操作引发回流时，该线程就会执行。
进行前端代码的优化，优化HTML代码为了能够使网站更好的搜索，让用户更快速搜索到我们的网站，写好HTML代码使用正确的闭合HTML标签，进行HTML代码层级间的合理缩进，属性值需要使用双引号，结构与样式进行有效的分离...performance打包后命令行如何展示性能提示，如果超过某个大小是警告还是报错 webpack-dev-server 它是一个小型的web服务器，可以自动监视项目文件的变化，自动刷新浏览器，其HMR...方式只替换更新的部分，而不是重载页面，大大提高了刷新效率 ?...配置项说明默认值 inline自动刷新当我们对业务代码做了一些修改，保存（ctrl+s）后，页面会自动刷新，所做的修改会直接同步到页面上，不需要手动刷新页面或重启服务true hot热模块替换...webpack-dev-server运行后，浏览器中输出的页面，都是运行在内存中的，只有build以后，才会在dist目录中得到最终的结果文件。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
