Hãy suy nghĩ về cách bạn tải các loại tài nguyên khác nhau trên web. Đối với JS, chúng tôi có
3. Đối với CSS, mục tiêu của bạn có thể là
4. Đối với hình ảnh, đó là
5. Video có
6. Âm thanh,
7… Đi thẳng vào vấn đề. Phần lớn nội dung của trang web có cách tự tải đơn giản và có tính khai báo. Không phải như vậy đối với HTML. Đây là lựa chọn của bạn
8 - đã thử và đúng nhưng sức nặng. Nội dung của iframe tồn tại hoàn toàn trong ngữ cảnh riêng biệt so với trang của bạn. Mặc dù đó chủ yếu là một tính năng tuyệt vời, nhưng nó tạo ra những thách thức bổ sung [thu nhỏ kích thước của khung hình với nội dung của nó là điều khó khăn, cực kỳ khó chịu khi nhập/xuất tập lệnh, gần như không thể tạo kiểu]
- AJAX - Tôi thích
9, nhưng bạn đang nói rằng tôi cần JS để tải HTML?
- CrazyHacks™ - nhúng trong chuỗi, ẩn dưới dạng nhận xét [e. g.
0]. kinh quá
...
...
Thấy sự trớ trêu? . May mắn thay, các Thành phần web ở đây để giúp chúng tôi trở lại đúng hướng
Bắt đầu #
Nhập HTML, một phần của quá trình truyền Cấu phần Web, là một cách để đưa tài liệu HTML vào các tài liệu HTML khác. Bạn cũng không bị giới hạn trong đánh dấu. Một lần nhập cũng có thể bao gồm CSS, JavaScript hoặc bất kỳ thứ gì khác mà tệp
...
...
1 có thể chứa. Nói cách khác, điều này làm cho quá trình nhập trở thành một công cụ tuyệt vời để tải HTML/CSS/JS có liên quanNhững thứ cơ bản #
Bao gồm một lần nhập trên trang của bạn bằng cách khai báo một
...
...
2
0URL của lần nhập được gọi là vị trí nhập. Để tải nội dung từ miền khác, vị trí nhập cần được bật CORS
1Ngăn xếp mạng của trình duyệt tự động loại bỏ tất cả các yêu cầu từ cùng một URL. Điều này có nghĩa là các lần nhập tham chiếu cùng một URL chỉ được truy xuất một lần. Bất kể bao nhiêu lần nhập tại cùng một vị trí được tải, nó chỉ thực hiện một lần
Phát hiện và hỗ trợ tính năng #
Để phát hiện hỗ trợ, hãy kiểm tra xem có tồn tại
...
...
3 trên phần tử
...
...
4 không
4Hỗ trợ trình duyệt vẫn còn trong những ngày đầu. Chrome 31 là trình duyệt đầu tiên được triển khai nhưng các nhà cung cấp trình duyệt khác đang chờ xem Mô-đun ES hoạt động như thế nào. Tuy nhiên, đối với các trình duyệt khác, các thành phần web. js polyfill hoạt động tốt cho đến khi mọi thứ được hỗ trợ rộng rãi
Đóng gói tài nguyên #
Các lần nhập cung cấp quy ước để gộp HTML/CSS/JS [thậm chí cả các lần Nhập HTML khác] vào một lần phân phối duy nhất. Đó là một tính năng nội tại, nhưng là một tính năng mạnh mẽ. Nếu bạn đang tạo một chủ đề, thư viện hoặc chỉ muốn phân đoạn ứng dụng của mình thành các phần hợp lý, thì việc cung cấp cho người dùng một URL duy nhất là rất hấp dẫn. Rất tiếc, bạn thậm chí có thể phân phối toàn bộ ứng dụng thông qua một lần nhập. Hãy suy nghĩ về điều đó trong một giây
Chỉ sử dụng một URL, bạn có thể đóng gói một gói web tốt có thể định vị lại để người khác sử dụng
Một ví dụ thực tế là Bootstrap. Bootstrap bao gồm các tệp riêng lẻ [bootstrap. css, khởi động. js, phông chữ], yêu cầu JQuery cho các plugin của nó và cung cấp các ví dụ đánh dấu. Các nhà phát triển thích sự linh hoạt gọi món. Nó cho phép họ mua vào các phần của khuôn khổ mà họ muốn sử dụng. Điều đó nói rằng, tôi cá là JoeDeveloper™ điển hình của bạn sẽ đi theo con đường dễ dàng và tải xuống tất cả Bootstrap
Nhập khẩu có ý nghĩa rất lớn đối với những thứ như Bootstrap. Tôi giới thiệu với bạn, tương lai của việc tải Bootstrap
Người dùng chỉ cần tải một liên kết Nhập khẩu HTML. Họ không cần phải loay hoay với các tập tin bị phân tán. Thay vào đó, toàn bộ Bootstrap được quản lý và gói gọn trong một lần nhập, bootstrap. html
...
...
Hãy để điều này ngồi. Đó là thứ thú vị
Sự kiện tải/lỗi #
Phần tử
...
...
4 kích hoạt sự kiện
...
...
6 khi quá trình nhập được tải thành công và
...
...
7 khi lần thử không thành công [e. g. nếu tài nguyên 404s]Nhập cố gắng tải ngay lập tức. Một cách dễ dàng để tránh đau đầu là sử dụng các thuộc tính
...
...
8/
...
...
7
2Lưu ý rằng các trình xử lý sự kiện được xác định trước khi quá trình nhập được tải trên trang. Trình duyệt cố tải nội dung nhập ngay khi gặp thẻ. Nếu chức năng chưa tồn tại, bạn sẽ gặp lỗi bảng điều khiển đối với tên chức năng không xác định
Hoặc, nếu bạn đang tạo động nhập
3Sử dụng nội dung #
Bao gồm một lần nhập trên một trang không có nghĩa là "đặt nội dung của tệp đó vào đây". Nó có nghĩa là "trình phân tích cú pháp, hãy tắt tìm nạp tài liệu này để tôi có thể sử dụng nó". Để thực sự sử dụng nội dung, bạn phải hành động và viết kịch bản
Một thời điểm quan trọng của
20 là nhận ra rằng một lần nhập chỉ là một tài liệu. Thực chất nội dung của một lần nhập khẩu được gọi là chứng từ nhập khẩu. Bạn có thể điều khiển quá trình nhập bằng cách sử dụng API DOM tiêu chuẩnliên kết. nhập khẩu #
Để truy cập nội dung của một lần nhập, hãy sử dụng thuộc tính
...
...
3 của phần tử liên kết
6
22 là
23 trong các điều kiện sau- Trình duyệt không hỗ trợ Nhập HTML
4 không có
...
...
25
4 chưa được thêm vào DOM
...
...
4 đã bị xóa khỏi DOM
...
...- Tài nguyên không được kích hoạt CORS
ví dụ đầy đủ
Giả sử
28 chứa
4Nhà nhập khẩu có thể lấy một phần cụ thể của tài liệu này và sao chép nó vào trang của họ
5Viết kịch bản trong nhập khẩu #
Nhập khẩu không có trong tài liệu chính. Họ là vệ tinh của nó. Tuy nhiên, quá trình nhập của bạn vẫn có thể hoạt động trên trang chính mặc dù tài liệu chính chiếm vị trí tối cao. Một lần nhập có thể truy cập DOM của chính nó và/hoặc DOM của trang đang nhập nó
Ví dụ - nhập khẩu. html thêm một trong các biểu định kiểu của nó vào trang chính
10Chú ý những gì đang xảy ra ở đây. Tập lệnh bên trong phần nhập tham chiếu đến tài liệu đã nhập [
29] và nối một phần của tài liệu đó vào trang nhập [
30]. Khá sởn gai ốc nếu bạn hỏi tôiTập lệnh trong quá trình nhập có thể thực thi mã trực tiếp hoặc xác định các chức năng sẽ được trang nhập sử dụng. Điều này tương tự như cách các mô-đun được định nghĩa trong Python
Quy tắc JavaScript trong một lần nhập
- Tập lệnh trong quá trình nhập được thực thi trong ngữ cảnh của cửa sổ chứa
31 đang nhập. Vì vậy,
32 đề cập đến tài liệu trang chính. Điều này có hai hệ quả hữu ích
- các hàm được xác định trong một lần nhập kết thúc vào ngày
33
- bạn không cần phải làm bất cứ điều gì điên rồ như thêm các khối
34 của quá trình nhập vào trang chính. Một lần nữa, tập lệnh được thực thi
- các hàm được xác định trong một lần nhập kết thúc vào ngày
- Nhập khẩu không chặn phân tích cú pháp của trang chính. Tuy nhiên, các tập lệnh bên trong chúng được xử lý theo thứ tự. Điều này có nghĩa là bạn có hành vi giống như trì hoãn trong khi duy trì thứ tự tập lệnh phù hợp. Thêm về điều này dưới đây
Cung cấp các thành phần web #
Thiết kế của Nhập khẩu HTML rất phù hợp để tải nội dung có thể sử dụng lại trên web. Đặc biệt, đó là một cách lý tưởng để phân phối các Thành phần Web. Mọi thứ từ các
35 HTML cơ bản đến các Phần tử tùy chỉnh hoàn chỉnh với Shadow DOM [1, 2, 3]. Khi các công nghệ này được sử dụng song song, quá trình nhập sẽ trở thành một
36 cho Thành phần WebBao gồm các mẫu #
Phần tử Mẫu HTML phù hợp tự nhiên cho Nhập khẩu HTML.
35 rất lý tưởng để dàn dựng các phần đánh dấu để ứng dụng nhập sử dụng theo ý muốn. Đóng gói nội dung trong một
35 cũng mang lại cho bạn lợi ích bổ sung là làm cho nội dung trở nên trơ cho đến khi được sử dụng. Nghĩa là, các tập lệnh không chạy cho đến khi mẫu được thêm vào DOM]. bùng nổ
11
12Đăng ký các yếu tố tùy chỉnh #
Phần tử tùy chỉnh là một công nghệ Thành phần web khác hoạt động rất tốt với Nhập khẩu HTML. Quá trình nhập có thể thực thi tập lệnh, vậy tại sao không xác định + đăng ký các phần tử tùy chỉnh của bạn để người dùng không phải thực hiện?
13Quá trình nhập này xác định [và đăng ký] hai phần tử,
39 và
60. Phần đầu tiên hiển thị một phần tử tùy chỉnh cơ bản tự đăng ký bên trong phần nhập. Ví dụ thứ hai cho thấy cách triển khai phần tử tùy chỉnh tạo Shadow DOM từ
35, sau đó tự đăng kýPhần tốt nhất về việc đăng ký các phần tử tùy chỉnh trong quá trình nhập HTML là nhà nhập khẩu chỉ cần khai báo phần tử của bạn trên trang của họ. Không cần nối dây
14Theo ý kiến của tôi, chỉ riêng quy trình công việc này đã khiến Nhập HTML trở thành một cách lý tưởng để chia sẻ Thành phần Web
Quản lý phụ thuộc và nhập phụ #
Yo dawg. Tôi nghe nói bạn thích nhập khẩu, vì vậy tôi đã thêm một lần nhập vào mục nhập của bạn
Nhập khẩu phụ #
Nó có thể hữu ích cho một lần nhập để bao gồm một lần nhập khác. Ví dụ: nếu bạn muốn sử dụng lại hoặc mở rộng thành phần khác, hãy sử dụng thao tác nhập để tải [các] thành phần khác
Dưới đây là một ví dụ thực tế từ Polymer. Đó là một thành phần tab mới [
62] sử dụng lại thành phần bố cục và bộ chọn. Các phần phụ thuộc được quản lý bằng cách sử dụng Nhập HTMLthẻ giấy. html [đơn giản hóa]
15Các nhà phát triển ứng dụng có thể nhập phần tử mới này bằng cách sử dụng
16Khi một
63 mới, tuyệt vời hơn xuất hiện trong tương lai, bạn có thể hoán đổi
64 và bắt đầu sử dụng ngay. Bạn sẽ không phá vỡ người dùng của mình nhờ nhập khẩu và các thành phần webQuản lý phụ thuộc #
Chúng ta đều biết rằng việc tải JQuery nhiều lần trên mỗi trang sẽ gây ra lỗi. Đây không phải là một vấn đề lớn đối với Thành phần Web khi nhiều thành phần sử dụng cùng một thư viện sao? . Chúng có thể được sử dụng để quản lý các phụ thuộc
Bằng cách gói các thư viện trong Nhập HTML, bạn sẽ tự động loại bỏ các tài nguyên trùng lặp. Tài liệu chỉ được phân tích cú pháp một lần. Các tập lệnh chỉ được thực thi một lần. Ví dụ: giả sử bạn xác định một lần nhập, jquery. html, sẽ tải một bản sao của JQuery
17Lần nhập này có thể được sử dụng lại trong các lần nhập tiếp theo như vậy
18
19Ngay cả trang chính cũng có thể bao gồm jquery. html nếu nó cần thư viện
40mặc dù jquery. html được bao gồm trong nhiều cây nhập khác nhau, tài liệu của nó chỉ được trình duyệt tìm nạp và xử lý một lần. Kiểm tra bảng điều khiển mạng chứng minh điều này
Cân nhắc hiệu suất #
Nhập khẩu HTML hoàn toàn tuyệt vời nhưng cũng như với bất kỳ công nghệ web mới nào, bạn nên sử dụng chúng một cách khôn ngoan. Các phương pháp hay nhất về phát triển web vẫn đúng. Dưới đây là một số điều cần ghi nhớ
Nhập khẩu nối #
Giảm yêu cầu mạng luôn quan trọng. Nếu bạn có nhiều liên kết nhập cấp cao nhất, hãy cân nhắc kết hợp chúng thành một tài nguyên duy nhất và nhập tệp đó
Vulcanize là một công cụ xây dựng npm từ nhóm Polymer giúp làm phẳng đệ quy một tập hợp Nhập HTML thành một tệp duy nhất. Hãy nghĩ về nó như một bước xây dựng nối cho các Thành phần Web
Nhập tận dụng bộ nhớ đệm của trình duyệt #
Nhiều người quên rằng ngăn xếp mạng của trình duyệt đã được tinh chỉnh qua nhiều năm. Nhập [và nhập phụ] cũng tận dụng logic này. Quá trình nhập
65 có thể có các tài nguyên phụ nhưng chúng sẽ được lưu vào bộ đệmNội dung chỉ hữu ích khi bạn thêm nó #
Hãy coi nội dung là trơ cho đến khi bạn sử dụng các dịch vụ của nó. Lấy một biểu định kiểu bình thường, được tạo động
41Trình duyệt sẽ không yêu cầu phong cách. css cho đến khi
66 được thêm vào DOM
42Một ví dụ khác là đánh dấu được tạo động
43
67 tương đối vô nghĩa cho đến khi bạn thêm nó vào DOMKhái niệm tương tự cũng đúng với tài liệu nhập khẩu. Trừ khi bạn thêm nội dung của nó vào DOM, nếu không thì đó là điều cấm kỵ. Trên thực tế, điều duy nhất "thực thi" trực tiếp trong tài liệu nhập khẩu là
34. Xem tập lệnh trong nhập khẩuTối ưu hóa cho tải không đồng bộ #
Nhập kết xuất khối #
Nhập kết xuất khối của trang chính. Điều này tương tự như những gì
4 làm. Lý do trình duyệt chặn hiển thị trên biểu định kiểu ngay từ đầu là để giảm thiểu FOUC. Các mục nhập hoạt động tương tự vì chúng có thể chứa các biểu định kiểuĐể hoàn toàn không đồng bộ và không chặn trình phân tích cú pháp hoặc hiển thị, hãy sử dụng thuộc tính
40
44Lý do
40 không phải là mặc định cho Nhập HTML là vì nó yêu cầu các nhà phát triển thực hiện nhiều công việc hơn. Đồng bộ theo mặc định có nghĩa là Nhập HTML có định nghĩa phần tử tùy chỉnh bên trong chúng được đảm bảo tải và nâng cấp, theo thứ tự. Trong một thế giới hoàn toàn không đồng bộ, các nhà phát triển sẽ phải tự quản lý điệu nhảy đó và nâng cấp thời gianBạn cũng có thể tạo nhập không đồng bộ, động
45Nhập khẩu không chặn phân tích cú pháp #
Nhập khẩu không chặn phân tích cú pháp của trang chính. Các tập lệnh bên trong quá trình nhập được xử lý theo thứ tự nhưng không chặn trang nhập. Điều này có nghĩa là bạn có hành vi giống như trì hoãn trong khi duy trì thứ tự tập lệnh phù hợp. Một lợi ích của việc đưa nội dung nhập của bạn vào
42 là nó cho phép trình phân tích cú pháp bắt đầu làm việc với nội dung càng sớm càng tốt. Như đã nói, điều quan trọng cần nhớ là
34 trong tài liệu chính vẫn tiếp tục chặn trang.
34 đầu tiên sau khi nhập sẽ chặn hiển thị trang. Đó là bởi vì một lần nhập có thể có tập lệnh bên trong cần được thực thi trước tập lệnh trong trang chính
46Tùy thuộc vào cấu trúc ứng dụng và trường hợp sử dụng của bạn, có một số cách để tối ưu hóa hành vi không đồng bộ. Các kỹ thuật bên dưới giảm thiểu việc chặn kết xuất trang chính
Kịch bản #1 [ưu tiên]. bạn không có tập lệnh trong
42 hoặc nội tuyến trong
46Khuyến nghị của tôi để đặt
34 là tránh ngay sau khi bạn nhập. Di chuyển các tập lệnh càng muộn trong trò chơi càng tốt…nhưng bạn đã thực hiện cách tốt nhất đó rồi, KHÔNG PHẢI BẠN. ? Đây là một ví dụ
47Mọi thứ đều ở dưới cùng
cảnh 1. 5. việc nhập khẩu tự thêm vào
Một tùy chọn khác là yêu cầu nhập thêm nội dung của chính nó. Nếu tác giả nhập thiết lập hợp đồng để nhà phát triển ứng dụng tuân theo, thì quá trình nhập có thể tự thêm vào một khu vực của trang chính
48
49Kịch bản #2. bạn có tập lệnh trong
42 hoặc nội tuyến trong
46Nếu bạn có một lần nhập mất nhiều thời gian để tải, thì
34 đầu tiên theo sau nó trên trang sẽ chặn hiển thị trang đó. Ví dụ: Google Analytics khuyên bạn nên đặt mã theo dõi vào
42, Nếu bạn không thể tránh đặt
34 vào
42, việc thêm động nhập sẽ ngăn trang bị chặn
0Ngoài ra, thêm phần nhập vào gần cuối của
46
1Cách tiếp cận cuối cùng này là ít thích hợp nhất. Trình phân tích cú pháp không bắt đầu hoạt động trên nội dung nhập cho đến cuối trang
Những điều cần ghi nhớ #
Mimetype của một lần nhập là
55
Tài nguyên từ các nguồn gốc khác cần được kích hoạt CORS
Các lần nhập từ cùng một URL được truy xuất và phân tích cú pháp một lần. Điều đó có nghĩa là tập lệnh trong lần nhập chỉ được thực thi khi lần nhập đầu tiên được nhìn thấy
Các tập lệnh trong một lần nhập được xử lý theo thứ tự, nhưng không chặn quá trình phân tích cú pháp tài liệu chính
Liên kết nhập không có nghĩa là "#bao gồm nội dung ở đây". Nó có nghĩa là "trình phân tích cú pháp, hãy tắt tìm nạp tài liệu này để tôi có thể sử dụng nó sau". Mặc dù tập lệnh thực thi tại thời điểm nhập, biểu định kiểu, đánh dấu và các tài nguyên khác cần được thêm vào trang chính một cách rõ ràng. Lưu ý, không cần thêm rõ ràng
56. Đây là điểm khác biệt chính giữa Nhập HTML và
8, có nội dung "tải và hiển thị nội dung này tại đây"
Sự kết luận #
Nhập HTML cho phép gói HTML/CSS/JS dưới dạng một tài nguyên. Mặc dù bản thân chúng hữu ích, nhưng ý tưởng này trở nên cực kỳ mạnh mẽ trong thế giới Thành phần Web. Các nhà phát triển có thể tạo các thành phần có thể tái sử dụng để người khác sử dụng và đưa vào ứng dụng của riêng họ, tất cả đều được phân phối thông qua
...
...
2Nhập HTML là một khái niệm đơn giản, nhưng cho phép một số trường hợp sử dụng thú vị cho nền tảng
Trường hợp sử dụng #
Phân phối HTML/CSS/JS có liên quan dưới dạng một gói duy nhất. Về mặt lý thuyết, bạn có thể nhập toàn bộ ứng dụng web vào một ứng dụng khác
Tổ chức mã - phân đoạn các khái niệm một cách hợp lý thành các tệp khác nhau, khuyến khích tính mô đun và khả năng sử dụng lại**
Cung cấp một hoặc nhiều định nghĩa Phần tử tùy chỉnh. Một lần nhập có thể được sử dụng để đăng ký và đưa chúng vào một ứng dụng. Điều này thực hành các mẫu phần mềm tốt, giữ cho giao diện/định nghĩa của phần tử tách biệt với cách nó được sử dụng
Quản lý các phụ thuộc - tài nguyên được tự động loại bỏ
Tập lệnh chunk - trước khi nhập, thư viện JS có kích thước lớn sẽ có tệp của nó được phân tích cú pháp hoàn toàn để bắt đầu chạy, tốc độ chậm. Với quá trình nhập, thư viện có thể bắt đầu hoạt động ngay khi đoạn A được phân tích cú pháp. Độ trễ ít hơn
2
Song song hóa phân tích cú pháp HTML - lần đầu tiên trình duyệt có thể chạy song song hai [hoặc nhiều] trình phân tích cú pháp HTML
Cho phép chuyển đổi giữa chế độ gỡ lỗi và không gỡ lỗi trong một ứng dụng, chỉ bằng cách thay đổi chính mục tiêu nhập. Ứng dụng của bạn không cần biết liệu mục tiêu nhập là tài nguyên được gói/biên dịch hay cây nhập
Cập nhật lần cuối. Ngày 19 tháng 12 năm 2013 — Cải thiện bài viết
Quay lại tất cả các bài viết
Đăng lại
đặt mua
Đóng góp
- Nộp một lỗi
- Xem nguồn
Nội dung liên quan
- nhà phát triển. trình duyệt Chrome. com
- cập nhật Chrome
- nghiên cứu trường hợp
- Podcast
- trình diễn
Liên kết
- YouTube
- Trình duyệt Chrome
- căn cứ hỏa lực
- Nền tảng đám mây của Google
- Tất cả sản phẩm
chủ đề tối
- Điều khoản & Quyền riêng tư
- Hướng dẫn cộng đồng
Trừ khi có ghi chú khác, nội dung của trang này được cấp phép theo Creative Commons Attribution 4. 0 và các mẫu mã được cấp phép theo Apache 2. 0 Giấy phép. Để biết chi tiết, hãy xem Chính sách trang web dành cho nhà phát triển của Google