(17.05.09)網(wǎng)絡性能優(yōu)化撑碴、自動構建工具Grunt/Gulp撑教?、服務器醉拓、數(shù)據(jù)交互伟姐、Ajax!R诼薄愤兵!

復習

    透視
        perspective();

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

    斐波那契數(shù)列(兔子)
        遞歸
    垃圾回收機制
    局部 很短       函數(shù)調用完成之后,里面的局部變量就會消失
    全局 很長       關閉頁面消失
    閉包 可長可短     
        只要里面的函數(shù)還有用排吴,那整條作用域鏈上的變量都不會消失

    作用域鏈
        現(xiàn)在自身找秆乳,如果找不到找父級,再找不到繼續(xù)往上找傍念,直到找到全局矫夷。

????1.穩(wěn)定性
????2.擴展性
????3.優(yōu)化

????網(wǎng)絡性能優(yōu)化
????????連接????請求????等待????響應

????1. 減少http請求

????2. 使用雪碧

????3. 合并文件
????????減少http請求
????????節(jié)省資源
????????4KB
????4. 壓縮代碼

????5.
????????script標簽盡量不放在上面
????????link一定要放在上面

????6. 使用CDN
????7. 使用DNS

????執(zhí)行性能優(yōu)化
????????有用
????????????盡量不用全局變量
????????????盡量使用正則
????????????盡量不要使用屬性

                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

        必須先安裝命令環(huán)境
            安裝gulp-cli命令環(huán)境
            npm install --global gulp-cli

        檢測是否安裝成功
        gulp --version

        可以使用了
        ------------------------------------------------
        需要給我們的項目安裝gulp
        npm install gulp

        需要創(chuàng)建文件(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

????????用集成環(huán)境

        wamp        windows apache mysql php    
        mamp        mac apache mysql php
        xampp       
        AppServ     自動啟動


        localhost
        或者
        127.0.0.1

數(shù)據(jù)交互

    from表單
        action      提交地址
        method      提交方式
        submit按鈕
        name


    提交方式
        GET     明文提交    不安全
                32KB    快       有緩存
        POST    密文提交    相對安全
                1GB     慢       沒有緩存
    

        緩存      cache

        www.baidu.com?a=12
            abc

        www.baidu.com?a=12
            abc

from表單已經(jīng)逐漸的不用了双藕。

????1. 刷新頁面淑趾、用戶體驗不好
????2. 不能從服務器拿數(shù)據(jù)


????Ajax???? Asynchronous Javascript And XML
????????異步的javascript和XML

????????無刷新從服務器拿數(shù)據(jù)
????????必須放在服務器環(huán)境下

回調函數(shù)
????只需要你定義,不要關心調用的函數(shù)

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

    },function(){
        失敗
    });

玩ajas注意:

    1.
        編碼不統(tǒng)一忧陪,中文會亂碼
            UTF-8   國際編碼        √
            GB2312  中國大陸
    2.不關心后綴名
        后綴名是給人看的扣泊。不是給計算機看的。

    3.
        緩存問題

        如何觸發(fā)的緩存
            訪問同一個地址的時候

            解決:
                讓地址變得不一樣嘶摊。


        $.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);

例子:新聞列表

造假數(shù)據(jù)

作業(yè):
    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":""}
            ]}
        ]
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市叶堆,隨后出現(xiàn)的幾起案子阱飘,更是在濱河造成了極大的恐慌,老刑警劉巖虱颗,帶你破解...
    沈念sama閱讀 217,542評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件沥匈,死亡現(xiàn)場離奇詭異,居然都是意外死亡忘渔,警方通過查閱死者的電腦和手機高帖,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,822評論 3 394
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來畦粮,“玉大人散址,你說我怎么就攤上這事⌒猓” “怎么了预麸?”我有些...
    開封第一講書人閱讀 163,912評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長拉背。 經(jīng)常有香客問我师崎,道長,這世上最難降的妖魔是什么椅棺? 我笑而不...
    開封第一講書人閱讀 58,449評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮齐蔽,結果婚禮上两疚,老公的妹妹穿的比我還像新娘。我一直安慰自己含滴,他們只是感情好诱渤,可當我...
    茶點故事閱讀 67,500評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著谈况,像睡著了一般勺美。 火紅的嫁衣襯著肌膚如雪递胧。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,370評論 1 302
  • 那天赡茸,我揣著相機與錄音缎脾,去河邊找鬼。 笑死占卧,一個胖子當著我的面吹牛遗菠,可吹牛的內容都是我干的。 我是一名探鬼主播华蜒,決...
    沈念sama閱讀 40,193評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼辙纬,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了叭喜?” 一聲冷哼從身側響起贺拣,我...
    開封第一講書人閱讀 39,074評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎捂蕴,沒想到半個月后譬涡,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,505評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡启绰,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,722評論 3 335
  • 正文 我和宋清朗相戀三年昂儒,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片委可。...
    茶點故事閱讀 39,841評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡渊跋,死狀恐怖,靈堂內的尸體忽然破棺而出着倾,到底是詐尸還是另有隱情拾酝,我是刑警寧澤,帶...
    沈念sama閱讀 35,569評論 5 345
  • 正文 年R本政府宣布卡者,位于F島的核電站蒿囤,受9級特大地震影響,放射性物質發(fā)生泄漏崇决。R本人自食惡果不足惜材诽,卻給世界環(huán)境...
    茶點故事閱讀 41,168評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望恒傻。 院中可真熱鬧脸侥,春花似錦、人聲如沸盈厘。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,783評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至外遇,卻和暖如春注簿,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背跳仿。 一陣腳步聲響...
    開封第一講書人閱讀 32,918評論 1 269
  • 我被黑心中介騙來泰國打工诡渴, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人塔嬉。 一個月前我還...
    沈念sama閱讀 47,962評論 2 370
  • 正文 我出身青樓玩徊,卻偏偏與公主長得像,于是被迫代替她去往敵國和親谨究。 傳聞我的和親對象是個殘疾皇子恩袱,可洞房花燭夜當晚...
    茶點故事閱讀 44,781評論 2 354

推薦閱讀更多精彩內容

  • Spring Cloud為開發(fā)人員提供了快速構建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務發(fā)現(xiàn)胶哲,斷路器畔塔,智...
    卡卡羅2017閱讀 134,656評論 18 139
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,116評論 25 707
  • 閑翻雜志,目光被一張照片吸住了鸯屿。 綠色的藤蔓下面澈吨,垂掛著兩個細長的苦瓜。青碧映目寄摆,涼爽逼人谅辣,遍體的暑熱與心里的燥煩...
    鉛筆芒種閱讀 437評論 0 1
  • 傍晚時分勾邦,二妞兒看到一則帖子“某拍攝團隊12月25日在貢嘎西南坡穿越線路(老榆林至貢嘎寺方向)的莫溪溝尾營地發(fā)現(xiàn)一...
    愛瑪閱讀 264評論 0 0
  • 題目沒別的意思 只是正好聽這首歌而已 晚秋的天已經(jīng)熱不起來 寒意也越來越重蚣录。入夜 , 我點了一根煙 眷篇, 披了大衣出...
    巫小樓閱讀 177評論 1 2