把 iframe 宽高啥的调整到页面全部，这样用户进来除了域名，别的部分和银行的网站没有任何差别。...诸如 或 之类的脚本会阻塞 DOMContentLoaded，浏览器将等待它们执行结束。 图片和其他资源仍然可以继续被加载。...当页面和所有资源都加载完成时，window 上的 load 事件就会被触发。我们很少使用它，因为通常无需等待那么长时间。...什么是变量提升 函数在运行的时候，会首先创建执行上下文，然后将执行上下文入栈，然后当此执行上下文处于栈顶时，开始运行执行上下文。...数据与服务器之间的交互方式， cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端； sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存
如果用户的登录状态是记录在 Session 中的，要实现共享登录状态，就要先共享 Session，比如可以将 Session 序列化到 Redis 中，让多个应用系统共享同一个 Redis，直接读取 Redis...不过，在前后端分离的情况下，完全可以不使用 Cookie，我们可以选择将 Session ID （或 Token ）保存到浏览器的 LocalStorage 中，让前端在每次向后端发送请求时，主动将 LocalStorage...关键代码如下： // 获取 token var token = result.data.token; // 动态创建一个不可见的iframe，在iframe中加载一个跨域HTML var iframe...(iframe); // 使用postMessage()方法将token传递给iframe setTimeout(function () { iframe.contentWindow.postMessage...iframe所加载的HTML中绑定一个事件监听器，当事件被触发时，把接收到的token数据写入localStorage window.addEventListener('message', function
，扩展性好，是单点登录的标准做法 不同域名下的单点登录(二) 可以选择将 Session ID （或 Token ）保存到浏览器的 LocalStorage 中，让前端在每次向后端发送请求时，主动将LocalStorage...的数据传递给服务端 这些都是由前端来控制的，后端需要做的仅仅是在用户登录成功后，将 Session ID（或 Token）放在响应体中传递给前端 单点登录完全可以在前端实现。...获取 token var token = result.data.token; // 动态创建一个不可见的iframe，在iframe中加载一个跨域HTML var iframe = document.createElement...("iframe"); iframe.src = "http://app1.com/localstorage.html"; document.body.append(iframe); // 使用postMessage...()方法将token传递给iframe setTimeout(function () { iframe.contentWindow.postMessage(token, "http://app1
window属性之一，它可用于解决以下方面的问题： 页面和其打开的新窗口的数据传递 多窗口之间消息传递 页面与嵌套的iframe消息传递 上面三个场景的跨域数据传递 用法：postMessage(data...= document.createElement('iframe'); // 加载跨域页面 iframe.src = url; // onload事件会触发2次，第1次加载跨域页...; 通过iframe的src属性由外域转向本地域，跨域数据即由iframe的window.name从外域传递到本地域。...服务端的Session存储到一个节点，Cookie存储sessionId Cookie的使用场景： 最常见的使用场景就是Cookie和session结合使用，我们将sessionId存储到Cookie中...Key localStorage.key(index) LocalStorage的使用场景： 有些网站有换肤的功能，这时候就可以将换肤的信息存储在本地的LocalStorage中，当需要换肤的时候，直接操作
同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。 那么，何为同源呢？...）是数据格式 JSON 的一种“使用模式”，可以让网页从别的网域要数据。...缺点： 只能使用Get请求 不能注册 success、error 等事件监听函数，不能很容易的确定 JSONP 请求是否失败 JSONP 是从其他域中加载代码执行，容易受到跨站请求伪造的攻击，其安全性无法确保...然后，HTML文件将传递给请求者的字符串内容赋值给window.name。然后，请求者可以检索window.name值作为响应。...会报错，所以需要加载完成替换为当前域的URL(localhots:10000)，proxy.html为空白页面，只为解决该问题； ?
localStorage进行修改时才会触发，当前页面修改localStorage不会触发监听函数。...下面例子，都是一个html内嵌iframe，当然你直接打开iframe那个文件，没什么意义的 2.1 利用hash变化传递信息实现父子窗口通信（能跨域） 父窗口：1.html html: <iframe...var i = document.querySelector('iframe') i.onload= function(){//这是异步加载的iframe i.src += '#aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa...前面我们已经知道，iframe能跨域，localstorage能使得两个tab页面通信。那我们就来试一下，iframe桥接两个互不相干的tab页面。...加上websocket的话，还可以非同源聊天呢，其他的可以自己随意设置了。 从1到2的信息实时传递更新就这样子成功了，反之亦然。 4.MessageChannel 顾名思义，信息通道。
DNS 这个大家应该是很熟悉的，每天都在用的东西 说的通俗点，它就是一个用来将ip地址和域名相互映射的数据库，帮助人们更加方便的使用互联网，再也不用记住那些复杂的服务器地址，直接输入服务器地址所绑定域名就可以访问...CDN 内容分发网络（Content delivery network）其实就是一种透过互联网互相连接的计算机网络系统。利用最靠近每位用户的服务器，更快、更可靠地将资源发送给用户。...节点数多意味着可供用户选择的响应节点多，优中选优，不必多说了，优秀。 网页加载时间 网页加载时间其实可以看作是页面响应时间。那么，它是由哪些部分组成的？影响因素都有哪些？哪些我们是可以优化的？...获取该数据所需的时间越长, 显示页面所需的时间就越长。 这部分主要能做的就是使用CDN和优化后端性能。 CDN 原来使用的是某云的服务，查看日志发现命中率较低，回源较多，在加上节点数量一般。...PS：福利，转发本公众号任意一篇文章到朋友圈集20个赞，即可获取掘金小册5折码哦！ - end - 用心分享 一起成长 做有温度的攻城狮 每天记得对自己说：你是最棒的！
localStorage进行修改时才会触发，当前页面修改localStorage不会触发监听函数。...下面例子，都是一个html内嵌iframe，当然你直接打开iframe那个文件，没什么意义的 2.1 利用hash变化传递信息实现父子窗口通信（能跨域） 父窗口：1.html html: <iframe...var i = document.querySelector('iframe') i.onload= function(){//这是异步加载的iframe i.src += '#aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa...前面我们已经知道，iframe能跨域，localstorage能使得两个tab页面通信。那我们就来试一下，iframe桥接两个互不相干的tab页面。...加上websocket的话，还可以非同源聊天呢，其他的可以自己随意设置了。 ? 从1到2的信息实时传递更新就这样子成功了，反之亦然。 4.MessageChannel 顾名思义，信息通道。
接收方产生粘包 接收方采用TCP协议接收数据时的过程是这样的：数据到底接收方，从网络模型的下方传递至传输层，传输层的TCP协议处理是将其放置接收缓冲区，然后由应用层来主动获取（C语言用recv、read...方式二：JSONP跨域 JSONP（JSON with Padding）是数据格式JSON的一种“使用模式”，可以让网页从别的网域要数据。...根据 XmlHttpRequest 对象受到同源策略的影响，而利用 元素的这个开放策略，网页可以得到从其他来源动态产生的JSON数据，而这种使用模式就是所谓的 JSONP。...缺点： 只能使用Get请求 不能注册success、error等事件监听函数，不能很容易的确定JSONP请求是否失败 JSONP是从其他域中加载代码执行，容易受到跨站请求伪造的攻击，其安全性无法确保...然后，HTML文件将传递给请求者的字符串内容赋值给window.name。然后，请求者可以检索window.name值作为响应。
注：参考自bilibili系列视频，OpenGL 从入门到成魔-第6章- Uniform 变量的使用https://www.bilibili.com/video/BV1Mz411i7HQ Uniform...变量的作用 用于从cpu端，向顶点着色器和片段着色器转递变量。...shader中使用的变量。...一般用attribute变量来表示一些顶点的数据，如：顶点坐标，法线，纹理坐标，顶点颜色等。 varying变量是vertex和fragment shader之间做数据传递用的。...一般vertex shader修改varying变量的值，然后fragment shader使用该varying变量的值。
可以看到XSS危害如此之大， 那么在开发网站时就要做好防御措施，具体措施如下：可以从浏览器的执行来进行预防，一种是使用纯前端的方式，不用服务器端拼接后返回（不使用服务端渲染）。...这样本质上起到了对客户端隐藏真实服务器的作用。一般使用反向代理后，需要通过修改 DNS 让域名解析到代理服务器 IP，这时浏览器无法察觉到真正服务器的存在，当然也就不需要修改配置了。...，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题：页面和其打开的新窗口的数据传递多窗口之间消息传递页面与嵌套的iframe消息传递上面三个场景的跨域数据传递用法：postMessage...;通过iframe的src属性由外域转向本地域，跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制，但同时它又是安全操作。....'); });});闭包首先说明什么是闭包，闭包简单来说就是函数嵌套函数，内部函数引用来外部函数的变量，从而导致垃圾回收机制没有把当前变量回收掉，这样的操作带来了内存泄漏的影响，当内存泄漏到一定程度会影响你的项目运行变得卡顿等等问题
因此，在页面DOM加载完成到CSS导入完成之间会有一段时间页面上的内容是没有样式的。 原理：当样式表晚于结构性html加载，当加载到此样式表时，页面将停止之前的渲染。...此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。 解决方法：使用link标签加载CSS样式文件。...如果已经访问过并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面。...3）网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。 4）如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。...答： CSS样式表继承指的是，特定的CSS属性向下传递到子孙元素。
（让浏览器按照它们应该的方式来运行）； 而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。...cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。 sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。...iframe会阻塞主页面的Onload事件； 搜索引擎的检索程序无法解读这种页面，不利于SEO; iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。...，控制它的值来进行页面信息通信 4....ASCII，Unicode和UTF-8区别 ASCII：将英文字符映射为二进制的字符编码 Unicode：包含全世界所有字符的集合。
它可以将现有商品功能最大效率的复用在很多业务上（公司内业务、公司外业务等）。而不是仅限于当前团队的业务使用。...使用 vuex 完成 iframe 数据通信是如何实现的呢？...4.2 为什么要做微前端 整体概括下，主要有以下两个目的： 将商品中台更快、更好的嵌入到各个业务方项目中； 为后面主应用的设计做准备。...区分同样使用 qiankun 的不同主应用：主应用与微应用之间约定参数，通过 window 对象或者生命周期函数中的 props 对象传递，来进行判断。...解决方案如下： 主应用注册微应用时，将 entry 设置为从 localstorage 中获取，在 localstorage 中手动修改入口 entry 的值为微服务的本地地址，就可以实现本地的联调。
link属于XHTML标签，除了加载CSS外，还能用于定义RSS,定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS 页面被加载的时，link会同时被加载，而@import引用的...如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了...离线的情况下，浏览器就直接使用离线存储的资源 请描述一下 cookies，sessionStorage 和 localStorage 的区别？...缺点： iframe会阻塞主页面的Onload事件 搜索引擎的检索程序无法解读这种页面，不利于SEO iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载 使用iframe...如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题 优点： 用来加载速度较慢的内容（如广告） 可以使脚本可以并行下载 可以实现跨子域通信
其实也是存在的，比如另一个前端写了一个庞大的模块（如游戏、在线ide、可视化编辑页面等需要沙盒环境的情况），此时引进来需要使用iframe来使用。...而且需要iframe的onload触发后才能使用postmessage iframe的哈希变化通信 低门槛的一种手段，可以跨域 父页面 const iframe = document.querySelector...("iframe"); const { src } = iframe; // 把数据转字符串，再通过哈希传递到子页面 function postMessageToIframe(data)...frame. onstorage事件 父子iframe页面通信 localstorage是浏览器同域标签共用的存储空间。...可以被多个页面同时使用，可以从几个浏览上下文中访问，例如几个窗口、iframe、worker。
，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题：页面和其打开的新窗口的数据传递多窗口之间消息传递页面与嵌套的iframe消息传递上面三个场景的跨域数据传递用法：postMessage...document.createElement('iframe'); // 加载跨域页面 iframe.src = url; // onload事件会触发2次，第1次加载跨域页，并留存数据于...;通过iframe的src属性由外域转向本地域，跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制，但同时它又是安全操作。...在比较长的网页或应用中，如果图片很多，所有的图片都被加载出来，而用户只能看到可视窗口的那一部分图片数据，这样就浪费了性能。如果使用图片的懒加载就可以解决以上问题。...在滚动屏幕之前，可视化区域之外的图片不会进行加载，在滚动屏幕时才加载。这样使得网页的加载速度更快，减少了服务器的负载。懒加载适用于图片较多，页面列表较长（长列表）的场景中。
一个HTTP请求的过程 为了简化我们先从一个HTTP请求开始，简要介绍一下一个HTTP求情的网络传输过程，也就是所谓的“从输入 URL 到页面下载完的过程中都发生了什么事情” ●DNS Lookup 先获得...虽说博主做过Webkit本地渲染的优化，但是深知网页加载的主要时间还是浪费在网络通信上，所以在这些步骤上的优化会比你在浏览器内核的优化省力且效果明显。...服务器上的缓存 当然DNS缓存失效期通常都比较短，很多情况下都要再去查找，为了降低用户体验到的延迟（注意这里不是网络延时）预取是一个不错的方法。...所以在你敲第一个字母的时候dns解析完了就去建立连接了，这时候你可能网址还没敲完。当你刚访问一个网站的时候浏览器刷刷刷的帮你把到别的服务器的TCP连接给你建好。...HTTP传输优化 写到这里可能有人会想，既然已经把TCP连接建立好了，那我干脆预取更进一步，把所有的链接内容直接预取下来不就好了，这样我网址还没敲完网页就已经加载完成了。
localStorage 和 sessionStorage Window.localStorage 当页面会话结束的时候，数据将会被清除。...此有一个专业术语，叫SRI SRI 原理，使用哈希值验证前端资源的完整性。...= number; document.write(number); js文件如上，每次刷新页面重新加载的时候，都会从浏览器中读取localStorage.number的内容。...，渲染同一个页面，即使是两个标签，其sessionStorage不可共享，但是iframe可以共享，localStorage受到同源的影响，可以共享。...，用于窗口间的值的传递
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
