(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":""}
            ]}
        ]
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

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

友情链接更多精彩内容