xiaoping 发布于 03月27, 2017

你应该知道的浏览器缓存知识

0. 前言

浏览器缓存作为性能优化的重要一环,对于前端而言,重要性不言而喻。之前被人问起浏览器缓存的知识,感觉自己有点一知半解,所以这次好好整理总结了一下。

1. 浏览器缓存分类

目前主流的浏览器缓存分为两类,强缓存和协商缓存,它们的匹配流程如下:

(1)浏览器发送请求前,根据请求头的expires和cache-control判断是否命中强缓存策略,如果命中,直接从缓存获取资源,并不会发送请求。如果没有命中,则进入下一步。

(2)没有命中强缓存规则,浏览器会发送请求,根据请求头的last-modified和etag判断是否命中协商缓存,如果命中,直接从缓存获取资源。如果没有命中,则进入下一步。

(3)如果前两步都没有命中,则直接从服务端获取资源。

阅读全文 »

xiaoping 发布于 02月13, 2017

VSCODE插件初体验

前言

使用vscode也有大半年时间了,从一开始的各种问题到现在渐渐好用。插件维护比sublime好,速度能秒atom,这大概就是现在离不开vscode的原因吧。虽然它还有不少问题,比如代码高亮和智能提示,尤其是在vue这种template文件中,完全没有用!

阅读全文 »

xiaoping 发布于 12月26, 2016

Firekylin博客优化指南

Firekylin博客

Firekylin博客是一个基于ThinkJS的博客系统,本身对博客的优化已经非常不错,很多资源都已经进行了压缩或者缓存策略。

但是本着能缓存就要缓存的策略,Firekylin还是有一点优化空间的,下面就是优化的要点。

阅读全文 »

xiaoping 发布于 12月05, 2016

如何写好.babelrc?Babel的presets和plugins配置解析

什么是Babel

The compiler for writing next generation JavaScript.

官网是这么说的,翻译一下就是下一代JavaScript 语法的编译器。

作为前端开发,由于浏览器的版本和兼容性问题,很多JavaScript的新的方法都不能使用,等到可以大胆使用的时候,可能已经过去了好几年。Babel就因此而生,它可以让你放心使用大部分的JavaScript的新的标准的方法,然后编译成兼容绝大多数的主流浏览器的代码。

阅读全文 »

xiaoping 发布于 12月02, 2016

七牛免费SSL证书,配置自定义域名CDN加速

申请七牛SSL证书

其实,七牛在很早之前就支持CDN使用https,但是他要求证书的有效期是一年及以上,而我的主站用了Let's Encrypt的免费SSL证书,有效期90天,自动续签的形式。所以,为了使CDN的图片也是https的,一直采用了七牛默认的xxx.qnssl.com域名。

在11月,七牛发布了免费SSL证书,亚洲诚信的DV证书。申请起来也很简单,参见七牛SSL证书申请。当然,申请的证书只能用于CDN加速。

阅读全文 »

xiaoping 发布于 12月01, 2016

关于flex的小游戏

flex布局

2009年,W3C提出了一种新的方案----Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。

flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。在没有兼容性问题的情况下,flex布局是一个很好的解决方案。

这里不说flex的语法,只介绍一个相关的游戏,你需要依靠flex的知识完成任务:把青蛙送回家!

至于为什么是青蛙,我只能说一句:无可奉告!

flex青蛙游戏

阅读全文 »

xiaoping 发布于 11月30, 2016

记一次Git分支衍合导致的问题和解决方法

事件还原

公司项目需要开发2.0版本,在原来仓库的基础上,checkout出来一个新分支,记为origin/v2,大家都从v2分支checkout出feature分支进行开发。

部分同事完成自己的feature分支之后,提交了几个commit,为了方便记为commit-1, commit-2, commit-3,并merge到了origin/v2分支。

而我checkout出的feature分支,叫feature-xxx。开发完了之后,进行commit,记为commit-4操作。此时,我的commit history是没有commit1-3的纪录的,所以进行rebase操作。

阅读全文 »

xiaoping 发布于 11月22, 2016

FireKylin博客上传图片更换为七牛CDN

11月30日更新

和75team的公子交流之后,新的上传设置在管理后台,并在0.13.0版本支持七牛和又拍云设置。

具体实现可以参看这个commit

前情

前几天把博客从Ghost迁移到了FireKylin。FireKylin是一个基于ThinkJS2.0,ReactJS和ES6+的博客系统,与Ghost相比,优点还是很多的。

  • 基于ThinkJS2.0,可以使用node6.x以上的版本,使用ES6+的特性;
  • 使用ReactJS开发,符合自己的学习路线;
  • 对生产环境做了大量优化,加载速度很快。

阅读全文 »

xiaoping 发布于 11月22, 2016

舍弃预处理,拥抱CSS变量

什么是CSS变量

CSS 变量是由网页的作者或用户定义的实体,用来指定文档中的特定变量。使用自定义属性来设置变量名,并使用特定的 var() 来访问。(比如 color:var(--main-color);)。

CSS变量的用途

取代预处理器变量

现在普遍使用的预处理器,如sass,less都提供了变量的概念,很适合用于组件化的样式编写。

以sass为例,简单的代码如下:

$mainColor: #333

body {
  color: $mainColor;
}

阅读全文 »