Tham dự Tech Lounge

Tham dự Tech Lounge


Bạn có thích ứng dụng nền web chạy nhanh hơn, mượt hơn không? WebAssembly có thể là câu trả lời

Duy Luân
20/6/2015 23:13Phản hồi: 84
Bạn có thích ứng dụng nền web chạy nhanh hơn, mượt hơn không? WebAssembly có thể là câu trả lời
WebAssembly_la_gi_HEADER.png

WebAssembly (viết tắt: wasm) là một loại mã mới sẽ được dùng để viết ra các thành phần quan trọng của trang web hoặc ứng dụng nền web trong tương lai. Wasm do một hiệp hội bao gồm Google, Microsoft, Mozilla, nhóm phát triển WebKit (với sự tham gia của Adobe, Apple, Samsung...) và nhiều tập thể khác cùng phát triển. Một khi wasm đã được tích hợp vào mọi trình duyệt phổ biến, nó sẽ mang lại nhiều lợi ích to lớn: hiệu quả thực thi tốt hơn JavaScript, rút ngắn thời gian chờ tải trang và nhiều thứ khác. Trong bài viết này mình sẽ giới thiệu đến các bạn về wasm cũng như lợi ích thực tế của nó.

1. JavaScript và những hạn chế


Có thể bạn đã nghe nhiều về HTML5 và CSS. Đây là là hai loại "ngôn ngữ" được dùng để xây dựng bố cục và giao diện cho trang web, chính là các nút bấm, menu hay những dòng chữ mà bạn thấy. Còn với JavaScript, nó là một ngôn ngữ lập trình dùng cho web để khi bạn tương tác với web thì nó biết cách phản hồi lại cho phù hợp.

Lấy ví dụ đơn giản như sau: lập trình viên muốn rằng khi bạn nhấn vào một nút trên website của anh ta, một thông báo sẽ nhảy lên với dòng chữ "Xin chào anh đẹp trai". Để làm được điều này, anh ta sẽ phải viết một đoạn mã nguồn bằng JavaScript và nhúng vào trang web của mình.

Giờ chúng ta nói đến trình duyệt. Làm thế nào trình duyệt biết đoạn JavaScript đó có ý nghĩa như thế nào để mà hiển thị thông báo như trong ví dụ ở trên? Đó là bởi vì trong trình duyệt có sẵn một bộ nguồn biên dịch JavaScript, gọi là JavaScript engine. Chrome, Firefox, Safari hay Internet Explorer đều có bộ nguồn của riêng mình, và chúng đều hoạt động theo cách như sau:
JavaScript_Engine_Working.png
Như bạn thấy, để một đoạn mã JavaScript chạy được thì phải trải đến 4 giai đoạn, khá tốn thời gian và hiệu năng cũng không cao. Bằng chứng rõ ràng đó là các web app thường không nhanh bằng web được viết cho chính hệ điều hành (native app), và hiệu năng có thể thấp hơn đến 3 lần.

Để giải quyết bài toán trên, Mozilla cách đây vài năm đã đưa ra dự án asm.js. Theo đó lập trình viên khi làm web sẽ viết JavaScript theo một cách đặc biệt để engine có thể tạo ra mã máy một cách hiệu quả nhất có thể. Nói nôm na là Mozilla đang cố gắng vượt qua được bước biên dịch đầu tiên và kết quả đạt được khá ấn tượng: tốc độ thực thi có thể tăng lên đến 70% so với bình thường.

Google cũng có một dự án của riêng mình với tên gọi Native Client nhằm giải quyết vấn đề tương tự nhằm mục tiêu đưa hiệu năng của web app tiến gần hơn với native app, tuy nhiên nó lại không thật sự phổ biến. Và đó là một trong những lý do mà các "ông lớn" quyết định bắt tay nhau để làm ra một thứ gì đó tốt hơn.

2. WebAssembly: bước kế tiếp của asm.js


Hiện tại, WebAssembly có thể được xem như mã nguồn asm.js nhưng được viết lại ở dạng nhị phân (binary). Thứ gọi là bytecode mà các bạn thấy ở sơ đồ bên trên chính là một loại mã binary đặc biệt. Và tập tin chứa những dòng mã binary này sẽ có đuôi là *.wasm.

