GithubHelp home page GithubHelp logo

awesome's Introduction

awesome

TODO

react 源码

  1. React技术揭秘

前端基础

  1. 前端基础相关

前端性能优化

  1. 前端性能优化之旅
  2. 雅虎前端优化35条规则翻译
  1. 蚂蚁金融科技qiankuan 简介
  2. qiankun 微前端原理与实践
  3. icestark

SSR

  1. Next.js
  2. egg-react-ssr

英语

  1. 薄冰英语语法
  2. 解谜英语语法

数据结构与算法

  1. 手把手撕LeetCode题目,扒各种算法套路的裤子。English version supported! Crack LeetCode, not only how, but also why. https://labuladong.gitbook.io/algo/

git

  1. git reset soft,hard,mixed之区别深解

node

  1. 入理解Node.js:核心**与源码分析
  2. 深入学习 Node.js
  3. 如何通过饿了么 Node.js 面试
  4. 网易云音乐 API
  5. 通过源码分析nodejs原理
  6. Node.js 源码剖析

node 实战

  1. node-elm
  2. NodeWk
  3. awesome-nestjs

serverless

  1. midway

go

  1. Go 可比较类型

Java

  1. Java8
  2. Spring Boot Demo 是一个用来深度学习并实战 spring boot 的项目

c++

  1. C++ 资源大全中文版
  2. libuv
  3. C++ Standard Library
  4. libuv中文教程
  5. c-ares 异步 DNS 请求库
  6. calculator
  7. MyTinySTL

deno

  1. 《Deno进阶开发笔记》

跨端

  1. react-native
  2. flutter
  3. 一款跨平台的开源Github客户端App
  4. flutter 豆瓣

Svg & Canvans

  1. 百度脑图
  2. D3
  3. HTML canvas框架汇总

技术面试必备基础知识、Leetcode、计算机操作系统、计算机网络、系统设计、Java、Python、C++ 中华新华字典数据库和 API GitHub中文排行榜,帮助你发现高分优秀中文项目

ASP.NET Core awesome-dotnet-core中文版

awesome's People

Contributors

yangw0223 avatar

Stargazers

 avatar  avatar

Watchers

 avatar

awesome's Issues

React 实现原理

JS 是单线程的,浏览器是多线程的,除了 JS 线程以外,还包括 UI 渲染线程、事件线程、定时器触发线程、HTTP 请求线程等等。JS 线程是可以操作 DOM 的,如果在操作 DOM 的同时 UI 线程也在进行渲染的话,就会发生不可预期的展示结果,因此 JS 线程与 UI 渲染线程是互斥的,每当 JS 线程执行时,UI 渲染线程会挂起,UI 更新会被保存在队列中,等待 JS 线程空闲后立即被执行。对于事件线程而言,当一个事件被触发时该线程会把事件添加到队列末尾,等待 JS 线程空闲后处理。因此,长时间的 JS 持续执行,就会造成 UI 渲染线程长时间地挂起,触发的事件也得不到响应,用户层面就会感知到页面卡顿甚至卡死了,Sync 模式下的问题就由此引起。

那么 JS 执行时间多久会是合理的呢?这里就需要提到帧率了,大多数设备的帧率为 60 次/秒,也就是每帧消耗 16.67 ms 能让用户感觉到相当流畅。浏览器的一帧中包含如下图过程:

异步可中断更新可以理解为:更新在执行过程中可能会被打断(浏览器时间分片用尽或有更高优任务插队),当可以继续执行时恢复之前执行的中间状态。

react filber 主要实现了可中断的异步更新.

  • Scheduler(调度器)—— 调度任务的优先级,高优任务优先进入Reconciler
  • Reconciler(协调器)—— 负责找出变化的组件
  • Renderer(渲染器)—— 负责将变化的组件渲染到页面上

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.