angular.js - AngularJS 单页面应用首页加载优化有哪些方法?
PHP中文网
PHP中文网 2017-05-15 16:50:28
0
5
612

传统网页的请求中,数据在服务器端加载到模板上,一步就可以完成。

  1. 下载 HTML
  2. 下载 CSS / javascript
  3. 渲染

单页面应用需要先下载框架,然后才能开始加载数据。

  1. 下载 HTML
  2. 下载 CSS / javascript
  3. 下载数据 / 模板
  4. 渲染

有什么办法减少请求次数,或是将这种串行加载变成并行的方法呢?

PHP中文网
PHP中文网

认证高级PHP讲师

membalas semua(5)
洪涛

Penyelesaian yang sempurna adalah untuk memaparkan skrin pertama pada bahagian pelayan, tetapi Angular nampaknya tidak pandai dalam hal ini dan saya tidak pernah melihat penyelesaian sebenar

Sedikit lebih teruk, sekurang-kurangnya pelayan boleh memuntahkan data skrin pertama pada halaman

Penyusunan dan penggabungan beberapa templat css asas dan js lain harus menjadi yang paling asas

阿神

Gunakan alat teguk
Pakej css ke dalam fail, js ke dalam fail dan templat ke dalam fail js ($templateCache), yang boleh dibungkus bersama-sama dengan fail js.
Kemudian ada
1 Muat turun HTML (permintaan pertama, halaman statik tulen, mungkin termasuk beberapa kandungan templat sudut, halaman ini harus bertindak balas dengan cepat)
2 Muat turun CSS (satu permintaan)
3 Muat turun fail javascript dan fail js templat (satu permintaan)
4 halaman pemaparan sudut
Sebanyak 3 permintaan + permintaan ajax lain telah dilakukan.

"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",
刘奇

Adalah disyorkan untuk menggunakan requireJs + angularJsAMD, yang boleh dimuatkan atas permintaan.
Pemindahan pautan: https://github.com/marcoslin/angularAMD

我想大声告诉你

angularjs adalah lebih daripada 170 kb selepas pemampatan Jika ia berada di bahagian mudah alih, anda harus mempertimbangkannya di bahagian PC. . Saya rasa anda tidak perlu memberi terlalu banyak perhatian kepadanya. Jika anda melihat sumber m pada bahagian hadapan tembisi, ia bukan sekadar pemuatan

大家讲道理

Bermula dari perniagaan dan reka bentuk, alatan yang biasa digunakan seperti grunt boleh membungkus lib.min.js untuk pemuatan sekali sahaja dan pemuatan malas yang sangat biasa digunakan

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan