你的高效来自于对精力的管理,而非时间

今年读书的时间并不多,都是非常零散的,以前读过了就是读过了,有时对一些书中的观点也会有些许共鸣,但过去了,啥都没有留下。所以,准备在这以后把自己读的书,做一些简单的记录,顺便算是对读的东西做个总结。总结是个好东西,现在越来越觉得,自己的脑子里都是点的概念,线的印象都少,面就更不用说 – 而面是在点之上最有价值的,也是自己一笔一笔画出来的,总结就是这个过程。

我们日常听到最多的是时间管理,不信你可以看看市面上充满了各种提醒和TODO的应用。这没有什么错误,毕竟时间有限,但到了这个时间点你真的能把这个事情能做好吗?比如,早晨10点有个重要的会议,但会议持续4个小时之久,你能认真听这个会议多久?再比如,我们下午4点的时候突然会感觉身体被掏空,工作突然效率异常低效,这又为什么呢?因为我们的精力耗尽,我们该补充“弹药”了!

《精力管理》的核心观点:精力,而非时间,是高效能的基础!

要想全方位投入,我们必须在体能上精力充沛,在感情上相互联系,在思想上集中,在精神上和超越我们眼前私利的目的保持一致。

Read More

async和defer之间的差异

  1. 没有 defer 或 async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行
  2. 有 defer,加载后续文档元素的过程将和 script.js 的加载并行进行(异步),但是 script.js 的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成
  3. 有 async,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步)

蓝色线代表网络读取,红色线代表执行时间,这俩都是针对脚本的;绿色线代表 HTML 解析

Read More

TypeScript Learning 3 - 接口初探

接口就是对值所具有的数据结构的一种约束,有了这种约束,ts才能对值的相应类型做相应的检查。这种约束主要针对的是对象、函数、类等。

接口在运行时的影响为0

接口初探

1
2
3
4
interface Person {
name: string
age: number
}

上面便是定义了一个接口Person,它约束了凡是类型为Person的值,都应该有string类型的namenumber类型的age

接口名第一个字母一般都位大写

Read More

TypeScript Learning 2 - 打个照面

TypeScript是JavaScript的超集,涵盖了JS的所有的语法和语义,最大作用就是进行静态类型检查,配合相应的编辑器能够进行更好的静态分析,所以TS的学习一大部分就是学习怎么限定开发中相应的类型

ES6和TS的数据类型比较

ES6拥有的数据类型有Boolean、Number、String、Array、Function、Object、Symbol、undefined、null,ts除了ES6原有的数据类型以外,还增加了void、any、never、元组、枚举、高级类型。

类型注解

TypeScript里的类型注解是一种轻量级的为函数或变量添加约束的方式,作用相当于强类型语言中的类型声明

语法:(变量/函数): type

Read More

TypeScript Learning 1 - 初始化

TypeScript(后面都简称为ts)也不是什么新鲜的玩物,当初angular 1 到 angular 2,除了重新来过以外,就是和微软合作,首选ts。当初,没怎么理会这事,现在人们都开始推崇ts,作为一个还在靠前端吃饭的人,有必要系统的学习和使用一下,后面会一直把自己在这过程里学到的当成流水账记录下来。

Read More

WEB缓存

几几乎所有的WEB开发都绕不开缓存这个话题,把知道的和搜到的系统的整理一下,方便后面的使用

WEB缓存分为数据库缓存、代理服务器缓存、CDN缓存、应用层缓存、浏览器缓存等等,对前端来说接触最多就是浏览器缓存,也又称作HTTP缓存,这类缓存只对GET请求有效。由此,可以解释一些人对浏览器缓存的认识误区:

  • 浏览器缓存并不仅仅是浏览器的事情
  • 浏览器缓存通过headers传递的信息来控制

既然也叫HTTP缓存就少不了和HTTP相关报文有关,下面是几个相关报文字段:

Expries

HTTP 1.0的产物,用来告诉浏览器这个资源过期的时间,如果发现没有超出这个时间,就返回200 (from disk cache / from memory cache)

注:因为这个时间指的是服务器的时间,如果本地时间和服务器时间不吻合,将会导致缓存失效

Cache-Control

HTTP 1.1的产物,于Expries同在的时候,优先级高于Expries,有多个字段可以设置,比如:使用max-age可设置缓存最大的有效时间(单位:秒 ),max-age=2592000就是设置缓存2592000秒[即30天]

Last-Modified

服务器资源最后修改时间,需要和Cache-Control一起使用,是检查服务器资源是否更新的一种方式

Etag

根据实体内容生成的一段hash标识符,有服务端产生。浏览器会把这段字符串传回去,验证资源是否已修改,通过EtagLast-Modified可以判断资源是否修改,由此判断是否返回状态304

Read More

记录下Object.create

Object.create(null)经常出现在框架代码中,说起来这个api倒不是有多么神秘,只是之前确实没有接触过,特地的查了一下并记录下来。

Object.create(proto[, propertiesObject])方法创建一个新对象,使用现有的对象来提供新创建的对象的proto

Object.create() - JavaScript | MDN

参数

proto : 新创建的对象的原型对象

propertiesObject : (可选)则是要添加到新创建对象的可枚举属性(即其自身定义的属性,而不是其原型链上的枚举属性)对象的属性描述符以及相应的属性名称,这些属性对应Object.defineProperties()的第二个参数

注: 如果propertiesObject参数是 null 或非原始包装对象,则抛出一个 TypeError 异常

返回值

一个新对象,带着指定的原型对象和属性

Read More