nhat.dev
  • Tin tức
  • Dịch vụ
  • Lập trình
    • ReactJS
    • React Native
    • Angular
    • VueJS
  • Hackintosh
    • Hackintosh
    • Opencore
  • Liên hệ
No Result
View All Result
  • Đăng nhập
logo nhat.dev
  • Tin tức
  • Dịch vụ
  • Lập trình
    • ReactJS
    • React Native
    • Angular
    • VueJS
  • Hackintosh
    • Hackintosh
    • Opencore
  • Liên hệ
No Result
View All Result
nhat.dev
No Result
View All Result
Home Lập trình Javascript

Những mẹo tối ưu hóa JS để nâng cao kỹ năng của bạn

Nhat Tran by Nhat Tran
16 Tháng Bảy, 2019
Những cách tối ưu hoá JavaScript mà mọi lập trình viên đều phải biết
476
SHARES
1.5k
VIEWS
Chia sẻ lên FacebookChia sẻ lên Twitter

Mình mới khi đi làm lúc nào cũng có tư tưởng là code để nó chạy là ngon rồi, cần gì phải tối ưu rách việc tốn time, time đấy để làm task khác cho nhanh, nhưng khi làm lâu rồi, rồi làm với team nhiều người mới biết tối ưu code của mình nó quan trọng như nào. Nhiều hôm ngồi đọc lại những đoạn code của mình ngày xưa xong bảo ngồi debug lại xem luồng nó chạy thế nào cũng toát cả mồ hôi.

Tối ưu code không những giúp ứng dụng của bạn chạy nhanh, tạo cảm giác mượt mà khi maintain mình làm việc cũng nhanh hơn, sau đây là những mẹo để tối ưu code

Có thể bạnquan tâm

ES2020 có gì hot?

Những thủ thuật jQuery bạn nên biết

Tôi tái cấu trúc code, refactor như thế nào cho hiệu quả?

Reduce library dependencies

Điều đầu tiên chúng ta đề cập tới đó là giảm những thư viện không cần thiết, thời gian tải một website phụ thuộc rất nhiều của thư viện, do đó khuyên bạn nên sử dụng chúng càng ít càng tốt hoặc tốt nhất là không dùng tới nó. Một cách tuyệt vời để giải quyết vấn đề này đó là các bạn nên tận dụng những kỹ thuật hay các thư viện thích hợp sẵn của browser.

Minify JavaScript

Điều này chắc không một ai trong số developer js đều không biết đến kỹ thuật này. Một kỹ thuật đơn giản nhưng mang lại hiểu quả rất cao. Xóa dữ liệu dư thừa và không cần thiết khỏi code của bạn mà không ảnh hưởng đến cách browser xử lý tài nguyên đó chính là minification. Ví dụ, loại bỏ code không sử dụng, rút ngắn chức năng và tên biến, nhận xét mã và định dạng. Một tool có thể giúp bạn rất phổ biến đó là Google Closure Compiler. Điều này cũng giúp webiste của bạn được google ưu tiên hơn những trang khác vì có sự khác biệt về tốc độ tải.

Minimize scope chain Immediate

scope chain, các đối số của hàm và bất kỳ biến được khai báo cục bộ nào sẽ được khởi tạo khi bất kỳ hàm nào được thực thi trong JavaScript. Vì vậy, để truy cập vào một biến được khai báo toàn cầu, cần có thời gian để leo lên scope chain. Sử dụng keyword “this” khóa này và giảm call stack’s Dept sẽ tăng tốc độ thực thi. Các bạn nên tìm hiểu thêm scope chain là gì?

SCOPE CHAIN THIẾT LẬP CHO MỖI SCOPE MỘT FUNCTION NHẤT ĐỊNH. MỖI FUNCTION LẠI ĐỊNH NGHĨA NESTED SCOPE RIÊNG NHƯ TA ĐÃ BIẾT, VÀ MỖI FUNCTION ĐƯỢC ĐỊNH NGHĨA TRONG MỘT FUNCTION KHÁC ĐỀU LÀ LOCAL SCOPE ĐƯỢC LIÊN KẾT VỚI FUNCTION BÊN NGOÀI – SỰ KẾT NỐI ẤY ĐƯỢC GỌI LÀ CHAIN. KHI GIẢI QUYẾT MỘT BIẾN, JS BẮT ĐẦU VỚI SCOPE BÊN TRONG, SAU ĐÓ TÌM KIẾM DẦN MỞ RỘNG RA BÊN NGOÀI CÁCBIẾN/OBJECT/FUNCTION CHO ĐẾN KHI CHÚNG ĐƯỢC TÌM THẤY.

Using ‘this’ keyword

this keyword hoạt động như local chain và nó làm giảm sự phụ thuộc vào các biến toàn cục cũng như closures trong các chuỗi phạm vi cao hơn. Ngược lại, khuyên bạn nên tránh with keyword. Bởi vì nó có thể sửa đổi scope chain, xem ví dụ này:

