dushaobindoudou

1. rust

2. webgl shader

3. nextjs

4. truffle

5. web performance

dushaobindoudou

picture 元素

浏览器已经支持 picture 元素，该元素与img的最大不同是可以根据媒体查询展示不同尺寸的图片，对响应式布局非常有用，目前浏览器支持情况良好， picture包含source字段 和 img字段，如果能匹配到source的媒体查询则，使用 source 的 srcset 字段，否则使用默认图片

例如：

<picture>
 

dushaobindoudou

requestIdleCallback 记录

requestAnimationFrame 可以规划动画，最大化60fps的机会

requestIdleCallback 当一帧结束的空闲时间或者非活动状态来调度任务，我们不妨碍用户的情况下执行任务, ie、safari不支持，safari可以手动开启

找出浏览器处于非交互状态是很难的，需要绑定很多用户事件，或者使用requestAnimationFrame来计算，使用requestIdleCallback可以明确的返回 一个用户非交互状态的回调

怎么使用

dushaobindoudou

javascript Proxy 对象

Proxy API

var p = new Proxy(target, handler);

• has 捕获in操作 可以做属性隐藏
• get 捕获获取属性值，，例如：如果属性不存在可以返回默认值
• set 捕获设置属性值， 例如：可以做设置验证
• apply 捕获函数调用， 例如：可以自动补充try catch

dushaobindoudou

提要

文章主要包括工具选择、文件结构、组件拆分

工具选择

1. webpack5 是应该选择的，文档简单易懂，配置简单
2. babel 编译js代码包括jsx
3. webpack-dev-server 本地开发
4. 全部使用 ES Modules 模块（rollup也能完美支持）

dushaobindoudou

Keybase proof

I hereby claim:

• I am dushaobindoudou on github.
• I am dushaobin (https://keybase.io/dushaobin) on keybase.
• I have a public key ASBLoFXP-B-fUiez4Ah6Hzfsd3JS3aAa_GyKdMXxe1X9kAo

To claim this, I am signing this object:

dushaobindoudou

{"0.3676732489839196":"-----BEGIN PGP PUBLIC KEY BLOCK-----\r\nCharset: UTF-8\r\n\r\nxv8AAABSBAAAAAATCCqGSM49AwEHAgMEUKJ/tHnPaGPMHKSxGJOVNITrNU0kTZku\r\ndN2RoU69a6TzMsPmkXF6fSNTNK3Nsi5HJReDUCJ2rvNqn3rlCgK+Zs3/AAAACDxn\r\naXRodWI+wv8AAACNBBATCAA//wAAAAWCVqmtXf8AAAACiwn/AAAACZBH0wXeLSDJ\r\n1/8AAAAFlQgJCgv/AAAAA5YBAv8AAAACmwP/AAAAAp4BAAAQ5AEAkFx1CjUDpzxi\r\njTd7HOWnOvE0kK25X3ztBuBthV7XpYEBAJpfSffqVJjxBiQNob3fjalHAWXIxU92\r\n6em9abWr+nmLzv8AAABWBAAAAAASCCqGSM49AwEHAgMEGgMQDvBctWJ62MCaoPMW\r\nBszd6JiObMX0BeGjJPFPBN58yE7uJBKzs4DEdR2FFHoMTA7wTuK/GCFthEXidbA2\r\nkAMBCAfC/wAAAG0EGBMIAB//AAAABYJWqa1d/wAAAAmQR9MF3i0gydf/AAAAApsM\r\nAAAVBAD/ZlB3G15c/eUVOPikaOa878n1bkTspkF5IfKL7avHr/0BAMIS9InxwjlM\r\n+To+/IGR32H8i4jPsIMEnlPWmN6uh4oP\r\n=fSF9\r\n-----END PGP PUBLIC KEY BLOCK-----\r\n","0.15863913320936263":"-----BEGIN PGP PUBLIC KEY BLOCK-----\r\nCharset: UTF-8\r\n\r\nxv8AAABSBAAAAAATCCqGSM49AwEHAgMEUKJ/tHnPaGPMHKSxGJOVNITrNU0kTZku\r\ndN2RoU69a6TzMsPmkXF6fSNTNK3Nsi5HJReDUCJ2rvNqn3rlCgK+Zs3/AAAACDxn\r\naXRodWI+wv8AAACNBBATC

dushaobindoudou

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout. This is also called reflow or layout thrashing, and is common performance bottleneck.

Element

Box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
• elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
• elem.getClientRects(), elem.getBoundingClientRect()

dushaobindoudou

Frontend Development

Attention: the list was moved to

https://github.com/dypsilon/frontend-dev-bookmarks

This page is not maintained anymore, please update your bookmarks.

---