《Web前端开发最佳实践》——2.5 Web前端代码开发和调试-阿里云开发者社区

开发者社区> 华章计算机> 正文

《Web前端开发最佳实践》——2.5 Web前端代码开发和调试

简介:
+关注继续查看

本节书摘来自华章计算机《Web前端开发最佳实践》一书中的第2章,第2.5节,作者:党 建 更多章节内容可以访问云栖社区“华章计算机”公众号查看。

2.5 Web前端代码开发和调试

2.5.1 Web前端集成开发环境
很多集成开发环境(IDE)都集成了前端代码IDE,如Visual Studio、Eclipse等,但在纯粹的前端开发中,这些IDE显得不够强大而且不够轻量。这里推荐两款强大的IDE:Aptana Studio和WebStorm。
Aptana Studio是一个开源的Web开发工具,有非常强大的JavaScript编辑器和调试器(见图2-4)。它的主要特性包括:


31f7acec86c43d946b74225d08ebad97a9fb6e2e
  • JavaScript函数、HTML及CSS的Code Assist功能。
  • 显示JavaScript、HTML及CSS代码的结构。
  • 代码语法错误提示。
  • 调试JavaScript代码。
  • 支持流行的AJAX框架的智能提示:jQuery、Prototype、YUI、Ext JS等。

WebStorm是JetBrains专门为Web开发人员提供的一款商业的JavaScript开发工具(见图2-5)。其功能和Aptana Studio类似,主要有智能代码提示、代码格式化、代码调试、代码结构展示、代码重构等。


040cde7cdfb73c132885690440b04b9ff9fb6c92

2.5.2 Web前端代码调试
各主流浏览器都自带的有调试工具,如IE浏览器自带的IE Dev Toolbar,Chrome浏览器自带的Developer Tools,Firefox浏览器插件Firebug,Safari浏览器自带的Develop系列工具。这些工具的功能类似,都可以查看HTML、CSS代码,动态更改页面的HTML和CSS代码并实时查看修改效果,也可以调试JavaScript代码的执行。这些自带的工具基本可以满足前端的代码调试工作。
图2-6展示的是Chrome自带的Developer Tools。


8e26a263817e9aebf1c7cf67df71280bd040f2d9

2.5.3 Web前端性能分析
常用的Web前端性能分析工具有YSlow、PageSpeed及各浏览器自带的开发工具等。YSlow是由雅虎公司开发的一款免费工具,主要的特性有:

  • 基于不同的规则评定网站整体性能评分。
  • 给出提高网页性能的建议。
  • 统计页面加载的组件。
  • 页面的统计信息视图。
  • 相关性能分析的工具集,如JSLint、Smush.it等。

YSlow可以以插件的形式安装在多个浏览器上,如Firefox、Chrome、Opera、Safari及一些移动浏览器等。
图2-7所示为在Firefox浏览器中YSlow作为Firebug的一部分。
YSlow的性能分析基于23条规则,这23条规则是雅虎公司性能改进团队制定的34条提高Web性能“军规”中的一部分。YSlow性能评分也是针对这23条规则逐项评分的。其官方网站上列出了这23条规则及具体说明,值得前端开发者仔细阅读和学习。
PageSpeed出自于Google公司,也是一款免费的工具,提供了在线工具和浏览器插件两种方式。功能和YSlow类似,只是检查的规则稍有不同。


339bbcbd48e9d32824f135d1f308ed57da14591e

