Rynes

发表于 更新于 分类于 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var obj = {
  a: 1,
  b: 2
};
Object.defineProperty(obj, "method", {
  value: function () {
    alert("Non enumerable property");
  },
  enumerable: false
});

console.log(Object.keys(obj));
// ["a", "b"]
console.log(Reflect.ownKeys(obj));
// ["a", "b", "method"]

从结果上看出

Object.keys() 返回属性 key，但不包括不可枚举的属性
Reflect.ownKeys() 返回所有属性 key

Object.keys()

相当于返回属性数组

阅读全文 »

发表于 更新于 分类于

什么是首屏加载

首屏时间（First Contentful Paint），指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但需要展示当前视窗需要的内容

首屏加载可以说是用户体验中最重要的环节

关于计算首屏时间

通过 DOMContentLoad 或者 performance 来计算出首屏时间

阅读全文 »

发表于 更新于 分类于

diff（翻译差异）：计算一棵树形结构转换成另一棵树形结构的最少操作

  1. 把树形结构按照层级分解，只比较同级元素
  2. 给列表结构的每个单元添加唯一的 key 属性，方便比较
  3. react 只会匹配相同 class 的 component（这里面的 class 指的是组件的名字）
  4. 合并操作，调用 component 的 setState 方法的时候, react 将其标记为 dirty.到每一个事件循环结束, react 检查所有标记 dirty 的 component 重新绘制
  5. 选择性子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能

发表于 更新于 分类于
  • 减少 render 方法的调用
  • 避免使用状态提升来共享 state,此时应该使用 redux 解决方案
  • 保持稳定的 dom 结构，尽量避免 dom 节点跨层级移动操作
  • 使用 css 来隐藏节点，而不是真的移除或添加 DOM 节点等

发表于 更新于 分类于

  1. setState 只在合成事件（react 为了解决跨平台，兼容性问题，自己封装了一套事件机 制，代理了原生的事件，像在 jsx 中常见的 onClick、onChange 这些都是合成事件）和钩子函 数（生命周期）中是“异步”的，在原生事件和 setTimeout 中都是同步的

  2. setState 的“异步”并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的，只是合成事件和钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立 马拿到更新后的值，形式了所谓的“异步”，当然可以通过第二个参数setState(partialState,callback)中的 callback 拿到更新后的结果

  3. setState 的批量更新优化也是建立在“异步”（合成事件、钩子函数）之上的，在原生事件和 setTimeout 中不会批量更新，在“异步”中如果对同一个值进行多次 setState，setState 的批量更新策略会对其进行覆盖，取最后一次的执行，如果是同时 setState 多个不同的值，在更新时会对其进行合并批量更新

发表于 更新于 分类于

什么是长缓存

浏览器在用户访问页面的时候，为了加快加载速度，会对用户访问的静态资源进行存储，但是每一次代码升级或者更新，都需要浏览器去下载新的代码，最方便和最简单的更新方式就是引入新的文件名称

具体实现

在 webpack 中，可以在 output 给出输出的文件制定 chunkhash，并且分离经常更新的代码和框架代码，通过 NameModulesPlugin 或者 HashedModulesPlugin 使再次打包文件名 不变

发表于 更新于 分类于

动态组件

1
<component :is="componentName"></component>

componentName 可以是在本页面已经注册的局部组件名和全局组件名，也可以是一个组件的选项对象。 当控制 componentName 改变时就可以动态切换选择组件

is 的用法

有些 HTML 元素，诸如 <ul>、<ol>、<table>和<select>，对于哪些元素可以出现在其内部是有严格限制的 而有些 HTML 元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部

阅读全文 »

发表于 更新于 分类于 
1
2
3
4
5
6
7
8
9
10
11
12
13
function calcBit(str) {
  if (!arguments.length || !str) return null;
  if ("" == str) return 0;
  var num = 0;
  for (var i = 0; i < str.length; i++) {
    if (str.charCodeAt(i) > 255) {
      // 汉字的 uniCode 码大于 255bit 就是两个字节
      num += 2;
    } else num += 1; // charCodeAt() 得到的是 uniCode 码
  }

  console.log(num);
}

发表于 更新于 分类于
  1. Js 构造函数：
1
2
3
4
5
6
7
8
9
function MathHandle(x, y) {
  this.x = x;
  this.y = y;
}
MathHandle.prototype.add = function () {
  return this.x + this.y;
};
var m = new MathHandle(1, 2);
console.log(m.add());
  1. class 基本语法：
1
2
3
4
5
6
7
8
9
10
11
class MathHandle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  add() {
    return this.x + this.y;
  }
}
const m = new MathHandle(1, 2);
console.log(m.add());

语法糖：
在上述两段代码中分别加入如下代码，运行

阅读全文 »

发表于 更新于 分类于

服务端渲染：页面渲染过程是在服务端完成，最终的 HTML 字符串，直接通过请求发送给客户端。
客户端渲染：客户端请求页面时，返回是空 HTML，通过请求完 js，css 等，在客户端进行渲染（浏览器）。

客户端渲染和传统服务端渲染的问题

  • SPA 应用有两个非常明显的问题
    • 首屏渲染慢
    • 不利于 SEO
  • 传统的服务端渲染又存在
    • 应用的前后端部分完全耦合在一起，在前后端协同开发方面会有非常大的阻力；
    • 前端没有足够的发挥空间，无法充分利用现在前端生态下的一些更优秀的方案；
    • 由于内容都是在服务端动态生成的，所以服务端的压力较大；
    • 相比目前流行的 SPA 应用来说，用户体验一般。

客户端渲染

阅读全文 »