页面(HTML)优化的方法

除了语言层面上进行优化外,对Web开发,HTML的优化将很大程度上减轻服务器的负载,提高网站的性能

1). 减少HTTP请求数。
打开网页,浏览器会发出很多请求,图片,脚本,每个对象的加载都需要花时间, 需要减负载。
1. 合并CSS,Js文件 ,减少Http的请求数
2. 合并框架图片以及相当变动较少的图片,合成一张。有时直接用Css完成。
3. 合理的使用本地的Cached来缓存 js/css/image

2). 减少被请求文件的大小,较少请求数据占用的网络带宽。
1. 压缩Js体积, 删除没有空行,注释,变量名。 大型的Js很乱,没有空行或换行,其实也是优化的表现
2. 压缩CSS体积
3. 用XHtml + Css 方式搭建网站结构,提高CSS的重用性
4. 用服务端GZip压缩JS/Css 文件, 缩小传输文件大小(16.7.2)

3). 通过版本化控制客户端的缓存
1. 通常JS/CSS这类文件改动比较频繁,为加载加快,可能要设置这类文件的过期时间,为几天后从而实现缓存,那我们的问题就是如何及时的更改这些被缓存的文件了。
2. 通过修改JS版本来及时告诉浏览器, 如: 该JS文件名,路径, URL Rewrite,大版本不变,小版本不断追加,等一定时间后统一更新

4). 帮页面减肥 。简洁风格,少用Flash等
5). 删除页眉可有可无的内容。 如空格,注释
6). 删除页面代码中的空语句
7). 删除HTMl中的默认值,什么颜色,对齐之类的
8. 优化CSS文件
9. Visibility 快于Display
  图片的时隐时现,如果是保持决定位置,用Visibility 好。  none,hidden  . visibility: hindden
10. 缓存区是区分大小写的,保持url大小写一致性
11. 让html标记有始终。 减少浏览器的判断时间
12. 不用将全部内容塞入一个Table中。  因为Talbe要等内容加载完毕才显示出来。如果某些内容有错,将拖延页面的访问速度。
13. 如果有广告代码,放入iframe中最好了。 <iframe src="http://www.XXX.com " marginwidth="0" marginheight="0" leftMargin="0" topMargin="0" frameborder="0" scrolling="no"></frame>
14. 把Javascript移到HTML文件末尾
15. JS会阻塞后面的页面的显示。
16. 友情链接的学问, 尽量用文字。
17. 优化图片。 Gif图片比较少,一般做Logo,按钮,表情。 PNG,做透明背景比较多
18. 网址后面加入一个反斜杠. www.maticsoft.com/220/ ,让服务器立即知道访问的是个文件夹。
19. 指定图片的大小,让浏览器一目了然。

