VnTim™ ^-^ Tính năng load không đồng bộ của Google Analytics. Đây là tính năng khá hữu ích và được mong chờ, vì nó khiến cho script của Analytics được tải độc lập (song song) với việc tải trang, nghĩa là sẽ không ảnh hưởng tới việc load các thành phần khác của trang, và phần nào sẽ làm tăng tốc tải trang lên.
Có vẻ như tính năng load không đồng bộ này cũng khá hot, nên DISQUS (nền tảng comment cho blog, website mà Hỗn tạp Blog đang dùng) cũng bắt chước theo (tính năng này không được DISQUS thông báo trực tiếp hoặc tự động tích hợp vào phần cài đặt mà nó chỉ được đưa ra trong khu vực Help của họ, người dùng phải tự cài đặt bằng tay).
Nhưng mà thực sự thì tính năng này hoạt động thế nào? Có thực sự là nó mỹ miều như được miêu tả hay không? Bài viết này sẽ cùng xem qua 1 chút.Phân tích code của Google Analytics
Trước tiên, lấy ví dụ của Google Analytics để làm cơ sở phân tích, nó có dạng sau:01
<script type=
"text/javascript"
>
02
var
_gaq = _gaq || [];
03
_gaq.push([
'_setAccount'
,
'UA-XXXXX-X'
]);
04
_gaq.push([
'_trackPageview'
]);
05
06
(
function
() {
07
var
ga = document.createElement(
'script'
); ga.type =
'text/javascript'
; ga.async =
true
;
08
ga.src = (
'https:'
== document.location.protocol ?
'https://ssl'
:
'http://www'
) +
'.google-analytics.com/ga.js'
;
09
(document.getElementsByTagName(
'head'
)[0] || document.getElementsByTagName(
'body'
)[0]).appendChild(ga);
10
})();
11
</script>
Loại bỏ phần khai báo các tham số ở đầu, chúng ta coi phần hàm được thực thi. Hàm này có nhiệm vụ như sau:
- tạo ra 1 thẻ mới trong web (thẻ script)
- gán cho nó các thuộc tính type='text/javascript', async=true
- gán thuộc tính src dựa theo protocol của website, cụ thể là nếu website có protocol https thì lấy src=https://ssl.google-analytics.com/ga.js, còn nếu website có protocol http (loại website thông thường) thì lấy src=http://www.google-analytics.com/ga.js
- sau đó thì gắn script vào thẻ head. Trong trường hợp thất bại thì gắn vào thẻ body
Từ đó ta thấy thực tế thì script mà GA dùng vẫn là cái cũ (có nghĩa vẫn là 2 script http://www.google-analytics.com/ga.js hoặc https://ssl.google-analytics.com/ga.js). Có điều, họ sửa đổi cách gắn nó vào website. Một kiểu bình cũ rượu mới!Thuộc tính async và chức năng của nó
Liệu có phải gắn lên thẻ head thì nó được load không đồng bộ? Không phải. Một script bình thường gắn vào thẻ head cũng sẽ được thực thi ngay lập tức. Mấu chốt của việc load không đồng bộ trong việc gắn theo kiểu mới này là Google bổ sung thuộc tính async cho thẻ script.
Để hiểu về thuộc tính async này, chúng ta coi qua đoạn trích dưới đây lấy từ website W3Schools:The async attribute is "true": The script will be executed asynchrously with the rest of the page, so the script will be executed while the page continues the parsing.
The async attribute is "false", but the defer attribute is "true": The script will be executed when the page is finished with the parsing.
Both the async attribute and the defer attribute is "false": The script will be executed immediately, and the page will wait for the script to finish before continuing the parsing.
Có thể hiểu như sau:
- Nếu thuộc tính async có giá trị true thì script sẽ được thực thi không đồng bộ (song song) với việc load website
- Nếu thuộc tính async có giá trị false nhưng thuộc tính defer có giá trị true thì script sẽ được thực thi ngay sau khi website được load xong (dùng thuật ngữ parse thì đúng hơn)
- Nếu cả 2 thuộc tính async và defer đều false thì script sẽ thực thi ngay lập tức
(nếu 1 thuộc tính nào đó không được khai báo giá trị, thì mặc định sẽ là false)
Ở đây có "lòi ra" thêm thuộc tính defer nữa, nó có tác dụng kết hợp với thuộc tính async mà tạo ra các cách load 1 script như đã trình bày.
Thuộc tính async này chỉ có trong HTML5. Vì vậy không phải tất cả các trình duyệt đều hỗ trợ. Riêng đối với Firefox, theo trang web của Mozilla thì nó được hỗ trợ từ nhân Gecko 1.9.2 trở lên (tương ứng với Firefox 3.6). Hiện tại tôi cũng chưa tìm được danh sách các browser cùng các phiên bản tương ứng có hỗ trợ thuộc tính này, nếu ai biết, vui lòng comment giùm.
Trở lại với code của GA, ta thấy họ đã lợi dụng tính năng mới của HTML5, thêm thuộc tính async để load script của họ không đồng bộ với việc tải website. Điều đó cho thấy tính năng này cũng chỉ hoạt động trên phạm vi giới hạn nhỏ trong những trình duyệt hỗ trợ HTML5 mà thôi. Còn đối với các trình duyệt khác, nó lập tức được thực thi, không khác gì phiên bản cũ (có điều còn tồi tệ hơn vì nó được "khuyến khích" đặt ở đầu trang nên sẽ ảnh hưởng không nhỏ tới việc đợi chờ nó tải xong).Cách làm 1 script load không đồng bộ
Nếu bạn đã hiểu cách load 1 script không đồng bộ thì bạn hoàn toàn có thể tự biến script của mình hoạt động như vậy, bắt chước theo cách mà Google đã làm. Ở đây giả sử bạn có script có đường dẫn là http://domain.com/script.js, thông thường, bạn load nó như sau:1
<
script
type
=
"text/javascript"
src
=
"http://domain.com/script.js"
></
script
>
Để load nó không đồng bộ, chỉ cần sửa 1 chút nhỏ thành như sau:1
<script type=
"text/javascript"
>
2
(
function
() {
3
var
s = document.createElement(
'script'
);
4
s.type =
'text/javascript'
;
5
s.async =
true
;
6
s.src =
'http://domain.com/script.js'
;
7
(document.getElementsByTagName(
'head'
)[0] || document.getElementsByTagName(
'body'
)[0]).appendChild(s);
8
})();
9
</script>
Đấy là cách bắt chước theo Google, nhưng có 1 cách làm đơn giản hơn rất nhiều, đó là khai báo trực tiếp thuộc tính async trong thẻ script:1
<
script
type
=
"text/javascript"
async
=
"true"
src
=
"http://domain.com/script.js"
></
script
>
Kết luận: Việc GA nâng cấp code của mình bằng cách sử dụng thuộc tính mới trong HTML5 cho thấy tính tiện dụng và hữu ích của nó. Tuy hiện tại chỉ có 1 số phiên bản của các trình duyệt hỗ trợ, nhưng trong tương lai không xa nó chắc chắn sẽ được dùng rộng rãi. Bài viết này hy vọng đem lại cho các bạn 1 cái nhìn đầy đủ hơn về 1 trong những tính năng của HTML5. Mong rằng sẽ nhận được các ý kiến đóng góp của các bạn.
VnTim™ Theo hontapblog
Bí ẩn sau vụ load không đồng bộ của Google Analytics
Unknown
●
Thứ Ba, 2 tháng 3, 2010
Music-Mp3
Language
Lưu trữ Blog
-
▼
2010
(818)
-
▼
tháng 3
(119)
- Twitter và những lợi ích
- 5 nguyên nhân khiến tài khoản Twitter bị khóa
- [CPC] Revtwt.com + Twitter.com = $$$ Kiếm tiền
- Nhìn Google qua gương !
- Dùng "từ khóa tắt" tìm kiếm trong Gmail
- Đăng ký Gmail với tên miền @googlemail.com
- Website cá nhân miễn phí với chi.mp
- Công nghệ lăng xê Blog
- Theo dõi thông tin chứng khoán trên di động
- Top 10 Sites about: Free Domain Name
- Làm sao để bảo vệ thứ hạng trên google?
- Đo giá trị của blog Với directory.sootle.com
- 8 công cụ giúp bạn kiểm tra thời gian Loading của ...
- DongA Mobile Banking (Phiên bản mới ngày 17/09/200...
- Đăng ký tên miền miễn phí .tk .co.cc .cz.cc cu.cc ...
- 10 lý do nên chuyển qua dùng Gmail
- Cách cài add on cho Google chrome
- 4 add-on Firefox hữu ích cho bạn
- SEO Flash Website cho Google
- Tăng thứ hạng Website trên Google
- 50 thủ thuật SEO hiệu quả cho Website
- Kiếp nghèo
- Cách thiết lập kết nối Bluetooth trong window Vista
- Giúp ếch qua cầu Game Flash trí tuệ
- Vô hiệu hóa pop-up quảng cáo của Avira
- Những tính năng “đỉnh” trên mobile có thể bạn chưa...
- Images For VnTim™
- Độc đáo phần mềm đuổi muỗi trên Mobile và PC
- Cách thay đổi DNS khi không vô được Facebook.
- Ebook Hướng dẫn sử dụng Flash 9 (Tiếng Việt)
- Source Code mã nguồn C# máy tính khoa học Scientic...
- Gmail mở rộng tính năng nhập thư và sổ địa chỉ cho...
- Lỗi Enable Task Manager ko ấn Ctrl+Alt+Del được
- Tải clip YouTube chất lượng cao với 6 tùy chọn ưng ý
- Lời của trẻ con
- Download Ebook 277 câu đố Việt Nam
- Chat nhiều nick Yahoo! Messenger All version ko cầ...
- Tạo thư viện "ổ cứng" với link chia sẻ trực tiếp
- Tất cả Microsoft Product Key (Key xịn của tất cả c...
- Thủ thuật WMP
- Tạo lệnh chơi nhạc cho Windows Media Player
- Thủ thuật Windows Media Player
- Thủ thuật Windows Media Player
- Thủ thuật về Windows Media Player
- Windows XP SP2 Auto Driver (Cực nhanh và nhận driv...
- Hướng Dẫn Tạo AutoBlog Cho Blogspot
- Khám phá Windows Media Player 12
- Những thủ thuật Windows Media Player với registry
- 5 mẹo viết hồ sơ để được mời phỏng vấn
- The coolest Desktop Icon Program EVER
- Bạn là ai và sẽ làm được gì?
- Bạn là ai?
- Người Việt Nam tìm gì trên Google?
- GetMF 0.04b - Tự động download link từ Mediafire
- Giải mã logo của các hãng xe nổi tiếng
- Thiết kế logo Google Chrome như thế nào
- Sáng tạo vui với logo của Google
- NTSBOOTv1.4 Ghost,định dạng ổ cứng ko cần đĩa Boot
- Hướng dẫn thêm nút Google Buzz vào Blogspot/Blogger
- VirusTotal: Quét virus trực tuyến với 31 công cụ c...
- Convertfiles.com: Chuyển đổi dữ liệu trực tuyến
- 6 trang web tải phần mềm miễn phí “hot” nhất
- 5 website xem phim kinh dị miễn phí
- 4 dịch vụ tạo website miễn phí tốt nhất
- Microsoft Office Outlock, Outlookup Express không ...
- Logo - những bí ẩn thú vị
- Logo Apple - Biểu tượng thương hiệu nổi tiến...
- Bạn biết gì về ý nghĩa của các LOGO nổi tiếng?
- Lời chúc hay ngày quốc tế phụ nữ 8/3
- Hướng dẫn cách đăng ký, cài đặt tên miền miễn phí ...
- Ý NGHĨA CỦA CÁC LOÀI HOA
- Ý nghĩa một số loài hoa
- Lời chúc 8-3: "Một ngày 8-3 thật đẹp!"
- NHỮNG LỜI CHÚC NGÀY 8-3 Suu tam
- Lời chúc 8-3: Những lời yêu thương
- Portable Nero 9 , đầy đủ tính năng
- 150K Drivers - DVD ISO - Công cụ cần thiết cho dân IT
- GHI 4GB LÊN ĐĨA CD VỚI CD IMAGE GUI BETA 3
- Thư Tèo gửi phụ nữ nhân ngày 8.3
- Download Album tại Picasa Web không cần phần mềm P...
- Download Portable Picasa 3.6.0 Build 95.25
- Download Portable Picasa 3.5 build 79.69 (02/10/2009)
- Hướng dẫn tạo đĩa Multi-boot (Dùng Microsoft Virtu...
- Download Portable EasyBoot 5.1.2.586 - Tạo file Bo...
- Hướng dẫn tạo đĩa Multi-boot (Setup Windows 7, Set...
- Hiren's Boot USB Setup 1.2 - Cài đặt Hiren's Boo...
- Download Hiren's BootCD 10.2
- 10 'cái' nhất quả đất
- Ngẫu hứng với... USD gấp trang trí
- “Xả trét” < coi cấm cười Video Hài
- Sửa lỗi Auto Readmore khi xem Page trong Blogger
- Hoa sưa điểm trắng Hà Nội
- Đăng ký và thiết lập tên miền miễn phí TK với blog...
- Khắc phục lỗi "Operation aborted" của IE
- Bí ẩn sau vụ load không đồng bộ của Google Analytics
- DISQUS - Hệ thống comment mới cho Blogger
- Google nâng cấp Analytics, thêm tính năng không đồ...
- Sự giống và khác nhau giữa Mẹ và vợ
- Nữ sinh và áo dài Việt Nam
- Nhấn “F5” cho hồ sơ của bạn!
-
▼
tháng 3
(119)
Nhãn
- 6 thủ thuật SEO không lên mắc phải (1)
- Add-On Firefox (12)
- Ajax (3)
- Android (68)
- Ảnh Đẹp (27)
- Ảnh Độc Đáo (43)
- Ảnh Động Vật (1)
- Ảnh Girl (1)
- Ảnh Hài (4)
- Ảnh Kinh Dị (2)
- Ảnh Nền Mobile (1)
- Avatar (3)
- Avatar Yahoo (2)
- Âm Nhạc (18)
- ẩm thực (2)
- Ẩm Thực Hà Nội (4)
- Bách Khoa (1)
- Bản Tin VN Tim™ (21)
- bao-mat (51)
- Bên lề (1)
- Bí Ẩn (1)
- Bing (5)
- Bloger-Blogspot (42)
- Blogger (7)
- Blogger Templates (18)
- Blogger-Tips (15)
- blogspot (5)
- Bói Toán (16)
- C# Sharp (1)
- Ca Dao-Tục Ngữ (3)
- Cách học (9)
- Cách học tiếng anh (15)
- Cách Nấu Ăn (1)
- cach tang rank cho website (1)
- Câu Đố (1)
- chat (49)
- chm (33)
- Chrome Extensions (1)
- Chuyện Bạn Gái (1)
- Chuyện cười vôva (8)
- Chuyện Lạ Có Thật (2)
- clip-vui (16)
- cmd (1)
- Có Thể Bạn Chưa Biết (35)
- Code (1)
- Code Javascript Hay (3)
- Con Gái (1)
- Con Người (1)
- Copy bài viết thế nào để lên TOP (1)
- Công Cụ Web Bog (8)
- Công nghệ (49)
- Cờ Tướng (2)
- CPU (1)
- CSS (8)
- CSS3 (2)
- Cuộc Sống (69)
- Danh Ngôn (3)
- danh sách các site pagerank cao (1)
- Danh sách website Pagerank cao (1)
- danh-ba-web-hay (109)
- Di động (52)
- Dịch vụ Seo (2)
- dingkiutrue (10)
- dinhcongthanh (13)
- Domain - Tên Miền (28)
- Download (63)
- Download MegaUpload va RapidShare (1)
- Download Phim (1)
- driver (4)
- Du Lịch (1)
- Đăng Kí Nick Yahoo Số (1)
- Đọc và suy ngẫm (9)
- Ebook (20)
- Emoticon Ảnh Động (3)
- Error (1)
- Facebook (48)
- Facebook Tips (6)
- Firefox (7)
- Font (2)
- Game (4)
- Game Flash (19)
- Game Trí Tuệ (4)
- Games (39)
- Giải Trí (9)
- Giao Diện Windows (14)
- gioitinh-tamsu (153)
- Gmail (17)
- Google (31)
- Google Ad Planner (4)
- Google Adsense (2)
- Google Alerts (1)
- Google Analytics (8)
- Google buzz (1)
- Google Chrome (6)
- Google Docs (1)
- Google Drive (2)
- Google PageRank. (6)
- Google Search (5)
- Google Translate (3)
- Group Policy (5)
- Hà Nội (19)
- Hàn Mặc Tử (1)
- Hạnh Phúc (11)
- HDH (14)
- HDH-LINUX (8)
- HDH-LINUX-Office (3)
- HDH-LINUX-Virus (1)
- HDH-MAC (1)
- HDH-MS DOS (1)
- HDH-Win 9x (1)
- HDH-Windows Server 2008 (1)
- HDH-Windows Vista (2)
- HDH-Windows2000 (1)
- HDH-WinXP (3)
- Hệ điều hành (61)
- Hình Nền (1)
- Hirent boot (7)
- Hoạt Hình (2)
- Học đường (9)
- hoi dap (4)
- Hosting (18)
- HOT (2)
- Hotmail (1)
- HTML (2)
- Hướng dẫn sử dụng Google Webmaster Tools (1)
- IE (1)
- Internet (22)
- Internet-Dial-up (3)
- Internet-Dial-up-CDMA (2)
- IP (4)
- Javascript (1)
- khám phá (17)
- Khéo tay (1)
- khoa hoc (1)
- Khoa học (38)
- kĩ năng mềm (6)
- kiếm tiền (29)
- Kiến Thức (3)
- Kinh Nghiệm (1)
- Kỹ năng giao tiếp (1)
- Kỹ năng làm việc (4)
- Làm đẹp (10)
- Laptop (15)
- Lập Trình (8)
- Lịch Sử (1)
- linh-tinh (33)
- Linux-Ubuntu (4)
- Logo (6)
- Lỗi máy in (7)
- Lời Chúc (16)
- Lưu bút học trò (3)
- MAC (4)
- Macintosh (2)
- Mail (1)
- Máy Bay Trực Thăng (1)
- Máy In (9)
- Mẹo đời thường (11)
- Mẹo vặt (4)
- meo-vat-facebook (10)
- Merry Christmas (2)
- Microsof (4)
- Microsoft Office (8)
- Mobile (3)
- Mobile Banking (1)
- Món ăn ngon (1)
- MS DOS (1)
- MSN (2)
- MyBlogLog (1)
- Nấu ăn ngon (8)
- New (1)
- Nhịp sống trẻ (82)
- nick (1)
- Office (21)
- Office 2007 (3)
- Office-Excel (6)
- Office-Excel 2007 (68)
- Office-Excel 2010 (1)
- Office-PowerPoint (2)
- Office-Word (8)
- Office-Word 2007 (41)
- Office-Word 2010 (6)
- Openoffice (1)
- phan-mem-hay (13)
- Phát Hiện Lý Thú (6)
- Phần mềm (22)
- Phần mềm-Phục hồi dữ liệu (5)
- Phim (1)
- Phim Ảnh (9)
- Phím Tắt (7)
- Phỏng vấn - Xin việc (2)
- Photoshop (1)
- PHP (1)
- Phục hồi dữ liệu (1)
- Phương pháp tăng rank cho website (1)
- Portable (5)
- Printer Fax (26)
- Quà tặng cuộc sống (59)
- qua-tang-cuoc-song (50)
- Quick And Snow Show (2)
- Radio (5)
- Radio VN (2)
- Radio World (3)
- RapidShare (1)
- Recovery (1)
- Sách Hay (1)
- Sài Gòn (1)
- Search Engine (7)
- Security (1)
- SEO (39)
- seo Blogger (4)
- Seo Google (6)
- Seo Top Google (5)
- Seo từ khóa chính (6)
- SEO và Cách tránh lỗi (2)
- Seo website (8)
- Server 2008 (5)
- Sinh Viên (8)
- SkyDrive (2)
- so dien thoai (1)
- Soft (2)
- Software (40)
- Softwares (1)
- Start Blog (7)
- Sữa tắm cho bé (2)
- sữa tắm cho bé sơ sinh (3)
- Sức Khỏe (14)
- Sưu Tập Tem (1)
- Tạo backlinks từ 20 websites có pagerank cao (1)
- template (14)
- Test IQ (1)
- Tên (5)
- Tên miền (1)
- Tên miền cho blog (2)
- Tết (12)
- Thành Công (2)
- Thành Ngữ (1)
- Theme WordPress (1)
- Thế Giới Đó Đây (6)
- Thể Thao (1)
- thiết kế web (5)
- Thông tin công nghệ (58)
- Thơ Hiện Đại (1)
- Thơ Tình (5)
- Thơ Tổng Hợp (5)
- Thơ vui (18)
- Thời gian-Time (8)
- Thủ thuật (12)
- Thủ thuật add Sitemap lên các Search Engine (2)
- Thủ thuật Add Sitemap lên Search Engine (2)
- Thủ thuật Blog (23)
- Thủ thuật cho blog (73)
- Thủ thuật đưa Website ra khỏi blacklist của Google (1)
- Thủ Thuật Mobile (6)
- Thủ thuật Seo (7)
- thủ thuật seo tối ưu tiêu đề thân thiện (3)
- Thủ thuật Seo từ khóa (3)
- Thủ thuật Seo website Webmaster cần tránh (1)
- Thủ thuật tạo sitemap cho website (1)
- Thủ thuật viết bài để lên Top Google (4)
- thu-thuat-blog (79)
- thu-thuat-internet (97)
- thu-thuat-office (7)
- thu-thuat-seo (7)
- thu-thuat-tin-hoc (138)
- Thư Giãn (2)
- Thư viện ảnh (24)
- Thư viện nhạc (12)
- Thực Phẩm (2)
- TIỆN ÍCH (1)
- Tiếp thị nội đung website để tăng lượt truy cập (2)
- tiêu chí đánh giá website (3)
- tinh yeu (4)
- tình yêu (121)
- Tình yêu-Giới tính (8)
- TinTức (2)
- Tools Webmaster (7)
- Tranh Phong Cảnh (4)
- Tranh vui (3)
- Tri thức Trẻ (2)
- truyen-cuoi (28)
- truyen-la (41)
- Truyện cảm động (13)
- truyện Cổ Tích (3)
- Truyện Cười (30)
- truyện Ma (3)
- Truyện ngắn (14)
- Truyện Tình (10)
- Truyện Tranh Hài (5)
- Truyện Tranh Online (17)
- Twitter (6)
- Ubuntu (12)
- USB (6)
- USB 3G (4)
- Ứng Dụng Online (14)
- Valentine (5)
- Văn Hóa (5)
- Văn hóa - Giải trí (15)
- Video Clip (2)
- Video Hài (8)
- Videos (7)
- Viet Nam TV (32)
- Việc Làm (5)
- Việt Nam (1)
- Việt Nam Tôi (6)
- Viết Tắt (2)
- Virus (2)
- Virus-Spyware (8)
- Vô Danh (81)
- Vườn thơ (1)
- Web (6)
- Web Analytics (7)
- Web Blog Mail (5)
- web hay (5)
- Web Mail Blog (15)
- Web Mail Blog-Blog360 (4)
- Web Mail Blog-Firefox (12)
- Web Mail Blog-Gmail (1)
- Web Mail Blog-Internet Explorer (5)
- Web Mail Blog-Yahoo Mash (5)
- Wikipedia (1)
- Window Media Player (12)
- Windows (24)
- Windows 7 (62)
- Windows 8 (4)
- Windows Server 2008 (5)
- Windows Vista (1)
- Wireless (6)
- Wordpress (2)
- xa hoi (4)
- Xã hội (52)
- Yahoo (9)
- Yahoo - Google (24)
- Yahoo 360 Plus (13)
- Yahoo Mail (8)
- Yahoo Mesenger (21)
- Yahoo Profile (2)
- Yahoo Web Analytics (2)
- Yahooo Search (2)
- YouTube (10)
- Zing Mail (1)