利用交叉观察器解锁懒加载新姿势

作者:宋成林 懒加载,一个在我们前端性能优化中高频出现的词汇,无论是懒加载图片还是懒加载模块,无非都是希望用户可以在滚动指定视区再去加载相应的资源, 从而达到节省用户流量、提升首次加载时间、减轻服务器的压力的目的。 “懒加载”不是一个新的概念,对于经验丰富的你们来说,一定积累了很多实现方法,但为什本文还要提出来呢?因为我们开发过程中,常用的实现方式都是通过监听页面的 scroll 事件来实现的,这种方法在使用过程中,scroll 事件会被高频触发,强制浏览器重排和重绘,从而不断增加浏览器的压力,导致浏览器性能的损失,有时可能出现卡顿或是闪烁的现象,即使使用了节流与去抖等方法,但还是会产生高昂的计算开销。那是否有更好的方法来解决呢,本文会讲解一种新实现方式,在此之前,先让我们回顾一下常用的实现姿势吧! 常用姿势 姿势一:getBoundingClientRect() 方法 通过 Element.getBoundingClientRect() 方法可以返回元素的大小及其相对于视口的位置。 rectObject = object.getBoundingClientRect() ;返回值 rectObject 对象包含了一组用于描述边框的只读属性—— left 、top 、right 和 bottom ,单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。 如下图: 随着页面滚动,我们可以获取懒加载元素相对于视口的顶点位置 rectObject.top 的像素值,当这个值小于可视区高 window.innerHeight ,表示已经进入可视区,开始加载数据,如果要提前加载,可以设置一个 threshold 阈值。 姿势二: 首先我们获取元素 Element.offsetTop ,获取可视区高度 window.innerHeigh 。 随着页面滚动,实时获取滚动条的高度 scrollTop ,如果元素 Element.offsetTop – 滚动条的高度 scrollTop 小于可视区高度 window.innerHeight 的时候,开始加载数据。 这两种实现方式都是通过监听页面的 scroll […]

快速小程序开发之微信小程序内嵌 H5

作者:王悦 微信小程序中可以直接运行 web 页面,这一新组件 web-view 的产生,可能直接导致小程序数量迎来一波高峰。本篇博文将从业务选型,微信小程序后台配置,使用 web-view 完成登录业务以及在实战中如何调试一次性带你感受小程序内嵌 H5 的风采,帮你更有底气的使用微信小程序新组件 web-view。 一、技术选择: 1.H5 转成小程序方案路线优缺点对比: 上表是从原有 H5 转相似业务逻辑的微信小程序的方案路线优缺点对比,基于时间的限制以及当前主流多端编译的可靠性考量,最终团队认为通过使用小程序组件 web-view 内嵌 H5 的方式比较适合当前的开发需求。 web-view 的兼容性问题主要是要在基础库在1.6.4+及以上才可以用,而微信官方统计基础库在1.6.4+ 的覆盖率已达 95% 以上,这个指标也符合产品大人的要求,于是便愉快的选择了 web-view 内嵌 H5 的技术方案。 2.H5 和小程序技术对比: 从上表中可以对比出 H5 相较于小程序的优缺点,方便各位前端大大评估需求。尤为重要的是因为小程序封装的比较严重所以小程序开发的灵活性没有 H5 那么高,这就要我们注意对交互设计的评估。 二、web-view 微信小程序配置系列问题 1、配置域名 注意: 业务域名中配置的就是小程序以及 H5 和 H5 中引用 iframe 的域名。这里要特别注意的是假如 H5 中有内嵌的 iframe 也要配置进去 这里需要服务端的朋友配合一下,将校验文件放置在将要嵌套的业务域名的根目录。所以要注意后端是否可以支持,否则会有各种扯皮的问题 2、选择基础库 开发的时候不要忘记配置微信小程序的基础库,注意 […]

可以说的秘密-那些我们该讨论的前端加密方法

作者:孙印凤 随着信息安全重要性的日益凸显,如何保证用户数据的安全成为开发者重点关注的内容。目前,可供我们选择的加密方法有很多,我们需要根据实际的情况选择符合自己的安全解决方案。本文将介绍前端开发中常用的加密方法并给出其适用场景。 常用加密方法 1. Base64 编码 大家经常说的是 Base64 加密,有 Base64 加密吗?真木有,只有 Base64 编码。 Base64 是一种基于 64 个可打印字符来表示二进制数据的表示方法,详见 [1]。常用于在通常处理文本数据的场合,表示、传输、存储一些二进制数据,包括 MIME 的 email,email via MIME,在 XML 中存储复杂数据;主要用来解决把不可打印的内容塞进可打印内容的需求。很多编程语言中都内置了该编码方法,比如 Python 内置的 base64 方法使用如下:

因此,Base64 适用于小段内容的编码,比如数字证书签名、Cookie的内容等;而且 Base64 也是一种通过查表的编码方法,不能用于加密,如果需要加密,请使用专业的加密算法。 2. 哈希算法(Hash) 哈希(Hash)是将目标文本转换成具有固定长度的字符串(或叫做消息摘要)。当输入发生改变时,产生的哈希值也是完全不同的。从数学角度上讲,一个哈希算法是一个多对一的映射关系,对于目标文本 T,算法 H 可以将其唯一映射为 R,并且对于所有的 T,R 具有相同的长度,所以 H 不存在逆映射,也就是说哈希算法是不可逆的。 基于哈希算法的特性,其适用于该场景:被保护数据仅仅用作比较验证且不需要还原成明文形式。比较常用的哈希算法是 MD5 和 SHA1,详见 [2][3]。 我们比较熟悉的使用哈希存储数据的例子是:当我们登录某个已注册网站时,在忘记密码的情况下需要重置密码,此时网站会给你发一个随机的密码或者一个邮箱激活链接,而不是将之前的密码发给你,这就是因为哈希算法是不可逆的。 需要注意的是:在 Web 应用中,在浏览器中使用哈希加密的同时也要在服务端上进行哈希加密。 现在,对于简单的哈希算法的攻击方法主要有:寻找碰撞法和穷举法。所以,为了保证数据的安全,可以在哈希算法的基础上进一步的加密,常见的方法有:加盐、慢哈希、密钥哈希、XOR […]

