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,也可以集成代码和资源的压缩工具。

WEB学习笔记3-开发环境和工具的更多相关文章

  1. Django:学习笔记(1)——开发环境配置

    Django:学习笔记(1)——开发环境配置 Django的安装与配置 安装Django 首先,我们可以执行python -m django --version命令,查看是否已安装django. 如果 ...

  2. Cocos2dx 学习笔记整理----开发环境搭建

    最近在学习cocos2dx,预备将学习过程整理成笔记. 需要的工具和环境整理一下: 使用的版本 cocos2dx目前已经出到了v3.1.1,学习和项目的话还是用2.2.3为宜,毕竟不大想做小白鼠,并且 ...

  3. Flink学习笔记:Flink开发环境搭建

    本文为<Flink大数据项目实战>学习笔记,想通过视频系统学习Flink这个最火爆的大数据计算框架的同学,推荐学习课程: Flink大数据项目实战:http://t.cn/EJtKhaz ...

  4. Qt学习笔记-1 开发环境建立

    关于Qt在这里不做过多介绍,吸引我的地方是有几点: 1.用C++开发语言: 2.多平台(wWindows.MAC.Linux.Android等): 3.界面所见几所得.其他的可以百度上了解: 从本文开 ...

  5. PHP学习笔记(1) - 开发环境搭建

    运行环境:phpstudy 它基本包括运行php应用需要的一切,php. apache.mysql,一键傻瓜安装 装好之后只需要配置虚拟主机和修改host文件就可以支持多站点 下载: http://w ...

  6. angular2.0学习笔记1.开发环境搭建 (node.js和npm的安装)

    开发环境, 1.安装Node.js®和npm, node 6.9.x 和 npm 3.x.x 以上的版本. 更老的版本可能会出现错误,更新的版本则没问题. 控制台窗口中运行命令 node -v 和 n ...

  7. Webpack4 学习笔记八 开发环境和生产环境配置

    webpack resolve属性 webpack 区分开发环境和生产环境 webpack resolve属性 该选项的作用是设置模块如何被解析. resolve.alias: 设置别名, 在vue中 ...

  8. perl学习笔记--搭建开发环境

    windows下perl开发环境搭建 perl下载地址:http://www.activestate.com/developer-tools 各个插件的安装方法:(通过代理上网的方法) 方法一:pad ...

  9. Android学习笔记1——开发环境配置

    一.JDK配置 Android是基于Java进行开发的,首先需要在电脑上配置JDK(Java Development Kit).在http://www.androiddevtools.cn/下载对应系 ...

随机推荐

  1. 配置rpm本地源及局域网环境下使用

    LInux个人开发过程中可以直接连到公网,所以想要安装各种软件时直接安装即可,但工作环境往往很让人头疼. 如果应用场景是没法链接外网的,公司内部绝大多数情况下是在自己的局域网下玩,这时候想装个软件是相 ...

  2. python2.x 与 python3.x的不同

    python2.x 与 python3.x 的区别: 1. python2.x 的源码编码不规范,源码重复较多:python3.x 的源码编码规范,清晰.优美.简单 2. python2.x的默认字符 ...

  3. Spring Boot:定时任务

    在我们开发项目过程中,经常需要定时任务来帮助我们来做一些内容, Spring Boot 默认已经帮我们实行了,只需要添加相应的注解就可以实现 1.pom 包配置 pom 包里面只需要引入 Spring ...

  4. GoLand配置数据库、远程host以及远程调试

    GoLand配置MySQL数据库: (1)右侧栏 -> Database -> +添加 (2)选择MySQL (3)修改Name -> Comment(可选) (4)选择MySQL版 ...

  5. 软件151 王楚博 aodp

    一.AOP是OOP的延续,是(Aspect Oriented Programming)的缩写,意思是面向切面编程. AOP(Aspect Orient Programming),作为面向对象编程的一种 ...

  6. [树组BIT]训练两题重新理解ver.

    树状数组重(jiao)新(wo)理(zuo)解(ren) POJ-2352 加加加都给我加 输入是一行一行按照x从小到大给出的,所以对于每个点,要考虑的只是x比它小的点的个数.即记录各个x的情况,并且 ...

  7. python 多进程多线程的对比

    link:http://www.cnblogs.com/whatisfantasy/p/6440585.html mark一下,挺详细

  8. 实训任务01:安装Hadoop

    实训任务1:安装Hadoop 实训1 :为Hadoop集群增加一个节点 需示说明: 运行环境:操作系统:centos6.8 ,hadoop2.6.4 在实训指导中搭建了3个节点的hadoop集群,要求 ...

  9. vue项目使用前端框架开发,实现滑动效果,若不刷新页面则无法达到预期效果的问题及解决方法

    滑动等效果的初始化时机很重要,在vue项目开发中,需到mounted()钩子函数 (当组件中的DOM结构被渲染好并放到页面中后,会执行这个钩子函数,此时即可初始化滑动效果的js代码). 若组件未挂载到 ...

  10. Python数据库连接池---DBUtils

    Python数据库连接池DBUtils   DBUtils是Python的一个用于实现数据库连接池的模块. 此连接池有两种连接模式: 模式一:为每个线程创建一个连接,线程即使调用了close方法,也不 ...