Java_ma_nguon_byte_code.jpg
Ví dụ từ mã nguồn biên dịch thành bytecode của Java. Từ mã nguồn muốn thành bytecode thì phải qua bước biên dịch (compile)

Có những lợi ích như sau khi sử dụng binary code nói riêng và WebAssembly nói chung:
  • Thời gian tải nhanh hơn: do đã nằm sẵn ở dạng bytecode, WebAssembly sẽ được dịch sang mã máy để thực thi trong thời gian ngắn hơn bởi engine sẽ giảm tải công việc của nó, nhất là trên thiết bị di động
  • Hiệu năng phần mềm nền web tốt hơn, nhất là những thứ có liên quan đến đồ họa, tính toán nặng, nén dữ liệu, thao tác số học...
  • Khắc phục những hạn chế còn tồn tại của JavaScript nguyên thủy lẫn asm.js
  • Cho phép cải tiến WebAssembly trong tương lai một cách đơn giản
  • Khi trình duyệt đã hỗ trợ đầy đủ cho wasm (có nói ở ngay đoạn bên dưới), wasm có thể tách khỏi JavaScript mà không làm tổn hại hay mất an toàn cho phần mềm
  • Hỗ trợ dịch từ C/C++ và nhiều ngôn ngữ lập trình khác sang thẳng WebAssembly để việc phát triển web app được dễ dàng hơn (hiện nếu app viết bằng C/C++ muốn chạy trên web phải dịch qua JavaScript rồi lại qua nhiều bước dịch khác nữa như đã mô tả ở phần 1)
Để sử dụng được WebAssembly, các hãng như Microsoft, Apple, Google, Mozilla sẽ phải nâng cấp engine trong các trình duyệt của họ hoặc ra mắt một engine mới. Còn hiện tại các JavaScript engine sẽ thực thi wasm bằng cách thông qua một thư viện trung gian giúp phiên dịch WebAssembly thành asm.js (tức là dịch thành JavaScript) để đảm bảo tính tương thích ngược. Và điều này vẫn nhanh hơn so với phương pháp xài JavaScript thuần túy.

Quảng cáo


Nhưng việc dịch wasm sang asm.js (hay nói cách khác, dịch từ wasm sang JavaScript) chỉ là tạm thời nhằm đảm bảo tính tương thích mà thôi. Sắp tới, wasm sẽ dần tách ra theo một hướng đi riêng, đó là thời điểm mà các engine mới cho wasm đã được triển khai đầy đủ vào các trình duyệt phổ biến.

Nói về "sản phẩm" thực tế, những nỗ lực đầu tiên để triển khai WebAssembly đã được tiến hành: một tập tin nén định dạng binary của WebAssembly có kích thước nhỏ hơn 20-30% so với cùng loại tập tin đó nhưng chứ mã asm.js, từ đó rút ngắn thời gian download code trước khi chạy. Ngoài ra, việc giải mã wasm nhanh hơn 23 lần so với cùng tác vụ đó nhưng sử dụng cho mã asm.js nguyên gốc.

Tất nhiên, việc viết WebAssembly mà ở dạng binary thì quá khó khăn cho lập trình, do đó sẽ có một cách riêng để viết WebAssembly theo dạng văn bản thông thường. Cách này thì đến giờ vẫn chưa được phát minh do Hiệp hội WebAssembly còn đang trong giai đoạn phát triển ban đầu, mới thứ hầu như chỉ mới ở giai đoạn nguyên mẫu.

3. WebAssembly không thay thế JavaScript trong ngắn hạn

Đây là điều mà chúng ta cần nhận thức rõ, và chính nhóm phát triển WebAssembly cũng đã khẳng định như thế, ít nhất là trong ngắn hạn. Vậy thì JavaScript và WebAssembly có thể cùng tồn tại ra sao?

Với những tính năng đơn giản, như việc nhấp chuột vào nút và hiện thông báo "Xin chào anh đẹp trai", người ta sẽ tiếp tục dùng JavaScript vì công việc sẽ dễ dàng, đơn giản hơn. Tương tự, những tương tác giao diện đơn giản thì vẫn xài JavaScript. Còn những thành phần nặng của trang web, ví dụ như chức năng chơi game, giải mã, chỉnh sửa hình ảnh, video... thì sẽ được triển khai bằng WebAssembly (lập trình viên có thể tự viết tay mã binary hoặc sử dụng một ngôn ngữ dạng văn bản nào đó chưa được phát minh). Tất nhiên, một ứng dụng web cũng hoàn toàn có thể được viết chỉ bằng WebAssembly.

