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,也可以集成代码和资源的压缩工具。
WEB学习笔记3-开发环境和工具的更多相关文章
- Django:学习笔记(1)——开发环境配置
Django:学习笔记(1)——开发环境配置 Django的安装与配置 安装Django 首先,我们可以执行python -m django --version命令,查看是否已安装django. 如果 ...
- Cocos2dx 学习笔记整理----开发环境搭建
最近在学习cocos2dx,预备将学习过程整理成笔记. 需要的工具和环境整理一下: 使用的版本 cocos2dx目前已经出到了v3.1.1,学习和项目的话还是用2.2.3为宜,毕竟不大想做小白鼠,并且 ...
- Flink学习笔记:Flink开发环境搭建
本文为<Flink大数据项目实战>学习笔记,想通过视频系统学习Flink这个最火爆的大数据计算框架的同学,推荐学习课程: Flink大数据项目实战:http://t.cn/EJtKhaz ...
- Qt学习笔记-1 开发环境建立
关于Qt在这里不做过多介绍,吸引我的地方是有几点: 1.用C++开发语言: 2.多平台(wWindows.MAC.Linux.Android等): 3.界面所见几所得.其他的可以百度上了解: 从本文开 ...
- PHP学习笔记(1) - 开发环境搭建
运行环境:phpstudy 它基本包括运行php应用需要的一切,php. apache.mysql,一键傻瓜安装 装好之后只需要配置虚拟主机和修改host文件就可以支持多站点 下载: http://w ...
- angular2.0学习笔记1.开发环境搭建 (node.js和npm的安装)
开发环境, 1.安装Node.js®和npm, node 6.9.x 和 npm 3.x.x 以上的版本. 更老的版本可能会出现错误,更新的版本则没问题. 控制台窗口中运行命令 node -v 和 n ...
- Webpack4 学习笔记八 开发环境和生产环境配置
webpack resolve属性 webpack 区分开发环境和生产环境 webpack resolve属性 该选项的作用是设置模块如何被解析. resolve.alias: 设置别名, 在vue中 ...
- perl学习笔记--搭建开发环境
windows下perl开发环境搭建 perl下载地址:http://www.activestate.com/developer-tools 各个插件的安装方法:(通过代理上网的方法) 方法一:pad ...
- Android学习笔记1——开发环境配置
一.JDK配置 Android是基于Java进行开发的,首先需要在电脑上配置JDK(Java Development Kit).在http://www.androiddevtools.cn/下载对应系 ...
随机推荐
- highchart 十字准星 crosshairs
crosshairs: true, crosshairs: [true, true], // 同时启用竖直及水平准星线 crosshairs: [{ // 设置准星线样式 width: 2, colo ...
- ThinkPHP5.0源码学习之缓存Cache(一)
一.文件 1.缓存配置文件:thinkphp\convention.php 2.缓存文件:thinkphp\library\think\Cache.php 3.驱动目录:thinkphp\librar ...
- java 动态增/减集合元素
1. 简介 有时候需要在集合遍历过程中进行增/删,下面介绍几种正确的操作方式. 2. 示例 例如有如下集合[1, 2, 2, 3, 5],需要删除被2整除的元素. import java.util.* ...
- 李航《统计学习方法》CH01
CH01 统计学方法概论 前言 章节目录 统计学习 监督学习 基本概念 问题的形式化 统计学习三要素 模型 策略 算法 模型评估与模型选择 训练误差与测试误差 过拟合与模型选择 正则化与交叉验证 正则 ...
- 转:为什么根据IP地址查询物理所在地,而不是mac地址?
来自 https://mp.weixin.qq.com/s/aOZQGMnMI2nkX4-qcJL4WQ 读者 不是说mac地址是计算机网卡唯一的地址吗?这样不是可以直接定位到某一台机器吗?为什么要用 ...
- iOS 初探代码混淆(OC)
iOS 初探代码混淆(OC) 前言 自己做iOS开发也有几年的时间了,平时做完项目基本就直接打包上传到Appstore上,然后做上架操作了.但是最近,客户方面提出了代码安全的要求.说是要做代码混淆,这 ...
- webkit之滚动条美化
由于公司的产品改用webkit内核,在写公共css的时候,不想使用插件模拟,顺便网上查阅了下css3的滚动条美化. 首先,先上一副示意图. 从网络上盗图的(来源 http://zhangyaochun ...
- apk文件二维码微信无法识别 APP在微信中二维码扫描无法下载的解决方案
现在微信分享的功能很多,从分享的链接下载apk安卓包是很正常的,但是微信不让下载apk包,只能通过浏览器来下载,但是这要给用户一个提示吧,不然用户不知道 下面我们来实现,引导用户通过浏览器来下载apk ...
- c语言五子棋
#include <stdio.h>#include <stdlib.h>#include <windows.h>#include <conio.h> ...
- 用批处理修改hotst文件提示“拒绝访问”解决方法
执行批处理命令时出现“拒绝访问”情况,把路径地址改为系统路名变量即可: 如 提示拒绝访问: echo 127.0.0.1 www.dujinchi.com >> C:\Windows\Sy ...