码迷,mamicode.com
首页 > Web开发 > 详细

AngularJS模块规范和性能优化

时间:2015-10-11 21:29:36      阅读:335      评论:0      收藏:0      [点我收藏+]

标签:

模块化规范

概念:根据我们写的不同的功能按照不同的类型划分,分工协作

作用:辅助的作用,能将我们编写好的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自带的开发者工具->性能

网络(服务器)

1、服务器集群(多个服务器组成的集群,提供一样的服务和功能)

2、DNS:域名解析服务器(查询对应的IP地址)——>对应IP地址,是唯一的(比较好记的名字),维护费用顶级的是50元一年(顶级域名后缀:.com/.cn)非营利性机构一般后缀名是.org。-->提高性能->配置更快的域名服务器

3、CDN:内容发布网络,通过配置不同的服务器,缩短距离,提高效率-->配置CDN可以解决一部分的性能优化问题

4、延迟加载和预加载

浏览器

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

请求行:请求协议的版本,请求方法,请求路径

请求头:浏览器的版本信息,浏览器的交互信息(cookie)

第三个:空格

第四部分:请求参数

2、

状态行:状态码(404,200,304->页面没有发生任何修改,500等)、描述;

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

空行:

消息体:呈现在页面上的东西

https协议:超文本传输安全协议(优点,建立很多的安全协议,不易被拦截;缺点:效率比较低)

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

方法一:Etag:数字加字母的字符串,加在需要缓存的元素上面,是一个元素是否改变的标识符(缺点:服务器集群的时候,没有作用)

方法二:last modify date,服务器集群的时候没有作用

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

代码

html

1、html:a、减少table布局(页面加载的效率很慢),b、尽量减少嵌套的层数

2、css:选择器->解析方式->从右往左 a、尽量避免使用复合选择器或者减少层数

雪碧图(图片分割技术):减少请求数量

合并和压缩:部署的时候,合为一个css

重绘和回流:减少回流的次数

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

简单的动画尽量用css3来制作

图标字体

节点的缓存,减少对DOM的操作

3、js->合并和压缩

4、iamge:转化为base64的编码

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

 

 

AngularJS模块规范和性能优化

标签:

原文地址:http://www.cnblogs.com/jingqiu/p/4869811.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!