Câu trả lời:
Bạn nên đặt mã JS của mình vào một tệp riêng vì điều này giúp kiểm tra và phát triển dễ dàng hơn. Câu hỏi về cách bạn phục vụ mã là một vấn đề khác.
Việc phân phát HTML và JS riêng biệt có một lợi thế là máy khách có thể lưu trữ bộ đệm. Điều này yêu cầu bạn gửi các tiêu đề phù hợp để khách hàng không đưa ra yêu cầu mới mỗi lần. Bộ nhớ đệm có vấn đề nếu bạn muốn thực hiện cập nhật và do đó muốn vô hiệu hóa bộ đệm của máy khách. Một phương pháp là bao gồm số phiên bản trong tên tệp, vd/static/mylibrary-1.12.2.js .
Nếu JS nằm trong một tệp riêng biệt, bạn không thể hạn chế quyền truy cập vào nó: Rất khó (về mặt kỹ thuật: không thể) để biết liệu yêu cầu đối với tệp JS có được thực hiện hay không vì bạn đã tham chiếu nó trên trang HTML của mình hoặc vì ai đó muốn tải xuống trực tiếp Tuy nhiên, bạn có thể sử dụng cookie và từ chối phục vụ khách hàng không truyền tải một số cookie nhất định (nhưng điều đó thật ngớ ngẩn).
Việc phục vụ JS bên trong HTML làm tăng kích thước của mỗi trang - nhưng điều này là ổn nếu khách hàng không thể xem nhiều trang. Vì máy khách không đưa ra một yêu cầu riêng cho JS, nên chiến lược này tải trang nhanh hơn - ít nhất là lần đầu tiên, nhưng có một điểm hòa vốn trong đó bộ nhớ đệm tốt hơn. Bạn có thể bao gồm JS, ví dụ thông qua PHP.
Ở đây, máy khách không cần quyền truy cập riêng vào tệp JS, có thể bị ẩn nếu bạn muốn. Nhưng bất cứ ai vẫn có thể xem mã JS bên trong HTML.
Các chiến lược khác để giảm thiểu thời gian tải bao gồm
JS việc rút gọn giúp giảm kích thước của tập tin JS bạn phục vụ. Vì việc thu nhỏ chỉ xảy ra một lần khi triển khai mã, đây là một phương pháp rất hiệu quả để lưu byte. OTOH điều này làm cho mã của bạn khó hiểu hơn đối với khách truy cập quan tâm.
Liên quan đến việc thu nhỏ là thực hành kết hợp tất cả các tệp JS của bạn trong một tệp duy nhất. Điều này làm giảm số lượng yêu cầu cần thiết.
Nén, trong đó thêm một chi phí tính toán cho mỗi yêu cầu trên cả máy khách và máy chủ. Tuy nhiên, thời gian dành (nén) thường nhỏ hơn thời gian truyền dữ liệu không nén. Nén thường được xử lý trong suốt bởi phần mềm máy chủ.
Những kỹ thuật này cũng áp dụng cho các tài nguyên khác như hình ảnh.
Tôi đang thiết kế một trang web
Nếu bạn thực sự chỉ có một trang thì có, tốt hơn là (theo quan điểm hiệu suất) để phục vụ mọi thứ trong một tệp ... bảng định kiểu, JavaScript và thậm chí cả hình ảnh (hình ảnh nhỏ được gắn với URI dữ liệu). Điều này giúp loại bỏ các yêu cầu HTTP bổ sung cần thiết để truy xuất tài nguyên bên ngoài tương đối chậm.
Các tập tin kết quả nên được nén lại trước khi phục vụ, điều này sẽ làm giảm ồ ạt kích thước của phản hồi tất cả văn bản.
Bạn vẫn nên xem xét việc có hình ảnh lớn bên ngoài trang, vì có giới hạn về kích thước của URI dữ liệu và khả năng tương thích trình duyệt. (ví dụ: IE8 có giới hạn 32KB, tương đương với kích thước tệp thực tế khoảng 23KB do bản chất của mã hóa base64.)
Tôi có thể thay đổi quyền để từ chối yêu cầu của người dùng về mã không, nhưng trang html vẫn có thể gọi mã?
Không. Tốt nhất là mã có thể bị xáo trộn để "ẩn" nó khỏi người quan sát thông thường, nhưng nó không cung cấp sự bảo vệ thực sự.
Trình duyệt mã phía máy khách phải được xem bởi trình duyệt (nghĩa là, nếu trang cần sử dụng trực tiếp JS) - điều đó có nghĩa là nó phải được trình duyệt tải xuống.
Bạn không thể có trình duyệt sử dụng JS trên trang nếu nó không thể tải xuống.
Về mặt đó, nó sẽ không tạo ra sự khác biệt nếu bạn đặt nội tuyến của JS hoặc đặt nó vào một tệp, mặc dù thực tế phổ biến là sử dụng tệp JS (tách các mối quan tâm cho một).
Nếu bạn có mã mà bạn không muốn hiển thị thông qua trình duyệt, bạn sẽ cần sử dụng mã phía máy chủ (giả sử node.js, php, perl, asp.net, jsp - có rất nhiều tùy chọn) và tương tác với nó từ trình duyệt - khi tải trang ban đầu hoặc sử dụng AJAX .
Vâng, nó phụ thuộc vào số lượng mã, và mức độ nghiêm trọng của bạn khi trở thành một lập trình viên / kỹ sư phần mềm so với chỉ là một lập trình viên. Tôi đã làm việc với một nhóm các nhà thiết kế đã đưa các đoạn mã ngắn trực tiếp vào HTML và trong khi tôi co rúm lại - nó thực sự hoạt động.
Mặc dù đó không phải là điều tôi sẽ tự làm, và nếu bạn muốn biết cách thực hành tốt nhất về phát triển phần mềm, tôi khuyên bạn nên làm mọi thứ trong *.jstệp bên ngoài và tải nó qua <script>thẻ.
Về điểm thứ hai của bạn, không bạn không thể từ chối người dùng hoặc trình duyệt để xem mã của mình, có một cái gì đó được gọi obfuscationsẽ làm cho mã của bạn khó đọc hơn, tuy nhiên hiệu suất sẽ giảm.
tốt hơn là tạo tệp bên ngoài cho mã JS của tôi hay chỉ đặt nó vào mã html?
Tốt hơn là tạo một tệp bên ngoài cho mã JS của bạn. Nó cũng tốt hơn để có một hoặc hai tệp mà bạn phục vụ cho khách hàng. Tuy nhiên, nó cũng tốt hơn để có mã chia JS của bạn trên các file bội cho vấn đề bảo trì. Để có thể làm điều này, bạn có thể sử dụng các bộ tiền xử lý như Gulp sẽ kết hợp các tệp JS khác nhau của bạn thành một tệp.
Phục vụ ít tệp hơn là tốt hơn vì máy khách sẽ có ít yêu cầu HTTP hơn để xử lý.
Là đặt nó trên trang nhanh hơn để tải?
Có, rõ ràng là nhanh hơn vì bạn chỉ thực hiện một yêu cầu cho HTML, trong khi bạn thực hiện nhiều yêu cầu (ít nhất là 2) với mã JS của bạn như một bên ngoài. Điều này chỉ xảy ra nếu mã JS của bạn không bị thu nhỏ ở cả hai bên và điều này không tính đến việc duy trì mã của bạn sẽ khó hơn thế nào nếu tất cả nằm trong một trang HTML.
Tôi có thể thay đổi quyền để từ chối yêu cầu của người dùng về mã không, nhưng trang html vẫn có thể gọi mã?
Không, bạn không thể. Mã JS, như mã CSS và mã HTML là nội dung tĩnh. Điều đó có nghĩa là một khi nó vào trình duyệt, khách hàng có thể tải xuống và nội dung của nó hoàn toàn. Mỗi tập tin, hình ảnh, tập lệnh được mở để được tải xuống. Tuy nhiên , bạn có thể thu nhỏ / làm xấu đi mã của mình để con người sử dụng nó khó hơn. Đó chỉ là hậu quả của sự xấu xí, được tạo ra cho hiệu suất đầu tiên.
Nhiều lợi ích của việc tách nội dung html và javascript thành các tệp riêng biệt: