Khả năng tương thích trình duyệt Safari JavaScript

Bất kỳ ai muốn tạo một trang web có nội dung động đều sử dụng JavaScript (JS). Song song với HTML và CSS, nó là một vật cố định trong phát triển web. Chưa hết, JavaScript trong lịch sử đã gặp phải các vấn đề về khả năng tương thích giữa các trình duyệt

Tại sao tính tương thích của trình duyệt JavaScript lại là một vấn đề ngay từ đầu?

Đầu những năm 1990, hai trình duyệt chính được sử dụng trên toàn cầu là Internet Explorer và Netscape đã triển khai tập lệnh theo những cách cơ bản khác nhau – Netscape sử dụng JavaScript, IE sử dụng JScript và cũng cung cấp VBScript. JavaScript và JScript có một số mức độ liên kết vì cả hai đều hoạt động trên đặc tả ECMAScript. Nhưng ở nhiều cấp độ, mã được triển khai theo những cách tương phản và thậm chí mâu thuẫn, khiến việc phát triển cho cả hai trình duyệt trở nên cực kỳ tẻ nhạt

Ngay cả vào những năm 2000, khả năng tương thích của trình duyệt vẫn là mối quan tâm đối với JavaScript. Vì mọi trình duyệt đều chạy một công cụ kết xuất duy nhất nên các phần tử web được xử lý và hiển thị theo những cách khác nhau. Các thư viện như jQuery đã khiến mọi thứ trở nên dễ dàng hơn bằng cách giải quyết và loại bỏ những khác biệt trong cách triển khai JS trong các trình duyệt khác nhau. Do đó, các nhà phát triển chỉ phải tạo một khối mã và để thư viện điều chỉnh các khác biệt dựa trên trình duyệt trong nền

Tuy nhiên, lỗi trong JS do sự khác biệt của trình duyệt tiếp tục gây khó khăn cho các nhà phát triển. Tuy ít xảy ra hơn trước nhưng vẫn cần xử lý nhanh chóng, đồng bộ. Bài viết này sẽ khám phá những vấn đề này và đưa ra một vài giải pháp cho cùng một vấn đề.

Các vấn đề phổ biến về khả năng tương thích của trình duyệt Javascript

Sử dụng các tính năng JavaScript hiện đại trên các Trình duyệt cũ hơn

Các lỗi chủ yếu về khả năng tương thích với trình duyệt JavaScript xuất hiện khi các nhà phát triển trang web cố gắng sử dụng các tính năng JavaScript hiện đại không được hỗ trợ trên các phiên bản trình duyệt hoặc trình duyệt cũ hơn

Dưới đây là danh sách các trình duyệt hỗ trợ JavaScript

1. Chrome (Trên 106)
2. Cạnh (107 và 108)
3. Safari (15. 6, 16. 1, 16. 2, 16. 3,TP)
4. Firefox (106, 107, 108, 109)
5. Ô-pê-ra (92)

Nguồn

Trong trường hợp, bạn muốn kiểm tra khả năng tương thích trang web của mình trên các phiên bản trình duyệt cũ hơn, hãy kiểm tra điều này. Mọi tính năng được triển khai với ES6 về cơ bản sẽ không hoạt động trên trình duyệt này. Một vài ví dụ về các tính năng JS mới hơn không được hỗ trợ trên các trình duyệt cũ hơn là

1. Lời hứa là tuyệt vời để thực hiện các hoạt động không đồng bộ, nhưng chúng không được hỗ trợ trong IE
2. Các hàm mũi tên cung cấp một cú pháp ngắn gọn và có thể sử dụng hơn để tạo các hàm ẩn danh. Nó không được hỗ trợ trên IE và Safari
3. Khi khai báo Chế độ nghiêm ngặt trên đầu mã JS, nó được phân tích cú pháp chặt chẽ hơn với nhiều quy tắc, gây ra nhiều cảnh báo và lỗi hơn được gắn cờ. Sử dụng chế độ Nghiêm ngặt sẽ tạo mã sạch hơn và hiệu quả hơn. Nhưng nó không được hỗ trợ thống nhất trên tất cả các trình duyệt
4. Với các mảng đã nhập, mã JS có thể truy cập và sửa đổi dữ liệu nhị phân thô. Cùng với các trình duyệt hiện đại, tính năng này chỉ được hỗ trợ bởi IE10 trở lên. Bạn có biết, làm thế nào để kiểm tra trang web của bạn trên các phiên bản IE mới nhất?