利用prerender-spa-plugin提升单页面应用的体验

作者:汪楠 简介: Vue、React单页面的应用给开发者和用户都带来了更好的体验,但是首屏加载慢、白屏和SEO等问题也日益突出,本文主要针对此用户体验问题给出渐进的处理方式-预渲染 目前 Vue、 React 在前端界混的风生水起,它们的开发思想使得我们能真正做到前后端分离、解耦。单页面的使用给用户带来了更好体验。不过对于 Vue 和 React 这种框架来说, HTMLinJS 的思路在首屏加载慢、白屏以及 SEO 等问题就日益突出了。 不仅需要拼框架的功能、生态,当然还不能忘记“用户至上的原理“,拼体验。孜孜不倦的前端朋友们给出了几个解决方案:1.Server-side rendering(SSR),2.Prerendering。下面我将一一介绍一下。 什么是SSR? SSR 直译就是服务端渲染,通过设置 SSR,你就可以在后台的 Node.js 环境中完成渲染逻辑,然后将 HTML 视图直接返回给客户端。这样你不仅可以使用 Vue 和 React 技术,而且可以直出页面内容。而非只有一个空壳子在后端那里。这样也方便了搜索引擎的蜘蛛获取页面,解决 SEO 问题。 SSR有什么问题? 你可以回想一下我们在很早之前的前端开发模式,其实就是后端直出页面。前端重构页面,交由后端套页面渲染首页的数据。当然一些异步的数据,则通过 ajax 获取数据渲染。这似乎又回到了之前的开发模式。前端和后端还是紧密联系在一起了。给维护和迭代带来的不便。 那它没有好处吗?有的!目前,社会上还是有成熟的框架和线上的产品,比如 Nuxt.js[1], , 说明它还是具有价值的。它很明显可以解决首屏白屏或者SEO等问题。但是它也引入很多问题,其一,对工程师要求较高,需要同时掌握的前后端知识。其二,要考虑在服务端 Node.js 环境中的内存泄露、运行速度、并发压力等问题。 Node 层的服务可以用“脆弱”两个字来形容。其三,开发成本增加,研发周期变长等。一般来说,是需要一个强大且稳定的基础架构来支撑服务端的压力。 如果你可以应付这些,无疑 SSR 对于增强应用体验是非常棒的~,但对于像我这样有点焦虑的人来说,是否有其他解决办法呢?有的, Prerendering! Prerendering 有时候,我们开发的单页面应用也就几个页面,非常小型,仅仅是为了 SEO、首页白屏问题,大家都觉得有点校枉过正了。可以利用第三方插件 prerender-spa-plugin[2],在客户端实现渲染,这样无需将 Vue 或者 React 代码部署在服务端。 […]

【译】预加载视频实现快速播放

作者:François Beaufort | 译:Vicky·Ye 原文地址:https://developers.google.com/web/fundamentals/media/fast-playback-with-video-preload 在以往的项目中,只要有视频的存在,那么就会是个让人费神的项目。且不说对它的适配兼容问题,只说它的加载问题就能说上半天了。本文作者从视频预加载的各种方法入手,讨论了如何让视频播放速度更快的解决办法。 众所周知,能更快速的播放视频意味着会有更的多人观看到你的视频。在本文中,我将探索通过用户主动触发预加载资源来加速视频播放的技术。 注意: 除非另有说明,否则本文也适用于audio元素。 视频地址:https://developers.google.com/web/fundamentals/media/fast-playback-with-video-preload 致谢:版权所有Blender Foundation | www.blender.org 。 TL; DR 这很棒… 但… 视频preload属性 易用于Web服务器上托管的唯一文件。 浏览器可能完全忽略该属性。 HTML文档完全加载和解析后,资源才开始获取。 当应用程使用MSE扩展媒体时,MSE会忽略媒体元素上的preload属性。 Link preload 强制浏览器发出视频资源请求,但不会阻止文档的onload事件。 HTTP Range请求不兼容。 兼容MSE和文档片断。 获取完整资源时,文件只能是小型媒体(< 5MB)。 手动缓冲 完全控制 复杂的错误需要网页来处理。 视频预加载(preload)属性 如果视频资源是托管在Web服务器上的唯一文件,您可能会使用 video 标签的 preload属性来提示浏览器预加载的信息或内容量。 但这意味着Media Source Extensions(MSE)与 preload 将不兼容。 资源的获取将仅在HTML文档初始加载和解析完成后启动(例如, DOMContentLoaded事件已触发),而实际上在获取资源时将触发完全不同的 window.onload事件。 将 preload属性设置为 metadata表示用户不想马上加载视频,但是需要预先获取其元数据(尺寸,轨道列表,时长等)。 请注意,从Chrome 64开始, preload的默认值是 metadata(以前是 […]

© 2018 JDC. All Rights Reserved.