傳統網頁的請求中,資料在伺服器端載入到模板上,一步就可以完成。
單一頁面應用程式需要先下載框架,然後才能開始載入資料。
有什麼辦法減少請求次數,或是將這種串列載入變成並行的方法呢?
认证高级PHP讲师
完美的方案是伺服器端渲染首屏,不過angular似乎不擅長這個,沒見過實際的方案
稍差一些至少可以讓服務端把首屏的資料吐在頁面上
另外一些基本的css 模板 js的編譯合併應該是最基本的
用一下gulp 工具 把 css 打包成一個檔案, js打包成一個檔案, 模板打包成一個js檔案($templateCache) 可以和js 檔案打包成一起. 然後就是 1 下載 HTML (第一個請求, 純靜態頁面, 可能會包括部分angular模板內容, 這個頁面響應要快) 2 下載 CSS (一個請求) 3 下載 javascript檔 和 模板js檔 (一個請求) 4 angular 渲染頁面 一共3個請求 + 其他ajax請求搞定.
"gulp": "~3.8.0", "gulp-angular-templatecache": "^1.4.2", "gulp-compass": "^2.0.1", "gulp-concat": "^2.4.1", "gulp-jasmine": "^1.0.1", "gulp-jshint": "~1.5.5", "gulp-livereload": "~1.3.1", "gulp-minify-css": "^0.3.10", "gulp-minify-html": "^0.1.6", "gulp-mocha": "~0.5.1", "gulp-ng-annotate": "^0.3.5", "gulp-nodemon": "^1.0.4", "gulp-shell": "^0.2.10", "gulp-uglify": "^1.0.1",
推薦使用requireJs + angularJsAMD,可以做到隨選載入。 連結傳送:https://github.com/marcoslin/angularAMD
angularjs壓縮後就170多kb 如果在行動端上你要考慮一下了 在pc端。 。我覺得也不用太在意 你看teambition 前端上m的資源 還不是一個loading在轉啊轉
從業務和設計著手,常用的可以grunt等工具打包lib.min.js到一次性加載,非 常用的惰性加載
完美的方案是伺服器端渲染首屏,不過angular似乎不擅長這個,沒見過實際的方案
稍差一些至少可以讓服務端把首屏的資料吐在頁面上
另外一些基本的css 模板 js的編譯合併應該是最基本的
用一下gulp 工具
把 css 打包成一個檔案, js打包成一個檔案, 模板打包成一個js檔案($templateCache) 可以和js 檔案打包成一起.
然後就是
1 下載 HTML (第一個請求, 純靜態頁面, 可能會包括部分angular模板內容, 這個頁面響應要快)
2 下載 CSS (一個請求)
3 下載 javascript檔 和 模板js檔 (一個請求)
4 angular 渲染頁面
一共3個請求 + 其他ajax請求搞定.
推薦使用requireJs + angularJsAMD,可以做到隨選載入。
連結傳送:https://github.com/marcoslin/angularAMD
angularjs壓縮後就170多kb 如果在行動端上你要考慮一下了 在pc端。 。我覺得也不用太在意 你看teambition 前端上m的資源 還不是一個loading在轉啊轉
從業務和設計著手,常用的可以grunt等工具打包lib.min.js到一次性加載,非 常用的惰性加載