Tại sao không nhúng các kiểu / tập lệnh trong HTML thay vì liên kết?

Chúng tôi ghép các tệp CSS và JavaScript để giảm số lượng yêu cầu HTTP, giúp cải thiện hiệu suất. Kết quả là HTML như thế này:

<link rel="stylesheet" href="all-my-css-0fn392nf.min.css">
<!-- later... -->
<script src="all-my-js-0fn392nf.min.js"></script>

Nếu chúng ta có logic phía máy chủ / xây dựng để thực hiện tất cả điều này cho chúng ta, tại sao không tiến thêm một bước nữa và nhúng các kiểu và tập lệnh được nối vào đó trong HTML?

<style>.all{width:100%;}.my{display:none;}.css{color:white;}</style>
<!-- later... -->
<script>var all, my, js;</script>

Đó là hai yêu cầu HTTP ít hơn, nhưng tôi chưa thấy kỹ thuật này trong thực tế. Tại sao không?

Bởi vì việc lưu các yêu cầu HTTP sẽ ít được sử dụng khi bạn đạt được nó bằng cách phá vỡ bộ đệm. Nếu các bảng định kiểu và tập lệnh được phân phát riêng, chúng có thể được lưu trữ rất tốt và được khấu hao theo nhiều, nhiều yêu cầu đối với các trang khác nhau. Nếu chúng được đưa vào cùng một trang HTML, chúng phải được truyền lại với mọi trang. Độc thân. Yêu cầu.

HTML của trang này, ví dụ là 13 KB ngay bây giờ. 180 KB CSS đã chạm vào bộ đệm và 360 KB của JS cũng vậy. Cả hai lần truy cập bộ đệm đều mất rất ít thời gian và thực tế không có băng thông. Sử dụng trình lược tả mạng trình duyệt của bạn và dùng thử trên một số trang web khác.

Đơn giản vì hiệu suất Web thực sự quan trọng! 99% nó sẽ cho bạn thời gian phản hồi của người dùng cuối nhanh hơn.

Dưới đây là một vài exampels từ Velocity Conf.

• Bing - Một trang chậm hơn 2 giây dẫn đến giảm doanh thu / người dùng 4,3%.
• Google - Sự chậm trễ 400 mili giây đã khiến lượng tìm kiếm / người dùng giảm 0,59%.
• Yahoo ! - Làm chậm 400 mili giây dẫn đến giảm 5-9% lưu lượng truy cập toàn trang.
• Shopzilla - Tăng tốc trang web của họ thêm 5 giây đã tăng tỷ lệ chuyển đổi 7-12%, tăng gấp đôi số phiên từ tiếp thị công cụ tìm kiếm và giảm một nửa số máy chủ cần thiết.
• Mozilla - Cạo 2,2 giây khỏi trang đích của họ đã tăng 15,4% chuyển đổi tải xuống, mà họ ước tính sẽ dẫn đến thêm 60 triệu lượt tải Firefox mỗi năm.
• Netflix - Áp dụng một tối ưu hóa duy nhất, nén gzip, dẫn đến tăng tốc 13-25% và cắt giảm 50% lưu lượng truy cập mạng bên ngoài của họ.

Từ Steve Souder, người tiên phong trong Tối ưu hóa Hiệu suất Web,

80-90% thời gian phản hồi của người dùng cuối được dành cho lối vào - Bắt đầu ở đây trước.

Sử dụng các tệp bên ngoài sẽ tạo ra các trang nhanh hơn vì các tệp JavaScript và CSS được lưu trữ bởi trình duyệt / mạng / proxy (như được xác định trong giao thức HTTP với các tiêu đề Cache). JavaScript và CSS được nội tuyến trong tài liệu HTML được tải xuống mỗi khi tài liệu HTML được yêu cầu. Điều này làm giảm số lượng yêu cầu HTTP cần thiết, nhưng tăng kích thước của tài liệu HTML. Nếu bạn đang sử dụng các tập lệnh giống như Jquery, bạn có thể dễ dàng điều chỉnh 300 KB tập lệnh và không tin rằng mọi người đều có băng thông 100 MB / giây với độ trễ thấp, chạy một ứng dụng duy nhất - trình duyệt - được mở trên trang web của bạn. 99% nó sẽ cho bạn thời gian phản hồi của người dùng cuối nhanh hơn.

