关闭

如何加快HTML页面加载速度

标签: htmljavascript浏览器csssafarifirefox
2234人阅读 评论(0) 收藏 举报
1,页面减肥 
页面的肥瘦是影响加载速度最重要的因素 
删除不必要的空格、注释 
将inline的script和css移到外部文件 
可以使用HTML Tidy来给HTML减肥,还可以使用一些压缩工具来给JavaScript减肥 

2,减少文件数量 
减少页面上引用的文件数量可以减少HTTP连接数 
许多JavaScript、CSS文件可以合并最好合并,人家财帮子都把自己的JavaScript functions和Prototype.js合并到一个base.js文件里去了 

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

4,缓存重用数据 
使用缓存吧 

5,优化页面元素加载顺序 
首先加载页面最初显示的内容和与之相关的JavaScript和CSS 
然后加载DHTML相关的东西 
像什么不是最初显示相关的图片、flash、视频等很肥的资源就最后加载 

6,减少inline JavaScript的数量 
浏览器parser会假设inline JavaScript会改变页面结构,所以使用inline JavaScript开销较大 
不要使用document.write()这种输出内容的方法,使用现代W3C DOM方法来为现代浏览器处理页面内容 

7,使用现代CSS和合法的标签 
使用现代CSS来减少标签和图像,例如使用现代CSS+文字完全可以替代一些只有文字的图片 
使用合法的标签避免浏览器解析HTML时做“error correction”等操作,还可以被HTML Tidy来给HTML减肥 

8,Chunk your content 
不要使用嵌套tables 
Java代码 
  1. <table>  
  2.   <table>  
  3.     <table>  
  4.       ..  
  5.     <table>  
  6.   <table>  
  7. <table>  
而使用非嵌套tables或者divs 
Java代码 
  1. <table>...</table>  
  2. <table>...</table>  
  3. <table>...</table>  
将基于大块嵌套的tables的layout分解成小tables,这样显示时不用加载整个页面(或大table)的内容 

9,指定图像和tables的大小 
如果浏览器可以立即决定图像或tables的大小,那么它就可以马上显示页面而不要重新做一些布局安排的工作 
这不仅加快了页面的显示,也预防了页面完成加载后布局的一些不当的改变 
image使用height和width 
table使用table-layout: fixed并使用col和colgroup标签指定columns的width 
10,根据用户浏览器明智的选择策略 
IE、Firefox、Safari等等等等
0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

App竞品技术分析 (2)Html5页面的打开速度

1 把Html5页面嵌入到Zip包中   App中会使用很多Html5页面。我们一般使用内置的WebView来打开一个外部的URL地址,这样一来,速度就肯定不如App原生的页面快了。   我们可以打开...
  • JspAndAsp
  • JspAndAsp
  • 2015-10-22 21:40
  • 5133

如何实现网页图片加载更快

https://zhuanlan.zhihu.com/p/24057749?refer=dreawer 作者:小不了 链接:https://zhuanlan.zhihu.com...
  • hzp666
  • hzp666
  • 2017-02-08 16:28
  • 1543

【前端开发】25种提高网页加载速度的方法和技巧

您希望加快网页的加载速度吗?了解如何通过缩短加载时间来改善拨号上网用户的浏览体验,在某些情形下,加载时间最多可缩短 80%。下面介绍二十五中网速方法和技巧。
  • a503921892
  • a503921892
  • 2014-07-06 18:24
  • 5138

手风琴导航 选项卡效果+动态html页面加载

  • 2011-01-03 11:59
  • 53KB
  • 下载

js实现的简单的Html页面加载滚动条

  • 2010-05-13 23:30
  • 1KB
  • 下载

html页面加载原理和浏览器应用程序交互原理

html页面加载原理和浏览器应用程序交互原理 html加载原理 a 浏览器下载html页面 b 解析html为dom树 c 逐个处理标签,有可能需要下载其他文件(图片,css,js等) d css处理...
  • ndcnb
  • ndcnb
  • 2016-05-22 09:08
  • 1679

工作积累之HTML页面加载和解析流程

浏览器加载和渲染html的顺序 1. IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。 2. 在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联...
  • startwithdp
  • startwithdp
  • 2012-07-26 18:09
  • 2723

HTML页面加载和解析流程

浏览器加载和渲染html的顺序 1. IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。 2. 在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所...
  • xiangyaquan
  • xiangyaquan
  • 2013-10-08 10:14
  • 900

webview html页面加载本地js及img src(一)

webview html页面加载本地js及img src(二) 这个标题可能没表达清楚我要说什么。 本人不太懂android,最近开始做android的项目,需要解决一些技术问题,所以把一...
  • andych008
  • andych008
  • 2012-06-04 18:23
  • 5929

html页面加载&渲染过程

浏览器渲染页面和加载页面机制。1.了解浏览器如何进行加载,我们可以在引用外部样式文件,外部js时,将他们放到合适的位置,使浏览器以最快的速度将文件加载完毕。2.了解浏览器如何进行解析,我们可以在构建D...
  • lamanchas
  • lamanchas
  • 2017-12-02 16:28
  • 159
    个人资料
    • 访问:6193963次
    • 积分:59846
    • 等级:
    • 排名:第55名
    • 原创:332篇
    • 转载:1714篇
    • 译文:19篇
    • 评论:176条
    博客专栏
    网上乐园
    最新评论