HTML5触屏界面设计与开发

1提高第一次加载的速度

加载页面的顺序

解析域名

发起请求

下载相应

渲染页面

导致页面加载缓慢的几个原因

1HTTP连接数太多

2总的字节数太大

3等待时的渲染阻塞

4网络延迟

5缓存能力差

怎么解决这些常见的问题

1请求数太多

我们可以把需要的css混合成一个文件，使用css每题查询的方法来带图link元素上使用media属性

<link rel="stylesheet" media="only screen and (max-width:800px)“ href="demo.css">

转换成

@media only screen and (max-width:800px){}

不知道以上代码代表什么意思的同学可以先学习一下响应式布局

不幸的是，通过这样的改变我们并没有发现加载速度改变有多大

所以我们要继续查看究竟是什么使页面加载速度减慢

在查看瀑布图的时候我们发现在加载jQuery完成之前，图像几乎没有开始加载

解决这个的方法比较简单，就是把脚本标签置于页面底部。这样一来。当脚本还在加载时，用户不会看到一个空白页，而且其他的内联的任何资源会和脚本一起并行下载。

其次我们将会发现导致页面加载速度变慢的一大原因就是图片太大。

这里我概括了几种解决办法

1降低图片质量（显然我们不太愿意使用这种方法，这样势必会降低用户体验）

2启用cdn（这是我在阅读相关书籍之前使用的办法，现在网上有许多提供