Hướng dẫn javascript order of execution - thứ tự thực thi javascript

Question

Tôi có trang web sau đây chuyển hướng lưu lượng http sang https.

Nội dung chính Show

Cách tốt nhất là chuyển hướng phía máy chủ để làm cho nó nhanh hơn, trừ khi logic phải nằm trong ứng dụng web của bạn.7 silver badges11 bronze badges
Từ một người xử lý/người nghe sự kiện
Mã được gán cho người xử lý sự kiện và người nghe
Các tập lệnh người dùng khách truy cập tùy chỉnh

<head>
<script type="text/javascript">
    var loc = window.location.href+'';
    if (loc.indexOf('http://www.') == 0 && loc.indexOf('.com') > -1) {
        window.location.href = loc.replace('http://www.','https://www.');
    } else if (loc.indexOf('http://') == 0 && loc.indexOf('.com') > -1  && loc.indexOf('www.') == -1) {
        window.location.href = loc.replace('http://','https://www.');   
    }
</script>
</head>
<body>
   ...
</body>

Câu hỏi

Tôi đã đặt JavaScript chuyển hướng trên HTML body. Điều này có nghĩa là trang sẽ được chuyển hướng trước khi body cố gắng tải?

Tôi đang cố gắng làm cho mã này hiệu quả nhất có thể.

Bất kỳ lời khuyên đánh giá cao.

Đã hỏi ngày 10 tháng 7 năm 2017 lúc 16:36Jul 10, 2017 at 16:36Jul 10, 2017 at 16:36

7

Để trả lời câu hỏi của bạn, vâng, tập lệnh sẽ được thực thi trước mọi thứ bên dưới nó. Tuy nhiên, nếu JavaScript bị vô hiệu hóa hoặc không được hỗ trợ, bạn sẽ gặp vấn đề.

Thông thường, tôi khuyên bạn nên sử dụng chuyển hướng phía máy chủ. Nếu bạn biết PHP, đó là một lựa chọn đơn giản. Nếu bạn không, và đây là trên máy chủ được lưu trữ của Apache (Localhost hoặc bên ngoài), tôi cho rằng bạn có thể sử dụng tệp .htaccess, cũng có thể CPanel của Webhost cho phép bạn thực hiện việc này mà không cần chỉnh sửa bất cứ điều gì. Một số cPanels chẳng hạn có tùy chọn tự động tái hướng các liên kết HTTP HTTPS. Nếu cPanel của bạn không, bạn có thể (tôi cho rằng) chuyển hướng mọi trang HTTP sang HTTP bằng bất kỳ tùy chọn nào mà CPanel của bạn cung cấp cho bạn.

Nếu bạn hoàn toàn phải có tùy chọn hiệu quả nhất, thì đó là.

Đã trả lời ngày 10 tháng 7 năm 2017 lúc 16:48Jul 10, 2017 at 16:48Jul 10, 2017 at 16:48

BenbenBenBen

2.04821 Huy hiệu bạc 30 Huy hiệu Đồng21 silver badges30 bronze badges21 silver badges30 bronze badges

Các trang HTML được xử lý từ trái sang phải, từ trên xuống dưới trừ khi có các hướng dẫn cụ thể ngược lại.

Cho rằng JavaScript của bạn không được gói gọn trong một hàm hoặc được gán như một cuộc gọi lại, nó sẽ chạy trước HTML theo sau nó.

Đã trả lời ngày 10 tháng 7 năm 2017 lúc 16:48Jul 10, 2017 at 16:48Jul 10, 2017 at 16:48

BenbenBenScott Marcus

2.04821 Huy hiệu bạc 30 Huy hiệu Đồng21 silver badges30 bronze badges6 gold badges44 silver badges65 bronze badges

Các trang HTML được xử lý từ trái sang phải, từ trên xuống dưới trừ khi có các hướng dẫn cụ thể ngược lại.

Cho rằng JavaScript của bạn không được gói gọn trong một hàm hoặc được gán như một cuộc gọi lại, nó sẽ chạy trước HTML theo sau nó.

BenbenScott Marcus

2.04821 Huy hiệu bạc 30 Huy hiệu Đồng6 gold badges44 silver badges65 bronze badges

Scott Marcusscott MarcusJul 10, 2017 at 16:59

61.6K6 Huy hiệu vàng44 Huy hiệu bạc65 Huy hiệu ĐồngJuanGG

Bằng cách cài đặt window.location.href, bạn đang bảo trình duyệt rời đi, vì vậy bất cứ điều gì bạn có sau đó sẽ không được thực thi. Rõ ràng, nếu bạn có một cái gì đó trước đó (CSS, các tập lệnh khác, ...), nó đã được xử lý.Jul 10, 2017 at 16:597 silver badges11 bronze badges

Vấn đề là trình duyệt có thể đã bắt đầu tải xuống / phân tích các tài nguyên khác trước khi bắt đầu thực thi bất kỳ tập lệnh nào (nó phụ thuộc vào động cơ.)JuanGG

Cách tốt nhất là chuyển hướng phía máy chủ để làm cho nó nhanh hơn, trừ khi logic phải nằm trong ứng dụng web của bạn.7 silver badges11 bronze badges

Thiết kế trang web của bạn bằng JavaScript đòi hỏi sự chú ý đến thứ tự mã của bạn xuất hiện và liệu bạn có gói gọn mã thành các chức năng hoặc đối tượng, tất cả đều ảnh hưởng đến thứ tự mã chạy. & NBSP;

Vị trí của JavaScript trên trang web của bạn

