请选择 进入手机版 | 继续访问电脑版
赛鸥桌面 设为首页收藏本站赛鸥提示:

 找回密码
 加入赛欧

QQ登录

只需一步,快速开始

搜狗专业排名,10页前可做!接快速排名,强进百度首页(上后付)云香港美国空间免费试用~另接仿站淘宝天猫免费领取大额优惠券
查看: 889|回复: 1

[分享] 刚刚写了一个项目,但页面加载速度出现了问题,所以研究了一下页面加载的速度,看了很 [复制链接]

Rank: 2

升级 
 
18.57%
威望
13 点
鸥币
14 枚
贡献
23 点
赛币
0 枚
注册时间
2012-10-26
发表于 2017-2-4 11:41:59 |显示全部楼层
看帖容易编辑难!赛欧提示您:做人要厚道、看帖要回帖,好贴不评分、大家鄙视你!
刚刚写了一个项目,但页面加载速度出现了问题,所以研究了一下页面加载的速度,看了很多资料,大致汇总了一下,希望和小伙伴一起学习进步;
一、图片:
1、图片精灵;
将导航或是模块的小图片放在一起,通过background-position定位减少http请求
2、压缩图片(压缩工具网址);
简易版:http://www.tuhaokuai.com/image
imageMagic图片处理工具:http://www.imagemagick.org/script/index.php
3、尽量使用gif格式和jpg格式的图片(控制jpg图片的质量),减少图片的大小;
背景图片,不需要透明的,使用jpg格式;需要透明效果的使用png格式
4、图片比较多,可以使用懒加载;
5、将图片放在其他服务器上做cdn分发;
6、减少图片和特效,减少使用其他网站的图片和视频;
7、不要再html中缩放图片;
8、facvicon ico要小,并做缓存,设置三个月以上;大小最好是1k;
9、图片转化成base64位(有缺点,好像是会放大图片,有待研究);
二、css
1、灵活运用类名,模块化样式;
将功能模块相同的页面部分,用类写成公共样式
2、将样式表置于head中;
3、精简css代码;
1)合并font、padding、margin、border、list-style、text、transform、transition、animation
2)合并类中相同的部分
3)删除代码中无效的定义(注:处理兼容性的除外)
4)按样式类型对css代码进行排序
       尺寸(Dimensions)、
显示与浮动(Diplay&Flow)、
定位(Positioning)、
边框相关属性(Margins、Padding、Borders、Outline)、
字体样式(Typographic Styles)、
背景(Backgrounds)、
其他样式(Opacity、Cursors、Generated Content)。
5)相关链接
精简css代码:
http://www.cnblogs.com/dangjian/p/4299325.html
css命名方法:
http://www.zhangxinxu.com/wordpress/2010/09/ç2¾ç®€é«˜æ•ˆçš„css命名准则æ–1æ3•/
4、使用插件:csscomb
5、代码完成后,压缩。
6、避免使用css表达式
7、用link代替@import
8、避免使用滤镜
三:js
1、最后加载js;
2、减少dom操作;
3、删减不必要的注释和冗余、无用的代码;
4、增加代码的复用性;
5、压缩js代码,(自动化构建工具gulp);
js/css压缩工具:http://tool.oschina.net/jscompress/
6、js代码精简;
http://www.llsffx.com
四、内容
1、避免跳转;
2、减少dom元素事件的绑定;
3、预加载;
4、延迟加载js效果;
5、减少http请求(合并文件、图片);
6、不要出现404错误。

和朋友一起学习也能赚钱...

赛欧状元

帅哥

Rank: 12Rank: 12Rank: 12

升级 
 
6.97%
威望
650 点
鸥币
354 枚
贡献
634 点
赛币
25 枚
注册时间
2010-10-19
发表于 2017-2-6 13:38:11 |显示全部楼层
赶快来占有我吧!
很好很强大 学习了 感谢楼主分享

使用道具 举报

您需要登录后才可以回帖 登录 | 加入赛欧

关闭

赛鸥推荐内容

精心分享本人博客站群轮链心得
博客站群轮链应该怎样设置呢?对于老seoer不陌生,但是对于新手仍就是个问题,那么我今天就来说说博客轮链设置,(以下是本人的做法)。首先少量搭建第三方博客(权重高的例wordpress,blogger等)...

查看 »

赶快加入赛欧免费学习英文SEO吧!QQ直接登录一步搞定...

关于赛鸥|服务范围|联系我们|手机版|Archiver|英文seo 淘宝客

GMT+8, 2019-3-19 10:23 , Processed in 0.036592 second(s), 17 queries .

Powered by 赛鸥网络营销知识社区

© 2009-2012 赛鸥站长网

回顶部