UI笔记——网站优化

最新推荐文章于 2021-03-12 16:36:28 发布

iteye_18390

最新推荐文章于 2021-03-12 16:36:28 发布

阅读量160

点赞数

分类专栏： UI 文章标签： ui javascript 运维 ViewUI

本文链接：https://blog.csdn.net/iteye_18390/article/details/82517053

版权

UI 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

响应慢甚至停止响应的网站非常恼人。

将会用到的工具

文本编辑器的选择
配置好的LAMP服务器（Linux、Apache或Lighttpd、Mysql、PHP5）
FTP帐号。FTP是向服务器中上传文件的通用方法。
SSH帐号。为了修改远程Linux服务器的配置文件，你需要能通过访问的SSH帐号，可选的客户端有Putty或者Jellyfish。
MySQL初级调试工具（如果没有访问MySQL配置文件的权限、你的服务器不是Linux、你的数据库不是MySQL——请跳过）否则，请登录http://launchpad.net/mysql-tuning-primer/下载最新的MySQL调试脚本。使用FTP或者SSH将脚本上传到服务器中，但是先不要运行。
安装Smush：这是一个Firefox插件，提供了大量图片优化的快捷方式，它是一个顺手的工具。登录http://sumsh.it/下载。Firefox的NoScript插件会和冲突，请禁用。（Smush被包含在YSlow中，已经不需要独立下载安装了）
安装Firebuy和YSlow插件：Yahoo提供了一个Firebug插件YSlow，提供了快速分析网站的功能，并且提供了非常实用优化网站想要速度的建议。
下载安装Firefox
运行Firefox并按照Firebug
安装YSlow
开始分析。（步骤重启Firefox打开网站，选择工具>Firebug>OpenFirebug，然后打开YSlow标签点击Performance）

在IMG标签中表明正确的图片尺寸

大图片缩放成小像素图片，不要让浏览器对图片进行缩放，这样很耗时，请自己手动修改。

好处：处理过的图片更易于传输，速度更快，提供了更好的用户体验。

减小图像的尺寸

应当注意网站中每个图片的尺寸，检查是否可以将图片的调色板设置为256色或更少。

好处：网站中的图片越小，加载时间越快，用户体验越好。

图片聚合

即使用CSS精灵

好处：减少HTTP的请求数目降低了网站的加载时间，提升了用户体验。

服务器和内容分发网络

YSlow建议将静态内容，如图片放在世界各地的服务器上，这样图片的储存就更接近用户。

如果可以的话，租用一台专门的服务器，作为一台廉价的今天内容专用服务器。

好处：合理使用缓存能够降低带宽费用，提供用户体验。

整合CSS和JavaScript

通过将所有样式文件放入一个大的样式文件，将所有JavaScript文件放入一个JavaScript文件，可以减少传送用户访问网页时的HTTP请求数量。当然，开发过程中可以继续使用多样式和多JavaScript文件的方法。但是每个开发周期中都需要进行一次文件的整合

可以通过文本编辑器进行手工整合。或者，如果你使用Linux，在CSS文件夹中，可以用Cat（concatenate的缩写）命令整合文件.

因为文件中存在覆盖的问题（CSS中的属性重写或这JavaScript中的代码依赖），在整合过程中需要特别的注意JavaScript文件和CSS文件的加载顺序。如果你决定进行整合，确保在不同文件之间使用注释进行分割。

好处：减少HTTP请求数量可以提高网站的响应时间，同时带来用户体验的提高。

CSS放在顶部，而JavaScript放在底部

将CSS文件放在HTML文件的<head></head>标签之间。这样，浏览器在得到THML元素之前就知道如何进行显示，而不必在加载的过程中对元素进行重新调整。

将JavaScript文件放在<body>结束标签之前。这样可以避免JavaScript正在加载中的页面进行渲染。

好处：尽可能加快页面的加载速度，提升用户体验度。

压缩CSS和JavaScript

很多基于正则的JavaScript压缩器在遇到有问题的代码时非常不紊地。为了节省时间，最好先使用JSLint检测一遍代码，将找出的问题分类。即使代码通过了JSLint的检测，也应当尽力保证代码接近完美。因为在很多情况下，一个分号都会导致压缩器的失败。

在文本编辑器中复制你的CSS或JavaScript代码，然后粘帖到Minify（http://www.reneschmidt.de/tools/minify/）相应的输入框中。单击“Hit Me”，并将结果应用在你的网站上。压缩代码越多，网站的表现就会越好。对于JavaScript来说，效果比较明显，而CSS则小不了太多。（整合工具Packer 3.1和Minify在代码压缩方面有着非常好的表现，当然其他工具不错也可以尝试如YUICompressor）

好处：减小了文件尺寸，降低了带宽消耗，JavaScript的表现得到了显著地提升，改善了用户体验。

使用外部CSS和JavaScript文件

不要使用内嵌的CSS或JavaScript，把它们都放在外部单独的文件中。这样不仅易于理解，而且也减少的了需要缓存的HTML文件的尺寸，提高了缓存的利用率（复用），同样也降低了HTTP的请求数。

好处：改善了缓存利用，页面重新加载时间变得更短，提升了用户体验。

选择一个文档类型

选择文档类型虽然对于改善速度没什么直接影响，但是通过为浏览器指定清晰、明确的HTML和CSS解析规则，可以充分发挥它们的潜力。

不要在任何地方漏掉文档类型的声明，这样会导致浏览器去猜测应该使用什么标准。

好处：告诉浏览器处理网站的方式，是非常重要的步骤，确保了在不同浏览器间网站外观的一致性。

验证页面

特别是你提供基于网络的服务时，潜在用户会仔细分析你的站点，来判断你对于质量的关注究竟到何种程度。通过W3C（http://validator.w3.org）的验证服务的页面表明你对于质量非常关注，而且致力于设计在普通网络浏览器上表现一致的页面。（潜在用户的信任感）

不要使用CSS表达式

支持CSS表达式不被网页标准所接受，而且要比普通的CSS花费更多的步骤，处理速度明显地降低了，这是一种资源的浪费。（即使它的“创造者”微软，也在IE8中抛弃了它）