Vì JavaScript trên trang của bạn thực thi dựa trên một số yếu tố nhất định, hãy xem xét nơi và cách thêm JavaScript vào trang web. & NBSP;
Về cơ bản có ba vị trí mà chúng ta có thể đính kèm JavaScript:
Trực tiếp vào đầu trang

Trực tiếp vào phần thân của trang

Từ một người xử lý/người nghe sự kiện

Nó không tạo ra bất kỳ sự khác biệt nào cho dù JavaScript nằm trong chính trang web hoặc trong các tệp bên ngoài được liên kết với trang. Nó cũng không quan trọng & nbsp; cho dù người xử lý sự kiện được mã hóa cứng vào trang hoặc được thêm bởi chính JavaScript (ngoại trừ việc chúng không thể được kích hoạt trước khi chúng được thêm vào).

Mã trực tiếp trên trang

Có nghĩa là gì khi nói rằng JavaScript là & nbsp; trực tiếp trong đầu hoặc phần thân của trang? & Nbsp; nếu mã không được đặt trong một hàm hoặc đối tượng, nó nằm trực tiếp trong trang. Trong trường hợp này, mã chạy tuần tự ngay khi tệp chứa mã đã được tải đủ để mã đó được truy cập.

Mã nằm trong một hàm hoặc đối tượng chỉ được chạy khi hàm hoặc đối tượng đó được gọi.

Về cơ bản, điều này có nghĩa là bất kỳ mã nào bên trong đầu và phần thân của trang của bạn không nằm trong hàm hoặc đối tượng sẽ chạy vì trang đang tải & nbsp; - & nbsp; ngay khi & nbsp; trang đã tải đủ để truy cập mã đó.

Bit cuối cùng đó rất quan trọng và tác động đến thứ tự bạn đặt mã của mình trên trang: bất kỳ mã nào được đặt trực tiếp trong trang cần tương tác với các phần tử trong trang phải xuất hiện sau các phần tử trong trang mà nó phụ thuộc.

Một mã bên trong các hàm hoặc đối tượng được chạy bất cứ khi nào hàm hoặc đối tượng được gọi. Nếu nó được gọi từ mã trực tiếp trong đầu hoặc phần thân của trang, thì vị trí của nó theo thứ tự thực thi thực sự là điểm mà hàm hoặc đối tượng được gọi từ mã trực tiếp.

Mã được gán cho người xử lý sự kiện và người nghe

Việc gán một hàm cho trình xử lý sự kiện hoặc trình nghe không dẫn đến chức năng được chạy tại điểm mà nó được gán - & nbsp; với điều kiện là bạn thực sự đang gán chức năng và không chạy chức năng và gán giá trị được trả về. .() on the end of the function name when it is being assigned to an event since the addition of the parentheses runs the function and assigns the value returned rather than assigning the function itself.) () on the end of the function name when it is being assigned to an event since the addition of the parentheses runs the function and assigns the value returned rather than assigning the function itself.)

Các chức năng được gắn vào người xử lý sự kiện và người nghe chạy khi sự kiện mà chúng được gắn vào được kích hoạt. Hầu hết các sự kiện được kích hoạt bởi khách truy cập tương tác với trang của bạn. Tuy nhiên, một số ngoại lệ tồn tại như sự kiện tải trên cửa sổ, được kích hoạt khi trang hoàn thành tải.load event on the window itself, which is triggered when the page finishes loading. load event on the window itself, which is triggered when the page finishes loading.

Các chức năng gắn liền với các sự kiện trên các phần tử trang

Bất kỳ chức năng nào được gắn vào các sự kiện trên các phần tử trong chính trang sẽ chạy theo hành động của từng khách truy cập - mã này & NBSP; mã chỉ chạy khi một sự kiện cụ thể xảy ra để kích hoạt nó. Vì lý do này, nó không & nbsp; vấn đề nếu mã không bao giờ chạy cho một khách truy cập nhất định, vì khách truy cập đó rõ ràng đã không thực hiện tương tác yêu cầu.

Tất cả điều này, tất nhiên, giả định rằng khách truy cập của bạn đã truy cập trang của bạn với trình duyệt đã bật JavaScript.

Các tập lệnh người dùng khách truy cập tùy chỉnh

Một số người dùng đã cài đặt các tập lệnh đặc biệt có thể & nbsp; tương tác với trang web của bạn. Các tập lệnh này chạy theo tất cả mã trực tiếp của bạn, nhưng trước bất kỳ & nbsp; mã được gắn vào trình xử lý sự kiện tải.

Vì trang của bạn không biết gì về các tập lệnh người dùng này, bạn không có cách nào để biết những tập lệnh bên ngoài này có thể làm gì & nbsp; - & nbsp; & nbsp; họ & nbsp; xử lý được chỉ định. Nếu mã này ghi đè & NBSP; Trình xử lý hoặc người nghe sự kiện, phản hồi cho các kích hoạt sự kiện sẽ chạy mã được xác định bởi người dùng thay vì hoặc ngoài mã của bạn.

Điểm mang về ở đây là bạn không thể cho rằng mã được thiết kế để chạy sau khi trang được tải sẽ được phép chạy theo cách mà bạn thiết kế. Ngoài ra, hãy lưu ý rằng một số trình duyệt có các tùy chọn cho phép vô hiệu hóa một số trình xử lý sự kiện trong trình duyệt, trong trường hợp đó, một trình kích hoạt sự kiện có liên quan sẽ không khởi chạy trình xử lý/trình nghe sự kiện tương ứng trong mã của bạn.

programming javascript