web浏览器缓存

没有缓存的世界，每次请求都是严格意义上的新的请求，那么服务器端的压力可想而知，客户端的响应速度也是大打折扣，就是我们在写程序也知道需要缓存，把一些常用的数据缓存区来，避免每次都要重新读取，特别是前端在进行元素获取时，虽然链式调用让我们很舒服，但是如果每次都需要重新获取这个元素的话，最好还是使用变量缓存起来比较好。

设置缓存

目前比较常见的缓存机制包括以下几种[都是设置http header]：

• Expires
• Cache-Control
• Last-Modified/If-Modified-Since：Last-Modified/If-Modified-Since要配合Cache-Control使用。
• Etag/If-None-Match：Etag/If-None-Match也要配合Cache-Control使用

还有一些升级设置缓存内容：

• cookie
• localSatorage、sessionStorage
• Web SQL：已经废弃的部分，规范推荐使用类似的indexedDB
• indexedDB:【异步缓存】IndexedDB是一种低级API，用于客户端存储大量结构化数据(包括, 文件/ blobs)。该API使用索引来实现对该数据的高性能搜索。
• application cache: 已经不再支持，在新版本的firefox和chrome中，考虑使用service workers，而service workers使用 Cache Storage
• service worker + cache storage：CacheStorage 接口表示 Cache 对象的存储。它提供了一个 ServiceWorker 、其它类型worker或者 window 范围内可以访问到的所有命名cache的主目录
  阅读全文 »

前端本地存储

目前前端本地存储比较常见的方式有以下三种：

1. cookie
2. localStorage
3. sessionStorage

这里再一次清晰地记录下这其中的一些知识点；当然整个浏览器提供的缓存有很多方式：

1. 浏览器缓存（Browser Caching），通过request header来设置资源缓存
2. websql，不是HTML的规范，也在逐步废弃
3. IndexedDB 浏览器中非关系型数据库，数据存在浏览器安装的地方
4. cookie、localstorage、sessionStorage
5. application cache 通过定义缓存列表来离线缓存资源，逐步废弃中
6. cacheStorage：CacheStorage是在ServiceWorker的规范中定义的。CacheStorage 可以保存每个serverWorker申明的cache对象，cacheStorage有open、match、has、delete、keys五个核心方法，可以对cache对象的不同匹配进行不同的响应。

velocity的简介

Velocity是一个基于java的模板引擎（template engine）。它允许任何人仅仅简单的使用模板语言（template language）来引用由java代码定义的对象，这样的话其实在前后端分离而言又是一个较为合理的可选方案，
Velocity也可以配合其他的语言来完成使用，Velocity.js就是不错的选择，这样的话可以依靠nodejs和浏览器环境来实现模版的功能。

• 什么是Velocity模版?
  Velocity模版可以是任意的文本文件,只要里面包含专门的模板语言(VTL)标记,就可以被Velocity模板引擎解析;
• Velocity模版的工作机制:
  Velocity可以通过获取Java对象的函数返回值、属性值,用于替换模板文件中的VTL变量标记,从而生成新的文件,模板文件的扩展名可以是”.vm”、”.htm”、”.html”、”.asp”、”.sql”,等等任
  #语法简介
  大部分的模版引擎都是有自己的书写方式，不过{}这个大括号基本都是他们的通用符号，这里介绍语法的顺序是：
• 变量定义、使用
• 控制语句 if for之类
• 指令
• 宏

JavaScript的this

在JavaScript中this是一个永恒的话题，正在能够完全掌握其实不易，本文主要讲解下一下几种情况下的判定：

• 全局情况下
• 对象调用下
• call、apply、bind方法
• dom事件绑定
• setTimeout、setInterval
• ajax等异步操作

  全局window/global

  一个在模块或者全局的情况下调用一个方法时【不在使用 ‘use strict’的情况，否则不会默认将this指向全局】

  1 2 3 4 5 6

  var x = 9; 　　function test(){ 　　　　this.x = 6; 　　} 　　test(); 　　alert(x); //输出6

