大首页的优化修改方案

以昆明大首页为例(http://map.fang.com/km3.html),主要优化的地方是:

(1)JS代码 改为模块化压缩异步合并加载,优化JS文件加载顺序。(用seajs作为js文件加载管理工具)修改网页中的onclick为事件绑定形式。(例如去掉onmouseover="show_menuc(‘t01‘,‘ti01‘,1,3,‘s1‘,‘s2‘)"代码,改为new menu(‘t01‘,‘ti01‘,‘s1‘,‘s2‘);)

(2)图片改为延迟加载(除首屏外)(具体详见下面说明)

(3)CCS 压缩处理

(4)HTML部分压缩处理

(5)对科捷JS广告也做分级处理。(具体详见下面说明)

(6)网页中用到的JS文件也作了分级处理(首屏JS优先加载)

附1:图片具体处理方式:

其中图片延迟加载的具体逻辑是图片作了分级区别处理:

0级:首屏的图片,及时加载。

1级:除首屏外的图片,延迟加载。具体做法就是当网页加载完成后,不再自动加载,而改为事件侦听的方式,当侦听到鼠标移动(mousemove)或者页面滚动条滚动(scroll)才开始逐步加载。

附2 :科捷JS广告处理方式(通过对网页的分析,发现首页中科捷JS广告比较多有41处调用。占用了很大部分加载时间,因此优化广告加载方式是首页优化的一个重要组成部分)

(1).修改目前JS方式调用方式(<script language="JavaScript1.1" src="http://show3.fang.com/afp/door/;ap=s45c63155cf174460001;ct=js;pu=p28ed0b92e3713250001;/?" charset="utf-8"></script>)为后端接口形式,并缓存5分钟(已问过于总,可以接受5分钟缓存时间)

http://show3.fang.com/afp/door/;ap=s45c63155cf174460001;ct=xml;pu=p28ed0b92e3713250001;/?

这种方式需要科捷那边配合修改。

(2).广告也做分级处理,(首屏相关的广告为0级,其他部分的为1级),广告中的图片采用和附1中描述的相同的图片处理策略,将会明显提升首屏用时,整体性能也会有所提升。

(3).大首页首屏,大搜索框背景广告有多个时,第一个广告图片作0级处理,其他图片作1级处理。

附3:相关工具

JS & CSS压缩处理 http://gpbmike.github.io/refresh-sf/

HTML压缩处理 http://kangax.github.io/html-minifier/

seajs 官网 http://seajs.org/

时间: 2024-10-11 19:45:08

大首页的优化修改方案的相关文章

mysql大内存高性能优化方案

mysql优化是一个相对来说比较重要的事情了,特别像对mysql读写比较多的网站就显得非常重要了,下面我们来介绍mysql大内存高性能优化方案 8G内存下MySQL的优化 按照下面的设置试试看:key_buffer = 3840Mmax_allowed_packet = 16Mtable_cache = 1024sort_buffer_size = 32Mread_buffer_size = 32Mread_rnd_buffer_size = 32Mmyisam_sort_buffer_size

大数据表的查询优化方案

如果有一张大表,表中的数据有几百万.几千万甚至上亿,要实现实时查询,查询的结果要在十秒钟之内出来,怎么办?如何做优化? 本人现在做的项目中,有个表的数据超过1千万行,超过3G的数据.现在需要对表中的数据进行查询统计,之前由于没做优化,导致此表的查询效率非常低下,让使用者非常苦恼,于是本人参与了此表的优化. 举个类似的例子,比如表中的结构如下,现在要统计某一天出生的人口数,或者统计某一城市的人口数,或者某一城市某一天出生的人口数. CREATE TABLE `population` ( `popu

20亿与20亿表关联优化方法(超级大表与超级大表join优化方法)

记得5年前遇到一个SQL.就是一个简单的两表关联.SQL跑了几乎相同一天一夜,这两个表都非常巨大.每一个表都有几十个G.数据量每一个表有20多亿,表的字段也特别多. 相信大家也知道SQL慢在哪里了,单个进程的PGA 是绝对放不下几十个G的数据,这就会导致消耗大量temp tablespace,SQL慢就是慢在temp来回来回来回...的读写数据. 遇到这样的超级大表与超级大表怎么优化呢?这篇文章将告诉你答案. 首先创建2个測试表 t1,t2 数据来自dba_objects create tabl

Java中使用FileputStream导致中文乱码问题的修改方案

1 package com.pocketdigi; 2 3 import java.io.File; 4 import java.io.FileInputStream; 5 import java.io.FileOutputStream; 6 import java.io.IOException; 7 import java.io.InputStreamReader; 8 import java.io.OutputStreamWriter; 9 10 public class Main { 11

MySQL大数据的优化以及分解存储

            MySQL大数据的优化以及分解存储 前言:在上一章介绍了MySQL的优化以及优化的思路,那么如果有一种情况如果数据库已经建立好了索引,在使用sql语句索引查询时:但是在慢查询日志当中任然找到了之前的sql语句会有哪几种情况: 1):sql语句的索引没有起到效果, 2):查询的数据量过大,造成数据的查询缓慢, 在工作当中每个数据库都会存在庞大的数据量,比如说访问量等等都会造成数据的查询缓慢,那么如何解决这个问题,接下来往下看: 分区和分表: 我们的数据库数据越来越大,随之而

ecshop优化修改sitemap.xml到根目录

大家都知道sitemap.xml是用来给搜索引擎提交收录的工具,虽然搜索引擎自己也会收录网站但是有了sitemap.xml之后速度会加快不少.而ecshop程序是有自动生成sitemap.xml的功能,只不过ecshop生成的路径在data里面,但是data文件在robots.txt里定义是拒绝搜索引擎访问的,而放出robots.txt也不太合理,所以 这里我们要修改一下到根目录了!这样会让百度和google更喜欢我们的网站 第一步,找到…/admin/sitemap.php 打开 在  116

CentOS忘记密码修改方案以及centos卡在开机登录界面,命令失效的解决方法

CentOS忘记密码修改方案 应用场景 linux管理员忘记root密码,需要进行找回操作. 注意事项:本文基于CentOS7.2环境进行操作的,由于CentOS的版本之间是有差异的,继续之前请先确定好版本 1.在启动GRUB菜单中选择编辑选项,按键  "e"  进入编辑模式 2.在里面找到 "ro"  将 "ro" 修改为 " rw init=/sysroot/bin/bash ": 修改后的内容如下: 3.修改完成之后,同

git clone 速度慢修改方案

git clone 速度慢修改方案 第一步 点击这个网站:https://www.ipaddress.com/ 去查询下面三个域名的对应Ip地址 ? github.com github.global.ssl.fastly.net codeload.github.com 第二步 在/etc/hosts文件最下面添加类似的下面的三行,IP地址以你们得到的地址为准 sudo vim /etc/hosts 192.30.253.112 github.com 199.232.5.194 github.gl

淘宝首页性能优化实践

想必很多人都已经看到了新版的淘宝首页,它与以往不太一样,这一版页面中四处弥散着个性化的味道,由于独特的个性化需求,前端也面临各方面的技术挑战: 数据来源多 串行请求渲染一个模块 运营数据和个性化数据匹配和管理 数据兜底容灾 本次淘宝首页改版,虽已不再支持 IE6 和 IE7 等低版本的古董浏览器,但依然存在多个影响首页性能的因素: 依赖系统过多,数据的请求分为三块,其一是静态资源(如 js/css/image/iconfont 等):其二是推到 CDN 的静态数据(如运营填写的数据.前端配置信息