WEB学习笔记3-开发环境和工具

WEB前端集成开发环境:Aptana Studio和WebStorm
WEB前端代码调试:IE浏览器自带的IE Dev Toolbar,Chrome浏览器自带的Developer Tools,Firefox浏览器插件Firebug,Safari浏览器自带的Develop系列工具
WEB前端性能分析:常用的Web前端性能分析工具有YSlow、PageSpeed及各浏览器自带开发工具,
 

Chrome开发工具
  Network:查看各个资源请求和下载所用的时间
    Timeline:查看网页渲染和交互过程中各个步骤所花费的时间,从资源的加载到javascript的解析执行、样式的应用和绘制
  Profiles:查看网页的CPU以及内存占用情况报告
  Audits:提供了各种资源和配置优化的建议和未使用CSS规则的列表

代码和资源压缩

  1:web服务器开启Gzip压缩,在HTTP中允许客户端从服务器上下载压缩的内容,服务器配置人员可以查看服务器对应的配置文件,开启Gzip压缩。

  2:javascript代码压缩,原理一般是,去掉多余的空格和回车,替换长变量名,简化一些代码写法等。压缩工具:Uglify,YUI Compressor,Closure Compiler

  3:  CSS代码压缩,和javascript原理类似。压缩工具:CSS Compressor

  4: Html代码压缩,压缩工具:HTMLCompressor

  5: 图片资源压缩,压缩工具:TinyPNG工具压缩PNG图片,JPEGmini压缩JPG图片,本地应用程序,推荐ImageOptim

推荐在网站开发后期,甚至在网站哦发布阶段做代码和资源的压缩,发布阶段压缩代码,推荐使用ANT工具;前端自动化构建工具Grunt,也可以集成代码和资源的压缩工具。

posted @ 2018-07-06 11:01  努力的喵喵喵  阅读(120)  评论(0编辑  收藏  举报