{"id":13638938,"url":"https://github.com/duyet/vietnamese-frontend-interview-questions","last_synced_at":"2025-04-14T13:33:07.934Z","repository":{"id":77722618,"uuid":"48054162","full_name":"duyet/vietnamese-frontend-interview-questions","owner":"duyet","description":"Tuyển tập các câu hỏi phỏng vấn cho vị trí lập trình Front-end","archived":false,"fork":false,"pushed_at":"2024-10-28T18:00:49.000Z","size":38,"stargazers_count":55,"open_issues_count":2,"forks_count":20,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-10T12:24:30.058Z","etag":null,"topics":["css","document","html","javascript","markdown"],"latest_commit_sha":null,"homepage":"http://duyet.github.io/vietnamese-frontend-interview-questions/","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/duyet.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-12-15T16:07:39.000Z","updated_at":"2025-03-22T08:33:50.000Z","dependencies_parsed_at":null,"dependency_job_id":"fa938a1c-5528-457d-8040-3af77e3feeb7","html_url":"https://github.com/duyet/vietnamese-frontend-interview-questions","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/duyet%2Fvietnamese-frontend-interview-questions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/duyet%2Fvietnamese-frontend-interview-questions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/duyet%2Fvietnamese-frontend-interview-questions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/duyet%2Fvietnamese-frontend-interview-questions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/duyet","download_url":"https://codeload.github.com/duyet/vietnamese-frontend-interview-questions/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248888852,"owners_count":21178116,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","document","html","javascript","markdown"],"created_at":"2024-08-02T01:00:55.580Z","updated_at":"2025-04-14T13:33:07.902Z","avatar_url":"https://github.com/duyet.png","language":null,"funding_links":[],"categories":["Interview"],"sub_categories":[],"readme":"# Tuyển tập câu hỏi phỏng vấn Front-end\n\nMục đích của trang là tổng hợp lại danh sách các câu hỏi tham khảo phỏng vấn cho vị trí lập trình viên Front-end. \n\nVới mong muốn giúp những ai đang sắp được phỏng vấn chuẩn bị tốt hơn, đồng thời\ngiúp ôn lại các kiến thức về front-end một cách vững chắc nhất. \n\nMình tha thiết mong muốn mọi người cùng đóng góp nội dung, [tại đây](#how-to-contribute).\n\n![](https://i.imgur.com/qJhyreL.jpg)\n\n# Table of Contents\n\n1. [Hỏi chung](#hỏi-chung)\n2. [Hỏi về HTML](#hỏi-về-html)\n3. [Hỏi về CSS](#hỏi-về-css)\n4. [Hỏi về Javascript](#hỏi-về-javascript)\n5. [Hỏi về Testing](#hỏi-về-testing)\n6. [Hỏi về Performance](#hỏi-về-performance)\n7. [Hỏi về Network](#hỏi-về-network)\n8. [Hỏi về Coding](#hỏi-về-coding)\n9. [Hỏi chơi cho vui](#hỏi-chơi-cho-vui)\n\n# Getting Involved\n\n1. [Contributors](#contributors)\n2. [How to Contribute](#how-to-contribute)\n3. [License](https://github.com/duyetdev/frontend-interview-questions-vietnamese/blob/master/LICENSE)\n\n------------------------------------------\n\n## Hỏi chung\n\n* Những điểm nào mà bạn thích, hoặc không thích về lập trình?\n* Khác nhau giữa UI và UX?\n  * UI (User Interface): Tập trung vào giao diện người dùng, cách trình bày và tương tác trực quan\n  * UX (User Experience): Tập trung vào trải nghiệm tổng thể, cảm nhận và hiệu quả sử dụng\n* Nói về môi trường làm việc mà bạn mong muốn?\n* Ba cách để giảm dung lượng tải trang?\n  * Tối ưu và nén hình ảnh\n  * Minify và gộp file CSS/JS\n  * Sử dụng CDN và caching hiệu quả\n  * Lazy loading cho images và components\n  * Tree shaking để loại bỏ code không sử dụng\n* CORS là gì và cách xử lý?\n  * CORS (Cross-Origin Resource Sharing) là cơ chế cho phép nhiều tài nguyên khác nhau của một trang web có thể được truy vấn từ domain khác với domain của trang đó\n  * Xử lý: Cấu hình header phù hợp, sử dụng proxy, hoặc middleware trên server\n* Progressive Enhancement và Graceful Degradation là gì?\n* Single Page Application (SPA) vs Multi Page Application (MPA)?\n* Virtual DOM là gì và tại sao nó quan trọng?\n\n## Hỏi về HTML\n\n* Tác dụng của `doctype`?\n  * Khai báo kiểu tài liệu HTML để trình duyệt biết cách render\n  * Đảm bảo trang web được hiển thị ở chế độ standards mode\n* Khác nhau giữa HTML và XHTML là gì?\n  * XHTML yêu cầu cú pháp nghiêm ngặt hơn (phải đóng thẻ, case sensitive)\n  * XHTML tuân thủ quy tắc XML\n* Có vấn đề gì không nếu lưu trang MIME dạng `application/xhtml+xml`?\n* Điều gì mà bạn cần phải chú ý nếu xây dựng và phát triển các trang web đa ngôn ngữ?\n  * Sử dụng thẻ lang và charset phù hợp\n  * Hỗ trợ RTL (Right-to-Left) cho một số ngôn ngữ\n  * Tổ chức content theo cấu trúc i18n\n* Thuộc tính `data-` dùng để làm gì?\n  * Lưu trữ dữ liệu tùy chỉnh trong HTML\n  * Truy cập dữ liệu thông qua JavaScript Dataset API\n* Nếu HTML5 là nguồn mở, thẻ HTML nào mà bạn sẽ phát triển thêm?\n* Khác nhau giữa `cookie`, `sessionStorage` và `localStorage`.\n  * Cookie: 4KB, gửi lên server mỗi request, có expiry\n  * sessionStorage: 5MB+, chỉ tồn tại trong session, không gửi lên server\n  * localStorage: 5MB+, tồn tại vĩnh viễn, không gửi lên server\n* Khác nhau giữa `\u003cscript\u003e`, `\u003cscript async\u003e` và `\u003cscript defer\u003e`.\n  * script: Blocking, dừng parse HTML\n  * async: Non-blocking, thực thi ngay khi tải xong\n  * defer: Non-blocking, thực thi sau khi parse HTML\n* Tại sao nên đặt `\u003clink\u003e` trong thẻ `\u003chead\u003e\u003c/head\u003e` và đặt `\u003cscript\u003e` sau thẻ `\u003c/body\u003e`. Ngoại lệ khi nào?\n  * link trong head: Load CSS sớm tránh FOUC (Flash of Unstyled Content)\n  * script cuối body: Không block render, tải sau khi có DOM\n  * Ngoại lệ: Script cần thực thi sớm hoặc có async/defer\n* Semantic HTML là gì và tại sao nó quan trọng?\n* Web Components là gì?\n* Shadow DOM dùng để làm gì?\n\n## Hỏi về CSS\n\n* CSS framework là gì?\n  * Bootstrap, Tailwind, Material UI...\n  * Ưu điểm: Phát triển nhanh, responsive sẵn\n  * Nhược điểm: File size lớn, khó customize\n* Có mấy cách để sử dụng CSS trên trang web?\n  * Inline CSS\n  * Internal CSS (style tag)\n  * External CSS (link tag)\n  * Import CSS (@import)\n* Lợi / hại của việc sử dụng External Style Sheets?\n  * Lợi: Tái sử dụng, cache, dễ maintain\n  * Hại: Thêm HTTP request, có thể block rendering\n* Giải thích Ruleset là gì?\n  * Selector + Declaration block\n  * VD: `.class-name { property: value; }`\n* **Case-sensitivity** - ngôn ngữ css có phân biệt hoa thường khi nào? \n  * Selectors: Case-sensitive\n  * Properties và values: Case-insensitive\n* Khác nhau giữa Class selector và Id selector?\n  * Class: Dùng nhiều lần, độ ưu tiên thấp hơn\n  * ID: Unique, độ ưu tiên cao hơn\n* Pseudo-elements là gì?\n  * ::before, ::after, ::first-line, ::first-letter\n  * Tạo và style element ảo\n* Cách nào đổi khôi phục thuộc tính mặc định của một đối tượng? \n  * Sử dụng `initial` hoặc `unset`\n  * VD: `color: initial;`\n* `z-index` dùng để làm gì?\n  * Kiểm soát thứ tự xếp chồng các element\n  * Chỉ hoạt động với position không phải static\n* Tại sao `@import` chỉ có thể sử dụng ở đầu file?\n  * Đảm bảo thứ tự load CSS đúng\n  * Tránh blocking render không cần thiết\n* CSS Grid và Flexbox khác nhau như thế nào?\n* CSS-in-JS là gì? Ưu nhược điểm?\n* CSS Module là gì và khi nào nên dùng?\n* BEM methodology là gì?\n\n## Hỏi về Javascript\n\n* Ý nghĩa của biến `this`.\n  * Context của function hiện tại\n  * Phụ thuộc vào cách function được gọi\n* Sử dụng **AMD** và **CommonJS** có tốt hay không? Tại sao tốt hoặc không tốt?\n  * AMD: Async loading, phù hợp browser\n  * CommonJS: Sync loading, phù hợp Node.js\n* Nếu viết theo kiểu IIFE, tại sao đoạn mã sau bị lỗi? `function foo(){ }();`\n  * Sửa lại: `(function foo(){ })();`\n  * Hoặc: `(function foo(){ }());`\n* Khác nhau giữa `null`, `undefined` hoặc chưa khai báo?\n  * undefined: Biến đã khai báo nhưng chưa gán giá trị\n  * null: Giá trị rỗng được gán có chủ đích\n  * Chưa khai báo: ReferenceError khi truy cập\n* Khác nhau giữa **host objects** và **native objects** là gì?\n  * Native: Built-in objects (Array, Date...)\n  * Host: Do môi trường cung cấp (window, document...)\n* Javascript closure là gì?\n  * Function có thể truy cập biến ngoài scope của nó\n  * Giữ reference đến biến sau khi function kết thúc\n* `ES6` Yeild là gì? [giải thích](https://blog.duyetdev.com/2016/02/generator-function-javascript.html)\n* `ES6` Function* là gì? [giải thích](https://blog.duyetdev.com/2016/02/generator-function-javascript.html)\n* callback có phải là một phần của V8 hay không?\n* Khác biệt của arrow function là gì?\n* Phân biệt let,const,var khi nào thì dùng nó?\n* Promise trong JS là gì?\n* Có nên dùng nhiều callback lồng nhau (callback hell)?\n\n[Rest of the original content continues unchanged...]\n\n## Hỏi về Testing \n\n* Có nên sử dụng các công cụ Lint Style hay không? Tại sao?\n* Có nên áp dụng unit test hay không ? \n* Bạn có biết về TDD không ? nêu thử 1 vài framework ?\n\n## Hỏi về Performance\n\n* Bạn hay xài công cụ nào để kiểm tra lỗi về hiệu suất tải trên trình duyệt? \n* Giải thích sự khác nhau giữa layout, painting và compositing.\n\n## Hỏi về Network\n\n* Tại sao lưu resource (js/css/...) trên nhiều domain sẽ tốt hơn? \n* Sự khác nhau giữa Long-Polling, Websockets và Server-Sent?\n* Giải thích ý nghĩa của mấy cái HTTP Header sau:\n  * Diff. between Expires, Date, Age and If-Modified-...\n  * Do Not Track\n  * Cache-Control\n  * Transfer-Encoding\n  * ETag\n  * X-Frame-Options\n* HTTP action là gì?\n* Phân biệt các method HTTP(khi nào thì dùng nó).\n\n## Hỏi về Coding\n**Hỏi:** `foo` có giá trị là bao nhiêu?\n```js\nvar foo = 10 + '20';\n```\n\n**Hỏi:** Viết hàm `add` để thực hiện được câu lệnh sau:\n```js\nadd(2, 5); // 7\nadd(2)(5); // 7\n```\n\n**Hỏi:** Kết quả trả về của hàm lệnh sau là gì?\n```js\n\"i'm a developer\".split(\"\").reverse().join(\"\");\n```\n\n**Hỏi:** Giá trị của `window.foo` là gì?\n```js\n( window.foo || ( window.foo = \"bar\" ) );\n```\n\n**Hỏi:** Kết quả của 2 lệnh `alert` là gì?\n```js\nvar foo = \"Hello\";\n(function() {\n  var bar = \" World\";\n  alert(foo + bar);\n})();\nalert(foo + bar);\n```\n\n**Hỏi:** Giá trị của `foo.length` trong trường hợp sau?\n```js\nvar foo = [];\nfoo.push(1);\nfoo.push(2);\n```\n\n**Hỏi:** Giá trị của `foo.x` trong trường hợp sau?\n```js\nvar foo = {n: 1};\nvar bar = foo;\nfoo.x = foo = {n: 2};\n```\n\n**Hỏi:** Các lệnh sau sẽ in ra console cái gì?\n```js\nconsole.log('one');\nsetTimeout(function() {\n  console.log('two');\n}, 0);\nconsole.log('three');\n```\n\n**Hỏi:** Các lệnh sau sẽ in ra console cái gì?\n```js\nbaz = function() {\n return \"some thing cool\";\n}\nfoo = false;\nconsole.log (foo \u0026\u0026 baz());\nconsole.log (foo || baz());\n```\n\n**Hỏi:** Cho `var string = ['1','3','4','10','2','5','9','7','8','6']` in ra kết quả sau\n```js\n10 9 8 7\n6 5 4 \n3 2 \n1\n```\n\n## Hỏi chơi cho vui \n\n* Những dự án nào mà bạn cho là thú vị đã từng làm qua?\n* Bạn hay sử dụng các công cụ (tools) nào? \n* Bạn thích tính năng nào của Internet Explorer nhất?\n* Bạn cho biết cách để đo thời gian chạy của một đoạn code javascript, chính xác tới ms?\n* Cho 8 viên bi trong đó có 7 viên cùng khối lượng và 1 viên còn lại nặng hơn ? \n* Cho 1 cái cân -|- (kiểu vậy). Làm sao để tìm viên bi nặng hơn nhanh nhất ?\n* Cho 2 sợi dây. Đốt 2 sợi dây đó thì mất 1 tiếng. Hỏi trong 45 phút thì làm sao có thể đốt được 2 sợi dây đó.\n\n------------------------------------------\n\n# Contributors\n\n* 24/06/2016, pull request [#1](https://github.com/duyetdev/vietnamese-frontend-interview-questions/pull/1) - [@dannyphung](https://github.com/dannyphung)\n* 15/12/2015, dự án được khởi động bởi [@duyetdev](https://github.com/duyetdev)\n\n# How to Contribute\nTrang được xây dựng bởi cộng đồng. Để đóng góp vào danh sách câu hỏi, vui lòng: \n\n1. Fork repo tại Github: [https://github.com/duyetdev/frontend-interview-questions-vietnamese](https://github.com/duyetdev/frontend-interview-questions-vietnamese)\n2. Commit câu hỏi trực tiếp vào file README.md, nhánh master.\n3. Tạo Pull Request.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fduyet%2Fvietnamese-frontend-interview-questions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fduyet%2Fvietnamese-frontend-interview-questions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fduyet%2Fvietnamese-frontend-interview-questions/lists"}