<span class="token keyword">var</span> Car <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>

    init<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>brand<span class="token punctuation">)</span> <span class="token punctuation">{</span>

        <span class="token keyword">this</span><span class="token punctuation">.</span>brand <span class="token operator">=</span> brand<span class="token punctuation">;</span>

    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token keyword">do</span><span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>callback<span class="token punctuation">)</span> <span class="token punctuation">{</span>

        callback<span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token punctuation">}</span>

<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> audi <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Car</span><span class="token punctuation">(</span><span class="token string">'audi'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

audi<span class="token punctuation">.</span><span class="token keyword">do</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>

    <span class="token function">alert</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>brand<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 'audi' is alerted because 'this' was rewired</span>

<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

Use Async and Defer

Nó rất quan trọng trong việc tải hay load một page với nhiều thư viện. Synchronous loading cần đợi cho đến khi asset trước kết thúc load nhưng tải không đồng bộ có thể asynchronous loading. Vì vậy, để tận dụng tải asynchronous loading, hãy sử dụng các thuộc tính async. Ví dụ:

<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"/example.js"</span> <span class="token keyword">async</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token comment">//load example.js without interrupting webpage rendering</span>

Cache as much as possible

Đương nhiên rồi với một mẹo cache các bạn đã giúp hiệu năng tăng lên một cách đáng kể, thay vì các bạn biết một object có thể lặp lại nhiều lần, vậy thì hà cớ gì các bạn lại lục lõi vào database để lấy kết quả mà bạn đã biết trước. Thay vì điều đó các bạn hãy tận dụng cache của browser, nó sẽ giúp bạn rất nhiều trong việc thực thi data.

Taking advantage of native functions

ECMAScript là một thư mục rất lớn của các cấu trúc native. Còn chờ đợi gì nưã sử dụng các hàm và native functions sẽ tối ưu hóa hiệu suất JavaScript hơn là viết các thuật toán riêng hoặc dựa vào các đối tượng máy chủ. Trong blog anonystick có rất nhiều bài nói về ECMAScript các bạn nên tìm đọc.

Trim HTML

Thời gian tải của một truy vấn và các đối tượng DOM được sửa đổi chủ yếu phụ thuộc vào trang web HTML HTML. Giảm một nữa HTML của một ứng dụng có thể tăng gấp đôi tốc độ DOM. Nó khó khăn nhưng loại bỏ không cần thiết và các thẻ sẽ là một khởi đầu tuyệt vời cho website của bạn.

Source: Viblo
Tags: tối ưu
Bài viết trước

PHP không dùng để build hệ thống lớn?

Bài viết sau

Đánh giá điểm mạnh và điểm yếu của PHP

Nhat Tran

Nhat Tran

Chia sẻ vài thứ hay ho bản thân tìm hiểu và tìm kiếm được đến mọi người

Bài viết sau
PHP không dùng để build hệ thống lớn?

Đánh giá điểm mạnh và điểm yếu của PHP

Subscribe
Notify of
guest
guest
0 Comments
Inline Feedbacks
View all comments

Recommended.

Public website tĩnh lên github,  hosting github static

Public website tĩnh lên github, hosting github static

11 Tháng Chín, 2019
Cách tắt thông báo Device Enrollment (MDM) trên Big Sur 11

Cách tắt thông báo Device Enrollment (MDM) trên Big Sur 11

18 Tháng Mười Một, 2020

Trending.

Hướng dẫn cài macOS trên Laptop, PC 2019

Hướng dẫn cài macOS trên Laptop, PC 2019

6 Tháng Chín, 2020
Chuẩn bị kiến thức cơ bản trước khi “vọc” hackintosh

Hướng dẫn tạo bộ cài vanilla hackintosh dễ dàng nhất

6 Tháng Ba, 2020
Cách “lách” bản quyền âm thanh và hình ảnh video Youtube 2020

Cách “lách” bản quyền âm thanh và hình ảnh video Youtube 2020

2 Tháng Mười Một, 2020
Chuẩn bị kiến thức cơ bản trước khi “vọc” hackintosh

Cài đặt Clover vào ổ cứng sau khi cài macOS

30 Tháng Mười Một, 2019
Chuẩn bị kiến thức cơ bản trước khi “vọc” hackintosh

Kích hoạt âm thanh trong hackintosh với AppleALC

30 Tháng Mười Một, 2019
nhat.dev

© 2019 nhat.dev

Chia sẻ chút kiến thức, kinh nghiệm, thủ thuật mà bản thân đã tìm hiểu và đọc được với mọi người

  • About me
  • Privacy & Policy
  • Advertise
  • Contact

Theo dõi tôi

No Result
View All Result
  • Tin tức
  • Dịch vụ
  • Lập trình
    • ReactJS
    • React Native
    • Angular
    • VueJS
  • Hackintosh
    • Hackintosh
    • Opencore
  • Liên hệ

© 2019 nhat.dev

Xin chào

Sign In with Facebook
OR

Đăng nhập bằng SSO Nhatdev

Quên mật khẩu?

Create New Account!

Fill the forms below to register

All fields are required. Đăng nhập

Lấy lại mật khẩu

Vui lòng nhập tên người dùng hoặc địa chỉ email của bạn để đặt lại mật khẩu của bạn.

Đăng nhập