怎样去优化长任务

在web前端中,我们总是会听说不要阻塞主线程,我们要打断长任务的运行。做这些事情的意义到底在哪里?

如果我们看过很多关于web 性能优化的文章,我们会发现保持我们的javascript 应用程序变快的建议中往往都会提到如下的建议:

  • 不要阻塞主线程
  • 把长任务打断

我们在加载的页面的时候,基本上都会去考虑怎么减少javascript 代码的体积,这个能够提高页面打开的速度,但是更少的代码并不一定意味着用户的界面体验会更流畅。

要懂得优化js中任务的重要性。那么我们首先需要了解什么是任务,任务的角色,以及浏览器是怎么处理任务的。我们先来了解一下什么是任务?

什么是任务

浏览器执行的各个任务之间是相互独立的。例如页面渲染,解析html和css,运行我们编写的javascript代码,以及一些我们无法直接控制的事情都输入任务的范畴。但是浏览器中任务的主要来源是我们编写和部署的代码。

在Chrome DevTools的性能分析器中,描述了由点击事件处理器启动的任务。

任务影响性能的方式很多,比如我们在打开网站时下载js代码,浏览器会把任务放在队列中,当解析编译javascript完成执行,再去排队执行任务。随后页面的任务会随着用户交互驱动的事件处理器,js动画以及分析收集的后台活动等js活动触发(web worker 等类似的api除外)。

什么是主线程

浏览器中大多数任务都发生在主线程中。主线程之所以被称为主线程的一个主要原因是:我们写的javascript代码几乎都在该线程上执行。

在同一时刻,主线程只能运行一个任务。当该任务的执行时间超过50ms的时候,那么这个任务就会被称之为长任务(long task)。当一个长任务正在运行的过程中,这个时候用户也在与页面进行交互,或者这个时候有个关键的渲染更新需要进行。这个时候,浏览器会延迟用户交互或者渲染。这个时候导致用户交互或渲染延迟,也是就页面发生卡顿。

阅读 “怎样去优化长任务” 发表评论

IntersectionObserver 与无限滚动列表

无限滚动在实际项目中用到很多,比较在vipkid 数字图书馆的的书库这个业务中,就用到滚动加载,如下视频所示

无限滚动

正常思路是,我们监听scroll事件,当滚动条滑到底部的时候,触发加载,请求数据,将新数据插入尾部。

这里面,我们会碰到两个问题,

  • 1.一个是scroll 事件的触发,会触发的非常频繁,
  • 2.dom节点会越来越多
阅读 “IntersectionObserver 与无限滚动列表” 发表评论

canvas中getImageData(),toBlob(),toDataURL()跨域问题的解决

井冈山会师
井冈山会师

 

昨天在吃饭过程中,和同事聊到canvas跨域的的限制,我一开始以为canvas所有的API接口操作不同域的图片都会跨域,但是这是一个错误的想法,比如使用drawImage()方法将图片渲染在canvas中是没有跨域的限制的。

在了解跨域的时候,我们首先要搞清楚什么是浏览器的同源策略。阅读 “canvas中getImageData(),toBlob(),toDataURL()跨域问题的解决”

发表评论

html5优化指南

web前端发展到2018年的现在,技术已日新月异,从以前的table布局,到利用position + float+盒模型布局flex弹性布局,到grid布局,前端技术从JqueryMVVM,到Google提出的PWA,以及现在的webassembly 人类对于更好的体验,更快的速度的追求,是无止境的,前端页面优化一直是个永恒的话题。那么到现在,我们针对前端的优化有哪些方案呢?

页面加载速度

页面加载速度慢是造成用户体验差的最致命的因素,这个是我们首先需要考虑的一个因素。
从下面的研究数据我们可以看出一些端倪

  • 53%的用户会放弃一个加载超过3s网站 —SOASTA Google study report
  • 当一个网站的加载变快,用户停留的时间就越长的,用户更愿意在加载快的网站上购买东西。 —WPO Stats
  • 加载速度慢的网站,对SEO优化是有害的,这个会降低网站的排名,导致网站访问的频率降低。 —Search Engine Land

阅读 “html5优化指南”

发表评论