1. 页面减肥

a. 页面的肥瘦是影响加载速度最重要的因素。

b. 删除不必要的空格、注释。

c. 将inline的script和css移到外部文件。

d. 可以使用HTML Tidy来给HTML减肥,还可以使用一些压缩工具来给JavaScript减肥。

2. 减少文件数量

a. 减少页面上引用的文件数量可以减少HTTP连接数。

b. 许多JavaScript、CSS文件可以合并最好合并,人家财帮子都把自己的JavaScript. functions和Prototype.js合并到一个base.js文件里去了。

3. 减少域名查询

a. DNS查询和解析域名也是消耗时间的,所以要减少对外部JavaScript、CSS、图片等资源的引用,不同域名的使用越少越好。

4. 缓存重用数据

a. 对重复使用的数据进行缓存。

5. 优化页面元素加载顺序

a. 首先加载页面最初显示的内容和与之相关的JavaScript和CSS,然后加载HTML相关的东西,像什么不是最初显示相关的图片、flash、视频等很肥的资源就最后加载。

6. 减少inline JavaScript的数量

a. 浏览器parser会假设inline JavaScript会改变页面结构,所以使用inline JavaScript开销较大。

b. 不要使用document.write()这种输出内容的方法,使用现代W3C DOM方法来为现代浏览器处理页面内容。

7. 使用现代CSS和合法的标签

a. 使用现代CSS来减少标签和图像,例如使用现代CSS+文字完全可以替代一些只有文字的图片。

b. 使用合法的标签避免浏览器解析HTML时做“error correction”等操作,还可以被HTML Tidy来给HTML减肥。

8. Chunk your content

a. 不要使用嵌套table,而使用非嵌套table或者div。将基于大块嵌套的table的layout分解成多个小table,这样就不需要等到整个页面(或 大table)内容全部加载完才显示。

9. 指定图像和table的大小

a. 如果浏览器可以立即决定图像或table的大小,那么它就可以马上显示页面而不要重新做一些布局安排的工作。

b. 这不仅加快了页面的显示,也预防了页面完成加载后布局的一些不当的改变。

c. image使用height和width。

如何加快HTML页面加载速度的更多相关文章

  1. ASP.NET 打包多CSS或JS文件以加快页面加载速度的Handler

    ASP.NET 打包多CSS或JS文件以加快页面加载速度的Handler, 使用<link type="text/css" rel="Stylesheet" ...

  2. jQuery实现图片预加载提高页面加载速度和用户体验

    我们在做网站的时候经常会遇到这样的问题:一个页面有大量的图片导致页面加载速度缓慢,经常会出现一个白页用户体验很不好.那么如何解决这个问题呢?首先我们会想到的是提高服务器性能,使用静态缓存等手段来加快图 ...

  3. Web前端性能优化——如何提高页面加载速度

    前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒, ...

  4. 【转】Web前端性能优化——如何提高页面加载速度

    前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒, ...

  5. jquery实现图片预加载提高页面加载速度

    使用jquery实现图片预加载提高页面加载速度和用户体 我们在做网站的时候经常会遇到这样的问题:一个页面有大量的图片导致页面加载速度缓慢,经常会出现一个白页用户体验很不好.那么如何解决这个问题 呢?首 ...

  6. Web前端性能优化——提高页面加载速度

    前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒, ...

  7. 压缩代码加速ecshop程序页面加载速度

    由于页面有很多图片,页面加载速度有点慢,本来打算减小图片的体积,后来想想这个后期还得测试下,所以暂时不打算使用google的图片优化工具,先把ecshop生成的html代码压缩下吧 压缩前:首页体积为 ...

  8. 转: web 页面加载速度优化实战-100% 的飞跃提升

    前言 一个网站的加载速度有多重要? 反正我相信之前来 博主网站 的人至少有 50% 在加载完成前关闭了本站. 为啥捏? 看图 首页完整加载时间 8.18s,看来能进来看博主网站的人都是真爱呀,哈哈. ...

  9. Selenium简单测试页面加载速度的性能(Page loading performance)

    利用selenium的可以执行javascript脚本的特性,我写了一个java版本的获得页面加载速度的代码,这样你就可以在进行功能测试的同时进行一个简单的测试页面的加载速度的性能测试. 我现在的项目 ...

随机推荐

  1. Mysql数据库的打开和关闭

    Mysql数据库的打开和关闭: 选择计算机(win7)-右键管理 在新窗口选择--服务 5 找到mysql,然后右键-启动(停止)

  2. java集合框架之HashSet

    参考http://how2j.cn/k/collection/collection-hashset/364.html#nowhere 元素不能重复 Set中的元素,不能重复重复判断标准是: 首先看ha ...

  3. 1、webpack课程介绍

  4. 3-6局部变量的存储方式 & 3-7字符型字面值

    基础数据类型变量的存储 重点介绍方法级的变量,局势局部变量 存储中怎么存储呢? int n=100; 在栈中开辟内存存储空间. n是内存空间的别名 3-7字符型字面值 单引号不能丢,必须是英文状态. ...

  5. C#操作句柄

    1.直接上例子吧:收集系统信息msinfo32时,会有一个弹窗,现在要隐藏该弹窗,首先看没有通过句柄隐藏弹窗的现象 2.收集系统信息导入到一个位置 代码: Process[] msinfo32proc ...

  6. Spring Boot 2.x(十七):快速入门Elastic Search

    What -- Elasticsearch是什么? Elasticsearch是一个基于Lucene的搜索服务器,Elasticsearch也是使用Java编写的,它的内部使用Lucene做索引与搜索 ...

  7. fetch + async await 使用原生JS发送网络请求

    由于现在主流浏览器支持Fetch API,无需引用其他库就能实现AJAX,一行代码就搞定,可以说是非常方便了. export default { name: 'HelloWorld', data() ...

  8. CodeForces 723F【DFS瞎搞】

    题意: 给你一幅图,你要用这些边构造一个树, s和t两个节点的度数不能超过ds dt 而且图是保证没有环 思路: 树的性质是:无环(已经保证),无向(保证),连通(还要判断) 首先把S,T点从图里剥离 ...

  9. Mybatis分页中遇到的坑3

    Mybatis Mapper.xml 配置文件中 resultMap 节点的源码解析   相关文章 Mybatis 解析配置文件的源码解析 Mybatis 类型转换源码分析 Mybatis 数据源和数 ...

  10. Java 定时任务(转)

    转自 http://www.cnblogs.com/chenssy/p/3788407.html 在我们编程过程中如果需要执行一些简单的定时任务,无须做复杂的控制,我们可以考虑使用JDK中的Timer ...