https://miti99.com/tags/web-performance/Recent content in Web Performance on miti99Hugo -- gohugo.ioviWed, 08 Jul 2026 09:22:18 +0700https://miti99.com/post/2026/03/13/Fri, 13 Mar 2026 00:00:00 +0700https://miti99.com/post/2026/03/13/<p><em>Mời bạn thưởng thức Newsletter #88.</em></p> <h2 id="a-broken-heart"><a class="link" href="https://allenpike.com/2026/a-broken-heart/" target="_blank" rel="noopener" >A Broken Heart</a> </h2><p>Allen Pike chia sẻ một câu chuyện debug thú vị khi dashboard của ứng dụng web đột nhiên chậm đi 10 lần - từ 1 giây lên 10 giây. Sau khi loại trừ React (vốn bị nghi ngờ đầu tiên), anh phát hiện ra Safari đang dành 94% CPU cho&hellip; Layout?</p> <p>Bằng phương pháp binary search với sự hỗ trợ của Claude, anh tìm ra thủ phạm: một emoji trái tim ❤️ trong nút &ldquo;Send Feedback&rdquo;. Hóa ra font <strong>Noto Color Emoji</strong> của Google - được sử dụng để render emoji nhất quán trên các nền tảng - gây ra bug nghiêm trọng trong Safari, khiến mỗi lần layout mất 1600ms thay vì 2ms bình thường.</p> <p>Điều thú vị là bug này chỉ ảnh hưởng một số emoji cụ thể (❤️, 🤯) trong khi các emoji khác (🧺, 🫠) vẫn render nhanh bình thường. Giải pháp tạm thời: liệt kê &ldquo;Apple Color Emoji&rdquo; trước Noto Color Emoji trong font-family.</p> <p><strong>Điểm chính:</strong></p> <ul> <li>Font Noto Color Emoji sử dụng COLRv1 spec, fallback sang SVG trên Safari</li> <li>Bug nằm trong CoreSVG của Apple, đã được báo cáo cho WebKit team</li> <li>Coding agent giúp tạo minimal repro case nhanh hơn nhiều so với thủ công</li> <li>Câu chuyện thú vị về cách AI vừa là nguyên nhân (gợi ý dùng font này) vừa là giải pháp (giúp debug)</li> </ul> <h2 id="wrapping-code-comments"><a class="link" href="https://matklad.github.io/2026/02/21/wrapping-code-comments.html" target="_blank" rel="noopener" >Wrapping Code Comments</a> </h2><p>Một bài viết ngắn nhưng thú vị từ matklad về việc wrap code và comments. Tác giả nhận ra rằng code và comments nên được wrap ở độ rộng khác nhau: code ở khoảng 100 cột (để vừa 2 editor cạnh nhau), nhưng nội dung comments nên wrap ở 60-70 cột để dễ đọc hơn.</p> <p>Điều quan trọng là comments nên wrap <strong>tương đối</strong> so với vị trí bắt đầu của comment, không phải tuyệt đối. Ví dụ: comment ở top-level có thể rộng, nhưng comment lồng sâu trong code nên hẹp hơn nhưng vẫn giữ độ rộng nội dung giống nhau.</p> <p><strong>Điểm chính:</strong></p> <ul> <li>Giới hạn code ở 100 cột, nội dung comments ở 60-70 cột</li> <li>Comments nên wrap tương đối theo vị trí, không tuyệt đối</li> <li>VS Code và Emacs đều không hỗ trợ tốt relative wrapping</li> <li>Soft-wrapping không thể wrap đúng nếu không hiểu ý nghĩa text (ví dụ markdown lists)</li> </ul> <h3 id="bonus">Bonus </h3><p><strong>Images:</strong> <img src="https://substackcdn.com/image/fetch/$s_!h2M_!,w_1100,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1d6d88ea-4355-4f29-96fa-9770907beebb_2360x2960.png" loading="lazy" alt="RabbitMQ vs Kafka vs Pulsar" > <img src="https://substackcdn.com/image/fetch/$s_!8P-v!,w_1100,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6039d506-e02f-4313-ab97-2c04f8c94d90_2360x2960.png" loading="lazy" alt="REST vs GraphQL" > <img src="https://substackcdn.com/image/fetch/$s_!yela!,w_1100,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F5ac3310f-e380-48c2-93ff-051f7606b533_2250x2624.png" loading="lazy" alt="Eventual Consistency in Modern Databases" > <img src="https://substackcdn.com/image/fetch/$s_!vB9v!,w_1100,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fbc02c74f-e91f-438a-8ad8-d5ba6831e7f0_2250x2624.png" loading="lazy" alt="Strong Consistency In Databases" > <img src="https://substackcdn.com/image/fetch/$s_!h8d0!,w_1100,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc5f67fe5-0efa-4fc6-98da-d176b60b1a92_2508x3000.jpeg" loading="lazy" alt="PostgreSQL versus MySQL" > <img src="https://substackcdn.com/image/fetch/$s_!_roW!,w_1100,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fdbdb9cae-3bda-4a62-9077-3f9d1e13fede_2360x2960.jpeg" loading="lazy" alt="Network Protocols Explained" ></p> <p><strong>Videos:</strong> <a class="link" href="https://www.youtube.com/watch?v=z_NbVtbgBJw" target="_blank" rel="noopener" >Video: What Is Redis Really About? - ByteByteGo</a></p> <hr> <p><em>Bài viết đã được review và cập nhật bởi Claude Code với Opus 4.7 (1M context).</em></p>