Nếu bạn chỉ quan tâm đến hiệu suất, hầu hết các lời khuyên trong chủ đề này đều sai và ngày càng trở nên sai lầm trong kỷ nguyên SPA, nơi chúng ta có thể cho rằng trang này vô dụng nếu không có mã JS. Tôi đã dành vô số giờ để tối ưu hóa thời gian tải trang SPA và xác minh các kết quả này với các trình duyệt khác nhau. Trên bảng, hiệu suất tăng bằng cách sắp xếp lại html của bạn, có thể khá ấn tượng.
Để có được hiệu suất tốt nhất, bạn phải nghĩ về các trang như tên lửa hai giai đoạn. Hai giai đoạn xấp xỉ tương ứng với <head>và <body>giai đoạn, nhưng suy nghĩ của họ thay vì như <static>và <dynamic>. Phần tĩnh về cơ bản là một hằng số chuỗi mà bạn đẩy xuống ống phản ứng nhanh nhất có thể. Điều này có thể hơi khó khăn nếu bạn sử dụng nhiều phần mềm trung gian để đặt cookie (những phần này cần được đặt trước khi gửi nội dung http), nhưng về nguyên tắc, nó chỉ cần xóa bộ đệm phản hồi, hy vọng trước khi nhảy vào một số mã tạo khuôn mẫu (dao cạo, php, v.v.) trên máy chủ. Điều này nghe có vẻ khó khăn, nhưng sau đó tôi chỉ giải thích nó sai, bởi vì nó gần tầm thường. Như bạn có thể đoán, phần tĩnh này sẽ chứa tất cả các javascript được gạch chân và rút gọn. Nó sẽ trông giống như
<!DOCTYPE html>
<html>
<head>
<script>/*...inlined jquery, angular, your code*/</script>
<style>/* ditto css */</style>
</head>
<body>
<!-- inline all your templates, if applicable -->
<script type='template-mime' id='1'></script>
<script type='template-mime' id='2'></script>
<script type='template-mime' id='3'></script>
Vì chi phí của bạn bên cạnh không có gì để gửi phần này xuống dây, bạn có thể mong đợi rằng khách hàng sẽ bắt đầu nhận được phần này ở đâu đó khoảng 5ms + độ trễ sau khi kết nối với máy chủ của bạn. Giả sử máy chủ đóng hợp lý độ trễ này có thể trong khoảng từ 20ms đến 60ms. Các trình duyệt sẽ bắt đầu xử lý phần này ngay khi họ nhận được và thời gian xử lý thường sẽ chi phối thời gian chuyển theo hệ số 20 trở lên, hiện là cửa sổ khấu hao của bạn để xử lý <dynamic>phần phía máy chủ .
Phải mất khoảng 50ms cho trình duyệt (chrome, phần còn lại có thể chậm hơn 20%) để xử lý jquery nội tuyến + signalr + angular + ng animate + ng touch + ng tuyến + lodash. Điều đó khá tuyệt vời trong chính nó. Hầu hết các ứng dụng web có ít mã hơn tất cả các thư viện phổ biến được đặt cùng nhau, nhưng giả sử bạn có nhiều như vậy, vì vậy chúng tôi sẽ giành được độ trễ + 100ms xử lý trên máy khách (chiến thắng độ trễ này đến từ khối chuyển khoản thứ hai). Vào thời điểm đoạn thứ hai đến, chúng tôi đã xử lý tất cả các mã và mẫu js và chúng tôi có thể bắt đầu thực hiện các biến đổi dom.
Bạn có thể phản đối rằng phương thức này trực giao với khái niệm nội tuyến, nhưng không phải vậy. Nếu bạn, thay vì nội tuyến, liên kết đến cdns hoặc máy chủ của riêng bạn, trình duyệt sẽ phải mở (các) kết nối khác và thực hiện trì hoãn. Vì việc thực thi này về cơ bản là miễn phí (vì phía máy chủ đang nói chuyện với cơ sở dữ liệu) nên rõ ràng rằng tất cả các bước nhảy này sẽ có giá cao hơn so với việc không thực hiện bước nhảy nào. Nếu có một sự giải quyết trình duyệt cho biết js bên ngoài thực thi nhanh hơn, chúng ta có thể đo được yếu tố nào chiếm ưu thế. Các phép đo của tôi chỉ ra rằng các yêu cầu bổ sung sẽ giết chết hiệu suất ở giai đoạn này.
Tôi làm việc rất nhiều với việc tối ưu hóa các ứng dụng SPA. Mọi người thường nghĩ rằng khối lượng dữ liệu là một vấn đề lớn, trong khi độ trễ thực tế và việc thực thi thường chiếm ưu thế. Các thư viện rút gọn mà tôi liệt kê thêm tối đa 300kb dữ liệu và đó chỉ là 68 kb được nén, hoặc tải xuống 200ms trên điện thoại 2mbit 3g / 4g, chính xác là độ trễ mà nó sẽ sử dụng trên cùng một điện thoại để kiểm tra NẾU có cùng dữ liệu trong bộ đệm của nó đã có, ngay cả khi nó được lưu trong bộ đệm proxy, vì thuế độ trễ di động (độ trễ từ điện thoại đến tháp) vẫn được áp dụng. Trong khi đó, các kết nối máy tính để bàn có độ trễ bước đầu tiên thấp hơn thường có băng thông cao hơn.
Nói tóm lại, ngay bây giờ (2014), tốt nhất là nội tuyến tất cả các tập lệnh, kiểu và mẫu.
EDIT (tháng 5 năm 2016)
Khi các ứng dụng JS tiếp tục phát triển và một số tải trọng của tôi hiện xếp chồng lên tới hơn 3 megabyte mã được rút gọn, rõ ràng là tại các thư viện rất phổ biến nhất sẽ không còn được nội tuyến nữa.