Một số API cần thiết cũng không được hỗ trợ trên các trình duyệt cũ hơn – API IndexedDB, API lưu trữ web, API công nhân web, API WebGL, API âm thanh trên web, API WebRTC, API WebVR

Trình duyệt đánh hơi

Đánh hơi trình duyệt là cách “đánh hơi” xem trình duyệt nào đang truy cập một trang web và chạy mã có liên quan để làm cho trang web tương thích với trình duyệt đó. Điều này được thực hiện bằng cách đọc chuỗi tác nhân người dùng duy nhất của trình duyệt và xác định nó. Vào thời điểm mà mọi người dùng internet đều sử dụng Netscape hoặc IE, điều này hoạt động hoàn toàn tốt

Tuy nhiên, với các trình duyệt gần đây hơn, cách tiếp cận này có xu hướng bị lỗi. Bản thân mã dễ bị lỗi, để bắt đầu với. Ví dụ: giả sử một tính năng trang web không hoạt động trên Chrome 86 trở xuống và mã đánh hơi trình duyệt đã được thêm vào để phát hiện điều này. Tuy nhiên, nó hoạt động trên Chrome 87. Nhưng vì mã không bao gồm Chrome 87 nên tính năng này sẽ không được tải mặc dù nó được hỗ trợ

Đó là một phương pháp hay để thực hiện kiểm tra định kỳ và định kỳ trang web của bạn trên các phiên bản khác nhau của trình duyệt Chrome thực. Trên thực tế, để luôn dẫn đầu trò chơi, hãy kiểm tra các trang web trên nhiều trình duyệt thực, đặc biệt là những trình duyệt chính như Chrome, Safari, Firefox và Edge. Mã đánh hơi trình duyệt phải được thay đổi thường xuyên để luôn phù hợp. Nếu không có các bản cập nhật như vậy, các trình duyệt sẽ không thể truy cập các trang web có các tính năng mà chúng thực sự hỗ trợ nhưng mã của chúng chưa được cập nhật. Tại một thời điểm, vấn đề trở nên tồi tệ đến mức các trình duyệt bắt đầu cho phép người dùng thay đổi chuỗi tác nhân người dùng của họ để lấy mã đánh hơi khi được truy vấn bằng JS. Điều này làm cho trình duyệt đánh hơi trở nên vô nghĩa hơn

Kiểm tra trang web trên trình duyệt thực miễn phí

Sử dụng thư viện

Như đã đề cập trước đó, các thư viện như jQuery rất cần thiết cho sự khác biệt dựa trên trình duyệt được trừu tượng hóa liên quan đến mã JS. Tuy nhiên, có các thư viện gốc và bên thứ ba không được hỗ trợ trên các trình duyệt và phiên bản trình duyệt. Trước khi sử dụng thư viện, hãy phân tích các dịch vụ của thư viện đó về trình duyệt và hỗ trợ tính năng. Kiểm tra lịch sử phát triển của nó để đảm bảo rằng nó được cập nhật thường xuyên để bắt kịp với những tiến bộ công nghệ

Mọi người cũng đọc. 5 cách để kiểm tra JavaScript ngay lập tức trong trình duyệt

Cách giải quyết các vấn đề về khả năng tương thích của trình duyệt Javascript

