一年Node.js开发开发经验总结

2020-08-09
阅读 4 分钟
8k
不知不觉的,写Node.js已经一年了。不同于最开始的demo、本地工具等,这一年里,都是用Node.js写的线上业务。从一开始的Node.js同构直出,到最近的Node接入层,也算是对Node开发入门了吧。目前,我一个人维护了大部分组内流传下来的Node服务,包括内部系统和线上服务。新增的后台服务,也是尽可能地使用Node进行开发。本...

【译】深入了解V8

2020-07-25
阅读 5 分钟
3.1k
官方文档指出:V8是谷歌开源高性能JavaScript和WebAssembly引擎,用C++编写。它主要用在Chrome和Node.js中,等等。

从JS中的内存管理说起 —— JS中的弱引用

2020-07-22
阅读 6 分钟
4.8k
在所有的编程语言中,我们声明一个变量时,需要系统为我们分配一块内存。当我们不再需要这个变量时,需要将内存进行回收(这个过程称之为垃圾回收)。在C语言中,有malloc和free来协助我们进行内存管理。在JS中,开发者不需要手动进行内存管理,JS引擎会为我们自动做这些事情。但是,这并不意味着我们在使用JS进行编码时...

Safari 14 来了,它还有机会吗?

2020-07-08
阅读 5 分钟
3k
前不久,Apple 的 WWDC20给我们带来了不小的惊喜。Safari 浏览器将迎来大版本更新。作为一个Web Developer,我观看了Apple的官方介绍视频。本文就根据视频,简单说一说Safari 14到底为Web开发者带来了哪些优化和新特性。

如何优雅的处理前端开发中的File

2020-06-22
阅读 5 分钟
6.2k
在前端开发中,我们经常会遇到对文件的操作,特别是对图片的操作。在Node端,提供了file相关的接口,供我们使用。在浏览器中,Html5提供了File相关的Web Api。

Chrome浏览器支持直接读写本地文件了

2020-06-10
阅读 3 分钟
15.3k
开启方法:Chrome浏览器升级到83版本以上;访问chrome://flags/,开启 Native File System API 选项

全新的JavaScript runtime —— Deno 初体验

2020-05-19
阅读 8 分钟
3.9k
2020年5月13日,Deno终于正式发布了。Deno是基于V8 JavaScript引擎和Rust编程语言的JavaScript和TypeScript运行时。它是由Node.js之父Ryan Dahl创建的,专注于安全性和生产力。

一步一步解析前端路由

2020-05-17
阅读 8 分钟
2.6k
现在的前端应用很多都是单页应用。路由对于单页应用来说,是一个重要的组成部分。本系列文章将讲解前端路由的实现原理。这是系列文章的第三篇:React-Router源码解析。

React Hook源码解析(三)

2020-04-10
阅读 2 分钟
3.1k
本文首发于公众号:符合预期的CoyPan 写在前面 前两篇文章,深入了Hook的源码。本文将以useState和useEffect为主,总结一下Hook的相关内容, 先贴出示例代码: {代码...} 组件初次挂载 组件首次挂载的时候,依次执行四行useXXX的代码,生成4个hook对象,按照顺序形成完整的hook链,挂载在Fiber对象的memorizedState属性...

React Hook源码解析(二)

2020-04-01
阅读 8 分钟
3.3k
主要分析了Hook在React中是如何保存的,以及Hook的更新过程。本文中,我们将通过下面两个问题,继续深入研究Hook,以弥补上文中略过的一些细节。

React Hook源码解析(一)

2020-03-26
阅读 7 分钟
4.6k
React Hook已经正式发布了一段时间了。我在项目中也进行过尝试,一个很直观的感受:写起来很爽。但是一直没有深入了解过其实现原理。本文将尝试从源码层面,了解React hooks的原理。本文所指的React版本为:v16.12.0

V8引擎的内存管理

2020-02-18
阅读 6 分钟
5.4k
这是一篇译文,有部分删减原文地址:[链接] 原文标题:Visualizing memory management in V8 Engine (JavaScript, NodeJS, Deno, WebAssembly)

作为一名前端工程师,说一说我眼里的用户增长

2020-01-13
阅读 4 分钟
3.2k
2016年毕业后至今,我做了大概3年的用户增长业务。由于换团队了,和用户增长终于要告一段落了。不完全总结一下这几年做用户增长的一些用户体会吧,也算是对自己过去三年一项重要工作的总结。

【译】React团队的技术准则

2020-01-06
阅读 3 分钟
6.3k
我React团队工作的这段时间,很幸运能够看见 Jordan、Sebastian、Sophie 和其他团队成员是如何解决问题的。在本文中,我会把从他们身上学到的,浓缩为一篇较高层次的技术准则。这些准则未必详细。它们都是我对React团队的观察和整理 —— 其他团队成员或许有其他的观点。

使用Pull模型来实现前端的业务逻辑

2019-12-31
阅读 2 分钟
1.8k
写在前面 最近在总结自己在业务开发中遇到的问题,经过思考,发现了一个可能值得总结一下的点:使用Pull模型来实现业务逻辑。 背景 先不管什么是Pull模型,我们先来看下面的场景: 有一个异步操作A,A完成后,需要根据A返回的结果,再进行下一步的业务逻辑。 一种很常见的实现方式是: {代码...} 这种实现方式没有什么大...

Node.js v13.2.0 开始支持ES modules了

2019-11-25
阅读 3 分钟
5.6k
Node.js 前不久发布了v13.2.0,宣布开始支持ES modules。在此之前,想要在node中使用ES modules,需要添加--experimental-module。v13.2.0版本后,可以直接使用ES modules了。

使用rush.js管理monorepo