大型网站性能优化(页面(HTML)优化的方法)的更多相关文章

  1. 大型php网站性能和并发访问优化方案(转载自php中文网)

               网站性能优化对于大型网站来说非常重要,一个网站的访问打开速度影响着用户体验度,网站访问速度慢会造成高跳出率,小网站很好解决,那对于大型网站由于栏目多,图片和图像都比较庞大,那该怎 ...

  2. 大型php网站性能和并发访问优化方案

    网站性能优化对于大型网站来说非常重要,一个网站的访问打开速度影响着用户体验度,网站访问速度慢会造成高跳出率,小网站很好解决,那对于大型网站由于栏目多,图片和图像都比较庞大,那该怎么进行整体性能优化呢? ...

  3. 高性能网站性能优化与系统架构(ZT)

    转载请保留出处:俊麟 Michael’s blog (http://space.itpub.net/7311285/viewspace-97) 我在CERNET做过拨号接入平台的搭建,而后在Yahoo ...

  4. 网站性能优化实战——从12.67s到1.06s的故事

    文章摘自https://juejin.im/post/5b0b7d74518825158e173a0c 作为互联网项目,最重要的便是用户体验.在举国“互联网+”的热潮中,用户至上也已经被大多数企业所接 ...

  5. php大型网站如何提高性能和并发访问

    一.大型网站性能提高策略: 大型网站,比如门户网站,在面对大量用户访问.高并发请求方面,基本的解决方案集中在这样几个环节:使用高性能的服务器.高性能的数据库.高效率的编程语言.还有高性能的Web容器. ...

  6. Yahoo!网站性能最佳体验的34条黄金守则

    Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践.他们为此进行了一系列的实验.开发了各种工具.写了大量的文章和博客并在各种会议上参与探讨.最佳实践的核心就是 ...

  7. PHP提高网站性能的一些方法

    前段时间面试问到了这个问题,回答的不是很全面,就去问了度娘,得到了一些比较全的答案,由于出处较多就没法确定原文出处了.下面是分享的答案. 一.大型网站性能提高策略: 大型网站,比如门户网站,在面对大量 ...

  8. 大型网站技术架构(3):WEB 前端性能优化

    上次说到了性能优化策略,根据网站的分层架构,可以大致的分为 web 前端性能优化,应用服务器性能优化,存储服务器性能优化三大类 这次来说一下 web 前端性能优化,一般来说,web 前端就是应用服务器 ...

  9. 大型网站提速关键技术(页面静态化,memcached,MySql优化)(一)

    一:关键技术介绍: 衡量是否为大型网站的要素: A:PV值(page views 页面浏览量) 访问量大: 带来的问题:1:流量大 -->解决方案:增加带宽,优化程序(视频和图片较浪费带宽,尽量 ...

随机推荐

  1. 多行文本垂直居中div高度确定

    父元素高度确定的多行文本.图片.块状元素的垂直居中的方法有两种: 方法一:将内容写入table(包括tbody.tr.td)中的td标签里,同时设置 vertical-align:middle. cs ...

  2. AngularJS 不得不了解的服务 $compile 用于动态显示html内容

    项目中一度纠结与AngularJS如何动态显示不同的html内容. 本来是希望直接使用下面的语句来实现: <div> </div> 但是很尴尬的是,这样不能识别出html标签, ...

  3. Listview注意事项

    1.缓存 @Override public View getView(int position, View convertView, ViewGroup parent) { ViewHolder ho ...

  4. accel-pptp 部署

    accel-pptp 是 pptp-client 和 pptpd 的改进版,使用内核 pptp 模块,相比 raw socket 实现方式能提供更好的性能.   Ubuntu 12.04 上启用内核 ...

  5. HTTP based RESTful APIs - asp.net web api

    1.HTTP http://www.w3.org/Protocols/rfc2616/rfc2616.html 2.REST是什么http://www.ics.uci.edu/~fielding/pu ...

  6. Android 获取系统内置Intent

    1,掉web浏览器 Uri myBlogUri = Uri.parse("http://www.yzmanga.com"); returnIt = new Intent(Inten ...

  7. HDOJ-1003 Max Sum(最大连续子段 动态规划)

    http://acm.hdu.edu.cn/showproblem.php?pid=1003 给出一个包含n个数字的序列{a1,a2,..,ai,..,an},-1000<=ai<=100 ...

  8. jdbc详解(三)

    开源数据库连接池 l 现在很多 WEB 服务器 ( Weblogic , WebSphere , Tomcat) 都提供了 DataSoruce 的实现,即连接池的实现.通常我们把 DataSourc ...

  9. 提示框插件SweetAlert

    SweetAlert可以替代Javascript原生的alert和confirm等函数呈现的弹出提示框, 它将提示框进行了美化,并且允许自定义, 支持设置提示框标题.提示类型.内容展示图片.确认取消按 ...

  10. iOS开发之性能优化

    1.避免过于庞大的XIB 当加载XIB的时候把所有的东西都放在了内存里,包括任何的图片:如果有一个不会即刻用到的view,就会浪费宝贵的内存资源了. 当加载一个引用了图片或者声音资源的nib时,nib ...