blog
blog copied to clipboard
Godiswill
【大前端】分享记录
# 前端极致性能优化手册大全 [原文链接](https://github.com/Godiswill/blog/issues/15) 前端优化之路必不可少的知识点。 - 浏览器输入url到页面的展现，具体发生了些什么，前端能做哪些优化 1. DNS 递归查询解析 —— DNS优化prefetch； 1. TCP 三次握手、四次挥手 —— http1.0/1.1/2.0 的区别，http/s的区别； 1. http 缓存 —— 304 与 CDN； 1. 浏览器渲染机制 —— CSS、JS顺序的重要性，@import的损耗，防抖、节流、重排、重绘，GPU加速等； 1. 如何优化JS主线程...
# redux 源码分析 [原文链接](https://github.com/Godiswill/blog/issues/23) ## 简介 > Redux 是 JavaScript 状态容器，提供可预测化的状态管理。 ### 三大原则 1. 单一数据源，创建一个 Redux store 来以存放应用中所有的 state。应用中应有且仅有一个 store。 1. State 是只读的，唯一改变 state 的方法就是触发 action，action.type 作为逻辑说明。 1. 使用纯函数来执行修改，reducers 来描述...
# 前端监控性能指标 [原文链接](https://github.com/Godiswill/blog/issues/19) ## 性能指标  ### 阶段性指标 | 字段 | 描述 | 计算方式 | 备注 | | -- | --- | ---- | -- | | unload | 前一个页面卸载耗时...
# koa 源码分析 [原文链接](https://github.com/Godiswill/blog/issues/22) ## 简介 koa 是由 Express 原班人马打造的，相比 Express 的大而全，koa 致力于成为一个更小、更富有表现力、更健壮的 Web 框架，适合作为 web 服务框架的基石。 koa1 通过组合不同的 generator，可以避免嵌套地狱，并极大地提升错误处理的效率。koa2 使用了最新的 `async await` generator 语法糖，使得开发更高效。 koa 不在内核方法中绑定任何中间件，但确很轻易集成中间件，只需要 use 方法传入一个中间件函数，就能方便获取请求响应等上下文信息和下一个中间件，使得中间件的使用井然有序。 ##...
# CSS 布局 [原文链接](https://github.com/Godiswill/blog/issues/21) 设置背景样式，便于观察。 ```css .left { background-color: red; } .right { background-color: green; } .middle { background-color: palegreen; } ``` ## 两栏布局 左列定宽，右列自适应 ### float ```html left right...
# 如何构建 60FPS 应用 [原文链接](https://github.com/Godiswill/blog/issues/5) ## 前言 本文是对谷歌工程师公开课的总结，非常有价值，建议去学习。 ## 渲染生命周期 - 渲染管道流  - 浏览器默认样式、外联样式、内联样式与 DOM 属性样式根据优先级解析，确定 DOM 节点最终的样式形成 Render Tree 的过程，称之为 `Recalculate Styles` 。  - 只有可见元素才会出现在渲染树中，注意可见的含义，例如 ```CSS...
# JS基础手写代码 [原文链接](https://github.com/Godiswill/blog/issues/20) ## 考查 this ### call、apply ```javascript Function.prototype._call = function(ctx = window, ...args) { const fnKey = 'tmp_' + Date.now(); ctx[fnKey] = this; const result = ctx[fnKey](...args); delete...
# 防抖debounce 与 节流throttle [原文链接](https://github.com/Godiswill/blog/issues/12) ## 前言 一般对于监听某些密集型键盘、鼠标、手势事件需要和后端请求交互、修改 `dom` 的，防抖、节流就很有必要了。 ## 防抖 ### 使用场景 - 关键字远程搜索下拉框 - resize 对于这类操作，一般希望拿到用户最终输入的关键字、确定的拖拽大小，然后与服务器交互。 而中间态的值，并不关心，为了减轻服务器压力，避免服务器资源浪费，这时就需要防抖了。 ### 案例 - 输入框防抖 ```javascript // 记录时间 let last =...
# 关键路径渲染优化 [原文链接](https://github.com/Godiswill/blog/issues/1) ## 什么是优化关键路径 - 优化关键路径的就是尽早尽快加载解析与首屏相关的 JS、CSS，也就是常说的尽量减少白屏、灰屏时间和减少用户可交互时间。  - 好的页面交互，即使是在服务器处理或是资源还未完全返回期间，也应该尽量渲染部分信息给用户，而不是让用户明显感知过长白屏时间，以为页面卡死。例如Google时，在服务器处理搜索时及时渲染局部信息，而后逐步显示完整信息。 - 白屏 -> 灰屏渲染根节点(body设置了灰色的样式) -> FCP 渲染 body 内有意义的内容，如页头 -> FMP DOM节点增加最陡峭的那个点 -> 用户可交互 -> 资源加载完毕。  - 接下来，主要研究下从获取页面到渲染浏览器私底下都做了哪些东西。如下图，HTML解析成DOM树，JS可能生成或编辑DOM和编辑CSSOM，然后组成渲染树渲染在屏幕上。...
# 源码分析：react hook 最佳实践 [原文链接](https://github.com/Godiswill/blog/issues/18) ## 前言 本文从 `mini React` —— `Preact` 源码的角度，分析 `React Hook` 各个 `API` 的优点缺点。 从而理解为什么要用 `hook`，以及如何最佳使用。 ## 2条规则 ### 为什么？ 1. ✅只在最顶层使用 Hook，不要在循环，条件或嵌套函数中调用 Hook； 2. ✅只在...