- 博客(25)
- 收藏
- 关注
RSS订阅原创 都2022年了，pnpm还不快到碗里来
pnpm是一款当代备受关注的 新兴(问题较多) 包管理工具，使用过的同学们都会被它极快的安装速度、极少的磁盘存储空间所吸引！感兴趣的小伙伴赶紧点击学习吧。
2022-01-25 13:47:42
3973
4
翻译 startTransition 项目实践
在 React 18 中，我们宣布了一个新的 startTransition API，并分享了它解决的问题的高级概述。在这篇文章中，我们将深入研究一个真实示例，该示例使用大型开源 React 应用程序通过 startTransition 加速缓慢更新。tl;博士如果您不想阅读整个页面，这里有一些视频可以显示在快速和慢速计算机上的区别。快速计算机：无 startTransition快速计算机：使用 startTransitionScreen.Recording.2021-06-22.at.
2021-08-11 19:41:17
381
原创 React学习笔记：调度器（Scheduler）- 时间切片
浏览器每一帧需要执行的任务切片调度isInputPending参考文档：https://wicg.github.io/is-input-pending/在运行需要显示某些内容的脚本时，开发人员今天需要做出判断。如果脚本可能计算很长时间才能运行并且用户在发生这种情况时进行了某种输入，那么浏览器将需要等到脚本完成后才能分派输入事件。这会造成在响应输入事件之前有很长的延迟，用户体验并不是很好，因此开发人员通常会将长脚本任务分解成更小的块，以允许用户代理在块之间调度事件。每次脚本..
2021-08-04 10:55:41
890
原创 React学习笔记：调和器（Recociler）- 基础篇
即便 React DOM 和 React Native 渲染器的区别很大，但也需要共享一些逻辑。特别是协调算法需要尽可能相似，这样可以让声明式渲染，自定义组件，state，生命周期方法和 refs 等特性，保持跨平台工作一致。为了解决这个问题，不同的渲染器彼此共享一些代码。我们称 React 的这一部分为 “reconciler”。当处理类似于 setState() 这样的更新时，reconciler 会调用树中组件上的 render()，然后决定是否进行挂载，更新或是卸载操作。Reconciler
2021-07-30 11:15:03
550
原创 tree shaking（摇树）你必须要知道的事情
const pure = (a:number, b:number) => a + bconst impure = (c:number) => window.foo.number + cBundlers(捆绑器)通过尽可能多地评估提供的代码来确定模块是否纯。但是在编译时或构建时的代码无法进行评估。因此，假设具有副作用的包无法正确消除，即使它们没有访问。因此，捆绑器现在接受模块package.json文件中的一个键，允许开发人员声明模块是否没有副作用。这样，开发人员可以选择不进行打.
2021-07-26 11:41:26
1238
翻译 React: concurrent model 发生了什么？
概述React 18 将添加新功能，例如startTransition、useDeferredValue、并发Suspense语义SuspenseList、 等。为了支持这些功能，React 添加了协作多任务、基于优先级的渲染、调度和中断等概念。这些功能通过更智能地决定何时渲染（或停止渲染）应用程序中的子树来解锁新的性能和用户体验。这些功能的代价是需要以一种能够适应这些新概念的方式编写代码。为了帮助用户了解他们的代码是否兼容，React 添加了一组开发警告和行为，称为StrictMode，它警告
2021-07-23 11:56:20
216
翻译 React 18 New Feature: startTransition
概述在 React 18 中，我们引入了一个新的 API，即使在大屏幕更新期间，它也有助于保持您的应用程序响应。通过将特定更新标记为“转换”，此新 API 可让您显着改善用户交互。React 将让您在状态转换期间提供视觉反馈，并在转换发生时保持浏览器响应。真实世界示例：为慢速渲染添加 startTransition这解决了什么问题？构建流畅且响应迅速的应用程序并不总是那么容易。有时，诸如单击按钮或输入输入之类的小动作可能会导致屏幕上发生很多事情。这可能会导致页面在所有工作完成时冻结或挂起。
2021-07-23 11:32:09
355
翻译 Chromium下一代全新渲染渲染引擎 - renderingNG
我是 Chris Harrelson，他是 Blink 中渲染（将 HTML 和 CSS 转换为像素）的工程负责人。八年来，我一直深入研究 Web 上的渲染性能，我的个人目标是尽我所能更快、更轻松、更可靠地在 Web 上提供出色的用户体验。我很高兴向您介绍我们在那段时间为构建新的、尖端的 Chromium 渲染引擎架构所做的工作。为了实现这一目标，我们付出了巨大的爱心努力，我希望您喜欢听到它！2021 年，我们将基本完成该架构的设计、构建和交付过程。让我们称之为 RenderingNG，因为它是真正的下
2021-07-08 10:29:43
383
转载 React学习笔记 - 基础概念(三) ClassComponent生命周期
生命周期图谱https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/挂载当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下： constructor() static getDerivedStateFromProps() render() componentDidMount() 注意:下述生命周期方法即将过时，在新代码中应该避免使用它们： UNSAFE_compone
2021-07-01 22:24:58
261
原创 React学习笔记 - 基础概念(二) React Element
下面截图是上面代码createElement后的产物，本质上就是个React Object（ extends Object）：这些属性的含义如下： key: 组件的key，主要用在virtual dom上，compare diff和move element props：组件属性，来源于父组件或者HOC，或者类似的外部传递 ref：当前的dom引用 type: 组件类型 _owner: 是React Component，创建react component的..
2021-06-30 19:46:11
742
原创 React学习笔记 - 基础概念(一) JSX
为什么使用JSX？React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合，比如，在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI，以及需要在 UI 中展示准备好的数据。React 并没有采用将标记与逻辑进行分离到不同文件这种人为地分离方式，而是通过将二者共同存放在称之为“组件”的松散耦合单元之中，来实现关注点分离。React 不强制要求使用 JSX，但是大多是的时候，在 JavaScript 代码中将 JSX 和 UI 放在一起时，会在视觉上有辅助作用。它还可以使 Rea
2021-06-30 19:42:01
162
原创 前端团队JD
团队介绍xx前端团队，负责公司xx模块的工作，主要解决xx问题，涉及xx条产品线，xx个项目。职位和工作地点 初、中级前端开发工程师 上海 职责 参与XX平台的研发，可以独立负责子系统的设计、开发、维护工作；能正确的看待项目历史债务，推进并解决 探索前端业界前沿架构、理念，保持对业界先进技术的学习、分享。 关注用户体验，能从数据角度进行可行性分析、推动项目改进并落地。 与其它工程师进行研发配合，通过组内设计评审、代码评审，保证代码的稳定可靠性。
2021-06-30 17:49:41
484
原创 JavaScript 面向对象----继承的实现方式
第一种，纯原型链式继承：function SuperClass() {this.name = 'SuperClass';}SuperClass.prototype.showName = function() {return this.name;}function SubClass() {this.subName = 'SubClass';}SubClass....
2021-06-12 17:47:18
247
转载 前端小知识：字体 - monospace vs monovolume 的区别
等宽字体（英語：Monospaced Font）是指字符宽度相同的电脑字体。与此相对，字符宽度不尽相同的电脑字体称为比例字体 (Monovolume.)。概要在传统西文印刷中，比例字体可以提高单词的可读性。但因打字机及早期的电脑画面显示等由于技术的局限，无法进行字母宽度的比例调整，因此将每个字符都制作成一样的宽度，从而形成了等宽字体。在等宽字体中，字母「i」、「j」显得两侧餘白较多，而字母「w」、「m」等的笔画显得相当拥挤。但是随着图形用户界面主流的更新和电脑技术的提高，处理比例字体的局限.
2021-06-12 17:44:32
440
原创 前端小知识：react-router-dom 和 react-router 的区别
React v4以后，react-router 导出所有core组件和函数。react-router-dom导出了dom相关的组件，像Link(which renders an <a>) 和<BrowserRouter> (which interacts with the browser's window.history )。react-router-dom导出了所有的react-router的导出，所以正常来说使用react-router-dom或者react-native即可
2021-06-12 17:41:30
416
原创 git fork代码后保持更新同步
日常开发当中，我们往往会fork一些开源项目的代码，然后基于这些代码做二次开发，但是我们会遇到源代码更新后，如何将代码同步到我们代码的问题，只要以下步骤，轻松解决代码同步的问题。1.在本地代码库中添加远程fork库名：git remote add name forkurl2.提交本地更改 git add filenames懒人直接 git add .3.更新以及同步(核心) 这里一定要把分支切到你
2016-05-03 19:59:08
1739
4
原创 babel5升级到babel6总结
babel5 to babel6为什么要升级？性能提升：据说compile速度提升20%（但在测试后发现，速度慢了20%+）。可配置的插件：更强的灵活性，以及更简单的插件API。更简洁的配置。重大变化不再提供babel包 命令行工具由babel-cli包提供node api由babel-core提供polyfill由babel-polyfill提供.babelrc配置变化 移除“
2016-05-03 19:38:36
13037
2
原创 正则表达式之非负整数或者两位小数
非负整数或者两位小数正则表达式 ^[0-9]+(.[0-9]{1,2})?$如果想要限制固定位数的正则，把后面{1,2}=》变为{n}就行附上正则一些常见用法Markdown Extra 表格语法： 两次 描述 n+ 匹配任何包含至少一个 n 的字符串。 n* 匹配任何包含零个或多个 n 的字符串。 n? 匹配任何包含零个或一个 n 的字符串。 n{X}
2016-03-16 16:19:05
2086
原创 头像上传和裁剪(uploadify+Jcrop+php)
最近项目里面需要用到上传和裁剪头像的功能，一开始采用的是美图秀秀，这是一款功能非常强大的插件，而且集成起来非常简单和方便，但是因为一个美女同事电脑跟该款软件不协调以及领导认为它的功能过于强大，所以该方案就被cut掉了，在网上查找了N多资料后，花费一天时间终于用uploadify + Jcrop + php 完整实现该功能，，特此mark一下！ 这套方案的思路是先用uploadify将图
2014-03-18 10:42:13
3463
转载 jsonp工作原理详解
JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的文档在同一域下的内容。JavaScript这个安全策略在进行多iframe或多窗口编程、以及Ajax
2014-03-11 10:12:31
1043
转载 前端性能优化--yahoo的23条军规
1. 减少HTTP请求次数 合并图片、CSS、JS，改进首次访问用户等待时间。 2. 使用CDN 就近缓存==>智能路由==>负载均衡==>WSA全站动态加速 3. 避免空的src和href 当link标签的href属性为空、script标签的src属性为空的时候，浏览器渲染的时候会把当前页面的URL作为它们的属性值，从而把页面的内容加载进来作为它们的值。测试 4. 为文件
2013-09-24 09:57:53
938
转载 cookie 和session 的区别详解
cookie 和session 的区别详解这些都是基础知识，不过有必要做深入了解。先简单介绍一下。二者的定义：当你在浏览网站的时候，WEB 服务器会先送一小小资料放在你的计算机上，Cookie 会帮你在网站上所打的文字或是一些选择，都纪录下来。当下次你再光临同一个网站，WEB 服务器会先看看有没有它上次留下的 Cookie 资料，有的话，就会依据 Cookie里的内容来判断
2013-07-31 08:41:10
510
转载 通过淘宝的一道面试题看变量的作用域
var a = 100; function testResult(){ var b = 2 * a;var a = 200; var c = a / 2;alert(b); alert(c); } testResult()输出的是什么呢？开始我觉得应该是; 200 和 100， 结果 确实NaN和100。为什么第一个会是N
2013-07-30 10:43:45
776
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人