84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
传统网页的请求中,数据在服务器端加载到模板上,一步就可以完成。
单页面应用需要先下载框架,然后才能开始加载数据。
有什么办法减少请求次数,或是将这种串行加载变成并行的方法呢?
认证高级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到一次性加载,非 常用的惰性加载