轩枫阁

首页 / Web前端 (第8页)

H5缓存机制浅析-移动端Web加载性能优化

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的加载性能。 查看全文

2016/08 17  周三

网页占位图服务推荐

前言

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

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

纯色类

temp.im

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

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

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

使用

查看全文

2016/08 06  周六

JavaScript代码压缩细节

前言

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

>>>留意亮点

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

1. 表达式的压缩

规则1.1 表达式预计算

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

2016/05 13  周五

如何在代码中减少if else语句的使用

前言

代码中嵌套的if/else结构往往导致代码不美观,也不易于理解。面向过程的开发中代码有大量的if else,在java中可以用一些设计模式替换掉这些逻辑,那么在js中是否也有类似的方法用来尽可能减少代码中的if/else嵌套呢?

有人认为:if else多就多呗,只要可读性强,维护起来方便。jQuery.fn.init里就是一堆if else判断,难道要质疑jQuery作者的水平了?

并不是说if else多就不好,关键是看用的地方,jQuery.fn.init里除了if else判断简洁点,难道要改成switch?就算用工厂模式,还不是得做大量的if判断。

常用方法

代码整洁强迫症患者必须要来个抛砖引玉:

1. 使用||或

查看全文

2016/04 24  周日

js时间Date对象介绍及解决getTime转换为8点的问题

前言

在做时间转换的时候,发现用“2016-04-12”转出来的时间戳是 2016-04-12 08:00的时间点,而不是0点。

fdbfdgbdf

fdhfh

最后发现,如果将日期格式换成“2016/04/12”,则正常换算成0点。

具体原因参见以下介绍 查看全文

2016/04 13  周三

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制,可以录制弹奏的曲子