(17.05.09)网络性能优化、自动构建工具Grunt/Gulp?、服务器、数据交互、Ajax!!!

复习

    透视
        perspective();

        rotateX
        rotateY
        translateZ
    3D
        -webkit-transform-style: preserve-3d;

    斐波那契数列(兔子)
        递归
    垃圾回收机制
    局部 很短       函数调用完成之后,里面的局部变量就会消失
    全局 很长       关闭页面消失
    闭包 可长可短     
        只要里面的函数还有用,那整条作用域链上的变量都不会消失

    作用域链
        现在自身找,如果找不到找父级,再找不到继续往上找,直到找到全局。

    1.稳定性
    2.扩展性
    3.优化

    网络性能优化
        连接    请求    等待    响应

    1. 减少http请求

    2. 使用雪碧

    3. 合并文件
        减少http请求
        节省资源
        4KB
    4. 压缩代码

    5.
        script标签尽量不放在上面
        link一定要放在上面

    6. 使用CDN
    7. 使用DNS

    执行性能优化
        有用
            尽量不用全局变量
            尽量使用正则
            尽量不要使用属性

                var len = aBtn.length;
                for(var i=0;i<len;i++){

                }

            少用定时器

            减少DOM操作
                重绘
                重排

        尽量用CSS3
            translate

        没用

                var str = 'abc';
                    str += 'bcd';
                    str += 'cbd';
                    str += 'fds';

                var arr = ['abc'];
                    arr.push('bcd');
                    arr.push('cbd');
                    arr.push('fds');
                var str = arr.join('');

自动构建工具

    Grunt 走的是文件流
        gruntjs.com
    Gulp 走的是二进制流
        gulpjs.com

        确定有node有npm
            node --version
            npm --version

        必须先安装命令环境
            安装gulp-cli命令环境
            npm install --global gulp-cli

        检测是否安装成功
        gulp --version

        可以使用了
        ------------------------------------------------
        需要给我们的项目安装gulp
        npm install gulp

        需要创建文件(gulp任务的入口文件)
        gulpfile.js

            引入gulp
            var gulp = require('gulp');

            引入合并文件模块
            var concat = require('gulp-concat');
            var uglify = require('gulp-uglify');

            //编写任务
            gulp.task('concat',function(){
                return gulp.src('src/*.js')
                        .pipe(concat('index.js'))
                        .pipe(gulp.dest('dest'));
            });
            gulp.task('uglify',['依赖的任务'],function(){
                return gulp.src('src/a.js');
                        .pipe(uglify())
                        .pipe(gulp.dest('dest'))
            })

            //注册默认任务
            gulp.task('default',['concat','uglify']);



        下载依赖模块
            gulp-concat             合并文件
            gulp-uglify             压缩代码
            gulp-rename             改名

        运行
            gulp concat
            运行默认任务
            gulp


        推荐需要一个文件
            package.json        工程文件

            初始化工程文件
            npm init

            安装模块
                帮你压缩和并
                npm install 模块名 --save-dev

                项目需要的
                npm install 模块名 --save

            以后只需要拷贝
                源文件
                gulpfile.js
                package.json

            安装
                npm install

    服务器
        就是一台计算机,只不过硬件非常棒。
        电脑:存储

        Web服务器:响应客户端的请求

        把自己的电脑变成服务器

        Apache

        用集成环境

        wamp        windows apache mysql php    
        mamp        mac apache mysql php
        xampp       
        AppServ     自动启动


        localhost
        或者
        127.0.0.1

数据交互

    from表单
        action      提交地址
        method      提交方式
        submit按钮
        name


    提交方式
        GET     明文提交    不安全
                32KB    快       有缓存
        POST    密文提交    相对安全
                1GB     慢       没有缓存
    

        缓存      cache

        www.baidu.com?a=12
            abc

        www.baidu.com?a=12
            abc

from表单已经逐渐的不用了。

    1. 刷新页面、用户体验不好
    2. 不能从服务器拿数据


    Ajax     Asynchronous Javascript And XML
        异步的javascript和XML

        无刷新从服务器拿数据
        必须放在服务器环境下

回调函数
    只需要你定义,不要关心调用的函数

    $.ajax({
        url:'地址'
    }).then(function(res){
        成功

    },function(){
        失败
    });

玩ajas注意:

    1.
        编码不统一,中文会乱码
            UTF-8   国际编码        √
            GB2312  中国大陆
    2.不关心后缀名
        后缀名是给人看的。不是给计算机看的。

    3.
        缓存问题

        如何触发的缓存
            访问同一个地址的时候

            解决:
                让地址变得不一样。


        $.ajax({
            url:'',
            data:{
                t:Math.random()
            }
        });

`var obj = $.parseJSON(str)`

反持久化、反序列化

eg1:
    var str = '["a","b","c"]';
    var arr = $.parseJSON(str);

eg2:
    var str = '{"name":"eric"}';
    var json = $.parseJSON(str);

例子:新闻列表

造假数据

作业:
    1.聚划算没完成的赶紧完成
    2.ajax例子
    3.
        百度新闻

        [
            {"title":"","href":"","child":[
                {"title":"","href":""},
                {"title":"","href":""}
            ]},
            {"title":"","href":"","child":[
                {"title":"","href":""},
                {"title":"","href":""}
            ]},
            {"title":"","href":"","child":[
                {"title":"","href":""},
                {"title":"","href":""}
            ]}
        ]
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,580评论 18 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,392评论 25 707
  • 闲翻杂志,目光被一张照片吸住了。 绿色的藤蔓下面,垂挂着两个细长的苦瓜。青碧映目,凉爽逼人,遍体的暑热与心里的燥烦...
    铅笔芒种阅读 430评论 0 1
  • 傍晚时分,二妞儿看到一则帖子“某拍摄团队12月25日在贡嘎西南坡穿越线路(老榆林至贡嘎寺方向)的莫溪沟尾营地发现一...
    爱玛阅读 254评论 0 0
  • 题目没别的意思 只是正好听这首歌而已 晚秋的天已经热不起来 寒意也越来越重。入夜 , 我点了一根烟 , 披了大衣出...
    巫小楼阅读 173评论 1 2