读书笔记 -- 高性能网站建站指南(JS篇)

简介:

本文目的

最近项目开发到一定阶段了,大部分需求已经完成,可以将精力放到Web性能优化上。首先从前端js入手,找来这本书《高性能网站建站指南》作为指导。周末在家将所有JS相关的优化点阅读了一边,现在记录下要点,作为备忘。

主要有四点需要优化的地方:

  • 将脚本放到底部(Rule 6: Put Scripts at the Bottom)
  • 将JS和CSS放到页面外部(Rule 8: Make JavaScript and CSS External)
  • 最小化JS(Rule 10: Minify JavaScript)
  • 脚本去重(Rule 12: Remove Duplicate Scripts)

下面逐一分析原因(亲,Rule后面的数字越小,越重要哟!)。

 

将脚本放到底部(Rule 6: Put Scripts at the Bottom)

脚本加载会堵塞其他页面元素的并行下载,比如图片。所以,最好将脚本等引用放到页面底部。

脚本放到顶部底部的性能区别,可以参考这个的例子:http://stevesouders.com/hpws/move-scripts.php

 

将JS和CSS放到页面外部(Rule 8: Make JavaScript and CSS External)

从一次页面加载而言,同样大小的页面,内置的css和js比外置的快。因为外置的页面会有多个http请求,由于网络延时和带宽等原因,比较耗时,所以较慢。但是,如果页面被用户访问多次,并且访问期间js和css没有改变,那么外置的页面就会更快,更省流量,并且这种优势,随着页面访问量的加大和频率加快而加强。所以,一个页面的js和css是否放到外部,是基于此页面的访问量访问频率而定的,不能一概而论。

如何在Linux上设置apahce缓存,参见下面的连接:

 

最小化JS(Rule 10:  Minify JavaScript)

精简:去除所有空白符号,如空格,回车。

混淆:做了精简的工作,同时用简化的字符替换函数名和变量名,进一步减JS件大小。优点:相比于精简,它能够节省更多流量,而且可以保护源代码被反向工程。缺点:1)容易引入bug;2)提高维护成本;3)现网bug难以定位。

压缩:采用gzip等算法压缩。

gzip压缩一般可以节省70%,而精简和混淆只有20%。精简或混淆后再gzip,节省的文件也超不过80%。所以,gzip对节省流量贡献最大。大多数情况,只用gzip就OK了。gzip不会有精简和混淆的缺点。

如何在Linux上设置apache的gzip压缩,参见下面的链接:

 

脚本去重(Rule 12: Remove Duplicate Scripts)

脚本可能会多重引用吗?如果同一个页面,只有你一个人编辑,可能不会,但是如果同一个页面有数个人同时编辑,那么引用重复的脚本的概率很大。据此书给出的数据,截至写书时,CNN和youtube两个站点出现过此情况。浏览器然道不会记录已经下载的脚本吗?此书说ff不会重复下载,但是IE会。不过经过IE8实验后,,发现IE8也不会重复下载。可能此书年代较为久远(2008年),也可能是此问题被此书指出之后,IE接受并修复了。所以“纸上得来终觉浅,绝知此事要躬行”。

但是,即使没有多的http请求,那么就可以放任这类情况不管了吗?当然不行,因为虽然不会加载多的http请求,但是会重复执行代码。这样轻则影响性能重则引入bug。可以参见这个例子:http://stevesouders.com/hpws/dupe-scripts-cached10.php。此例子将一个脚本包含了10次,每一次就会将一个全局变量自增1,最后此变量自增了10次。

此书最后还提供了一个自动解决脚本重复的方案,主要是通过js代码引入脚本,有兴趣的同学可以去下载此书看看究竟。

 

OK,上面就是学到的一些前端JS优化的内容,希望对你有帮助!(本文欢迎转载,请注明出处,谢谢合作)


本文转自bourneli博客园博客,原文链接:http://www.cnblogs.com/bourneli/archive/2012/10/29/2744875.html,如需转载请自行联系原作者

相关文章
|
19天前
|
JavaScript 前端开发 UED
网站内容禁止复制的js代码
【10月更文挑战第2天】
|
1月前
|
JavaScript
网站内容禁止复制的js代码
网站内容禁止复制的js代码
|
2月前
|
数据采集 存储 JavaScript
基于Python 爬书旗网小说数据并可视化,通过js逆向对抗网站反爬,想爬啥就爬啥
本文介绍了如何使用Python编写网络爬虫程序爬取书旗网上的小说数据,并通过逆向工程对抗网站的反爬机制,最后对采集的数据进行可视化分析。
161 1
基于Python 爬书旗网小说数据并可视化,通过js逆向对抗网站反爬,想爬啥就爬啥
|
2月前
|
弹性计算 Serverless 开发者
Next.js 建站的生死抉择:Serverless FC 与 Serverless 应用引擎的激烈碰撞,何去何从?
【8月更文挑战第7天】在选择Serverless FC或Serverless应用引擎部署Next.js网站时,需考量便捷性、性能与成本。Serverless应用引擎提供直观界面简化部署管理,而Serverless FC需深入了解函数配置;性能上,应用引擎表现更稳定,尤其高并发场景,但FC按需伸缩;成本方面,FC适合低流量应用,应用引擎大规模使用更经济。两者均具良好扩展性,但体验各异。最终选择应基于具体需求、预算和技术背景。
60 3
|
2月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML、CSS与JavaScript之旅
在这个数字时代,拥有一个个性化的网络空间已成为许多人的梦想。本文将引导你了解如何从零开始,使用HTML、CSS和JavaScript创建属于自己的博客网站。我们将探索这些技术的基础概念,并通过实际代码示例展示如何将静态页面转变为动态交互式网站。无论你是编程新手还是希望扩展技能的开发者,这篇文章都将为你提供一条清晰的学习路径。【8月更文挑战第31天】
|
3月前
|
运维 Kubernetes Serverless
Serverless 应用引擎使用问题之使用Next.js建站,该选择哪个
阿里云Serverless 应用引擎(SAE)提供了完整的微服务应用生命周期管理能力,包括应用部署、服务治理、开发运维、资源管理等功能,并通过扩展功能支持多环境管理、API Gateway、事件驱动等高级应用场景,帮助企业快速构建、部署、运维和扩展微服务架构,实现Serverless化的应用部署与运维模式。以下是对SAE产品使用合集的概述,包括应用管理、服务治理、开发运维、资源管理等方面。
|
3月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的在线音乐网站附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的在线音乐网站附带文章源码部署视频讲解等
58 2
|
3月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的传统文化网站附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的传统文化网站附带文章源码部署视频讲解等
32 1
|
3月前
|
JavaScript 前端开发
【vue】 网站动态背景 | vanta.js的使用
【vue】 网站动态背景 | vanta.js的使用
357 0
|
3月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的学习网站系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的学习网站系统附带文章源码部署视频讲解等
40 0