各主流浏览器自带的开发工具也可以辅助检测网页的性能,比如Chrome的开发工具。Chrome的开发工具中有Network、Timeline、Profiles和Audits 4个菜单项,Network中可以查看各资源请求和下载所用的时间,Timeline中可以查看网页渲染和交互过程中各步骤所花费的时间,从资源的加载到JavaScript的解析执行、样式的应用及绘制,Profiles中可以查看网页的CPU及内存占有情况报告,Audits中提供了各种资源和配置优化的建议和未使用CSS规则的列表。这4项功能会极大地帮助开发者检测并优化网页性能。
2.5.4 代码和资源的压缩与合并
在网站发布时,一般会压缩前端HTML、CSS、JavaScript代码及用到的资源文件(主要是图片文件),目的是加快文件在网络中的传输,让网页以更快的速度展现。当然,CDN分发、缓存等方式也是加快代码或资源文件传输的方式,但压缩代码和资源文件是最简单有效的手段之一。代码压缩的优点逐渐得到了大部分开发者的认可,并已经成为Web前端开发中不可或缺的一个步骤。以下是代码和资源压缩的具体实践方法。
(1)Web服务器开启Gzip压缩
在HTTP中允许客户端可以选择从服务器上下载压缩的内容,Gzip就是其中一种支持的格式。Gzip是一种常见的压缩算法,可以参考维基百科中关于这种算法的详细介绍。目前,Gzip已经得到了大部分的主流Web服务器(比如IIS、Nginx、Apache、Lighttpd等)和主流的浏览器的支持。服务器配置人员可以查看服务器对应的配置文档,开启Gzip压缩。服务器启用了Gzip压缩后,代码文件有更小的体积,尤其是文本文件。
Web服务器开启Gzip压缩后,会在Response的header中增加Content-Encoding:gzip。可以通过检查此header项来判断服务器是否开启了Gzip压缩。
(2)JavaScript代码压缩
JavaScript压缩的原理一般是去掉多余的空格和回车、替换长变量名、简化一些代码写法等。JavaScript代码压缩工具很多,有在线工具、应用程序、编辑器插件。其中使用最多的是UglifyJS、YUI Compressor和Closure Compiler。UglifyJS不仅仅是一个压缩工具,同时具有JavaScript语法分析和代码美化功能,包括代码缩减、代码转化等。如:

var a = 10; var b = 20; ==> var a=10,b=20;
if (foo) bar(); else baz(); ==> foo?bar():baz();
if (foo) bar(); ==> foo&&bar();
new Array(1, 2, 3, 4)  => [1,2,3,4]

Closure Compiler出自Google公司,功能和UglifyJS类似,只是压缩的算法不同。
YUI Compressor出自雅虎公司,此工具不同于以上两个工具。UglifyJS和Closure Compiler不仅是Compressor,同时还是Compiler,会针对代码进行优化,而YUI Compressor仅仅是压缩。
这3个工具都有对应的在线版本,也可以本地安装后使用命令行方式。如果不想手动压缩代码,则可以选择编辑器自动化集成方式,比如在WebStorm编辑器中配置File Watchers。
(3)CSS代码压缩
CSS代码压缩原理和JavaScript代码压缩的原理类似,也是去掉不必要的空格、回车、注释等,并同时优化合并一些CSS规则定义,让规则更简洁。比如下面的代码:

background-color:#fff;
background-image: url(image.gif);
background-repeat:no-repeat; 
background-position:?top left;

会优化为:

background:?#fff url(image.gif) no-repeat top left;