Tần suất mà các thành phần JavaScript và CSS bên ngoài được lưu trữ liên quan đến số lượng tài liệu HTML được yêu cầu cũng rất quan trọng. Nếu người dùng trên trang web của bạn có nhiều lượt xem trang mỗi phiên và nhiều trang của bạn sử dụng lại cùng một tập lệnh và bảng định kiểu (gói), thì có một lợi ích tiềm năng lớn hơn từ các tệp bên ngoài được lưu trong bộ nhớ cache.

Nhưng nội tuyến là -sometimes- thích hợp hơn cho ứng dụng một trang hoặc trang web với một lần xem trang duy nhất cho mỗi phiên. Không có quy tắc vàng và thường quên nó vì nó liên quan chủ yếu đến các trang web rất cụ thể thực sự liên quan đến hiệu suất của người dùng cuối.

Bạn có thể đọc ở đây tại sao hiệu suất quan trọng (Tuyên bố miễn trừ trách nhiệm: Tôi là tác giả)

Phiên bản mới nhất của HTTP đã được tạo ra từ năm 1999. Năm 1999, mọi người kết nối Internet với quay số. Internet rất chậm. 16 năm sau, mọi thứ đã chuyển sang rất nhiều, nhưng các giao thức chúng ta sử dụng thì không.

Các câu trả lời mà chúng ta không nên nội tuyến 'vì nó can thiệp vào bộ nhớ đệm' là một chút sai lệch, đặc biệt là trong thời đại Internet siêu tốc. Khi bạn thực sự thực hiện các phép tính, thường có sự khác biệt không đáng kể giữa thời gian tải với người dùng làm ấm bộ đệm và bộ đệm lạnh nếu bạn đã nội tuyến. Thực tế là có là một sự khác biệt nhỏ vốn không phải là vì bạn đã inlined, nhưng vì thiết kế linh hoạt của HTTP / 1.1.

Giao thức SPDY thực hiện một cái gì đó gọi là máy chủ đẩy . Điều này về cơ bản sẽ đưa nội dung ra khỏi tài liệu HTML và vào giao thức. Một máy chủ thông minh sẽ biết khách hàng đã có những tài nguyên nào. Một máy chủ câm sẽ chỉ gửi mọi thứ bất kể - đó vẫn sẽ là một lợi ích hiệu suất, nhưng có thể chi phí về mặt băng thông. Nếu trình duyệt có nội dung trong bộ đệm, nó có thể loại bỏ các bản sao đến. Máy chủ đợi cho đến khi HTML được tải trước khi gửi tài nguyên bổ sung - về lý thuyết trình duyệt có thể gửi tín hiệu để hủy bỏ việc đẩy máy chủ.

HTTP / 2.0 dựa trên SPDY và ​​rất có thể sẽ thực hiện đẩy máy chủ, nhưng về lý thuyết bạn có thể bắt đầu sử dụng SPDY ngay hôm nay. Vì vậy, lý do thực sự chúng tôi không nội tuyến là một trong những di sản - các giao thức hiện đang tồn tại đã cũ và không đủ linh hoạt để đạt được 'nội tuyến cấp độ giao thức'.

Ngoài các bộ nhớ đệm và truy xuất các mối quan tâm mà các câu trả lời khác nêu ra, tôi muốn làm nổi bật một vấn đề khác khó hiểu hơn: phân tích cú pháp .

JavaScript xuất hiện trong HTML có thể gặp phải các vấn đề phân tích cú pháp, như trong ví dụ này:

<html>
<head>
<script>
function myfunc() {
    if ("</style> isn't a problem")
        return "but </script> is"
}
</script>
<style>
body::after {
  content: '</script> is okay, but not </style>'
}
</style>
</head>
<body>
<script>document.write(myfunc())</script>
</body>
</html>

... có nghĩa là bạn phải chuyển đổi tập lệnh của mình để thoát một số ký tự kích hoạt trong HTML. Vấn đề này sẽ biến mất khi bạn cung cấp CSS và JavaScript dưới dạng tài nguyên bên ngoài, vì chúng không còn phải sử dụng bối cảnh phân tích cú pháp 'cha mẹ'.

Nếu bạn phân phát nội dung của mình dưới dạng XML, bạn có một phần xung quanh vấn đề này bằng cách sử dụng các phần CDATA. CDATA, tuy nhiên, đi kèm với một vấn đề tương tự:

<?xml version="1.0" encoding="utf-8"?>
<html>
<head>
<script>
// <![CDATA[
function myfunc() {
    if ("</script> is no longer a problem")
        return "but ]]> is"
}
// ]]>
</script>
<style>
<![CDATA[
body::after {
  content: 'same ]]> issue here'
}
]]>
</style>
</head>
<body>
<script>document.write(myfunc())</script>
</body>
</html>

Inliners hãy cẩn thận.

Việc tách nội dung khỏi kiểu dáng trình bày của nó thường là một lợi thế lớn hơn so với các yêu cầu http ít hơn.

Tách tất cả các kiểu dáng cho phép và khuyến khích sử dụng lại và chia sẻ các tệp.

Nội dung của các tệp cũng sẽ tĩnh hơn và có sẵn để lưu vào bộ đệm trên cả máy chủ và máy khách cho cả trang đó và các trang khác được truy cập.

Đối với bạn câu hỏi cụ thể mặc dù ... Nếu máy chủ được tạo để tự thực hiện việc thu nhỏ, nó làm cho tài sản khó bảo trì hơn và gỡ lỗi. Tuy nhiên, nhiều khung làm bây giờ làm điều này ở cấp độ tệp, ví dụ: tất cả cs và tất cả js. Ví dụ, khung ruby ​​trên đường ray hiện thu nhỏ tài sản của nó để sản xuất. 5-10 yêu cầu http bổ sung thường không phải là nút cổ chai, hơn nữa nếu có hơn 100 yêu cầu http (mà bạn thường nhận được bằng hình ảnh).

Bước bổ sung thực sự bao gồm mã trong các trang sẽ có nhược điểm của các trang lớn hơn mà bạn phải quản lý trình tự tải xuống một cách cẩn thận và trang không thể hiển thị nội dung thường xuyên mà không có phần còn lại của trang (hiện đã lớn) đang được tải xuống.

1. Giảm thiểu mã hóa trùng lặp. để tiết kiệm thời gian (Bạn có thể sử dụng lại kiểu và hàm JS được mã hóa cho một trang).
2. Giảm thiểu nỗ lực thay đổi. (Nếu khách hàng của bạn yêu cầu bạn thay đổi màu nút của trang web. Bạn cần phải đi từng trang một).
3. Giảm thời gian tải (Nếu CSS và JS của bạn trùng lặp, điều đó có nghĩa là tăng kích thước trang riêng lẻ và tốn thời gian để tải xuống. Nhưng CSS JS thông thường không cần phải tải xuống nhiều lần).
4. Sử dụng từ xa. (bạn có thể đặt JS js CSS phổ biến của mình ở một nơi xa. không phải cùng một máy chủ được lưu trữ)
5. Giảm thời gian sửa lỗi. Nếu có một lỗi trong một chức năng, bạn cần phải đi từng trang để sửa các lỗi trong nhúng và CSS.
6. Để tăng SEO (chỉ cần tách nội dung với dữ liệu meta)
7. Sạch hơn và dễ hiểu về mã (Nếu bạn nhúng tất cả vào một tệp gỡ lỗi và độ rõ của mã sẽ biến mất. Mỗi trang sẽ là một trang rất dài).
8. Ngoài ra, điều này sẽ giúp bạn giảm kích thước của sản phẩm.
9. Nhưng bạn vẫn có thể xem xét để nhúng điều độc đáo nhất trong cùng một trang.

Chúng ta không nên nhúng các kiểu / tập lệnh trong HTML vì

Các kiểu / đoạn mã nhúng phải được tải xuống với mỗi yêu cầu trang:

Các kiểu này không thể được lưu trong bộ nhớ cache của trình duyệt và được sử dụng lại cho một trang khác. Do đó, bạn nên nhúng một lượng CSS / JS tối thiểu nhất có thể.

thay vào đó chúng tôi sử dụng liên kết coz khi chúng tôi sử dụng liên kết để liên kết css / scripts

Tốc độ trang web tăng cho nhiều yêu cầu trang:

Khi một người lần đầu truy cập trang web của bạn, trình duyệt của họ sẽ tải xuống HTML của trang hiện tại cộng với tệp CSS và tệp được liên kết. Khi họ điều hướng đến một trang khác, trình duyệt của họ chỉ cần tải xuống HTML của trang mới, tệp CSS / JS được lưu trong bộ nhớ cache nên không cần phải tải xuống lại. Điều này có thể tạo ra sự khác biệt lớn đặc biệt nếu bạn có tệp tập lệnh và kiểu lớn.