• Để bắt đầu, các nhà phát triển phải tìm hiểu xem chức năng JavaScript có tương thích với các phiên bản trình duyệt và trình duyệt cũ hơn không. Sử dụng các công cụ trực tuyến như caniuse để xác định tính năng nào được hỗ trợ trên trình duyệt/phiên bản nào và viết mã tương ứng

Mẹo. Cách kiểm tra trên các phiên bản trình duyệt cũ dễ dàng

• Sử dụng JavaScript Transpiling. Dịch mã chuyển đổi mã JS bằng các tính năng mới nhất (ví dụ ES6) thành mã phù hợp với các trình duyệt cũ hơn. Có các công cụ để chuyển mã JS, chẳng hạn như Babel, khiến việc này trở nên dễ dàng

Khi mã đã được chuyển đổi, hãy nhớ kiểm tra khả năng tương thích giữa các trình duyệt bằng cách chạy mã đó trên nhiều trình duyệt và phiên bản trình duyệt trên đám mây thiết bị thực của BrowserStack. Đăng kí miễn phí

• Kiểm tra khả năng tương thích trình duyệt của JavaScript bằng cách kiểm tra các trang web trên trình duyệt thực. Tất cả các sửa lỗi trên thế giới sẽ không phù hợp với sự dễ dàng và chính xác của việc theo dõi hành vi của trang web trong điều kiện người dùng thực. Trong số nhiều lý do khác, phát hiện lỗi tương thích trình duyệt trong mã JS là lý do chính để đưa thử nghiệm trình duyệt chéo vào phát triển trang web

Để xác minh khả năng tương thích của trình duyệt JS một cách nhanh chóng và chính xác, hãy dùng thử đám mây thiết bị thực của BrowserStack gồm hơn 3000 trình duyệt và thiết bị thực, Chỉ cần đăng ký miễn phí, chọn tổ hợp thiết bị-trình duyệt thực mà bạn muốn kiểm tra, nhập URL của trang web và bắt đầu kiểm tra

Kiểm tra khả năng tương thích JavaScript miễn phí

• Sử dụng Polyfill. Đây là các tệp JS của bên thứ ba hoạt động tương tự như các thư viện JS. Tuy nhiên, polyfill cũng có khả năng cung cấp các chức năng mới. Ví dụ: một polyfill có thể được sử dụng để hỗ trợ các tính năng dựa trên ES6 trong các trình duyệt về cơ bản không
• Sử dụng Linters. Kẻ nói dối xem xét kỹ lưỡng mã để kiểm tra lỗi, lỗi lập trình, sự bất thường về phong cách, các biến không được khai báo, v.v. JS linters đi một chặng đường dài trong việc duy trì chất lượng mã mà không yêu cầu xác thực của con người. Có thể điều chỉnh các xơ vải theo các mức độ giám sát nhất định, gắn cờ/báo cáo lỗi AKA. Các JS linters phổ biến bao gồm JSLint và ESLint. Bạn nên tải xuống trình chỉnh sửa mã có plugin linter tích hợp áp dụng cho mã JavaScript. Atom, một IDE mã nguồn mở, khá hữu ích trong vấn đề này. Nó cho phép các nhà phát triển cài đặt JSLint, trong số những thứ khác, để lướt qua mã nguồn của họ. Khi Linters đã xóa mã, hãy kiểm tra khả năng tương thích giữa nhiều trình duyệt của nó bằng cách chạy mã đó trên nhiều trình duyệt và phiên bản trình duyệt trên đám mây thiết bị thực của BrowserStack
• Sử dụng các công cụ dành cho nhà phát triển trình duyệt/công cụ dành cho nhà phát triển giúp gỡ lỗi JavaScript. Trong hầu hết các trình duyệt, bảng điều khiển JavaScript sẽ gắn cờ và báo cáo lỗi trong mã. Sử dụng Console API để cho phép mã nguồn JS giao tiếp với bảng điều khiển JS của trình duyệt. Tính năng được sử dụng rộng rãi nhất của Console API là bảng điều khiển. log(), nhưng hãy nghiên cứu và áp dụng các chức năng khác của nó để tăng hiệu quả gỡ lỗi