CSS代码压缩工具也有在线、本地应用程序和编译器插件。比较有名的在线工具是CSS Compressor,压缩时可以选择各种配置模式。自动化工具可以选择上面提到的JavaScript压缩工具YUI Compressor,它也可以压缩CSS代码。使用相同的工具压缩JavaScript和CSS代码,省去了安装多个工具的麻烦。
(4)HTML代码压缩
压缩HTML代码的争议很大,反对的一方觉得压缩的作用不大,不像压缩JavaScript和CSS代码,压缩HTML代码仅仅是去掉空格、回车、注释等无关字符,并不会简化HTML代码本身,所以觉得在服务器开启Gzip就足够了。另外,压缩HTML代码也有一些限制,比如网站开发时,HTML页面并不是单纯的HTML代码,而是和服务器端脚本混合在一起,比如PHP、ASP、JSP、ASP.NET等。压缩类似这些页面时,压缩的规则就比较复杂,也容易破坏代码。目前可以使用的HTML压缩工具并不多,使用最多的是这款工具:HtmlCompressor。
使用此工具的时候需要仔细调查和测试,避免压缩工具破坏页面的代码。
(5)图片资源压缩
除了代码的压缩外,网页中使用最多的资源文件就是图片。在一般的网站中,图片资源所占的比重还是挺大的。图片压缩工具主要是在线工具和本地应用程序,还没有一款使用较为广泛的编辑器插件可用。还好,在一般项目中,图片的变化并不是很大,图片的自动化压缩工具的需求并不是很迫切。
图片压缩工具也很多,以在线工具居多。在线工具中,推荐使用TinyPNG工具压缩PNG格式图片,推荐使用JPEGmini压缩JPG格式图片。本地应用程序,则推荐ImageOptim,这是一款强大的工具,集成了多种压缩工具,可以压缩多种格式(如PNG、JPEG及GIF动画)的图片,支持拖放操作,使用也非常方便。
以上就是网站发布时可以使用的各种资源压缩工具。除了在项目中使用合适的压缩工具之外,何时压缩代码也很重要。因为压缩后的代码会影响代码的调试,使得开发者不易确定出错代码的位置,调试JavaScript代码时也不易设置断点,所以推荐在开发后期,甚至是在网站的发布阶段做代码和资源的压缩。如果放在网站发布阶段压缩,则开发者在开发过程中不需要考虑代码压缩的问题,方便了开发者的开发与调试。发布阶段压缩代码的方案也很成熟,比如使用ANT工具。ANT是一个基于Java的构建工具,在这个工具中可以构建代码和资源压缩的任务:使用 YUI 压缩程序合并和压缩 JavaScript和CSS,使用jpegtran和OptiPNG优化JPG和PNG文件,使用HtmlCompressor压缩HTML及移除调试代码。
目前比较流行的前端自动化构建工具Grunt也可以集成代码和资源的压缩工具。在Grunt的插件列表页面上,有很多的压缩代码和资源文件的插件可用。比如,压缩JavaScript的grunt-contrib-uglify插件、压缩CSS代码的grunt-contrib-cssmin插件及压缩图片的grunt-contrib-imagemin插件等。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
从P4到P9, 在马云家写代码到双11前端PM
阿里妹导读:今年的双11已经是阿里资深前端技术专家舒文来阿里的第11年,从应届生到双11前端PM,他一路升级打怪,实现了岗位上从P4到P9的晋升。这第11届双11顺利结束之际,他把在阿里这些年的成长经历做一个总结和分享,希望你能在他的故事中得到些许启发。
18514 0
关于低代码开发工具的思考
低代码开发工具研发的蓬勃兴起跟目前的业务软件开发现状息息相关,目前,信息管理系统的研发需求成爆炸式增长,其软件规模和复杂程度不断提高,业务系统开发随着复杂度的提高,开发的代码重复度越来越高,开发效率直线下降,人力成本越来越高,而很多的研发工作都可以用低代码开发工具所替代,从而得到解决目前困境的方法。本文通过对信管通低代码开发平台研发过程的所思所想,提出自己的一些观点,供同行商榷。
649 0
技能学习:学习使用node.js + vue.js,开发前端全栈网站-1.工具和本地环境
Node.js 运行环境是引领前端开发人员的“一道光”,让前端开发人员**仅**利用已掌握的 js 语言就可以实现对网站服务器环境的搭建与运行。打破了以往前后端分工合作、交流对接的惯性习惯。 相对于传统PHP、JAVA开发,Node.js 附带的npm更方便、快捷地让前端开发人员更快、更方便地使用和获取其他前端大神封装好的 js 类库和精美UI样式库,舍去不同语言和不同编码的切换过程。
225 0
谈谈低代码在前后端开发的应用领域
从一个从事过前后端大数据AI开发的角度谈下低代码的应用
258 0
Web前端,让你代码整洁的原则
写Web页面就像我们建设房子一样,地基牢固,房子才不会倒。同样的,我们制作Web页面也一样,一个良好的HTML结构是制作一个美丽的网站的开始,同样的,良好的CSS只存在同样良好的HTML中,所以一个干净的,语义的HTML的优点很多,那么平时制作中,我们做到了这一点吗?我们一起来看一张图片:   上图展示了两段代码,我想大家都只会喜欢第一种,我们先不说其语义,至少他的结构让我们看上去清爽,而第二种呢?一看就是糟糕的代码的代码,让人讨厌的代码。
917 0
Android 开发中的代码片段(1)
前言 收集Android开发中常用的一些代码片段,留存记录 代码 禁止截屏 对安全性要求比较高的APP可以用得到 getWindow().addFlags(WindowManager.LayoutParams.FLAG_SECURE) 禁止输入特殊字符 经历过 Tester 的无限摧残得出的结果,主要是使用正则表达式来完成校验。
963 0
10059
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载