可以知道，在这种情况下的this一般是window或者node中的global；

#规范
程序员是一个千变万化但是又不离其中的职业，能够实现各种各样的功能，实现的方法也是各种各样，而最佳实践又是很多程序员比较认可和遵守的一些规则，其中会有：

• html-css规范：https://github.com/doyoe/html-css-guide
• JavaScript书写习惯：https://github.com/adamlu/javascript-style-guide

规范可能并不会带来直接的利好，但是随着工程的扩大，这些良好的习惯可能会带来很好的优势，不然eslint也不会这么受欢迎，

本文讲的并不是JavaScript-css-html的规范，而是程序员比较常用地git操作，先安利一个命令端的工具，

1. https://github.com/robbyrussell/oh-my-zsh 一个命令端的利器
   这里也是讲git commit的一种方式，参考了AngularJS项目的推荐git规范]，

#浮点运算JavaScript
本文主要讨论JavaScript的浮点运算，主要包括

• JavaScript number基本类型
• 二进制表示十进制
• 浮点数的精度

  number 数字类型

  在JavaScript中，数字只有number这一种类型;

  1 2 3 4

  var intS = 2, floatA = 0.1; typeof intS; // number typeof floatA; //number

那么这个情况下应该很容易理解一件事情：number应该是实现的浮点型数来标识所有的数；
而实际上也是这样；JavaScript的number类型按照ECMA的JavaScript标准，它的Number类型就是IEEE 754的双精度数值，相当于java的double类型。IEEE 754标准《二进制浮点数算法》（www.ieee.org）就是一个对实数进行计算机编码的标准。

前端图片展示

在前端处理图片是非常常见的，而图片展示又存在一个最大的问题：适应，
可以看看这种情况：

1. 固定空间展示图片
   • 空间是 100px100px，图片是 6060
   • 空间是空间是 100px100px，图片是 160px240px
   • 空间是空间是 100px100px，图片是 240px160px

就图片展示而言，按宽高比进行缩放是最好的结果，宽高1：1的话，放到正方形空间内很好，可是如果是1：1.5的图片需要放到正方形页面容器里面呢？

github contributions

一般而言，任何一个人的github主页都有一个这样的方格图；

每一个小格代表了one day，不同的颜色深度，代表了不同的contributions次数，那么这个次数是怎么计算的呢？本文的翻译就是上图底部的蓝色链接中的Learn how we count contributions.

css学习

很少有人会很系统的把css学习一遍，大部分都是遍历下。然后然后记住常用的，不常用的也要回查找，前端人很多都认同要学好css真的不很难，这里记录下很多场景下使用css需要注意的地方，同样，开头页列出一些学习css的知识点：

• 基本属性[定位、盒子模型、文本、背景。。。]
• 动画属性[渐变、变化、过渡、动画]
• 堆叠和块格式化上下文
• 布局[table、flex、grid]
• 选择符[权重、包含、子选择、相邻、兄弟、属性选择、伪类、伪元素]
• 媒体查询

nginx

Nginx(“engine x”)是一款是由俄罗斯的程序设计师Igor Sysoev所开发高性能的 Web和 反向代理 服务器，也是一个 IMAP/POP3/SMTP 代理服务器。在高连接并发的情况下，Nginx是Apache服务器不错的替代品。

nginx的出现可以说对于那些在windows上使用IIS，linux上使用apache2的人提供了更多的选择，使用nginx的情况主要是满足了以下的一些功能：

1. 本地代理，对于前端开发人员而言，需要把很多的请求代理到本地，本质上还是在本地使用nginx起了web服务，进而完成一些重定向工作；
2. web服务器，nginx可以在服务器上承担整个web服务的分发和响应，其中反向代理、负载均衡是它很重要的功能。

本文主要是介绍了一些基础的nginx的使用，环境是mac10.13.2。