京东PLUS会员项目前端性能优化实践

作者:李非凡 京东PLUS会员项目是国内第一个电商付费会员项目,正式开通的会员数量已破千万。我团队从2016年接手这个项目的前端开发工作,一路见证了它的高速成长,也为此贡献了自己的力量。 这个项目有几个特点: 第一,需求多。移动端使用 H5 开发,曾有人问为什么不用原生或者 RN 开发? 我觉得吧,以这个项目的需求数量和迭代速度来看,连 H5 都难以 hold 的住,还是不要奢望原生和 RN 了。 第二,产品经理多。一般的项目对接一两个产品经理,这个项目我们需要对接一个异地的

体现工匠精神的Resource Hints

作者:杨磊 背景 八卦图代表了古代算法数术的结晶,主要是为了提供一种预测人类行为的方法论,这种能提前预测的行为古往今来都备受人们追捧,既然预测这个行为那么受欢迎,互联网行业是不是也进行了这方面的技术储备呢?没错互联网行业也已经存在此功能了。 自从互联网兴起之后,网站也越来越漂亮,越来越大,性能就是大家一致追求的方向,大家也都想预测用户下一步行为。从浏览器厂商到各个开发者都想通过各种方式来提升用户的体验,所以提前知道用户的下一步行为,预先加载用户下一个页面的资源就是开发者要

HTML5 Audio的兼容性问题和优化

作者:刘新金 引入 本人在双十一期间,做的一个移动端互动项目中,遇到一个在 App 、微信、h5页面环境切换选择音频播放的功能,在测试的时候出了不少兼容性问题,这里有很多值得探索的知识,今天我们就来看一下这个 HTML5-Audio。 Audio 标签用于定义声音,比如音乐或其他音频流,HTML5 的 Audio 标签在很大程度上取代了 Flash 来播放音乐。 一、默认样式 Audio 标签在浏览器中的默认样式如下图所示,需要注意的一个地方:需要配置 controls 属性

一个表情引发的思考

作者:石文帅 简介:字符集的由来是什么?各种字符编码又有什么关系?乱码是如何出现的?带着这些问题,我们一起倾听字符的故事。 前几天测试给提了个 bug ,“在长度限定的文本区域,输入表情时会展示乱码”。不由的产生了一些想法:这些表情是什么东西?为什么会出现乱码? JS 是使用哪种编码方式?便查阅了相关文献,最终找到了答案,今天就详细说一说编码的故事。 一、比特、字符、字节 在聊编码之前,有几个基础的概念需要先明确一下: 比特位:比特位即 Bit ,是计算机最小的存储单位。

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

作者:宋成林 懒加载,一个在我们前端性能优化中高频出现的词汇,无论是懒加载图片还是懒加载模块,无非都是希望用户可以在滚动指定视区再去加载相应的资源, 从而达到节省用户流量、提升首次加载时间、减轻服务器的压力的目的。 “懒加载”不是一个新的概念,对于经验丰富的你们来说,一定积累了很多实现方法,但为什本文还要提出来呢?因为我们开发过程中,常用的实现方式都是通过监听页面的 scroll 事件来实现的,这种方法在使用过程中,scroll 事件会被高频触发,强制浏览器重排和重绘,从而不

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

作者:王悦 微信小程序中可以直接运行 web 页面,这一新组件 web-view 的产生,可能直接导致小程序数量迎来一波高峰。本篇博文将从业务选型,微信小程序后台配置,使用 web-view 完成登录业务以及在实战中如何调试一次性带你感受小程序内嵌 H5 的风采,帮你更有底气的使用微信小程序新组件 web-view。 一、技术选择: 1.H5 转成小程序方案路线优缺点对比: 上表是从原有 H5 转相似业务逻辑的微信小程序的方案路线优缺点对比,基于时间的限制以及当前主流多端

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

作者:孙印凤 随着信息安全重要性的日益凸显,如何保证用户数据的安全成为开发者重点关注的内容。目前,可供我们选择的加密方法有很多,我们需要根据实际的情况选择符合自己的安全解决方案。本文将介绍前端开发中常用的加密方法并给出其适用场景。 常用加密方法 1. Base64 编码 大家经常说的是 Base64 加密,有 Base64 加密吗?真木有,只有 Base64 编码。 Base64 是一种基于 64 个可打印字符来表示二进制数据的表示方法,详见 [1]。常用于在通常处理文本数据

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

作者:汪楠 简介: Vue、React单页面的应用给开发者和用户都带来了更好的体验,但是首屏加载慢、白屏和SEO等问题也日益突出,本文主要针对此用户体验问题给出渐进的处理方式-预渲染 目前 Vue、 React 在前端界混的风生水起,它们的开发思想使得我们能真正做到前后端分离、解耦。单页面的使用给用户带来了更好体验。不过对于 Vue 和 React 这种框架来说, HTMLinJS 的思路在首屏加载慢、白屏以及 SEO 等问题就日益突出了。 不仅需要拼框架的功能、生态,当然还

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

作者:François Beaufort | 译:Vicky·Ye 原文地址:https://developers.google.com/web/fundamentals/media/fast-playback-with-video-preload 在以往的项目中,只要有视频的存在,那么就会是个让人费神的项目。且不说对它的适配兼容问题,只说它的加载问题就能说上半天了。本文作者从视频预加载的各种方法入手,讨论了如何让视频播放速度更快的解决办法。 众所周知,能更快速的播放视频意味

【译】关于GraphQL,你需要知道这些

作者:Weblab Technology | 译:kongfanjia 原文地址: https://medium.com/@weblab_tech/graphql-everything-you-need-to-know-58756ff253d8 【译者注:链接序号对应下面索引列表,另外可以点击阅读原文查看详细的链接文章】 在你已经构建并使用了 REST API 很长一段时间后,最近可能听说了一个 API 技术领域的的新星 —— GraphQL。有些人说它很好,但另一些人并不