Quảng cáo


Ngoài ra, những đoạn mã viết bên ngoài, đặc biệt là C/C++, cũng sẽ dễ dàng được chuyển sang tích hợp trong web thông qua WebAssembly. Đồng nghĩa với việc có khả năng đến một lúc nào đó trong tương lai, chúng ta có thể chạy Adobe Premier một cách mượt mà trên web để dựng phim, chơi các game cao cấp ngay trong trình duyệt, hoặc sử dụng các app nền web khác với hiệu năng không khác mấy so với app native.

4. Tương lai xa

Hiện tại, trọng tâm của nhóm WebAssembly là xây dựng công cụ để biên dịch các chương trình C/C++ và cho phép có thể chạy được trên nền web, về sau thì có thể hỗ trợ thêm bất kì ngôn ngữ cấp cao nào khác, ví dụ như C#, Go, Rust... và cũng hoạt động với bất kì kiến trúc vi xử lý nào. Các đơn vị chịu trách nhiệm phát triển WebAssembly cũng sẽ làm ra những công cụ khác nhau để giúp lập trình viên gỡ lỗi nhanh chóng, thuận tiện hơn.

Cụ thể hơn, lộ trình phát triển WebAssembly có thể chia thành 3 giai đoạn như sau:
  1. Một sản phẩm tối thiểu nhất có thể dùng được với nhiều điểm tương tự asm.js, ngôn ngữ nguồn (để dịch từ đó sang wasm) được hỗ trợ chủ yếu là C/C++ <= chúng ta đang ở những bước đầu của giai đoạn này
  2. Các tính năng nâng cao, ví dụ như phân luồng tính toán, xử lý lỗi... sẽ được bổ sung thêm, và vẫn tập trung hỗ trợ ngôn ngữ nguồn là C/C++
  3. Hỗ trợ thêm cho các ngôn ngữ nguồn khác, cho phép WebAssembly truy cập vào các thành phần mà trước đây chỉ dùng được bằng JavaScript, các hàm API tăng cường, tối ưu hóa,...
So với những dự án khác, khả năng thành công của WebAssembly cao hơn bởi vì 3 lý do chính:
  • Đầu tiên, đây là nỗ lực của cả một tập thể những công ty lớn, trong đó có đủ hết các dự án trình duyệt to như Firefox, Chromium, Edge và WebKit.
  • Thứ hai, việc WebAssembly có thể cùng hoạt động với JavaScript là rất tuyệt vời. Khi đó, lập trình viên có thể viết JavaScript có thể import các thành phần của WebAssembly và sử dụng.
  • Thứ ba, người ta có thể biên dịch rất nhiều ngôn ngữ khác nhau ra wasm, khi đó việc lập trình web sẽ trở nên phổ biến và dễ dàng hơn nữa.
5. Kết

Hiện WebAssembly vẫn còn ở giai đoạn rất sơ khai, người ta chỉ mới nghĩ về nó và phác họa ra những nguyên mẫu code đầu tiên mà thôi. Nó chưa có cấu hình hoàn chỉnh, thậm chí cấu hình nháp còn chưa có nữa. Tuy nhiên, những hứa hẹn của WebAssembly liên quan đến thời gian tải hay hiệu năng thì rất hấp dẫn. Và với sự chung tay phát triển của nhiều tên tuổi lớn trong làng công nghệ, chúng ta có thể kỳ vọng ngày WebAssembly được tung ra chính thức sẽ không quá xa và lúc đó sẽ có những ứng dụng nền web chạy ngon gần giống như app native.

84 bình luận
Chia sẻ

Xu hướng

