文章列表
吴浩麟 于 5个月前发表 592 0 0
前言 在传统的WEB开发中,当与用户或服务器发生交互时,需要我们手动获取数据并更新DOM,这个过程是繁琐的、易错的。 特别是当页面功能过于复杂时,我们既要关注数据的变化,又要维护DOM的更新,这样写出来的代码是很难维护的。 新一代的框架或库,例如Angular、React、Vue等等让我们的关注点只在数据上,当数据更新时,这些框架/库会帮我们更新DOM。 那么这里就有两个很重要的问题了:当数据变化时,这些框架/库是如何感知到的?当我们连续更新数据时,这些框架/库如何避免连续更新DOM,而是进行批量更新? 带着这两个问题,我将简要分析一下React、Angular1、Angular2及Vue的实现机制。 REACT VIRTUAL DOM alt [http://yuyang041060120.github.io/img/change-detection-and-batch-update/virtual-dom.svg]
5个月前
性能
孙世吉 于 8个月前发表 925 0 0
起因 起初想要去了解如何提高网页加载性能,发现Yahoo发布的一款基于FireFox的插件YSlow。 [http://7tszky.com1.z0.glb.clouddn.com/FmBGguIbhIgA7GpfveV4bTyJFEoj] 本文浅谈YSlow团队的23条“Web性能最佳实践和规则”,基本从两个角度出发,为什么要这么干,以及如何进行实践。 [http://7tszky.com1.z0.glb.clouddn.com/FoTzZCnvGhpFotp9Y39b1uzybvVL] PS: 现在Yahoo工程师团队给出最佳实践是35条,而通常人们知道的是YSlow-23条规则(比如说本人)。 本文由YSlow-23条规则为基点出发,后续会进行35条最佳实践的相关拓展。 附上链接: Best Practices for Speeding Up Your Web Site [https://developer.yahoo.com/performance/rules.html] 正文 1. 减少HTTP请求次数 WHY
8个月前
性能
张颖 ,认真认真 于 10个月前发表 1098 3 0
2016年4月23日Qcon北京站在北京·国际会议中心中心顺利落下帷幕,Qcon大会全称“全球企业开发大会”,它是InfoQ主办的全球顶级技术盛会。本次大会邀请了100多位国内外技术专家,就云计算、移动开发、人工智能、架构、大数据等前沿技术做了近百场专题演讲,吸引了上万名技术从业人员的参与。 在专题“未来的前端”中,腾讯SNG业务平台中心IMWeb前端团队的高级工程师fredwu(吴浩)以“互动娱乐时代下Web音视频性能优化”为题,畅谈了腾讯课堂的web音视频优化之路。 [http://7tszky.com1.z0.glb.clouddn.com/Fjp2VewLlUhfHXNp5Xnr5i8p2THt] 简介 首先介绍下我们萌萌的高工fredwu(吴浩),身材高大,笑容确特别孩子气,形成的 反差萌 是大多数人对他的第一印象,温和的性格让他成为了公司新进毕业生的良师益友,丰富的web前端经验让他对技术精益求精,不断钻研。长期关注前端技术动向的他,对 NODE 生态及前后端同构有深入的探索和实践,目前主要负责腾讯课堂业务以及团队的基础建设。
10个月前
性能
helinjiang 于 1年前发表 1136 2 1
如果被耗时任务拖累,可能是姿势不对 在业务中,有时候需要处理一些相对耗时的事情,而且还有一些其他的逻辑还可能会依赖这个耗时任务。诚然,太久的耗时会对用户体验不好。 本文就自己在业务中的一次实践,从其中一个小角度来分享看法,纯属个人观点,如有纰漏之处,还望指教。 背景 我们的项目是Hybrid混合应用,页面运行在手机QQ(后续简称手Q)中。在我们的业务中,我们有个新上线的业务,进入页面A之后,需要根据用户的地理位置(可以用缓存)去跳转到新业务页面B(灰度)或者继续渲染页面A。 业务流程图 [http://7tszky.com1.z0.glb.clouddn.com/FqjP4rcN1743tQrf3gcEzLxBIiGj] 最正经的实现方案 很容易想到的最正(diao)经(si)的一种实现方案,就是先获得当前用户的地理位置,拿到地理位置之后,还要去调用后台CGI接口,获得当前用户处于的城市,然后再根据这个城市,判断是否应该跳转到特定的页面。 伪代码实现 使用伪代码表示如下: // 调用手Q接口获取当前用户的地理位置,data中包含了经度和纬度
1年前
性能
huscot ,undefined 于 1年前发表 1440 1 0
web性能优化,这是大家耳熟能详的东西了。 一说到性能优化,大家可能立马就会想到和加载相关的时间了,比如首字节时间、白屏时间、首屏时间、用户可交互时间、DOMContentLoaded时间、onLoad时间等等,但是不同的人也许会有不同的衡量标准,比如有些人比较重视白屏时间,有的比较关注首屏时间等,这并非完全一致的。当然我们可能还会考虑其他方面的性能优化问题,比如DOM渲染、60FPS动画、benchmarks等,但是我们应该什么时候去做优化呢?一直做?所有都做?这可能有点不切实际。 我们大部分人都没有足够的时间投入到优化工作中,我们需要一个权威的标准来告诉我们哪些重要的事情是必须优化的和哪些次要的。 对此,Chrome团队提出了一个以用户为中心的性能模型: RAIL 。 在我们深入了解 RAIL 之前,我们先回想一下,我们为什么要做性能优化?其实无非就是一个字,“慢”! 一个DOM操作很慢?一个网页加载很慢?在 <head> 中加载一个 <script> 很慢?JavaScript动画很慢?一个20ms的操作很慢?那么0.5s或者10s呢?...
1年前
性能
ouven ,https://ouvens.github.io/ 于 1年前发表 3814 3 2
60%的网站流量来自图片,图片优化可以大幅影响网站流量。 一、现有WEB图片格式 图片格式 支持透明 动画支持 压缩方式 浏览器支持 相对原图大小 适应场景 baseline-jpeg 不支持 不支持 有损 所有 由画质决定 所有通用场景 progressive-jpeg 不支持 不支持 有损 所有 由画质决定 所有通用场景, 渐进式加载 gif 支持 支持 无损 所有 由帧数和每帧图片大小决定 简单颜色,动画 png 支持 不支持 无损 所有 由png色值位数决定 需要透明时 webp 支持 不支持 有损 Chrome、Opera 由压缩率决定 复杂颜色及形状,浏览器平台可预知 apng 支持 支持 无损 Firefox、Safari、iOS Safari 由每帧图片决定 需要半透明效果的动画 svg 支持 支持 无损 所有(IE8以上) 由内容和特效复杂度决定 简单图形,需要良好的放缩体验,需要动态控制图片特效 bpg 支持 支持 有损 不支持,需要js解码 由画质决定 jpeg上需要极限优化的场景几种文件格式的特点 * baseline-jpeg
1年前
性能
devinran ,唯封建与迷信难养也 于 1年前发表 1551 5 2
在腾爷 《作为一个前端,可以如何机智地弄坏一台电脑?》 [http://imweb.io/topic/559b49bccfa459b41b0905f1] 之后,我就觉得需要学习这种低调奢华有内涵的文(biao)章(ti)名(dang)。 嘿嘿嘿,你看,你被我骗进来了吧! 正则优化——回溯、环视与原子组 首先,让我用一个正则,谋杀你的浏览器。复制以下代码在console执行。 var innocentString = "By the name of the regexp, sentence your browser to die"; var evilReg = /(.+.+)+X/; evilReg.test(innocentString); 什么?弄不坏你?那么恭喜,你的chrome/safari版本更新很及时。不怕死的换IE/Firefox试试? [http://7tszky.com1.z0.glb.clouddn.com/FuhyhMXSEXWQfyEIRbv83XidVTrP] 我反正是信了。。。。。。。 从执行正则匹配到返回匹配结果中间都发生了什么? 大致来说,经过以下几个步骤:
1年前
性能
黄龙 于 1年前发表 1133 0 0
不明白crossBridge是什么的可以看下这里 http://imweb.io/topic/55aa244a6ee095884b704c2c [http://imweb.io/topic/55aa244a6ee095884b704c2c] [FLASH相关]CROSSBRIDGE生成的库文件体积优化 编译参数 -flto-api= Specifies a file containing the public API LLVM should preserve (implies that the optimizer is free to strip any symbols not mentioned in this file that aren't referenced by the symbols mentioned in this file)
1年前
性能
刘志龙 于 1年前发表 1709 1 0
每一门编程语言的设计都离不开运算符,我们写的每一行代码基本也少不了它们,这篇文章就让我们一起来了解一下这个无处不在的小伙伴的应用和小技巧吧~~ ~ 按位取反 字符串查找 写JS的时候我们查找字符串时经常这么写判断字符串是否存在特定字符: if (str.indexOf('a') != -1) { ... } 这边其实可以利用~的一个小技巧,因为~-1 = 0,上面的这个判断我们可以简单用~ 进行替换: if (~str.indexOf('a')) ... } 看起来比 != 有趣多了~~ 取整 正数像下取整我们用的最多的应该是类似这样: var a = 2.3; var b = Math.floor(a); 其实用~也可以很完美的替换整数向下取整: var a = 2.3; var b = ~~a; >> 与 || 这两兄弟基本上经常都会在一起被看到,所以这边也一起介绍一下它们。 var result; if status == 1) { result = 'Andy' } elseif(status == 2){ result = 'Tom'; }
1年前
性能
devinran ,唯封建与迷信难养也 于 1年前发表 1618 2 0
静态检查 关于javascript的语言特性,Douglas Crockford在蝴蝶书里面写过:“一些特性因为规范的不完善而可能导致可移植性问题,一些特性会导致代码难以阅读或修改,一些特性诱使我们追求奇技淫巧但却易于出错,还有一些是语言本身设计错误”。 由于javascript语言本身弱类型灵活多变的特点,某些特性的不正确使用或者格式的混乱会导致造成一些未预见的行为或错误。为了解决此类的问题,我们需要 静态检查 。 JSLINT JSLint 是Douglas Crockford编写的工具,它将Web开发人员多年积累下来的反模式整合为一套规则,用以对Javascript脚本扫描,并给出相应的问题描述信息。 规则大致包含几个方面: * 语法错误检查 : 比如括号配对遗漏等问题。 * 代码格式检查 : 比如缺少结尾分号、数组&对象末尾多余逗号等问题。 * 变量定义检查 : 比如未定义变量成为全局变量等问题。 * 糟粕特性检查 : 比如with、void语句等不推荐使用的问题。
1年前
性能
bleanycao 于 2年前发表 1905 2 0
ICONFONT 体系化解决方案 背景 性能优化是前端开发不得不面对,必须重视的一个经久话题。教育平台项目除了常规的web性能优化外,图片资源站到了流量的70%+,因此图片的性能优化是个重中之重。除了常规的图片优化外,课程封面和机构上传的图片采用了webp格式,之前已介绍过,不再赘述。这样,对平台图片的优化已经达到极致了吗? [http://7tszky.com1.z0.glb.clouddn.com/FomvaHAu9Olju6wrhNpJBxZ4eVF9] 随着平台规模的不断扩大,我们发现/img/目录的小图标越来越多,已经达到了700+多个,这么多图标真的都是必须的吗? [http://7tszky.com1.z0.glb.clouddn.com/FtJPePOR6210g4_i7CEg35HTHq5-] 从上面这张图可以看到,以箭头为例,不同颜色、不同大小的达到几十张,为了适配不同场景,而这些一个矢量图就可以轻松搞定。
2年前
性能
江源 ,非常让人头疼…… 于 2年前发表 3648 1 0
本地存储(localStorage)已经不是新鲜的概念,本文并不是本地存储的概念及 API 介绍,而是对本地存储在实际业务场景中的一些问题做些探讨,从而形成一套规范,保证本地存储在提高页面性能、提升用户体验的同时,避免出现莫名其妙的错误。 本文试图回答如下问题: 1. 本地存储满了之后,浏览器是什么样的行为? 2. 本地存储容量有限,因此宝贵,那么就整个站点而言,使用本地存储的策略是什么? 3. 实际编码过程中,本地存储又有那些注意事项? 本地存储的空间(SIZE) 让人意外的是,这一点在各主流浏览器(包含PC、移动端)竟然惊人的一致,都是 5M 的数量级。 值得说明的是,安卓上手 Q 、手机QQ浏览器、微信中则是 2.5M 的数量级,因此在移动端,本地存储的 SIZE 更加珍贵。 IOS 待测试 。 综上,SIZE 在 2 - 5M 的区间。 测试页面: Web Storage Support Test [http://dev-test.nemikor.com/web-storage/support-test/] 超过最大值的行为
2年前
性能