liuyib

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.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

liuyib

import { useLayoutEffect, useCallback, useState } from 'react'

export const useRect = (ref) => {
  const [rect, setRect] = useState(getRect(ref ? ref.current : null))

  const handleResize = useCallback(() => {
    if (!ref.current) {
      return
    }

liuyib

<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="date=no">
<meta name="format-detection" content="address=no">
<meta name="format-detection" content="email=no">

liuyib

var ajax = function (options) {
  var method = options.method;
  var url = options.url;
  var body = options.body;
  var headers = options.headers;
  var fnSucc = options.fnSucc;
  var fnFail = options.fnFail;

  var xhr = new XMLHttpRequest();

liuyib

// =============== production ===============
// See: https://github.com/js-cookie/js-cookie

// =============== development ===============
/**
 * 设置 Cookie
 *
 * @param {string} key 键
 * @param {string} value 值
 * @param {number} expire 过期时间（单位：天）

liuyib

/**
 * 判断是否是字符串
 *
 * @param {*} val 待判断的值
 * @returns {boolean} 是：true，不是：false
 */
function isString(val) {
  return typeof val === 'string';
}

liuyib

<!-- 1 * 1 像素的透明 gif 图片 -->
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">

<!-- 1 * 1 像素（#000000） -->
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=">

<!-- 1 * 1 像素（#f2f2f2） -->
data:image/gif;base64,R0lGODlhAQABAPAAAPLy8gAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==

liuyib

'use strict';

module.exports = {

  types: [
    {
      value: 'WIP',
      name : '💪  WIP:      Work in progress'
    },
    {