轩枫阁

1. H5缓存机制介绍

H5，即HTML5，是新一代的HTML标准，加入很多新的特性。离线存储（也可称为缓存机制）是其中一个非常重要的特性。H5引入的离线存储，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

H5应用程序缓存为应用带来三个优势：

• 离线浏览 – 用户可在应用离线时使用它们
• 速度 – 已缓存资源加载得更快
• 减少服务器负载 – 浏览器将只从服务器下载更新过或更改过的资源。

根据标准，到目前为止，H5一共有6种缓存机制，有些是之前已有，有些是H5才新加入的。

1. 浏览器缓存机制
2. Dom Storgage（Web Storage）存储机制
3. Web SQL Database存储机制
4. Application Cache（AppCache）机制
5. Indexed Database （IndexedDB）
6. File System API

下面我们首先分析各种缓存机制的原理、用法及特点；然后针对Anroid移动端Web性能加载优化的需求，看如果利用适当缓存机制来提高Web的加载性能。 查看全文

前言

在网站开发初期，做重构的过程中，经常要展示一些网站内容相关的不固定图片，如Banner图、产品图，这时候从设计稿中切图下来放上去会比较繁琐。常用的技巧是使用占位图。

占位图片即通过指定宽高或文字动态生成指定尺寸的图片。有很多提供类似服务的网站，接下来一一推荐。

纯色类

temp.im

简介：im temp placeholder images, feel free to use it anywhere. (with https supported)。

temp.im占位图片，可以在任何地方免费使用，支持HTTPS。

特点：支持定义尺寸、颜色。使用七牛CDN服务，访问超快，推荐使用，微信UI工程师@hzlzh 作品。

使用：

• http://temp.im/200
• http://temp.im/754×754
• http://temp.im/466×466/4CD964/fff

查看全文

前言

对于Javascript来说，提高网络下载的性能最直接的方法就是把JS文件体积减小。

>>>留意亮点

为了方便理解和对比，本文会给出压缩前后代码作为参考，但压缩后的代码仍会换行，变量名字不做混淆处理，同时一个压缩规则的例子会尽量不混其它压缩策略进去。

1. 表达式的压缩

规则1.1 表达式预计算

将可预先计算的表达式替换成其计算结果，同时要比较原来表达式以及生成后的结果的大小，保留小的。 查看全文

1. HTTPS基础

简单而言，HTTPS是使用TLS/SSL加密的HTTP协议。

HTTP协议采用明文传输信息，存在信息窃听、信息篡改和信息劫持的风险，而协议TLS/SSL具有身份验证、信息加密和完整性校验的功能，可以避免此类问题。

TLS/SSL全称安全传输层协议Transport Layer Security, 是介于TCP和HTTP之间的一层安全协议，不影响原有的TCP协议和HTTP协议，所以使用HTTPS基本上不需要对HTTP页面进行太多的改造。 查看全文

自2007年年末Alpha版本上线以来，Chrome浏览器以简约高效的用户界面，稳定、高速、安全的使用体验迅速风靡全球，根据NetMarkShare公布的2016年3月份数据Chrome在全球浏览器的市场份额达到了39.09%，仅次于IE浏览器。在经历了数年的迅猛发展，伴随着稳定版Chrome 50的正式发布，Google特意发布了一张信息图进行庆祝。

自2008年9月份发布Chrome 1.0版本以来，在将近8年时间中共计发布了49个稳定版本，根据信息图上显示移动端月活跃用户超过10亿，每个月加载超过7710亿个页面；每个月有超过5000亿个字符不需要完整输入，每个月节省超过200万GB流量；每个月有36亿个页面自动翻译；91亿个表格和密码自动填写；每个月保护用户免受恶意网页侵扰1.45亿次。
根据市场调查机构StatCounter的调查数据，截止今年3月份，Chrome网页浏览器的使用量达到了60.1%，第二位为Firefox，使用量为15.7%。包括平板在内的移动设备中，Chrome浏览器使用量占比为32.1%，Safari排在第二，占比为22.35%。

Chrome reached a pretty big milestone this week – its 50th release! We originally launched Chrome to give users a fast, simple and secure browser. That still remains our mission today. And while there’s still much more to do – especially with the shift to mobile and providing a great experience for people using the mobile web for the first time – we thought we’d take a step back and reflect on our journey so far. Here at Google, we’re obsessed with stats, so we thought you might enjoy a whirlwind tour of Chrome, by the numbers.

Rahul Roy-Chowdhury, Director and Stats Stockpiler 查看全文