前端优化基础规则

rocket

前几天着重解释了几个点,其他的就列出来,做个了解,等有更多理解时再做针对性的阐述。

1、最重要的规则:减少 HTTP 请求数量。减少组件数量,由此减少 HTTP 请求的数量,这是改善响应时间的最简单的途径。

具体方法有:
图片地图:在一个图片上关联多个 URL(做多个超链接),比如每个导航项都有个图片和链接,将这些图片合并,在上面做图片地图,节省请求;
Css Sprites:也可以合并图片,但更为灵活;
内联图片:就是使用 data: URL 的模式,直接将图片数据包含在页面中,数据需要经过 base64 编码;
合并脚本和样式表;

2、使用内容发布网络:将内容发布到离用户更近的位置,减少 HTTP 响应时间。现在国内 CDN 服务提供商已经有很多了。

3、添加 Expires 头,利用浏览器缓存:首次访问的响应时间并不是唯一需要考虑的,页面初访者会进行很多的 HTTP 请求,但通过使用长久的 Expires 头,使很多组件都可以缓存在浏览器端。但是,要确保用户能获取组件的最新版本,就需要在 HTML 页面中修改组件的文件名,需要一些技巧。

4、压缩组件:将组件压缩可以减小体积,所以可以提高 HTTP 响应时间。浏览器请求时会声明支持的压缩格式,服务器端如果压缩了则会用头信息通知浏览器。gzip 是目前支持最广,最理想的压缩方式。文本文档都可以压缩,图片和 PDF 不应该压缩(本来就压缩过了)。压缩的成本在于服务器压缩文件花费的 CPU 资源,还有客户端对文件的解压缩,经验上通常对大于 1KB 或 2KB 的文件进行压缩。

5、样式表放头部,脚本放底部:这个前两天的文章已经阐述过了,略。

6、避免 CSS 表达式:IE 支持在 CSS 中插入 Javascript 表达式,如果页面中有 CSS 表达式,加载页面、各种事件发生时(改变大小、滚动、鼠标移动等)CSS 表达式可能都会被重新求值,在页面上来回移动鼠标,都可以轻易产生上万次的求值。所以,太危险了。

7、使用外部的 Javascript 和 CSS:纯粹而言,内联的 Javascript 和 CSS 快,但很多页面都用了相同的 Javascript 和 CSS,那么外部文件可以提高这些组件的重用率。两全其美的解决方法,可以在页面加载完成后,再去加载其他页面的组件。

8、减少 DNS 查询:因为 DNS 解析也是要花时间的,而且浏览器对缓存的 DNS 记录的数量也有限制。

9、精简 Javascript:原理上和 gzip 压缩类似,都是减小文件。Javascript 还用到“混淆”的方法,修改替换变量名,将代码进一步缩小,但有几个缺陷:会引入更多错误、难维护、难调试,所以,如果已经用了 gzip 压缩,只要精简掉空格啥的就够了。

10、避免重定向:重定向会增加响应时间,如果是网页文档被重定向了,重定向过程中网页还是白屏,体验很差。重定向最常用的是 301 和 302 这两个类型。

11、移除重复脚本:团队大了或脚本多了会搞出相同脚本加载了多次,这个不太常见,如果脚本多了,就要有管理的措施。

12、配置 Etag:ETag 指实体标签(Entity Tag),是 Web 服务器和浏览器用于确认缓存组件的有效性的一种机制。比起其他条件请求只能用时间来判断缓存的有效性,ETag 则是用组件的某些属性来构造的(比如 Apache 1.3 和 2.x 的 ETag 格式是 inode-size-timestamp),所以它在判断缓存有效性时更灵活。但是在分布式环境下 ETag 会带来问题,一般会修改默认的 ETag 构造格式。

13、缓存 Ajax 请求:有条件的缓存一些 Ajax 请求,可以提升体验。

最后,这些规则其实只是实践,最基础的知识,是 HTTP 协议规范、浏览器的工作原理、网络原理,掌握好这些,才能深刻理解这些实践,并创造更佳实践。

 

封面图片来自花瓣网,伯仲舍设计。我觉得上面的规则像一大堆零件,还涉及其他一堆零件,找“零件”时,发现了这些用零件设计出来的机械甲壳虫。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">