HTML代码到底该不该压缩

在我的插件Super Static Cache的使用过程中,经常会有人问我这样的问题,怎么样让Super Static Cache插件支持我的HTML压缩插件,本文这里不谈技术实现问题,着重来分析一下现在的网站有没有必要再进行HTML代码压缩。

代码压缩压缩的是什么?

HTML的全称是超文本标记语言,HTML网页本身是一种文本文件,通过在文件中添加标记符,可以告诉浏览器如何显示其中的内容,包括文字大小,颜色,图片显示等等。这就意味着在文本文件中的一些特定意义的字符可以在浏览器显示的时候就不一样了,HTML代码压缩就是压缩这些在文本文件中有意义,但是在HTML中不显示的字符,包括空格,制表符,换行符等,还有一些其他意义的字符,如HTML注释也可以被压缩。

有了这个基础,我们挑选网络上的100张未经过HTML压缩的页面进行统计。

#!/usr/bin/env python
# -*- coding:utf-8 -*-
import urllib2,re
import matplotlib.pyplot as plt

htmlsp = re.compile(r"[\r\n\t]")

def htmlcompress(html):
    html =  htmlsp.sub("",html)
    return html.replace("  "," ")

urls = open("urls.txt","rb")
comdation = list()
while True:
    url = urls.readline()
    if not url:
        break
    if not len(url):
        continue
    try:
        content = urllib2.urlopen(url).read()
    except:
        continue
    unlen = len(content)
    comlen = len(htmlcompress(content))
    comra = 100.0*(unlen*1.0-comlen*1.0)/unlen
    obj = "uncompress:%d bit, compress:%d bit, compressdatio: %f%%"%(unlen,comlen,comra)
    print obj
    comdation.append(comra)

plt.ylabel("compressdatio")
plt.plot(comdation)
plt.show()

…阅读更多>>

Web前端文件处理

在项目中,我们经常会有这样的需求,对上传的文件大小进行限制,传统的做法是在服务器端进行大小限制,例如nginx通过client_max_body_size,php.ini中可以通过upload_max_filesize和post_max_size来设置上传的文件大小。这种做法的缺陷很明显,数据上传到服务器之后,再对其进行监测,大大增加了宽带和服务器的压力。何不放在客户端进行检测?

在IE10及以下的版本,可以通过如下方式检测需要上传文件的大小:

<input type="file" onchange="checksize()"/>
<script>
function checksize(e){
	var ev = e || window.event;
	var uri =  ev.srcElement.value;
	var img = new Image();
	img.onload=function(){
		alert("文件大小为"+(img.fileSize)/1024+"KB");
	}
	img.src=uri;
}
</script>

上面的代码的运行原理是把上传的文件模拟成图片,通过其fileSize属性获取其大小,而由于浏览器的安全策略,其几乎只能运行在本地打开此网页的情况。加上微软在IE11上已经废除了fileSize的属性1,而现代浏览器厂商为了保护本地操作系统,在用户上传文件的时候,本地资源路径一律采用fakepath2,更加阻止了这种方法获取文件大小的可行性。 …阅读更多>>

HTML5中defer和async的比较

在网站页面中,通常需要引入外部js资源,然而外部的js资源可能导致DOM阻塞,影响页面加载速度。通过异步或者延迟执行js,可以做到引用外部js资源而不阻塞DOM的目的。用法是直接在script标签中使用defer和async,那么它们两个有什么区别呢?

从字面上来理解,defer是延迟,而async则是异步(Asynchronous)。w3c上这样解释defer和async:defer属性是一个布尔值的属性,当存在这个属性时,它指定的脚本将在页面解析之后执行1; async也是一个布尔值的属性,当存在这个属性时, 只要脚本是可用的它将异步执行2。更详细的可见火狐开发者中心对script标签的讲解…阅读更多>>

HTML中动态生成内容的事件绑定问题

由于实际的需要,有时需要往网页中动态的插入HTML内容,并在插入的节点中绑定事件处理函数。我们知道,用Javascript向HTML文档中插入内容,有两种方法,一种是在写HTML代码写入JS,然后插入到文档中;另外一种是通过ajax的方式,从服务器获取数据,然后用js把获取的数据经过处理后插入文档中;两种方法各有特点,本文将分析新插入到文档中的元素的事件绑定问题,并假定新插入的对象不做内联的事件绑定(即不用类似 <a onclick=””>的形式)。所有的示例将会用到jQuery和原生Javascript。
…阅读更多>>

用Minify合并css和Javascript文件以减少HTTP请求

在web前端的优化中,一个网站的打开速度仍然是衡量网站质量的重要指标之一,而网页本身的HTML文件一般都是比较小的,所以影响网页的加载速度的最关键的一般都是资源的加载速度。一个网页中的请求太多,一般情况下会严重影响打开速度。为了提高网站速度和用户体验,我们不得不减少请求数量,一方面,一些先进的技术不断的应用到实际中,如利用css sprite技术合并网页背景图片来减少请求,另一方面随着网站体积和规模的不断扩大,我们不得不把一些东西分开,以便扩展和管理。

一个大型的网站,不论是css或者Javascript等其它文件,不可能只有一个,但是从提高前端的体验来说,我们希望请求越少越好。当矛盾出现的时候,一些新技术就应运而生,Minfy就是其中优秀的代表.
…阅读更多>>

网页图片预加载技术

说完了图片的延时加载,再来说一下图片的预加载。我们经常可以看到浏览器在加载大图的时候,通过自上而下这样铺过来,这样一来一是对用户体验不好,而是在图片下载完之前我们完全不知道图片大小,不利于控制网页界面。那么有没有一种方法,能让图片整体一次加载到网页上呢,答案是有的,那就是图片预加载技术。来看下面一个例子:
…阅读更多>>