Bài viết dài dòng đoc mệt quá nói túm lại là ko bt đến khi nào thế hệ 8x chúng ta mới đc trải nghiệm đây ko chứng lúc đó "xanh cỏ" hết rồi
N.E.M
CAO CẤP
9 năm
nhớ một thời học vi điều khiển viết bằng assemply :oops: viết cho mỗi con led sáng tắt thôi mà dài cả khúc 😕 sau chuyển qua C thì đỡ hơn, cùng chức năng nhưng viết ít dòng hơn 😁 nhưng giờ nghĩ lại vẫn không rõ sao hồi đó qua đc môn này :D
N.E.M
CAO CẤP
9 năm
@BB VietNam đợt đi thi phát cái đề ra chỉ biết nhìn nó mà cười thôi chứ chả biết làm từ đâu 😁 ngồi không cỡ 5 phút thì bắt đầu chán và lục lọi mấy thư mục trong máy tính thử, tình cờ phát hiện 1 ổ mạng trong đó có chứa toàn bộ file làm sẵn của rất nhiều chương trình, mừng quá lấy nạp vào luôn :D rồi kêu thầy lại chấm điểm :D mấy đứa đi sau cũng bắt chước mình mà hình như ổng biết ổng kêu giải thích lại từng dòng xem nó hoạt động như nào, thằng nào không trả lời đc là tạch :D
webzone.vn
TÍCH CỰC
9 năm
@Duy Luân KLQ nhưng vừa nhận đc tin này trên genk, Bạn xem thật hay giả 😔

http://genk.vn/may-tinh/microsoft-quay-ngoat-180-do-tham-gia-dung-thu-windows-10-cung-khong-duoc-cap-nhat-ban-quyen-20150621192411386.chn
HTC G1
ĐẠI BÀNG
9 năm
@N.E.M em mới qua môn này ở học kỳ này =]]z
nhkphp
ĐẠI BÀNG
9 năm
@N.E.M me too :D. chả hiểu hồi đó tại sao lọt được môn này
nvvu92
ĐẠI BÀNG
9 năm
Design của nó đây: https://github.com/WebAssembly/design
Bạn nào hứng thú thì nghiên cứu :p
sison_a1
ĐẠI BÀNG
9 năm
Nếu dự án thành công khả năng cao đặt dấu chấm hết cho các native app truyền thống. Các hãng sẽ phát hành ứng dụng qua web hết và khi đó anh em sẽ ko thể sài keygen, ..... ... để dùng các ứng dụng trả phí. Không biết nên vui hay buồn :oops:
$(document).ready(function(){
$("#tinhte").html("bi hack banh xac");​
});

//Khong doan ma tren no chay khong nhi? Hehehe

Klq: .net framwork 5 hay 6 sẽ không hổ trợ vb.net nữa. Anh em nào làm vb chuẩn bị chuyển code hết đi nha. Em thì tèo luôn, cả chục dự án làm bằng vb.net
@rongxike Cũng chưa thấy ai nói vụ dẹp VB?
@vantruong075 VB có vẻ như hạn chế nhiều so với C#. Mình chưa dùng C nên không chắc, nhưng VB thì chục năm rồi.

Mà giờ lên web hết rồi :D thích cái Assembly này
beautiful
ĐẠI BÀNG
9 năm
@rongxike Hồi mới tiếp cận học .Net mình đã nghĩ đến tương lai này nên chỉ chọn C# 😃 )
@Duy Luân Em nhớ là cái mô hình gì đó, VB với C# đều trên nền tảng .NET, chỉ khác các tầng ngôn ngữ thôi và khi build ứng dụng thì đều ra mã assembly như nhau.
Hình như VB.NET ra sau C#, mà đến giờ vẫn không hiểu VB hơn C# chỗ nào mà MS lại ra 2 thằng chức năng giống nhau, chỉ khác nhau cú pháp :D
Túm lại là chuyển sang dạng này thì có thể quăng hết đống app fb youtube ... Trên đt và chuyển sang truy cập bằng web hiệu năg vẫn ổn ... Đi 1 vòng cuối cùng vẫn về chỗ cũ ... Đơn giản ... Ko biết mình biểu đúng ko ...
Mr.Fly
TÍCH CỰC
9 năm
Thích bác Duy Luân viết bài.
không liên quan nhưng trình duyệt web trên win 10 như hack speed, cả phone lẫn win,
@dktran01 Ý bác là sao ? em thấy bình thường thôi mà. Hay là em dùng win10 lâu quá nên nhờn rồi
@thằng khôn trên phone bản 10136. trên pc bản 10147. rất nhanh. không lẽ mạng nhà e nhanh đột xuất
@dktran01 Ủa bản 10147 ra rồi à ? sao em check mãi không thấy, hiện tại đang nằm ở bản 10130
@thằng khôn 10147 là bản leak, hình như đó là bản đưa cho các nhà xản xuất máy, mình cảm nhận như là bản final luôn,
hsukaka
ĐẠI BÀNG
9 năm
Túm lại là mình chẳng hiểu gì, ngoại đạo
anhhoang02
TÍCH CỰC
9 năm
Javascript code lại 1 phát là dịch sang mã máy luôn là nhanh thôi.
Nhưng nhiều lúc sửa lại còn lâu hơn đập đi xây mới.
Nhiều khi các ông lớn ngồi với nhau, chia nhau miếng bánh thôi.

