Giter VIP home page Giter VIP logo

web-problem's Introduction

前端点滴

记录学习中遇到的问题,记录成长


杂记-48 - 定时任务配置

简介:设置定时任务为每天凌晨2点执行和每小时执行一次?
作者:hazer、时间:2019-6-28



杂记-46 - node日志监控



杂记-44 - 一个等待动画


杂记-35 - 测试构建

简介:github readme自动生成工具
作者:hazer 、时间:2019-6-27


杂记-33 - flutter笔记




杂记-30 - webworker使用



杂记-28 - Vue




杂记-25 - web缓存


杂记-24 - 前端跨域解决






杂记-19 - 面试问题总结


杂记-18 - 获取运行环境



杂记-16 - cookie安全


杂记-15 - css基础


杂记-14 - 手写Promise



杂记-12 - BFC是什么?



杂记-10 - mv*介绍


杂记-09 - mqtt入门使用


杂记-08 - ssh免密登陆


杂记-07 - 页面解析渲染




杂记-04 - 数据结构


杂记-04-1 - 数据结构之数组


杂记-03 - 判断页面ready


简介:video方法和属性总结
作者:hazer、时间:2018-6-4


简介:xcode模拟器简单使用
作者:hazer 、时间:2018-6-2


个人订阅号(前端趣闻)

前端趣闻

web-problem's People

Contributors

mynane avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

web-problem's Issues

为什么vue不需要fiber

Vue 和 React 是两个不同的前端框架,它们在处理组件更新和渲染的方式有所不同,因此并不都需要类似于 React Fiber 的机制。

以下是一些原因解释为什么 Vue 没有采用类似于 React Fiber 的调度机制:

不同的渲染方式: Vue 使用的是基于依赖追踪的渲染机制,称为"响应式系统"。Vue通过追踪组件内部的数据依赖关系,当数据发生变化时,只重新渲染受影响的组件,而不需要像 React Fiber 那样将渲染过程分割成多个任务单元。

性能优化: Vue 的响应式系统和虚拟 DOM 组合在一起,可以在更新时进行一定程度的性能优化。Vue通过比对虚拟 DOM 树的变化来最小化实际的 DOM 操作,这种方式在许多情况下能够提供足够的性能。

异步更新控制: Vue 提供了异步更新控制机制,允许您明确控制何时触发组件更新。这种方式可以避免不必要的渲染和优化性能。

单线程执行: Vue 使用单线程的方式执行渲染和更新操作,这使得它更容易理解和调试。React Fiber 引入了多任务和任务优先级的概念,使得框架的复杂性增加。

尽管 Vue 和 React 采用了不同的渲染和更新机制,但它们都致力于提供高性能和响应性的用户界面。每个框架都有其独特的设计理念和适用场景,选择使用哪个框架通常取决于项目需求和开发团队的偏好。因此,并不是每个框架都需要类似于 React Fiber 的调度机制,而是根据框架的设计和目标来选择适当的优化方法。

第十八期《vue.nextTick实现》

/* @flow */
/* globals MessageChannel */

import { noop } from 'shared/util'
import { handleError } from './error'
import { isIOS, isNative } from './env'

const callbacks = []
let pending = false

function flushCallbacks () {
  pending = false
  const copies = callbacks.slice(0)
  callbacks.length = 0
  for (let i = 0; i < copies.length; i++) {
    copies[i]()
  }
}

// Here we have async deferring wrappers using both microtasks and (macro) tasks.
// In < 2.4 we used microtasks everywhere, but there are some scenarios where
// microtasks have too high a priority and fire in between supposedly
// sequential events (e.g. #4521, #6690) or even between bubbling of the same
// event (#6566). However, using (macro) tasks everywhere also has subtle problems
// when state is changed right before repaint (e.g. #6813, out-in transitions).
// Here we use microtask by default, but expose a way to force (macro) task when
// needed (e.g. in event handlers attached by v-on).
let microTimerFunc
let macroTimerFunc
let useMacroTask = false

// Determine (macro) task defer implementation.
// Technically setImmediate should be the ideal choice, but it's only available
// in IE. The only polyfill that consistently queues the callback after all DOM
// events triggered in the same loop is by using MessageChannel.
/* istanbul ignore if */
if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
  macroTimerFunc = () => {
    setImmediate(flushCallbacks)
  }
} else if (typeof MessageChannel !== 'undefined' && (
  isNative(MessageChannel) ||
  // PhantomJS
  MessageChannel.toString() === '[object MessageChannelConstructor]'
)) {
  const channel = new MessageChannel()
  const port = channel.port2
  channel.port1.onmessage = flushCallbacks
  macroTimerFunc = () => {
    port.postMessage(1)
  }
} else {
  /* istanbul ignore next */
  macroTimerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}

// Determine microtask defer implementation.
/* istanbul ignore next, $flow-disable-line */
if (typeof Promise !== 'undefined' && isNative(Promise)) {
  const p = Promise.resolve()
  microTimerFunc = () => {
    p.then(flushCallbacks)
    // in problematic UIWebViews, Promise.then doesn't completely break, but
    // it can get stuck in a weird state where callbacks are pushed into the
    // microtask queue but the queue isn't being flushed, until the browser
    // needs to do some other work, e.g. handle a timer. Therefore we can
    // "force" the microtask queue to be flushed by adding an empty timer.
    if (isIOS) setTimeout(noop)
  }
} else {
  // fallback to macro
  microTimerFunc = macroTimerFunc
}

/**
 * Wrap a function so that if any code inside triggers state change,
 * the changes are queued using a (macro) task instead of a microtask.
 */
export function withMacroTask (fn: Function): Function {
  return fn._withTask || (fn._withTask = function () {
    useMacroTask = true
    const res = fn.apply(null, arguments)
    useMacroTask = false
    return res
  })
}

export function nextTick (cb?: Function, ctx?: Object) {
  let _resolve
  callbacks.push(() => {
    if (cb) {
      try {
        cb.call(ctx)
      } catch (e) {
        handleError(e, ctx, 'nextTick')
      }
    } else if (_resolve) {
      _resolve(ctx)
    }
  })
  if (!pending) {
    pending = true
    if (useMacroTask) {
      macroTimerFunc()
    } else {
      microTimerFunc()
    }
  }
  // $flow-disable-line
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}

数据结构/算法

相关讲解细分:

数据结构:列表、栈、队列、链表、字典、散列、图和二叉查找树

排序算法:冒牌排序、选择排序、插入排序、希尔排序、归并排序和快速排序

查找算法:顺序查找和二分查找

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.