1. Khái niệm Internal và External Javascript, CSS
Như chúng ta đã biết file HTML chỉ đơn thuần chứa nội dung thô và định dạng hình ảnh, chữ viết, … là việc của CSS cũng như các đoạn Javascript thao tác với các elements trong file html.
- Internal nghĩa là những đoạn code CSS hoặc Js được viết trực tiếp vào file HTML. Đối với css thì code được đặt trong thẻ <style> và thẻ <script> đối với Js.
- External ngược lại với Internal. Các đoạn code css hay Js được tách thành file riêng (.css hoặc .js) và trong file HTML sẽ có những địa chỉ tham chiếu tới các file này.
Việc tách chúng ra so với cách inline-code mang lại khá nhiều lợi thế trong việc bảo trì, chỉnh sửa code về sau. Bên cạnh đó việc đọc code và tốc độ tải trang cũng cải thiện đáng kể. Tuy nhiên, một núi không thể có 2 hổ và việc Internal và External chiếm ưu thế hơn so với Inline-code nhưng giữa chúng lại vẫn có những ưu và nhược điểm riêng.
2. Cơ chế tải trang của trình duyệt.
- Mình xin nói qua về v/v này một chút nhằm phân tích kỹ hơn về ưu và nhược điểm trong mục 3 và 4. Khi user gửi 1 request (tương tác với website mà yêu cầu tải lại trang hoặc bạn sẽ không thấy trang tải lại nếu có sử dụng Ajax) lên server để xử lý thì sau khi xử lý xong, server sẽ render ra HTML và gửi trả lại cho trình duyệt để hiển thị cho người dùng.
- Quá trình tải các thứ do server trả về phía client được chia làm nhiều luồng. Mặc định bạn sẽ không thấy điều đó vì trình duyệt nó tự động làm.
3. Ưu và nhược điểm của mỗi loại3.1 PHẠM VI ẢNH HƯỞNG (SCOPE):
- Vì External được tách ra riêng so với cách Inline nên file Js hoặc css có thể được áp dụng cho nhiều file HTML khác. Trong khi kiểu Internal thì chỉ áp dụng cho file nội tại. Và một khi file External Js được chỉnh sửa thì nó sẽ thay đổi cho tất cả các file HTML mà có tham chiếu đến nó trong khi Internal Js thì không.
3.2 HIỆU SUẤT (PERFORMANCE):
- Nếu 1 trang web có quá nhiều file external thì tốc độ tải trang sẽ chậm. Bởi lẽ server chỉ trả về cho client HTML thô mà nếu trong file HTML có nhiều tham chiếu đến External Js thì lúc tải trang trình duyệt sẽ tự động gửi request lên server để lấy nội dung Js về. Do đó tốc độ tải trang sẽ phụ thuộc vào số lượng file External Js. Do vậy, nếu trang web ít code css hay Js thì nên dùng kiểu Internal sẽ giúp bạn cải thiện hiệu suất hơn là External.
- Hơn nữa, nếu sử dụng tính năng lưu cache của trình duyệt thì sẽ làm tốc độ truy cập website của bạn tăng lên đáng kể. Các trình duyệt hiện đại đều có tính năng này nên có thể bạn không cần quan tâm lắm đối với website vừa và nhỏ. Còn đối với web TMĐT (thương mại điện tử) vì v/đ này đáng được lưu tâm.
3.3 DỄ BẢO TRÌ, CHỈNH SỬA CODE (MAINTENANCE):
- Nếu bạn tách code Js ra và lưu vào từng file theo chức năng riêng biệt hay mục đích cụ thể nào đó thì khi cần chỉnh sửa bạn chỉ cần tìm đúng đến file mà bạn cần sửa code. Trong khi nếu gôm tất cả code Js vào 1 file duy nhất thì lúc đó bạn sẽ phải scroll chuột rất lâu và khó xác định vị trí dòng code muốn sửa. Có 1 cách đơn giản hơn là sử dụng tổ hợp phím Ctrl + F để tìm từ khóa tuy nhiên nếu không nhớ từ khóa thì cách này vô ích. Nhìn chung về v/v này không làm khó LTV mấy vì đã có debug tools khá nhiều và khi debug thì sẽ tìm được lỗi và biết luôn được dòng nào bị lỗi để fix.
3.4 TỐT CHO SEO (SEARCH ENGINE OPTIMIZATION):
- Với trang mà chỉ chứa nội dung HTML thì những con spiders của trình tìm kiếm (như Google, …) sẽ index và tìm được keyword nhanh hơn trang web hỗn tạp, tùm lum thứ. Vấn đề SEO rất nhiều khía cạnh và mình xin không đề cập cụ thể ở đây.
Cuối cùng, bạn có thể biết được rùa hay thỏ thắng trong cuộc chạy đua rồi chứ. Trong mẩu chuyện “Rùa và thỏ” thì rùa thắng vì thỏ nhởn nhơ, tung tăng ăn cỏ tuy nhiên với thỏ thời @ thì rùa không dễ thắng đâu. Hy vọng qua bài viết này, bạn sẽ hiểu thêm được phần nào về External và Internal Js.
P.s: Hai từ External và Internal đều là tính từ tuy nhiên để cho bài viết dễ hiểu mình xin dùng nó như 1 danh từ trong bài nhé. Hy vọng các bạn khó tính châm chước cho qua.
Cảm ơn các bạn đã đọc bài viết.
Như chúng ta đã biết file HTML chỉ đơn thuần chứa nội dung thô và định dạng hình ảnh, chữ viết, … là việc của CSS cũng như các đoạn Javascript thao tác với các elements trong file html.
- Internal nghĩa là những đoạn code CSS hoặc Js được viết trực tiếp vào file HTML. Đối với css thì code được đặt trong thẻ <style> và thẻ <script> đối với Js.
- External ngược lại với Internal. Các đoạn code css hay Js được tách thành file riêng (.css hoặc .js) và trong file HTML sẽ có những địa chỉ tham chiếu tới các file này.
Việc tách chúng ra so với cách inline-code mang lại khá nhiều lợi thế trong việc bảo trì, chỉnh sửa code về sau. Bên cạnh đó việc đọc code và tốc độ tải trang cũng cải thiện đáng kể. Tuy nhiên, một núi không thể có 2 hổ và việc Internal và External chiếm ưu thế hơn so với Inline-code nhưng giữa chúng lại vẫn có những ưu và nhược điểm riêng.
2. Cơ chế tải trang của trình duyệt.
- Mình xin nói qua về v/v này một chút nhằm phân tích kỹ hơn về ưu và nhược điểm trong mục 3 và 4. Khi user gửi 1 request (tương tác với website mà yêu cầu tải lại trang hoặc bạn sẽ không thấy trang tải lại nếu có sử dụng Ajax) lên server để xử lý thì sau khi xử lý xong, server sẽ render ra HTML và gửi trả lại cho trình duyệt để hiển thị cho người dùng.
- Quá trình tải các thứ do server trả về phía client được chia làm nhiều luồng. Mặc định bạn sẽ không thấy điều đó vì trình duyệt nó tự động làm.
3. Ưu và nhược điểm của mỗi loại3.1 PHẠM VI ẢNH HƯỞNG (SCOPE):
- Vì External được tách ra riêng so với cách Inline nên file Js hoặc css có thể được áp dụng cho nhiều file HTML khác. Trong khi kiểu Internal thì chỉ áp dụng cho file nội tại. Và một khi file External Js được chỉnh sửa thì nó sẽ thay đổi cho tất cả các file HTML mà có tham chiếu đến nó trong khi Internal Js thì không.
3.2 HIỆU SUẤT (PERFORMANCE):
- Nếu 1 trang web có quá nhiều file external thì tốc độ tải trang sẽ chậm. Bởi lẽ server chỉ trả về cho client HTML thô mà nếu trong file HTML có nhiều tham chiếu đến External Js thì lúc tải trang trình duyệt sẽ tự động gửi request lên server để lấy nội dung Js về. Do đó tốc độ tải trang sẽ phụ thuộc vào số lượng file External Js. Do vậy, nếu trang web ít code css hay Js thì nên dùng kiểu Internal sẽ giúp bạn cải thiện hiệu suất hơn là External.
- Hơn nữa, nếu sử dụng tính năng lưu cache của trình duyệt thì sẽ làm tốc độ truy cập website của bạn tăng lên đáng kể. Các trình duyệt hiện đại đều có tính năng này nên có thể bạn không cần quan tâm lắm đối với website vừa và nhỏ. Còn đối với web TMĐT (thương mại điện tử) vì v/đ này đáng được lưu tâm.
3.3 DỄ BẢO TRÌ, CHỈNH SỬA CODE (MAINTENANCE):
- Nếu bạn tách code Js ra và lưu vào từng file theo chức năng riêng biệt hay mục đích cụ thể nào đó thì khi cần chỉnh sửa bạn chỉ cần tìm đúng đến file mà bạn cần sửa code. Trong khi nếu gôm tất cả code Js vào 1 file duy nhất thì lúc đó bạn sẽ phải scroll chuột rất lâu và khó xác định vị trí dòng code muốn sửa. Có 1 cách đơn giản hơn là sử dụng tổ hợp phím Ctrl + F để tìm từ khóa tuy nhiên nếu không nhớ từ khóa thì cách này vô ích. Nhìn chung về v/v này không làm khó LTV mấy vì đã có debug tools khá nhiều và khi debug thì sẽ tìm được lỗi và biết luôn được dòng nào bị lỗi để fix.
3.4 TỐT CHO SEO (SEARCH ENGINE OPTIMIZATION):
- Với trang mà chỉ chứa nội dung HTML thì những con spiders của trình tìm kiếm (như Google, …) sẽ index và tìm được keyword nhanh hơn trang web hỗn tạp, tùm lum thứ. Vấn đề SEO rất nhiều khía cạnh và mình xin không đề cập cụ thể ở đây.
Cuối cùng, bạn có thể biết được rùa hay thỏ thắng trong cuộc chạy đua rồi chứ. Trong mẩu chuyện “Rùa và thỏ” thì rùa thắng vì thỏ nhởn nhơ, tung tăng ăn cỏ tuy nhiên với thỏ thời @ thì rùa không dễ thắng đâu. Hy vọng qua bài viết này, bạn sẽ hiểu thêm được phần nào về External và Internal Js.
P.s: Hai từ External và Internal đều là tính từ tuy nhiên để cho bài viết dễ hiểu mình xin dùng nó như 1 danh từ trong bài nhé. Hy vọng các bạn khó tính châm chước cho qua.
Cảm ơn các bạn đã đọc bài viết.
Comments[ 0 ]
Đăng nhận xét