前端优化,让你的网页显示的更快更流畅
来源:菠菜博 发布时间:2009-06-08 13:09:00
昨天Steve的 讲座涉及了一个我从没考虑的领域,在没法优化后台服务器的时候,如何合理的放置网页的元件让她们在浏览器里显示得更加快。这里,我就根据他的建议,把我对 这博客的更新的过程记录一下。如果想了解更多的信息,可以看他的主页,那里有不少他做的讲座的视频和讲稿,还可以看到他在斯坦福开的课的视频……
优化的过程,实际上就是根据Yslow这个Firebug的插件的提示“升级”的过程(Yslow可用于不同大小的站点,我选择了“Small Site or Blog”这个选项)。为什么要优化?功利的讲,是让你的页面在搜索引擎里表现更好;但更重要的是,省下这1-2秒的时间,能让你的读者更加舒畅地浏览你的站点。
我做了以下的几步:
把所有的CSS文件放在一起;并避免使用@import的方式倒入CSS文件,因为这种方法强制浏览器在import的时候只能运行一个线程,而一般情况是两个线程一起上的。
对于我来说,我新建了一个styleall.css文件,把所有在”screen”情况下使用的CSS全部复制粘贴进去。使用Yslow中的“All CSS” 的工具,很容易就收集到了所有的CSS的信息——三个插件、Google和theme里用的。最终,从9个不同的CSS文件,我缩到了2个,一个给 ”screen”用,一个给”print”用。在修改了theme调用的CSS的方法后,我到每个插件的设置页面,禁止调用相应的CSS。如果插件不允许 修改的话,我就修改插件的源代码,搜索“.css”,然后删掉。把所用的javascript合到一起,然后尽可能的放在页面的末尾,因为js的下载强制性的是单线程,放在页面的尾部,给读者印象是页面已经完全下载好了,而实际上有些功能的js还在下载中。
对于我,因为所有的js都不没有使用document.write,可以放心大胆的合并并放到页面的尾部。我使用Yslow中的“All JS Minified”工具,操作很快:所有插件使用的合并到一个min.js在插件的根目录;所有主题使用的合并在theme的根目录;我没有合并来自Google的javascript到前面的两个汇总文件中,因为根据我的理解,Google会根据浏览器的不同把不同的js推送出来。<script type='text/javascript' src='http://en.dogeno.us/wp-includes/js/jquery/jquery.js?ver=1.2.6'></script><script type='text/javascript' src='http://en.dogeno.us/wp-includes/js/jquery/jquery.form.js?ver=2.02'></script>
理论上我要把上面quene的部分改成直接连接到文件的模式,因为“don’t use querystring – breaks proxy caching”;但这步涉及修改wordpress的核心代码了,没敢。合并js之后,记得到相应的地方禁止原来的javascript的调用,然后把 调用合成js的代码放在footer.php或类似的地方,比如我的
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/Min.js"></script><script type="text/javascript" src="http://en.dogeno.us/wp-content/plugins/Min.js"></script>
使用sprites工具,合并背景图片,使用CSS的方法调用。
对于我,直接跳过,因为站点没用多少背景图片;而且这步的修改很烦,“pain in the a#%!”。使用Yslow中的“All Smush.It”工具,压缩图片。
这里的操作很简单,直接下载在Smush.it上生成的文件,下载替换即可。在博客或者网页服务器的根目录下修改.htaccess文件,实现图片的cache以及gzip传送。
# Add a far future Expires header<FilesMatch "\.(png|gif|jpg|js|css|ico)$">ExpiresActive OnExpiresDefault "access plus 10 years"Header set ETag ""</FilesMatch># Compress html, XML, css and js<IfModule mod_deflate.c>AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-javascript application/javascript</IfModule>
对于Bluehost的服务器来说,貌似deflate是不开的,我就没招了。
预先下载大的背景文件。
我没有做这一步,因为没有大的背景文件。Steve的本意是“big sprite.png blocks parallel downloads; if only we could load it above style.css preload it!”,也就是利用两个线程下载的优势,在空挡把大文件先下载下来。
上面的操作,让这个站点Yslow评分从F升到了B,花费时间2个小时;貌似显示快了,你觉得呢?
猜你喜欢
- 前言哈喽,大家好,我是asong。每门语言都有自己的语法糖,像java?的语法糖就有方法变长参数、拆箱与装箱、枚举、for-each?等等,
- 不过最近发现这个可视化操作有点点问题,就是当数据条数超过一定数目EMS SQL Manager就挂了,也不知道是否是软件问题……当然该开始我
- 这篇文章主要为大家详细介绍了python批量爬取下载抖音视频,具有一定的参考价值,感兴趣的小伙伴们可以参考一下项目源码展示:'
- PyTorch之TensorDatasetTensorDataset 可以用来对 tensor 进行打包,就好像 pyt
- 多支付原理1.利用鸭子类型。规定前台传过来支付方式。pay_methon2.再支付方式里面实现pay(名字统一)方法3.回调函数,在支付方式
- 本文实例讲述了Python基于time模块求程序运行时间的方法。分享给大家供大家参考,具体如下:要记录程序的运行时间可以利用Unix系统中,
- 一、什么是Golang?Golang(又称Go)是一种由谷歌公司开发的编程语言。它是一种静态类型、编译型、并发型语言,被设计用于构建高效、可
- 本文介绍了python OpenCV学习笔记直方图反向投影的实现,分享给大家,具体如下:官方文档 – https://docs.opencv
- 开发工具python版本:3.6.4相关模块:pygame;以及一些python自带的模块。环境搭建安装python并添加到环境变量,pip
- 1.首先主题选择不要落俗!现在许多的个人主页就象“大锅饭”。题材包罗万象,内容雷同无味。人人都是“软件速递”“音乐宝库”“主页教程”等等。让
- 一、前言近期在实际项目中使用到了PID控制算法,于是就该算法做一总结。二、PID控制算法详解2.1 比例控制算法例子: 假设一个水缸,需要最
- 在 JavaScript 中,使用字符串连接有 几 种方式:连接符(+)、反引号(`)、join()、concat()。一、使用连接符 &a
- 启动IDLE后会打开Python shell窗口。当键入代码 时,它会基于Python语法提供自动缩进和代码着色功能。使用IDLE中的Pyt
- PyQt5是基于Digia公司强大的图形程式框架Qt5的python接口,由一组python模块构成。PyQt5本身拥有超过620个类和60
- 树莓派与arduino串口通信第一步:先设置硬件串口分配给GPIO串口输入sudo raspi-config命令进入树莓派系统配置界面,选择
- 配置文件如下,下面对配置文件进行一一解释"""Django settings for film1_manage
- 1. 关闭mysql服务# service mysqld stop2. 检查是否有rpm包,如果没有用rpm安装过mysql,不应该有残留,
- python自带了日志模块logging,可以用来记录程序运行过程中的日志信息。同时python还有logbook模块用来取代logging
- 在Python中使用字典,格式如下:dict={ key1:value1 , key2;value2 ...}在实际访问字典值时的使用格式如
- 一、什么是执行计划(explain plan) 执行计划:一条查询语句在ORACLE中的执行过程或访问路径的描述。 二、如何查看执行计划 1