Mình dùng trình duyệt Yandex nhanh hơn mấy chú kia.
Mr.Fly
TÍCH CỰC
9 năm
@anhhoang02 Cùng nhân chromium thôi mà. Thích nhanh dùng maxthon nitro ấy nguyên nhân chromium k thêm thắt gì
Mới chỉ có 2 hệ điều hành nền web là Chrome OS và Firefox OS thì GG với Mozilla quan tâm nhiều, anh MS vì ảnh là trùm phần mềm, còn anh Apple chỉ quan tâm đến lợi nhuận bán phần cứng thì đóng vai trò gì ta?

Sent from my SH-06E using Tapatalk
haimap87
TÍCH CỰC
9 năm
Kỳ. Người ta đang viết bằng JS rồi, thì sao ko biên dịch trực tiếp từ JS đi. Mà còn lấy thêm 1 ngôn ngữ khác vào làm gì. Tự nhiên lại thêm việc ra.
@haimap87 Nói đơn giản như bạn thì mấy ông lớn đã chẳng ngồi với nhau bàn bạc làm gì cho mệt!
haimap87
TÍCH CỰC
9 năm
@never2672013 Biết vì sao số lượng hệ điều hành phổ biến trên thế giới luôn là 2 ko?

Là bởi mặc dù người ta thích có sự lựa chọn nhưng lập trình viên lại là những đứa siêu lười. Nếu nó không đơn giản hơn giải pháp hiện có, nó sẽ chẳng đi tới đâu.
@haimap87 Và phát biểu của bạn cũng chẳng đi tới đâu cả!
Mình đang dùng ip5 chạy safari mà như rùa bò ấy ! Tải google về xài thấy nhanh vai !!!
Anh Luân chuyên viết những bài rất dài cực kì tâm huyết nhưng mỗi tội trình em chưa tới nên chả hiểu gi 😁
traiminot
ĐẠI BÀNG
9 năm
Cảm ơn bài viết hữu ích à mà dài quá e chưa đọc
@traiminot Có đọc cũng khó hiểu quá. Chắc là trình độ mình chưa đạt đc tới đó 😁
gnafetihw
ĐẠI BÀNG
9 năm
hay lắm. lâu lâu mới thấy tinh tế có bài viết hữu ích như vậy. Webasembly này đầy triển vọng đây. Sau này nếu webapp chạy mượt như native app thì việc phát triển ứng dụng sẻ trở nên cực kỳ thuận lợi chỉ cần viết 1 lần và chạy trên mọi hđh.
App chạy nền web, trình duyệt chạy nền Windows.
... vs ...
App chạy nền Windows.

Kiểu gì thì cũng ko thể bằng nhau được !
6445022
TÍCH CỰC
9 năm
Bài này thì đúng nghề của a Luân rồi 😁:D
Ko thích lập trình web cũng bởi để tạo ra đc 1 cái web dùng được sẽ phải học HTML, CSS, JavaScript, PHP, MySQL ... :v quá mệt mỏi 😆
@6445022 Lười :v

Xu hướng

Bài mới









  • Chịu trách nhiệm nội dung: Trần Mạnh Hiệp
  • © 2024 Công ty Cổ phần MXH Tinh Tế
  • Địa chỉ: Số 70 Bà Huyện Thanh Quan, P. Võ Thị Sáu, Quận 3, TPHCM
  • Số điện thoại: 02822460095
  • MST: 0313255119
  • Giấy phép thiết lập MXH số 11/GP-BTTTT, Ký ngày: 08/01/2019