标签： portals

发布于

JavaScript内核与高级编程之：`JavaScript` 的 `Portals` 提案：如何在 `Web` 应用中嵌入其他页面。

各位靓仔靓女们，大家好！我是你们的老朋友，Bug Killer。今天咱们来聊点新鲜玩意儿，一个可能会改变Web应用交互方式的提案——Portals。 这玩意儿，说白了，就是让你的网页能像俄罗斯套娃一样，嵌套其他网页，而且性能和用户体验还倍儿棒。是不是听起来有点像<iframe>？别急，听我慢慢道来，告诉你Portals比<iframe>强在哪儿，以及它到底是怎么运作的。 Part 1: 为什么我们需要 Portals？<iframe>它不香吗？ <iframe>，这老家伙我们用了这么多年，的确解决了不少问题，比如嵌入第三方内容，隔离样式和脚本等等。但是，它也有一堆让人头疼的毛病： 性能问题： 每个<iframe>都相当于一个独立的浏览器上下文，加载和渲染都需要额外的资源，页面多了，性能直接爆炸。 SEO不友好： 搜索引擎很难抓取<iframe>里面的内容，这对于需要SEO优化的网页来说简直是噩梦。 交互体验差： <iframe>和主页面之间的通信比较麻烦，需要用到postMessage等机制，而且还有跨 …

继续阅读“JavaScript内核与高级编程之：`JavaScript` 的 `Portals` 提案：如何在 `Web` 应用中嵌入其他页面。”

发布于

HTML5 `Portals`：构建跨页面无缝过渡与多窗口体验

HTML5 Portals：传送门，带你穿越网页宇宙 网页开发这片江湖，每天都风起云涌，各种新技术层出不穷。今天，我们要聊的就是一个颇具潜力，却又有点神秘的家伙：HTML5 Portals。你可以把它想象成网页上的“传送门”，能让你在不同的页面之间穿梭，而且还是一种无缝衔接的穿越，是不是听起来很酷？ 告别“刷新大法”：网页跳转的痛点 在深入Portals的奇妙世界之前，我们先来回顾一下传统的网页跳转方式。相信大家都经历过：点击一个链接，浏览器“哐当”一声，整个页面刷新，然后加载新的内容。这种方式简单粗暴，但也存在不少问题： 用户体验差： 每次跳转都要重新加载页面，等待时间长，容易打断用户的操作流程，让人感觉有点不爽。 性能损耗大： 每次刷新都要重新请求资源，消耗带宽，浪费服务器资源，对于移动设备来说，更是雪上加霜。 状态丢失： 页面刷新会导致之前的状态丢失，例如表单填写的数据、滚动条的位置等等，用户体验大打折扣。 为了解决这些问题，开发者们尝试了各种方法，例如使用AJAX局部刷新、SPA（单页应用）等等。这些方法在一定程度上改善了用户体验，但也带来了新的挑战，例如复杂的路由管理、SEO …

继续阅读“HTML5 `Portals`：构建跨页面无缝过渡与多窗口体验”

发布于

HTML5 Portals：跨页面无缝过渡与内容嵌入

HTML5 Portals：跨页面穿越，告别“页面刷新”的痛苦？ 各位看官，有没有经历过这样的场景：在电商网站浏览商品，你兴致勃勃地点击了一个“查看详情”，满心期待着更详尽的介绍，结果页面“唰”的一下，白光闪过，把你带到一个全新的页面。虽然内容是出来了，但总感觉被打断了思路，像刚要进入状态就被强制重启了一样，体验略微有些不爽。 或者，你在一个信息聚合网站上阅读新闻，每一条新闻都链接到不同的外部网站，你点啊点，浏览器标签页越开越多，最后简直分不清自己到底要看哪个了。这种感觉，就像在一个迷宫里漫无目的地穿梭，每扇门都通往一个未知的地方，走着走着就迷失了方向。 这，就是传统网页跳转的“刷新”带来的问题：打断用户心流，增加页面加载时间，让用户体验略显生硬。 那么，有没有一种技术，能让我们在不同的页面之间穿梭，却感觉像在一个页面里平滑切换一样呢？就像电影里的传送门，咻的一下，人就到了另一个地方，但整个过程是无缝衔接的，没有突兀感。 答案是：HTML5 Portals。 Portals：网页界的“传送门” HTML5 Portals，你可以把它想象成网页版的“传送门”，或者更形象一点，可以理解成网 …

继续阅读“HTML5 Portals：跨页面无缝过渡与内容嵌入”