Rendering halaman biasanya dibagi menjadi rendering front-end dan rendering back-end. Rendering front-end mengacu pada server yang mengembalikan kerangka dan templat HTML, dan front-end menarik data dan membuat templat melalui permintaan asinkron jax, dan secara dinamis memodifikasi DOM untuk membentuk halaman terakhir. Rendering sisi server adalah ketika server menarik data pada backend dan membuat halaman lengkap dan kembali ke klien. Kedua metode tersebut memiliki manfaatnya sendiri. Render back-end membawa manfaat seperti meningkatkan waktu layar pertama, mengurangi jumlah permintaan, dan menguntungkan SEO. Namun, rendering langsung backend tradisional membutuhkan menunggu sampai seluruh halaman web diberikan sebelum kembali ke klien. Jika blok menarik data secara perlahan, yang mempengaruhi kecepatan rendering, maka untuk pengguna, itu juga akan menjadi lebih lama saat menunggu. Dapat rendering back-end sama dengan rendering AJAX front-end, dan rendering sisi server tradisional dalam blok dan wilayah, solusi akan disediakan di bawah ini-rendering segmen halaman web.
Pertama, mari kita lihat metode rendering tradisional:
const http = memerlukan ("http"); const fs = membutuhkan ("fs"); var tpl1 = '<! Doctype html> <html> <head> <title> uji render </title> </head> <pml> helloword <p> $ data1 </p>'; var tpl2 = '$ <P> <P> </p> </p>'; var tpl2 = '$ <P> <P> </Data1 </p>'; = ''; var server = http.createServer ((req, res) => {if (req.url! == "/favicon.ico") {res.writeHead (200, {'content-type': 'Text/html'}); getDataOne ((data1) => {getseat/html '); getDataOone ((data1) => {getseat/html'); getDataOne ((data1) => {getseat/html '); getDataOone ((data1) => {get) {Data1) res.end (tpl1.replace (// $ data1/g, data1) + tpl2.replace (// $ data2/g, data2)); }}); }}). Dengarkan (3000, '127.0.0.1'); function getDataOne (fn) {setTimeOut (() => { FN ('1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 Fn ('2222222222222222222222222222222222222222222222222222222 22222222222222222222222222222222222222222222222222222222222 22222222222222222222222222222222222222222222222222222222222 22222222222222222222222222222222222222222222222222222222222 22222222222222222222222222222222222222222222222222222222222 22222222222222222222222222222222222222222222222222222222222 22222222222222222222222222222222222222222222222222222222222 22222222222222222222222222222222222222222222222222222222222Di atas kami memberikan contoh sederhana untuk mengembalikan halaman dengan mengunjungi http://127.0.0.1:3000. Saat merender halaman, ada 2 operasi yang memakan waktu 5 detik, yang dapat diasumsikan sebagai IO atau penarikan data. Pada saat ini, waktu kami mengamati halaman pengembalian adalah 10 detik, yang berarti dibutuhkan 10 detik bagi pengguna untuk melihat halaman.
Selanjutnya, kami mengubah metode rendering backend dan mengubahnya menjadi rendering tersegmentasi.
const http = membutuhkan ("http"); const fs = membutuhkan ("fs"); var server = http.createServer ((req, res) => {if (req.url! == "/favicon.ico") {res.writeHead (200, {'tipe konten': 'TEKS/TEKS') {res.writeHead (200, {'content-type': 'TEKP/TEKS/HTEP/HTEP' TEKS ') {res.writeHead (200, {{' Content-Type ':' TEKS/TEKS/HTEP/HTED ' getDataOne ((data1) => {res.write ('<! Doctype html> <html> <head> <title> Test render </itement> </head> <body> helloword <p> $ data1 </p>'. Ganti (// $ data1/g, data1)); getDataTwo (data2) = $ data1/g, data1)); getDataTwo (data2) = $ data1/g, data1)); getDataTwo (data2) = $ data1/g, data1)); getDataTwo (Data2) = $ Data1/G, Data1)); getDataTwo (Data2) = $ Data1/G, DATA res.end ('<p> $ data2 </p> </body> </html>'. Ganti (// $ data2/g, data2)); }); }); }); }); }); }); }). Dengarkan (3000, '127.0.0.1'); function getDataOne (fn1) {setTimeOut (() => { FN1 ('111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 FN2 ('222222222222222222222222222222222222222222222222222222 22222222222222222222222222222222222222222222222222222222222 22222222222222222222222222222222222222222222222222222222222 22222222222222222222222222222222222222222222222222222222222 22222222222222222222222222222222222222222222222222222222222 22222222222222222222222222222222222222222222222222222222222 22222222222222222222222222222222222222222222222222222222222 22222222222222222222222222222222222222222222222222222222222Dengan mengatur header HTTP: pengkodean transfer: chunked, keajaiban transmisi tersegmentasi diaktifkan. Metode pengkodean ini ada di http1.1. Secara umum, ukuran informasi tidak dapat ditentukan ketika server menghasilkan respons HTTP. Pada saat ini, panjangnya tidak dapat ditulis terlebih dahulu dengan panjang konten, dan panjang pesan perlu dihasilkan secara real time. Server umumnya menggunakan pengkodean chunked.
Saat melakukan transmisi pengkodean chunked, ada pengkodean transfer di kepala pesan balasan dan didefinisikan sebagai chunked, menunjukkan bahwa konten akan ditransmisikan menggunakan pengkodean chunked. Mari kita lihat efek yang dimodifikasi:
Meskipun waktu transfer halaman secara keseluruhan tidak berubah, dengan cara ini, kami telah mengurangi waktu respons hingga setengahnya, mengurangi waktu tunggu pengguna. Dalam bisnis tertentu, kita dapat mengatakan bahwa bagian-bagian yang perlu dilihat pengguna pertama adalah output terlebih dahulu, dan proses backend bagian jangka panjang dari backend ke output, yang merupakan keuntungan dari rendering transmisi tersegmentasi. Perhatikan bahwa jika server adalah nginx, ada kemungkinan bahwa rendering tersegmentasi mungkin tidak valid karena pengaturan buffer, dan ukuran buffer perlu disesuaikan.