美文网首页
(17.05.09)网络性能优化、自动构建工具Grunt/Gul

(17.05.09)网络性能优化、自动构建工具Grunt/Gul

作者: 张不困_ | 来源:发表于2017-11-14 17:51 被阅读0次

    复习

        透视
            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":""}
                ]}
            ]
    

    相关文章

      网友评论

          本文标题:(17.05.09)网络性能优化、自动构建工具Grunt/Gul

          本文链接:https://www.haomeiwen.com/subject/typfvxtx.html