pocojang

DOM Performance

• How the browser renders the document
  • Receives the data (bytes) from the server.
  • Parses and converts into tokens (<, TagName, Attribute, AttributeValue, >).
  • Turns tokens into nodes.
  • Turns nodes into the DOM tree.
• Builds CSSOM tree from the css rules.

pocojang

.next
__generated__

pocojang

// Engine
const React = {
  index: 0,
  state: [],
  useEffect: (callback, dependencies) => {
    const cachedIndex = React.index;
    const hasChanged = dependencies !== React.state[cachedIndex];
    if (dependencies === undefined || hasChanged) {
      callback();

pocojang

Project Title

One Paragraph of project description goes here

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites

pocojang

Commit Message Conventions

These rules are adopted from the AngularJS commit conventions.

• Goals
• Generating CHANGELOG.md
  • Recognizing unimportant commits
  • Provide more information when browsing the history
• Format of the commit message
• Subject line

pocojang

import { useState, useRef, useEffect, useCallback } from 'react';
import throttle from 'lodash/throttle';

const useDetectScrollEnd = (endPercent = 0.9) => {
  const scrollEnded = useRef(false);
  const [isScrollEnd, setIsScrollEnd] = useState(false);
  const handleScroll = useCallback(throttle(() => {
    const { scrollY, innerHeight } = window;
    const scrollPercent = (scrollY + innerHeight) / document.body.scrollHeight;

pocojang

for (var i = 1; i <= 9; i++) {
  for (var j = 1; j <= 9; j++) {
    console.log(i, 'X', j, '=', i * j);
  }
}

eachDan(7);
for (var i = 8; i <= 18; i += 2) eachDan(i);

printDan([3, 7, 9, 13]);

pocojang

var Html = function(){};
Html.prototype = new Renderer();

Html.prototype._init = function(){
    if(typeof this.completeLi !== 'undefined' && typeof this.progressLi !== 'undefined') {
        return;
    }

    this.progressLi = document.querySelector('#todo .progress li');
    this.completeLi = document.querySelector('#todo .complete li');

pocojang

var todo = (function(){
    var tasks = [];

    var addTask = (function(){
        var id = 0;
        return function(title){
            var result = id;
            tasks.push({id: id++, title: title, state: STATE.PROGRESS()});
            render();
            return result;