Đọc thêm. Selen với JavaScript. Bắt đầu với Kiểm thử tự động hóa

• Sử dụng trình gỡ lỗi JavaScript (Firefox), Chrome DevTools (Chrome), Công cụ phát triển web Safari (Safari) và các đối tác tương tự để tìm hiểu sâu hơn về mã và thêm các điểm dừng – các điểm dừng thực thi mã và nhà phát triển có thể kiểm tra hoạt động của nó trong
• Sử dụng các khung JavaScript được xây dựng để tạo điều kiện tương thích mã JS với nhiều trình duyệt. BrowserStack cung cấp tích hợp với các khung như TestCafe, Yeti, TestEm, Teaspoon, v.v. để cho phép kiểm tra JavaScript

JavaScript là cần thiết để tạo bất kỳ trang web nào không hoàn toàn tĩnh. Trong một thế giới mà mỗi trang web được truy cập thông qua nhiều trình duyệt và phiên bản trình duyệt, các nhà phát triển, người kiểm tra và tổ chức không thể xa lánh người dùng của một trình duyệt cụ thể bằng cách để mã JS không tương thích thoát vào sản xuất

Kết hợp thông tin trong bài viết này khi tạo và thử nghiệm JavaScript. Nó sẽ đảm bảo rằng các nhà phát triển và người thử nghiệm không phải làm việc chăm chỉ để cung cấp trải nghiệm người dùng tích cực, được tối ưu hóa cao như một phần của mọi trang web họ tạo

Kiểm tra trình duyệt chéo Kiểm tra thủ công Công cụ kiểm tra

Bài đăng này có hữu ích không?

Vâng, cảm ơn Không thực sự

Chúng tôi rất tiếc khi biết điều đó. Hãy chia sẻ phản hồi của bạn để chúng tôi có thể làm tốt hơn

Cảm ơn rất nhiều phản hồi của bạn

Thẻ

Những bài viết liên quan

Cách kiểm tra JavaScript trong Trình duyệt (với 5 Phương pháp)

Học cách kiểm tra mã JavaScript trên trình duyệt bằng các công cụ trực tuyến hiệu quả như JSFiddle, BrowserStack

Tìm hiểu thêm

Cách giảm thời gian tải trang trong Javascript

JavaScript có làm chậm trang web của bạn không?

Tìm hiểu thêm

Vai trò của Kiểm thử tự động trong CI/CD

Làm thế nào để các thử nghiệm tự động hóa phù hợp với quy trình CI/CD?

Trình duyệt Safari có hỗ trợ JavaScript không?

Bạn có thể bật JavaScript trên iPhone của mình trong phần Safari của ứng dụng Cài đặt . Nếu JavaScript không được bật, nhiều trang web sẽ bị hỏng trong trình duyệt Safari của bạn.

Trình duyệt nào tương thích với JavaScript?

Kích hoạt JavaScript trong một trình duyệt khác . Microsoft Edge . Mozilla Firefox. AppleSafari.

Safari có tắt JavaScript không?

Để tắt JavaScript trên thiết bị iOS của bạn, hãy làm theo các bước sau. Mở ứng dụng Cài đặt, cuộn xuống, sau đó chọn Safari. Cuộn xuống cuối màn hình cài đặt Safari và chọn Nâng cao. Chuyển công tắc JavaScript sang vị trí tắt/trắng

JavaScript có được hỗ trợ bởi tất cả các trình duyệt không?

JavaScript là ngôn ngữ lập trình được sử dụng để làm cho các trang web có tính tương tác. Giống như HTML và CSS, bạn không cần cài đặt bất kỳ thứ gì để bắt đầu viết JavaScript hoặc xem nó chạy trên máy tính của mình. Tất cả các trình duyệt hiện đại đều hỗ trợ JavaScript .