Để thay đổi trọng lượng phông chữ của Phần tử HTML bằng JavaScript, hãy tham chiếu đến phần tử Phần tử HTML này và gán giá trị trọng lượng phông chữ bắt buộc cho thuộc tính element.style.fontWeight
Trong ví dụ sau, chúng tôi sẽ thay đổi độ dày phông chữ của Phần tử HTML có id "myElement" thành "600", trong JavaScript, sử dụng thuộc tính element.style.fontWeight
thí dụ. html
► Chạy ⟳ Đặt lại
Sự kết luận
Trong Hướng dẫn JavaScript này, chúng ta đã học cách thay đổi độ đậm phông chữ của Phần tử HTML bằng JavaScript
Các trang web tiếp tục phình to với hình ảnh quá khổ, phông chữ tùy chỉnh và quá nhiều JavaScript. Số lượng lớn JavaScript hoạt động kém trên nhiều trang web kéo trình duyệt máy tính để bàn và đè bẹp các thiết bị di động cấp thấp. Không ai muốn làm việc trên các trang web như vậy
Để làm cho trang web của bạn tốt hơn, nhanh hơn và nhẹ hơn, chúng tôi đã biên soạn một số phương pháp hay nhất cấp cao để giảm tải JavaScript của bạn
Sử dụng ít JavaScript hơn
Nếu bạn muốn trang của mình tốn ít thời gian hơn để tải xuống và thực thi JavaScript, hãy sử dụng ít JavaScript hơn. Điều đó không rõ ràng như bạn nghĩ
Khi gặp vấn đề cần giải quyết, nhiều nhà phát triển JavaScript sẽ tìm đến thư viện hoặc plugin khung. Nhưng thông thường, các thư viện này giải quyết nhiều hơn vấn đề ban đầu và cần nhiều mã hơn để thực hiện. Sau một vài chu kỳ phát triển, bạn có thể thấy mình có hàng chục thư viện, mỗi thư viện đánh thuế trang của bạn bằng 10-50kb JavaScript để thực hiện công việc của họ
Thay vào đó, hãy cân nhắc khám phá cách thư viện đó giải quyết vấn đề của bạn. Có lẽ bạn có thể trích xuất các bit mã và kiểm tra có liên quan vào dự án của riêng mình, chỉ tập trung vào các bit bạn cần
Tốt hơn nữa, có thể bạn hoàn toàn không cần JavaScript. Có rất nhiều mẫu web phổ biến có thể được triển khai bằng các khả năng của trình duyệt gốc với HTML và CSS. Ví dụ, hãy xem menu ngăn di động trên Tài liệu TrackJS. Đó là tất cả CSS, không cần JavaScript
Đôi khi, bạn có thể phải lấy thư viện JavaScript để sử dụng dịch vụ bên ngoài, chẳng hạn như người gửi thư, bộ xử lý giao dịch hoặc bộ ghi phân tích. Bạn phải luôn chỉ trích JavaScript mà bạn thêm vào trang của mình. Hãy chắc chắn rằng bạn hiểu
Tổng kích thước của thư viện. Không chỉ tập lệnh ban đầu, mà tất cả nội dung có thể được tải không đồng bộ. Tập lệnh 5kb có thể tải 100kb tệp khác sau
Tổng kích thước có phù hợp với những gì bạn nhận được không?
Khi nào thư viện thay đổi? . Kiểm tra xem bạn có thể tải URL đã được phiên bản hay không, hoặc tốt hơn là tự lưu trữ thư viện
Tải những gì bạn cần, khi bạn cần
Bạn có thể không cần tất cả JavaScript của mình trên mỗi trang. Một số JavaScript của bạn dành cho một trang cụ thể, các bit khác chỉ dành cho người dùng đã đăng nhập. Bằng cách chỉ tải xuống các tập lệnh bạn cần, trang của bạn sẽ nhẹ hơn và nhanh hơn cho mọi người
Điều này có thể đơn giản như xác định nhiều tập lệnh điểm vào. Ví dụ: main.js được tải ở mọi nơi, trong khi blog.js chỉ được tải trên các trang bài đăng trên blog. main.js sẽ chứa hành vi chung chung như phân tích và blog.js có thể chứa những thứ đặc biệt như nhận xét và chia sẻ
Nếu bạn đang sử dụng gói tập lệnh như Webpack, thì có các tùy chọn để chia tập lệnh của bạn thành các gói riêng biệt và tải chúng không đồng bộ khi cần
Bất kể bạn phân chia nội dung JavaScript của mình như thế nào, hãy cân nhắc thay vì chặn. Các tập lệnh được tải không đồng bộ sẽ không theo cách của người dùng trong khi họ tải xuống và thực thi, cho phép người dùng bắt đầu hiểu và tương tác với nội dung của bạn sớm hơn
Tải xuống JavaScript nhanh hơn
Sau khi bạn đã giảm JavaScript của mình và chỉ tập trung vào các bit bạn cần, bạn vẫn cần tải xuống và thực thi nó. Vì vậy, hãy làm điều đó càng nhanh càng tốt. Cách tốt nhất để làm cho nó nhanh hơn là kết hợp tất cả JavaScript của bạn lại với nhau thành một vài gói được tối ưu hóa để phân phối. Điều này có thể xảy ra với một công cụ như Webpack, Parcel, Google Closure Compiler hoặc chỉ nối các tập lệnh lại với nhau
Nếu bạn không thể gói JavaScript của mình lại với nhau hoặc nếu bạn có nhiều hơn một gói, thì bạn nên cân nhắc bật HTTP/2 trên máy chủ web của mình. HTTP/2 cho phép nhiều tệp được truyền trực tuyến qua cùng một kết nối, giảm chi phí tải tập lệnh của bạn xuống
Nếu bạn đang tải tập lệnh từ các dịch vụ bên ngoài, hãy kiểm tra xem họ có cung cấp thư viện JavaScript của mình để tải xuống và đóng gói từ npm không. Việc giảm yêu cầu bên ngoài đối với CDN của dịch vụ sẽ tiết kiệm rất nhiều chi phí cho việc tra cứu và bắt tay với một kết nối mới
Với tất cả JavaScript đó, rất nhiều thứ có thể sai. Giám sát lỗi giao diện người dùng và báo cáo sự cố từ TrackJS sẽ cho bạn biết khi có sự cố và cách khắc phục. Ngoài ra, tác nhân của chúng tôi chỉ có 8kb, được lưu trữ trên một điểm cuối được phiên bản và được phân phối qua npm để bạn có thể kết hợp nó với các tập lệnh của mình. Chúng tôi làm cho trang web của bạn đáng tin cậy và giữ cho nó chạy nhanh