AngularJS模块规范和性能优化

模块化规范

概念：根据咱们写的不一样的功能按照不一样的类型划分，分工协做

做用：辅助的做用，能将咱们编写好的js分为模块，是咱们代码的编写更加专业

come on js

引入模块是同步进行的：前面记载之后，后面才能使用，因此不适合前端，主要是适用于后台 nodejs用的最多

amd

概念：a异步，m模块，d定义（异步模块化规范），引入模块能够异步加载 jquery和bootstrap都支持amd

requirejs运用的最多

require js

主模块引入：data-main="url"

主模块做用：初始化配置 延迟加载

require（["test1","test2"],function(t1,t2){ t1:fun1(); t1:fun2(); t2:fun1(); //调用的方法

}）

定义模块的关键字：define ——>两个参数，数组是须要引用的模块，两边要避免互相引用：（[],function(){要执行的js代码 return{ 须要执行的函数方法，是一个json对象 }}）

umd

概念：u通用，umd（通用模块化规范），目前使用的框架还很少

cmd

概念：c->come on ->公共的模块化规范

sea.js——>国内的->提出的cmd规范

seajs

能够做为异步或者是同步，前置加载（也提供了延迟加载）

官网：sea.js.org 能够兼容各大浏览器 使用异步加载的方法，能够实现互相之间的调用

性能优化

《高性能网站建设指南》，《高性能网站建设进阶指南》。

工具：chrome控制台，firefox自带的开发者工具->性能

网络（服务器）

一、服务器集群（多个服务器组成的集群，提供同样的服务和功能）

二、DNS：域名解析服务器（查询对应的IP地址）——>对应IP地址，是惟一的（比较好记的名字），维护费用顶级的是50元一年（顶级域名后缀：.com/.cn）非营利性机构通常后缀名是.org。-->提升性能->配置更快的域名服务器

三、CDN：内容发布网络，经过配置不一样的服务器，缩短距离，提升效率-->配置CDN能够解决一部分的性能优化问题

四、延迟加载和预加载

浏览器

http协议：超文本协议 一、按照http协议的请求进行封装

请求行：请求协议的版本，请求方法，请求路径

请求头：浏览器的版本信息，浏览器的交互信息（cookie）

第三个：空格

第四部分：请求参数

二、

状态行：状态码（404,200,304->页面没有发生任何修改,500等）、描述；

响应头：页面上看不到，服务器和浏览器沟通的东西，缓存、cookie、时间、编码集（UTF-8）等;

空行：

消息体：呈如今页面上的东西

https协议：超文本传输安全协议（优势，创建不少的安全协议，不易被拦截；缺点：效率比较低）

缓存：是解决性能比较有效的方法（设置一个属性Expires->设置一个时间），主要是静态资源，动态资源常常变更，缺点：网页内容的更新问题

方法一：Etag：数字加字母的字符串，加在须要缓存的元素上面，是一个元素是否改变的标识符（缺点：服务器集群的时候，没有做用）

方法二：last modify date，服务器集群的时候没有做用

方法三：在图片后面加上一串的数字（根据js索引的内容的算法得出来的）

代码

html

一、html：a、减小table布局（页面加载的效率很慢），b、尽可能减小嵌套的层数

二、css：选择器->解析方式->从右往左 a、尽可能避免使用复合选择器或者减小层数

雪碧图（图片分割技术）：减小请求数量

合并和压缩：部署的时候，合为一个css

重绘和回流：减小回流的次数

【浏览器由（渲染引擎，js引擎组成，浏览器内核（渲染引擎/排版引擎）->解析DOM，解析CSS。js引擎是解析js(chrome是V8)】

简单的动画尽可能用css3来制做

图标字体

节点的缓存，减小对DOM的操做

三、js->合并和压缩

四、iamge：转化为base64的编码

压缩工具1.gruntjs官方网站：www.gruntjs.net 安装,利用node.js的npm来安装 npm install grunt-cli -g