2019-10-26
阅读 3 分钟
9.1k
2019年9月21号,我参加了第五届FEDAY。在会上,听了王泽老师的分享,我第一次接触到了monorepo这个概念。本文是结合王泽老师的分享,自己进行一定实践后的总结。

【译】JavaScript和TypeScript中的void

2019-10-10
阅读 2 分钟
2.7k
void在JavaScript中作为运算符存在,在TypeScript中作为基本类型存在。在JS和TS中,void的用法和大多数人习惯的有所不同。

【译】JavaScript工作原理:V8编译器的优化

2019-10-07
阅读 5 分钟
3.1k
原文链接:[链接]原文标题:How JavaScript works: Optimizing the V8 compiler for efficiency 本文首发于公众号:符合预期的CoyPan

使用CSS实现图片帧动画与曲线运动

2019-09-22
阅读 3 分钟
4.1k
本文首发于公众号:符合预期的CoyPan 写在前面 在前端开发中,提到动画,我们可以: 直接利用DOM实现动画。 利用canvas实现动画。 利用svg实现动画。 直接用一张gif动图。 利用图片实现帧动画。 ... 所有动画的基本原理都是:在短时间内连续依次展示对应的图片,这样在视觉上看起来就是'动'的了。 本文主要来说一说第4点...

【译】 JavaScript中按位操作符的有趣应用

2019-08-21
阅读 13 分钟
2.2k
原文标题:Interesting use cases for JavaScript bitwise operators原文地址:[链接] 本文首发于公众号:符合预期的CoyPan

你可能不知道的LocalStorage用法

2019-08-13
阅读 3 分钟
9.2k
写在前面 本文首发于公众号:符合预期的CoyPan 上周在看关于react-redux的一个在线ppt时,偶然发现了一个现象: 如果我开两个浏览器tab,同时访问这个页面,我在其中一个页面切换ppt,另外一个页面会跟着变化。链接在这里: [链接] 效果如下: 研究了一下,这个效果其实就是用localStorage来实现的。 localStorage基本知...

浏览器什么时候会发起网络请求,去加载一张图片?

2019-07-23
阅读 3 分钟
4.1k
写在前面 本文首发于公众号:符合预期的CoyPan 浏览器在什么时候会去加载一张图片呢?当然是我们网页中有图片的时候。在平时的项目开发中,我们还常常会用图片进行日志上报,大概像下面这样: {代码...} 新建一个Image,将其src赋值,浏览器便会发出一个网络请求。 再来考虑一下下面的代码: {代码...} 上面的代码会发起...

内联JavaScript应该放在HTML的哪个位置

2019-07-23
阅读 4 分钟
9.7k
内联JavaScript在现在的前端项目中是比较常见的,比如一些全局函数,全局统计逻辑等,我们可能会以内联JavaScript的方式写在HTML里。那么,内联JavaScript最好应该放在哪里呢?

网页首屏性能优化总结

2019-07-17
阅读 2 分钟
5.5k
网页是运行在浏览器端的,优化网页性能无法脱离浏览器。所以首先需要搞清楚浏览器加载一个网页的过程。最经典、常见的一个问题就是:从输入Url到网页呈现在用户面前,到底发生了什么。这里面最重要的两个点:网络请求过程以及浏览器的工作原理(主要是渲染原理)。搞清楚这两个点,我们才有了优化的理论基础。

从浏览器渲染原理,说一说如何实现高效的动画

2019-07-09
阅读 7 分钟
3.1k
写在前面 在平时的工作中,页面的动画效果是很常见的需求。那么,怎么样实现一个高效的动画呢? 本文首发于公众号:符合预期的CoyPan注,本文谈到的浏览器,均为基于Chromium的现代浏览器。 页面渲染原理 一个页面展示在用户面前,简单来说,会经历以上5个步骤。我们可以把上面这个图称为像素管道。 Javascript: 执行js...

客户端内H5页面的首屏性能优化

2019-06-26
阅读 3 分钟
5.4k
信息流App是当下最流行的产品之一,如今日头条等。我所在的团队也是在做这样一款信息流App。App的Feed流是客户端Native实现的。用户点击Feed流中的文章后,会进入到文章底层页。文章底层页大部分都是Native实现的,但是有一些文章的数据是非结构化的,Native没有办法很好地处理,所以用H5页面来承接这部分文章。整个业务...

【译】2019年,如何设计Web页面

2019-06-17
阅读 3 分钟
2.3k
写在前面 原文标题:How to Design for the Web in 2019原文地址:[链接] 本文首发于公众号:符合预期的CoyPan 正文 我曾经写过关于如何在2018年设计Web页面的文章,但是网络发展得很快,所以随着越来越多的现代公约成为主流,这些指导方针已经过时了。 让我们来分解并讨论一下2019年为现代网络设计的最重要的设计原则。...

<link>标签的几个用法,帮助提高页面性能

2019-06-03
阅读 4 分钟
6.7k
写在前面 本文首发于公众号:符合预期的CoyPan HTML 中&lt;link&gt;元素规定了外部资源与当前文档的关系。最常见的用法,是用来链接一个外部的样式表,比如: {代码...} link标签还能做一些其他的事情,来帮助我们提高页面性能。 link标签的使用 来看一下link标签除了链接外部样式表之外的一些使用场景。 DNS Prefetch D...

【译】使用"BinaryAST"加快JavaScript脚本的解析速度?

2019-05-30
阅读 5 分钟
2.8k
web应用的表现,越来越受制于启动时间。我们已经习惯于使用大量的JavaScript代码来开发丰富的web交互体验。从HTTPArchive上,我们可以看到,一个移动设备平均会加载350KB的JavaSript代码,10%的页面会加载超过1MB的JavaScipt代码。复杂的交互会使得这个数字越来越高。