ReactFiber原理剖析

众所周知(其实只有程序员知道),react在更新大版本v16之后,整体架构几乎重新设计,生命周期大改,函数式组件的使用,Hook的引入等等,其中比较重要的一个重头戏就是fiber架构的引入,从一定程度上来说,fiber架构影响了react原先的生命周期。

React Fiber的提出无非依然是解决性能相关的问题,那么接下来就来探讨一下react通过这个架构,对性能优化所做的努力

中断耗时长的任务

众所周知(依然只有程序员知道)javascript单线程运行的,而且在浏览器环境要干的活非常多,它要负责页面的JS解析和执行、绘制、事件处理、静态资源加载和处理。

它只是一个’JavaScript’,同时只能执行一个任务,事情只能一件一件的做。如果有一个任务消耗的时间太长,后面的任务就不会执行,浏览器会呈现卡死的状态,这样的用户体验就会非常差。

对于优化这种问题,有三个方向:
阅读更多...

typescript类型断言解决一些常见问题

最近在维护一个vue+ts项目的过程中遇到了一些typescript类型报错,简单来讲就是ts在进行类型推断时出现了一些错误,需要我们选择性的使用类型断言来解决报错,下面是我收集到的目前出现错误的情况,后续如果有发现新问题会持续更新。

Property ‘insertRule’ does not exist on type ‘StyleSheet’

这个是我在Vue中开发一个CSS动画时候报的错,具体在下面这段代码中:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const style = document.createElement('style');
style.setAttribute('type', 'text/css');
document.head.appendChild(style);
const sheet = style.sheet;

sheet.insertRule(
`@keyframes roller {
from {
top: 0px;
}
to {
top: -${(this.prizeArr.length - 1) * this.itemHeight}px;
}
}`, 0
)
阅读更多...

深入浅出-Webpack学习笔记(四)——优化·上

了解了webpack的一些基本使用方法,我们就开始需要着手于一些优化点了。 webpack优化可以分为优化开发体验和优化输出质量两部分,那么接下来就深入学习一下webpack的优化。

优化开发体验
优化开发体验的目的是为了提升开发时的效率,其中又可以分为以下几点:

  1. 优化构建速度。在项目庞大时构建耗时可能会变的很长,每次等待构建的耗时加起来也会是个大数目。
  2. 优化使用体验。通过自动化手段完成一些重复的工作,让我们专注于解决问题本身。

优化输出质量
优化输出质量的目的是为了给用户呈现体验更好的网页,例如减少首屏加载时间、提升性能流畅度等。 这至关重要,因为在互联网行业竞争日益激烈的今天,这可能关系到你的产品的生死。

优化输出质量本质是优化构建输出的要发布到线上的代码,分为以下几点:

  1. 减少用户能感知到的加载时间,也就是首屏加载时间。
  2. 提升流畅度,也就是提升代码性能。

优化的关键是找出问题所在,这样才能一针见血, 输出分析 教你如何利用工具快速找出问题所在。

阅读更多...

深入浅出-Webpack学习笔记(二)

配置 Webpack 的方式有两种:

  • 通过一个 JavaScript 文件描述配置,例如使用 webpack.config.js 文件里的配置;
  • 执行 Webpack 可执行文件时通过命令行参数传入,例如 webpack –devtool source-map。

这两种方式可以相互搭配,例如执行 Webpack 时通过命令 webpack –config webpack-dev.config.js 指定配置文件,再去 webpack-dev.config.js 文件里描述部分配置。

按照配置方式来划分,可分为:

  • 只能通过命令行参数传入的选项,这种最为少见;
  • 只能通过配置文件配置的选项;
  • 通过两种方式都可以配置的选项。 阅读更多...

从Service-Workers认识离线应用

认识离线应用

你的网页性能优化的再好,如果网络不好那也会导致网页的体验差。 离线应用是指通过离线缓存技术,让资源在第一次被加载后缓存在本地,下次访问它时就直接返回本地的文件,就算没有网络连接。

离线应用有以下优点:

  • 在没有网络的情况下也能打开网页。
  • 由于部分被缓存的资源直接从本地加载,对用户来说可以加速网页加载速度,对网站运营者来说可以减少服务器压力以及传输流量费用。

离线应用的核心是离线缓存技术,历史上曾先后出现2种离线离线缓存技术,它们分别是:

  • AppCache 又叫 Application Cache,目前已经从 Web 标准中删除,请尽量不要使用它。
  • Service Workers 是目前最新的离线缓存技术,是 Web Worker 的一部分。 它通过拦截网络请求实现离线缓存,比 AppCache 更加灵活。它也是构建 PWA 应用的关键技术之一。

Service Workers 相比于 AppCache 来说更加灵活,因为它可以通过 JavaScript 代码去控制缓存的逻辑。

阅读更多...

深入浅出-Webpack学习笔记(一)

webpack的思想

Webpack 是一个打包模块化 JavaScript 的工具,在 Webpack 里一切文件皆模块,通过 Loader 转换文件,通过 Plugin 注入钩子,最后输出由多个模块组合成的文件。Webpack 专注于构建模块化项目。

其官网的首页图很形象的画出了 Webpack 是什么


一切文件:JavaScript、CSS、SCSS、图片、模板,在 Webpack 眼中都是一个个模块,这样的好处是能清晰的描述出各个模块之间的依赖关系,以方便 Webpack 对模块进行组合和打包。 经过 Webpack 的处理,最终会输出浏览器能使用的静态资源。

Webpack的优点是:

  • 专注于处理模块化的项目,能做到开箱即用一步到位;
  • 通过 Plugin 扩展,完整好用又不失灵活;
  • 使用场景不仅限于 Web 开发;
  • 社区庞大活跃,经常引入紧跟时代发展的新特性,能为大多数场景找到已有的开源扩展;
    良好的开发体验。
阅读更多...
  • Copyrights © 2015-2020 AURORA_ZXH
  • Visitors: | Views:

请我喝杯咖啡吧~

支付宝
微信