微前端已经是一个非常成熟的领域了,但开发者不管采用哪个现有方案,在适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户核心诉求都或存在问题,或无法提供支持。本文提供一种基于 iframe 的全新微前端方案,完善的解决了这些核心诉求。
现在的网站开发,都绕不开微信登录(毕竟微信已经成为国民工具)。虽然文档已经写得很详细,但是对于没有经验的开发者还是容易踩坑。
平时经常会逛 Github,除了一些 star 极高的大项目外,还会在 Github 上发现很多有意思的小项目。项目或是想法很有趣,或是有不错的技术点,读起来都让人有所收获。所以准备汇总成一个「漫游Github」系列,不定期分享与解读在 Github 上偶遇的有趣项目。本系列重在原理性讲解,而不会深扣源码细节。
例如同一个域名 CDN 服务器上的 a.js,b.js,c.js 就可以按如下方式在一个请求中下载:
本地同一浏览器访问本地HTML文件和访问服务器端HTML文件,本地Iframe没有自适应高度,而服务器端的Ifrane自适应了高度。
天下大势,分久必合合久必分。大型组织的组织结构、软件架构在不断的发生变化。一款软件从最初的单一,进行不断的细化,最终变得庞大,从而不得不拆分到不同部门,出现多样化。然而在多样化的道路上,用户厌倦了一家公司的软件却要分散于不同的应用中,于是应用又再一次走向聚合。
将前端应用分解成一些更小、更简单的能够独立开发,测试、部署的小块,而在用户看来仍然是内聚的单个产品。微前端的三个要素,即:独立运行、独立开发(与技术栈无关,应用之间不应该有任何直接或间接的技术栈、依赖、以及实现上的耦合)、独立部署
大家好,今天和大家讨论的是 Web 嵌入,无论是网站还是应用程序,在部分场景下我们需要嵌入一些第三方的 web 内容,例如我写了篇技术文章,其中部分包含视频内容,我上传到 B 站上了,我想把这段内容嵌入到我的技术文章中,就可能要使用 web 嵌入技术
在之前的文章中,我们已经深入剖析了微前端究竟是什么,可以带来什么收益,现在让我们复习一下微前端的概念:
笔者所在的业务中台团队,需要提供业务组件给不同的上层业务方使用,但因为一些历史遗留问题,不同业务线使用的框架不统一,包括 jQuery、React 、Vue。为了满足不同业务方的需求,往往需要根据业务方使用的框架,开发对应框架的组件。
网友上网都不喜欢用太多的时间等待网页的打开,等待的越长,用户可能会直接关闭网页,这样就会损失很多流量!其次,关键字的排名与网页的打开速度也有关系,这个主要体现搜索引擎对用户体验度上,用户体验度好,排名相对其它网站就好些。因此我觉得我们有必要去提高网页的打开速度,这个不需要太多的成本投入,只需要平时多注意一些小技巧就行了!下面给出20种方法帮你提高网站访问速度缩短网页加载时间。 1、减少页面HTTP请求数量 比较直接的理解就是要减少调用其他页面、文件的数量。 A.我们在使用css格式控制的时候,经常会采用ba
Tech 导读 本文由浅到深地对微前端进行了概括性介绍,读者可以了解到微前端的概念、微前端的特点与价值、微前端的实现方案、一个微前端框架应具备的功能,以及微前端的适用场景。读者可以多关注下本文提到的各个开源的优秀的微前端实现方案,通过对比及借鉴来实现一套适合自身业务的微前端方案。 01 微前端是什么 传统的分而治之的策略已经无法应对现代 Web 应用的复杂性,因此衍生出了微前端这样一种新的架构模式,与后端微服务相同,它同样是延续了分而治之的设计模式,不过却以全新的方法来实现。微前端是一种由独立交付的多个前
如果你的网站上面有很多第三方JS代码,那么“下载速度的不可控”很有可能导致你的网站会被拖慢。因为JS在执行的时候会影响到页面的DOM和样式等情况。浏览器在解析渲染HTML的时候,如果解析到需要下载文件的script标签,那么会停止解析接下来的HTML,然后下载外链JS文件并执行。等JS执行完毕之后才会继续解析剩下的HTML。这就是所谓的『HTML解析被阻止』。浏览器解析渲染页面的抽象流程图如下:
本文主要参照http://developer.yahoo.com/performance/rules.html,结合多年网站开发经验总结而来。 1、减少页面HTTP请求数量 比较直接的理解就是要减少调用其他页面、文件的数量。 A.我们在使用css格式控制的时候,经常会采用background载入很多图形文件,每个background的图像至少产生1次HTTP请求,一般我们为了让页面生动活泼会大量使用background来加载背景图,要改善这个状况,可以采用css的1个有用的background-posi
从网站开发者的角度来看,第三方JS相比第一方JS有如下几个不同之处: 下载速度不可控 JS地址域名与网站域名不同 文件内容不可控 不一定有强缓存(Cache-Control/Expires) 如果你的网站上面有很多第三方JS代码,那么“下载速度的不可控”很有可能导致你的网站会被拖慢。因为JS在执行的时候会影响到页面的DOM和样式等情况。浏览器在解析渲染HTML的时候,如果解析到需要下载文件的script标签,那么会停止解析接下来的HTML,然后下载外链JS文件并执行。等JS执行完毕之后才会继续解析剩下
前端的性能优化是一个很宽泛的概念,最终目的都是为了提升用户体验,改善页面性能。面试的时候经常会遇到问谈谈性能优化的手段,这个我分几大部分来概述,具体细节需要自己再针对性的去搜索,只是提供一个索引(太多了写不过来+主要是懒得写)。这里PC端和移动端分开说了,业务场景不同,需要考虑各自的优化手段
大家好,今天和大家讨论 nodeIntegrationInSubFrames , 这个选项看起来和 nodeIntegration 很像,不过后面跟了 InSubFrames ,说明是在 SubFrames 中开启 Node.js
最近David Leo在Full Disclosure上爆出了一个ie的 uxss 漏洞,可以绕过ie的同源策略。FreeBuf也有相关的报道(点我查看)。本文简要分析一下这个漏洞的原理。 攻击过程 <iframe src="redirect.php"></iframe> <iframe src="https://www.google.com/images/srpr/logo11w.png"></iframe> <script> top[0].eval('_=top[1];alert();_.loc
本文先从第三方Javascript脚本的重要组成部分“投放代码”讲起。先从一个最例子看起:Google Analytics(以下简称GA),是Google提供的用于网站监测等一系列功能的服务。网站开发者将GA提供的投放代码放到自己网站上需要监测的页面(一般是全站添加)。
上篇文章大致分享了web端的拍照方案。一个是input,另外一个是getUserMedia方法,实际上它是webRtc的一个API。
前端页面资源如何分享,常见的有iframe,其次是js-sdk。这两类的在地图类工具经常用。微前端是最佳比较火的方式。本篇是他们的对比分析。
浅谈移动端页面无刷新跳转问题的解决方案 2017-12-22 祈澈姑娘 最近开发微信公众号,用的框架是 一般的 UI,但是涉及到多页面之间的相互跳转的问题,降低了浏览器的性能,用户体验特别不好,卡顿,不流畅,因此不采用传统的页面跳转方式,看到不少手机网页开发的框架都都是在一个html文档中包涵多个页面的内容,每页放到不同的 里面。 于是采用当下流行的单页面模,在做pc网页的时候一般都直接给链接的。比起用链接来跳转页面,这样做也是有很多好处的(比如appjs,jquery Mobile) 这种web形式在如
iframe 用于在页面内显示页面,使用 <iframe> 会创建包含另外一个文档的内联框架(即行内框架)
在前端项目开发完成,我们肯定是需要对前端的项目进行测试优化。我们可以先用一些第三方工具对网站进行分析。工具例如
同步模式:又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作。所以默认同步执行才是安全的。 但这样如果js中有输出document内容、修改dom、重定向等行为,就会造成页面堵塞。所以一般建议把<script>标签放在<body>结尾处,这样尽可能减少页面阻塞。
作者:damyxu,腾讯 PCG 前端开发工程师 iframe是一个天然的微前端方案,但受限于跨域的严格限制而无法很好的应用,本文介绍一种基于 iframe 的全新微前端方案,继承iframe的优点,补足 iframe 的缺点,让 iframe 焕发新生。 背景 前端开发中我们对iframe已经非常熟悉了,那么iframe的作用是什么?可以归纳如下: 在一个web应用中可以独立的运行另一个web应用 这个概念已经和微前端不谋而合,相对于目前配置复杂、高适配成本的微前端方案来说,采用iframe方案具有
原则上来说,HTML在使用<script>标签加载外部脚本文件时,会顺序下载,顺序执行,并阻碍其他资源文件的下载,比如图片(当然,如今主流浏览器是可以实现JS和CSS文件并行下载)。
最近准备把之前用UIWebView实现的JS与原生相互调用功能,用WKWebView来替换。顺便搜索整理了一下JS 与OC 交互的方式,非常之多啊。目前我已知的JS 与 OC 交互的处理方式:
数周前,在伦敦 Heathrow 机场等飞机的空闲中,我顺便处理了一些工作上的事情。不经意间发现 Github 在性能方面的一些问题,颇为诧异。通过新 tab 打开的页面,其加载速度竟然比直接点击链接打开的页面要快。不信请看视频(译者注:可能需要科学上网):GitHub link click vs new tab。
HTML5不再支持使用frame,关于frame与iframe的区别,可以参阅 iframe与frame的区别
方法测试:openApp('ios页面','**.apk','metools://home');
概述 Clickjacking是最近新兴的针对WEB前端的攻击手段。它通常使用一个ifream覆盖掉当前页面,欺骗用户点击iframe中的恶意内容。 Likejacking通常是针对社交网站的一种攻击手法,攻击者会欺骗用户去点击一个伪造的图标或按钮。如今攻击者已经研究出了大量的方法,来把官方的按钮模仿的惟妙惟肖。 Clickjacking技术首先是由Jeremiah Grossman 和 Robert Hanson在2008年提出的,而如今这种依附于JS的攻
HTML5学堂:本文当中我们介绍了跨域的基本知识,讲解到了跨域的相关种类,并讲解了解决跨域中的一种方法——如何使用iframe跨域。讲解了iframe跨域的基本原理与流程,并配以实战~ 利利的独白:跨域,是我们的课程中必不可少的一部分,但是我们一直都是在讲解JSONP的跨域方式,虽然也提到了iframe的跨域方式,但是由于时间因素,并没有办法放置到课程中。 本文仅仅讲明了iframe的跨域问题,想了解更多关于iframe标签的基本知识,直接发送 “iframe标签” 到 “HTML5学堂” 的微信。 什么是
合并图片(如css sprites,内置图片使用数据)、合并CSS、JS,这一点很重要,但是要考虑合并后的文件体积。
首先需要在服务器上建立一个文件,里面的内容确定了哪些文件需要缓存,哪些文件不需要,如果资源无法访问会使用什么页面等
上一篇Electron 安全与你我息息相关文章非常的长,虽然提供了 PDF 版本,但还是导致很多人仅仅是点开看了一下,完读率大概 7.95% 左右,但上一篇真的是我觉得很重要的一篇,对大家了解 Electron 开发的应用程序安全有帮助,与每个人切实相关
本文讲述了作者在参加Discord众测的过程中,通过多个bug的综合利用,成功发现了Discord桌面应用的远程代码执行漏洞(RCE),收获了$5,300的奖励。
一个完整的域名由二个或二个以上部分组成,各部分之间用英文的句号”.”来分隔,最后一个”.”的右边部分称为顶级域名(TLD,也称为一级域名),最后一个”.”的左边部分称为二级域名(SLD),二级域名的左边部分称为三级域名,以此类推,每一级的域名控制它下一级域名的分配。定义是这样的,在域名中包含两个点的,就叫二级域名,只包含一个点的,就是一级域名。
作为面试官,我经常听到很多候选人说在公司做的项目很简单,平常就是堆页面,写管理端,写H5,没有任何亮点,我以我一次面试候选人的经历分享给大家
导语 | 微前端是将Web应用由单一的单体应用转变为多个小型前端应用聚合为一的一种手段。本文从微前端的基础理论出发,对其核心技术进行阐述,最后结合项目进行简单的应用实践。 一、微前端背景 (一)什么是微前端 微前端提供了一种技术:可以将多个独立的Web应用聚合到一起,提供统一的访问入口。一个微前端应用给用户的感观就是一个完整的应用,但是在技术角度上是由一个个独立的应用组合通过某种方式组合而成的。 为了防止概念有点抽象,可以看一个具体的例子:上图是一个微前端的demo,主应用中有导航栏,footer组件以及
油猴脚本是在沙盒里执行用户脚本,不会对网页注入script元素,它通过沙盒向网页中传递信息以达到控制dom的操作。所以如果要对脚本进行检测,没有像上面代码这样子向页面中植入iframe的话,通过去检测dom和window是无法检测出使用油猴脚本的。
前言 上一篇Selenium2+python自动化23-富文本(自动发帖)解决了富文本上iframe问题,其实没什么特别之处,主要是iframe的切换,本篇讲解通过js的方法处理富文本上ifr
在上一篇文中,我们接触了JavaScript中的sandbox的概念,并且就现阶段的一些实现思路做了总结,包括YUI的闭包、iframe的sandbox以及Nodejs的VM和child_process模块,在文中我们也知道了各自实现的局限性。而对于前端来说,让前端的第三方js代码能够从本质上产生隔离,并且让后端参与部分安全管控是最理想的状态。在这些方案中,在引擎层面制造隔离的iframe方案显然是最简单可行的。
在上一篇 【悟空活动中台 - 微组件状态管理(上)】中,我们一起回顾了活动页内微组件之间的状态管理和背后的设计思路。从最早的 EventBus 升级迭代到【前置脚本方案】,最终回归到 Vuex 统一状态管理模式,针对平台的特点通过技术创新,使 Vuex 无缝集成到活动页的开发中。本文我们将一起继续探索平台和跨沙箱环境下的微组件状态管理。
大致说一下项目的背景:我们做了一个拖拽生成报表的系统,通过拖拽内置的组件供用户定制自己的报表形态,但毕竟内置的组件有限,可定制性不高,那么给用户开放一个 code 组件,让用户自己通过写template + js + css的方式自由定制岂不是妙哉。
经过我们团队的调研,我们选择了无界作为微前端的技术栈。目前的使用效果非常好,不仅性能表现出色,而且使用体验也不错。
这两天回了家从感觉浏览器行为有些怪异,有些熟悉的网页无故出现了额外的竖直滚动条,有时候是两个,有时候甚至到了3个!我是用的是chrome浏览器,像现在wp后台添加文章的页面就是有3个竖直滚动条的。
领取专属 10元无门槛券
手把手带您无忧上云