├── .nojekyll ├── questions ├── node.md ├── react.md ├── vue.md ├── webpack.md ├── alogorithms,md ├── 10.md ├── test.md ├── fun.md ├── 8.md ├── http.md ├── 9.md ├── html.md ├── performance.md ├── general.md ├── css.md ├── 11.md ├── 3.md ├── README.md ├── js.md ├── 2.md ├── 5.md ├── 4.md ├── 7.md ├── 6.md └── 1.md ├── google06290e14368c0ea3.html ├── _media ├── fe.jpeg ├── favicon.ico ├── apple-icon.png ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon-96x96.png ├── ms-icon-70x70.png ├── ms-icon-144x144.png ├── ms-icon-150x150.png ├── ms-icon-310x310.png ├── android-icon-36x36.png ├── android-icon-48x48.png ├── android-icon-72x72.png ├── android-icon-96x96.png ├── apple-icon-114x114.png ├── apple-icon-120x120.png ├── apple-icon-144x144.png ├── apple-icon-152x152.png ├── apple-icon-180x180.png ├── apple-icon-57x57.png ├── apple-icon-60x60.png ├── apple-icon-72x72.png ├── apple-icon-76x76.png ├── android-icon-144x144.png ├── android-icon-192x192.png ├── apple-icon-precomposed.png ├── browserconfig.xml └── manifest.json ├── en └── README.md ├── .editorconfig ├── .gitignore ├── resource └── resource.md ├── _sidebar.md ├── package.json ├── interview ├── README.md └── 1.md ├── resume ├── README.md └── 1.md ├── sw.js ├── index.html └── README.md /.nojekyll: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /questions/node.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /questions/react.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /questions/vue.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /questions/webpack.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /google06290e14368c0ea3.html: -------------------------------------------------------------------------------- 1 | google-site-verification: google06290e14368c0ea3.html -------------------------------------------------------------------------------- /questions/alogorithms,md: -------------------------------------------------------------------------------- 1 | - [ES6的数据结构与算法](https://www.talkingcoder.com/article/6374220543809234154) 2 | -------------------------------------------------------------------------------- /_media/fe.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/awesome-interview/Front-end-Web-Development-Interview-Question/master/_media/fe.jpeg -------------------------------------------------------------------------------- /_media/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/awesome-interview/Front-end-Web-Development-Interview-Question/master/_media/favicon.ico -------------------------------------------------------------------------------- /_media/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/awesome-interview/Front-end-Web-Development-Interview-Question/master/_media/apple-icon.png -------------------------------------------------------------------------------- /_media/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/awesome-interview/Front-end-Web-Development-Interview-Question/master/_media/favicon-16x16.png -------------------------------------------------------------------------------- /_media/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/awesome-interview/Front-end-Web-Development-Interview-Question/master/_media/favicon-32x32.png -------------------------------------------------------------------------------- /_media/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/awesome-interview/Front-end-Web-Development-Interview-Question/master/_media/favicon-96x96.png -------------------------------------------------------------------------------- /_media/ms-icon-70x70.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/awesome-interview/Front-end-Web-Development-Interview-Question/master/_media/ms-icon-70x70.png -------------------------------------------------------------------------------- /_media/ms-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/awesome-interview/Front-end-Web-Development-Interview-Question/master/_media/ms-icon-144x144.png -------------------------------------------------------------------------------- /_media/ms-icon-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/awesome-interview/Front-end-Web-Development-Interview-Question/master/_media/ms-icon-150x150.png -------------------------------------------------------------------------------- /_media/ms-icon-310x310.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/awesome-interview/Front-end-Web-Development-Interview-Question/master/_media/ms-icon-310x310.png -------------------------------------------------------------------------------- /_media/android-icon-36x36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/awesome-interview/Front-end-Web-Development-Interview-Question/master/_media/android-icon-36x36.png -------------------------------------------------------------------------------- /_media/android-icon-48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/awesome-interview/Front-end-Web-Development-Interview-Question/master/_media/android-icon-48x48.png -------------------------------------------------------------------------------- /_media/android-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/awesome-interview/Front-end-Web-Development-Interview-Question/master/_media/android-icon-72x72.png -------------------------------------------------------------------------------- /_media/android-icon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/awesome-interview/Front-end-Web-Development-Interview-Question/master/_media/android-icon-96x96.png -------------------------------------------------------------------------------- /_media/apple-icon-114x114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/awesome-interview/Front-end-Web-Development-Interview-Question/master/_media/apple-icon-114x114.png -------------------------------------------------------------------------------- /_media/apple-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/awesome-interview/Front-end-Web-Development-Interview-Question/master/_media/apple-icon-120x120.png -------------------------------------------------------------------------------- /_media/apple-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/awesome-interview/Front-end-Web-Development-Interview-Question/master/_media/apple-icon-144x144.png -------------------------------------------------------------------------------- /_media/apple-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/awesome-interview/Front-end-Web-Development-Interview-Question/master/_media/apple-icon-152x152.png -------------------------------------------------------------------------------- /_media/apple-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/awesome-interview/Front-end-Web-Development-Interview-Question/master/_media/apple-icon-180x180.png -------------------------------------------------------------------------------- /_media/apple-icon-57x57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/awesome-interview/Front-end-Web-Development-Interview-Question/master/_media/apple-icon-57x57.png -------------------------------------------------------------------------------- /_media/apple-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/awesome-interview/Front-end-Web-Development-Interview-Question/master/_media/apple-icon-60x60.png -------------------------------------------------------------------------------- /_media/apple-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/awesome-interview/Front-end-Web-Development-Interview-Question/master/_media/apple-icon-72x72.png -------------------------------------------------------------------------------- /_media/apple-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/awesome-interview/Front-end-Web-Development-Interview-Question/master/_media/apple-icon-76x76.png -------------------------------------------------------------------------------- /_media/android-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/awesome-interview/Front-end-Web-Development-Interview-Question/master/_media/android-icon-144x144.png -------------------------------------------------------------------------------- /_media/android-icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/awesome-interview/Front-end-Web-Development-Interview-Question/master/_media/android-icon-192x192.png -------------------------------------------------------------------------------- /_media/apple-icon-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/awesome-interview/Front-end-Web-Development-Interview-Question/master/_media/apple-icon-precomposed.png -------------------------------------------------------------------------------- /questions/10.md: -------------------------------------------------------------------------------- 1 | # 有趣的问题 2 | 3 | * 你编写过的最酷的代码是什么？其中你最自豪的是什么？ 4 | 5 | * 在你使用过的开发工具中，最喜欢哪个？ 6 | 7 | * 你有什么业余项目吗？是哪种类型的？ 8 | 9 | * 你最爱的 IE 特性是什么？ 10 | 11 | 12 | -------------------------------------------------------------------------------- /en/README.md: -------------------------------------------------------------------------------- 1 | - [tech-interview-handbook](https://github.com/yangshun/tech-interview-handbook) 2 | - [Front-end-Developer-Interview-Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions) 3 | -------------------------------------------------------------------------------- /_media/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | #ffffff -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | # Unix-style newlines with a newline ending every file 4 | [*] 5 | end_of_line = lf 6 | insert_final_newline = true 7 | charset = utf-8 8 | 9 | [*.{html,js,ts,css,scss,xml}] 10 | indent_style = space 11 | indent_size = 4 12 | trim_trailing_whitespace = true 13 | 14 | [*.yml] 15 | indent_style = space 16 | indent_size = 2 -------------------------------------------------------------------------------- /questions/test.md: -------------------------------------------------------------------------------- 1 | # 测试 相关问题 2 | 3 | Form [Front-end-Developer-Interview-Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions) 4 | 5 | * 对代码进行测试的有什么优缺点？ 6 | * 你会用什么工具测试你的代码功能？ 7 | * 单元测试与功能/集成测试的区别是什么？ 8 | * 代码风格 linting 工具的作用是什么？ 9 | 10 | Form [Front-end-Developer-Interview-Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions) 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | lib-cov 2 | *.seed 3 | *.log 4 | *.csv 5 | *.dat 6 | *.out 7 | *.pid 8 | *.gz 9 | *.swp 10 | 11 | pids 12 | logs 13 | results 14 | tmp 15 | 16 | #Build 17 | public/css/main.css 18 | 19 | # API keys and secrets 20 | .env 21 | 22 | # Dependency directory 23 | node_modules 24 | bower_components 25 | 26 | # Editors 27 | .idea 28 | *.iml 29 | 30 | # OS metadata 31 | .DS_Store 32 | Thumbs.db 33 | -------------------------------------------------------------------------------- /resource/resource.md: -------------------------------------------------------------------------------- 1 | 1. [前端技能汇总](https://github.com/JacksonTian/fks) 2 | ![前端知识结构图](../_media/fe.jpeg) 3 | 2. [JavaScript秘密花园](http://bonsaiden.github.io/JavaScript-Garden/zh/) 4 | 3. [modern-js-cheatsheet](https://github.com/mbeaudru/modern-js-cheatsheet) 5 | 4. [前端技术书籍推荐](https://github.com/jobbole/awesome-web-dev-books) 6 | 5. [你可能不知道的前端知识点](https://github.com/justjavac/the-front-end-knowledge-you-may-dont-know) 7 | -------------------------------------------------------------------------------- /questions/fun.md: -------------------------------------------------------------------------------- 1 | # 趣味问题 2 | 3 | Form [Front-end-Developer-Interview-Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions) 4 | 5 | 6 | * 你最近写过什么的很酷的项目吗？ 7 | * 在你使用的开发工具中，最喜欢哪些方面？ 8 | * 谁使你踏足了前端开发领域？ 9 | * 你有什么业余项目吗？是哪种类型的？ 10 | * 你最爱的 IE 特性是什么？ 11 | * 你对咖啡有没有什么喜好？ 12 | 13 | Form [Front-end-Developer-Interview-Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions) 14 | 15 | 16 | * 你坚持一年以上的事情是什么? 17 | -------------------------------------------------------------------------------- /questions/8.md: -------------------------------------------------------------------------------- 1 | # jQuery 相关问题 2 | 3 | * 解释"chaining"。 4 | 5 | * 解释"deferreds"。 6 | 7 | * 你知道哪些针对 jQuery 的优化方法。 8 | 9 | * 请解释 `.end()` 的用途。 10 | 11 | * 你如何给一个事件处理函数命名空间，为什么要这样做？ 12 | 13 | * 请说出你可以传递给 jQuery 方法的四种不同值。 14 | * 选择器（字符串），HTML（字符串），回调函数，HTML元素，对象，数组，元素数组，jQuery对象等。 15 | 16 | * 什么是效果队列？ 17 | 18 | * 请指出 `.get()`，`[]`，`eq()` 的区别。 19 | 20 | * 请指出 `.bind()`，`.live()` 和 `.delegate()` 的区别。 21 | 22 | * 请指出 `$` 和 `$.fn` 的区别，或者说出 `$.fn` 的用途。 23 | 24 | * 请优化下列选择器： 25 | ```javascript 26 | $(".foo div#bar:eq(0)") 27 | ``` 28 | 29 | 30 | -------------------------------------------------------------------------------- /_sidebar.md: -------------------------------------------------------------------------------- 1 | - [前端笔试题](/questions/) 2 | - [FEWDQ CSS](/questions/1) 3 | - [FEWDQ HTML](/questions/2) 4 | - [FEX 面试题](/questions/3) 5 | - [常见问题](/questions/4) 6 | - [HTML 相关问题](/questions/5) 7 | - [CSS 相关问题](/questions/6) 8 | - [JS 相关问题](/questions/7) 9 | - [jQuery 相关问题](/questions/8) 10 | - [代码相关问题](/questions/9) 11 | - [有趣的问题](/questions/10) 12 | - [一些面试题](/questions/11) 13 | 14 | 15 | - [前端面经](/interview/) 16 | - [面试前端工程师](/interview/1) 17 | 18 | - [简历](/resume/) 19 | - [Web前端程序员简历模板](/resume/1) 20 | -------------------------------------------------------------------------------- /questions/http.md: -------------------------------------------------------------------------------- 1 | # 网络相关问题 2 | 3 | Form [Front-end-Developer-Interview-Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions) 4 | 5 | * 为什么传统上利用多个域名来提供网站资源会更有效？ 6 | * 请尽可能完整得描述从输入 URL 到整个网页加载完毕及显示在屏幕上的整个流程。 7 | * Long-Polling、Websockets 和 Server-Sent Event 之间有什么区别？ 8 | * 请描述以下 request 和 response headers： 9 | * Diff. between Expires, Date, Age and If-Modified-... 10 | * Do Not Track 11 | * Cache-Control 12 | * Transfer-Encoding 13 | * ETag 14 | * X-Frame-Options 15 | * 什么是 HTTP method？请罗列出你所知道的所有 HTTP method，并给出解释。 16 | * 请解释 HTTP status 301 与 302 的区别？ 17 | 18 | Form [Front-end-Developer-Interview-Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions) 19 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "front-end-web-development-interview-question", 3 | "version": "1.0.0", 4 | "description": "前端开发面试题大收集", 5 | "scripts": { 6 | "start": "docsify serve ./" 7 | }, 8 | "repository": { 9 | "type": "git", 10 | "url": "git+https://github.com/paddingme/Front-end-Web-Development-Interview-Question.git" 11 | }, 12 | "author": "paddingme ", 13 | "license": "MIT", 14 | "bugs": { 15 | "url": "https://github.com/paddingme/Front-end-Web-Development-Interview-Question/issues" 16 | }, 17 | "homepage": "https://github.com/paddingme/Front-end-Web-Development-Interview-Question#readme", 18 | "dependencies": {}, 19 | "devDependencies": { 20 | "docsify-cli": "^4.1.11" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /interview/README.md: -------------------------------------------------------------------------------- 1 | # 前端面经部分 2 | 3 | 1. [面试前端工程师](/interview/1.md) 4 | 2. [知乎|web前端开发方向校招考什么](http://www.zhihu.com/question/26188893) :arrow_upper_right: 5 | 3. [知乎|腾讯web前端方向实习笔试准备](http://www.zhihu.com/question/20966351/answer/24401878) :arrow_upper_right: 6 | 4. [如何在面试中识别一个坏老板](http://get.jobdeer.com/6384.get/) :arrow_upper_right: 7 | 5. [谈谈面试与面试题](https://github.com/wintercn/blog/issues/4) @ [wintercn](https://github.com/wintercn) :arrow_upper_right: 8 | 6. [说说最近几次面试](http://www.cnblogs.com/yexiaochai/p/4366051.html) @ [叶小钗](http://weibo.com/yiquinian) :arrow_upper_right: 9 | 7. [在LinkedIn做面试官的故事](https://baijia.baidu.com/s?old_id=52449) :arrow_upper_right: 10 | 8. [写给前端面试者](http://www.w3cplus.com/css/write-to-front-end-developer-interview.html) @大漠 :arrow_upper_right: 11 | -------------------------------------------------------------------------------- /questions/9.md: -------------------------------------------------------------------------------- 1 | # 代码相关的问题： 2 | 3 | 4 | ```javascript 5 | modulo(12, 5) // 2 6 | ``` 7 | 8 | 问题：实现满足上述结果的modulo函数 9 | 10 | ```javascript 11 | "i'm a lasagna hog".split("").reverse().join(""); 12 | ``` 13 | 14 | 问题：上面的语句的返回值是什么？ 15 | **答案："goh angasal a m'i"** 16 | 17 | ```javascript 18 | ( window.foo || ( window.foo = "bar" ) ); 19 | ``` 20 | 21 | 问题：window.foo 的值是什么？ 22 | **答案："bar"** 23 | 只有 window.foo 为假时的才是上面答案，否则就是它本身的值。 24 | 25 | ```javascript 26 | var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); 27 | ``` 28 | 29 | 问题：上面两个 alert 的结果是什么 30 | **答案: "Hello World" 和 ReferenceError: bar is not defined** 31 | 32 | ```javascript 33 | var foo = []; 34 | foo.push(1); 35 | foo.push(2); 36 | ``` 37 | 38 | 问题：foo.length 的值是什么？ 39 | **答案：`2`**) 40 | 41 | -------------------------------------------------------------------------------- /resume/README.md: -------------------------------------------------------------------------------- 1 | ## 简历怎么写? 2 | 3 | 1. [精益技术简历之道](http://www.cnblogs.com/figure9/p/lean-technical-resume.html) @ [peng_gong](http://weibo.com/pegong) :arrow_upper_right: 4 | 2. [如何写好技术简历 ](http://get.jobdeer.com/744.get) @ [easychen](https://github.com/easychen) :arrow_upper_right: 5 | 3. [Web 前端程序员简历模板](/resume/1) @ [easychen](https://github.com/easychen) 6 | 4. [吐嘈「个人简历」](http://mp.weixin.qq.com/s?__biz=MzA5NDY0ODkxNA==&mid=200168752&idx=1&sn=348edc7956f1ac9652aa2523b902bef5&scene=4) @ [rank](https://www.zhihu.com/people/rank) :arrow_upper_right: 7 | 5. [如何写打动人的「个人简历」](http://mp.weixin.qq.com/s?__biz=MzA5NDY0ODkxNA==&mid=200173772&idx=1&sn=895a5c66548c1b4a72153b2217350ca1&scene=4) @[rank](https://www.zhihu.com/people/rank) :arrow_upper_right: 8 | 9 | 10 | ## 简历生成 11 | 12 | - [使用 vue 生成漂亮的简历](https://github.com/salomonelli/best-resume-ever) 13 | -------------------------------------------------------------------------------- /questions/html.md: -------------------------------------------------------------------------------- 1 | # HTML 相关问题 2 | 3 | Form [Front-end-Developer-Interview-Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions) 4 | 5 | 6 | * `doctype`(文档类型) 的作用是什么？ 7 | * 浏览器标准模式 (standards mode) 、几乎标准模式（almost standards mode）和怪异模式 (quirks mode) 之间的区别是什么？ 8 | * HTML 和 XHTML 有什么区别？ 9 | * 如果页面使用 'application/xhtml+xml' 会有什么问题吗？ 10 | * 如果网页内容需要支持多语言，你会怎么做？ 11 | * 在设计和开发多语言网站时，有哪些问题你必须要考虑？ 12 | * 使用 `data-` 属性的好处是什么？ 13 | * 如果把 HTML5 看作做一个开放平台，那它的构建模块有哪些？ 14 | * 请描述 `cookies`、`sessionStorage` 和 `localStorage` 的区别。 15 | * 请解释 ` 88 | 89 | 90 | 91 | 92 | 93 | 98 | 99 | -------------------------------------------------------------------------------- /questions/2.md: -------------------------------------------------------------------------------- 1 | ## HTML 部分问题与解答 2 | 3 | 这里是 [Front End Web Development Quiz](http://davidshariff.com/quiz/)HTML 部分问题与解答 4 | 5 | 1. Q: `` 是正确的HTML5标签吗？ 6 | 7 | A: 是。 8 | 9 | `` 标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。是HTML5 标签。 10 | 11 | 2. Q: `` 标签是否可以改变文本方向？ 12 | 13 | A: 可以。 14 | 15 | ``标签覆盖默认的文本方向。 16 | 17 | ``` 18 | Here is some text 19 | ``` 20 | 21 | 3. Q: 下列HTML代码是否正确？ 22 | 23 | ``` 24 |
25 | My image 26 |
27 |

This is my self portrait.

28 |
29 |
30 | ``` 31 | 32 | A: 正确 33 | 34 | `
` 标签规定独立的流内容（图像、图表、照片、代码等等）。`figure` 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。使用`
`元素为`figure`添加标题（caption）。 35 | 36 | 4. Q: 哪种情况下应该使用`small`标签？当你想在`h1` 标题后创建副标题？还是当在`footer`里面增加版权信息？ 37 | 38 | A: `small`标签一般使用场景是在版权信息和法律文本里使用，也可以在标题里使用标注附加信息（bootstrap中可见），但不可以用来创建副标题。 39 | 40 | > The HTML Small Element (``) makes the text font size one size smaller (for example, from large to medium, or from small to x-small) down to the browser's minimum font size. In HTML5, this element is repurposed to represent side-comments and small print, including copyright and legal text, independent of its styled presentation. 41 | 42 | 5. Q: 在一个结构良好的web网页里，多个`h1`标签会不利于SEO吗？ 43 | 44 | A: 不影响。 45 | 46 | > According to Matt Cutts (lead of Google's webspam team and the de facto expert on these things), using multiple `

` tags is fine, as long as you're not abusing it (like sticking your whole page in an `

` and using CSS to style it back to normal size). That would likely have no effect, and might trigger a penalty, as it looks spammy. 47 | 48 | > If you have multiple headings and it would be natural to use multiple `

`'s, then go for it. 49 | 50 | 摘自： 51 | 52 | 6. Q: 如果你有一个搜索结果页面，你想高亮搜索的关键词。什么HTML 标签可以使用? 53 | 54 | A:`` 标签表现高亮文本。 55 | 56 | > The HTML `` Element represents highlighted text, i.e., a run of text marked for reference purpose, due to its relevance in a particular context. For example it can be used in a page showing search results to highlight every instance of the searched for word. 57 | 58 | 7. Q: 下列代码中`scope` 属性是做什么的？ 59 | 60 | ``` 61 |
62 |

Hello World

63 | 68 |

This is my text

69 |
70 | 71 |
72 |

This is awesome

73 |

I am some other text

74 |
75 | ``` 76 | 77 | A: `scoped` 属性是一个布尔属性。如果使用该属性，则样式仅仅应用到 style 元素的父元素及其子元素。 78 | 79 | 8. HTML5 支持块级超链接吗？例如： 80 | 81 | ``` 82 | 88 | ``` 89 | A: 支持。 90 | 91 | HTML5中`` 元素表现为一个超链接，支持任何行内元素和块级元素。 92 | 93 | 9. Q: 当下列的HTML代码加载时会触发新的HTTP请求吗？ 94 | 95 | ``` 96 | My picture 97 | ``` 98 | 99 | A: 会哇 100 | 101 | 10. Q: 当下列的HTML代码加载时会触发新的HTTP请求吗？ 102 | 103 | ``` 104 |
105 | My photo 106 |
107 | ``` 108 | 109 | A: 会！ 110 | 111 | 11. `main1.css`一定会在`alert('Hello world')`被加载和编译吗? 112 | 113 | ``` 114 | 115 | 116 | 119 | 120 | ``` 121 | 122 | A: 是！ 123 | 124 | 12. Q: 在`main2.css`获取前`main1`一定必须被下载解析吗？ 125 | 126 | ``` 127 | 128 | 129 | 130 | 131 | ``` 132 | 133 | A: no! 134 | 135 | 13. Q: 在`Paragraph 1`加载后`main2.css`才会被加载编译吗？ 136 | 137 | ``` 138 | 139 | 140 | 141 | 142 |

Paragraph 1

143 |

Paragraph 2

144 | 145 | 146 | ``` 147 | 148 | A: yes! 149 | 150 | ## 知识点总结 151 | 152 | - 浏览器如何渲染，可以查阅如下文章： 153 | + [浏览器的渲染原理简介](http://coolshell.cn/articles/9666.html) 154 | + [专题：浏览器:渲染重绘、重排两三事](http://developer.51cto.com/art/201311/418133.htm) 155 | + [浏览器加载和渲染HTML的顺序以及Gzip的问题](http://www.nowamagic.net/academy/detail/48110160) 156 | + [从FE的角度上再看输入url后都发生了什么](http://div.io/topic/609) 157 | 158 | - HTML5 方便的资料可阅读： 159 | + [你需要知道的五个HTML5新功能](http://www.html5cn.org/article-6180-1.html) 160 | + [必须知道的七个HTML5新特性](http://camnpr.com/archives/must-know-the-seven-html5-features.html) 161 | 162 | -------------------------------------------------------------------------------- /interview/1.md: -------------------------------------------------------------------------------- 1 | # 面试前端工程师 2 | 3 | 12月30日 2013年，作者 Alex MacCaw, 翻译：myownghost 4 | 5 | 6 | 注：之前我们介绍过：[一名靠谱的JavaScript程序员应备的素质](http://ourjs.com/detail/52b0fb82d6feceaa0400000b)，从程序员的角度提出要去学习哪些知识，下面这篇文章从面试官的角度介绍到面试时可能会问到的一些问题。 7 | 8 | 我在 Twitter 和 Stripe 的一部分工作内容是面试前端工程师。其实关于面试你可能很有自己的一套，这里我想跟你们分享一下我常用的方法。 9 | 10 | 11 | 不过我想先给你们一个忠告，招聘是一件非常艰巨的任务，在45分钟内指出一名侯选人是否合适是你需要完成的任务。不过面试的最大问题是每个人都会想着去雇佣他们自己，任何通过我面试的人想法大都跟我差不多（注：因为你总会问你自己关心和知道的问题），这其实不是一件好事。因此我之前的决定都有很大碰运气的成分。不过，这也是一个良好的开端。 12 | 13 | 最理想的情况下是侯选人有一个全面的 Github “简历”，这样我们可以同时通过他们的开源项目了解他们。我经常会浏览他们的代码然后针对一些特定的代码设计问一些问题。如果侯选人有非常好的开源项目记录，接下来的面试会直接去检验他们的团队协作精神。否则，我不得不去问他们一些代码方面的问题了。 14 | 15 | 我的面试非常有实践性，全部是写代码。没有抽象和理论上的东西（注：作者是个行业派），其他的面试官很可能会问这些问题，但是我认为他们前端编程的能力是值得商榷的。我问的问题大多看上去非常简单，但是每组问题都能让我考查侯选人某一方面 JavaScript 的知识。 16 | 17 | 18 | ## 第一部分：Object Prototypes (对象原型) 19 | 20 | 刚开始很简单。我会让侯选人去定义一个方法，传入一个string类型的参数，然后将string的每个字符间加个空格返回，例如： 21 | 22 | spacify('hello world') // => 'h e l l o w o r l d' 23 | 24 | 尽管这个问题似乎非常简单，其实这是一个很好的开始，尤其是对于那些未经过电话面试的侯选人——他们很多人声称精通 JavaScript ，但通常连一个简单的方法都不会写。 25 | 26 | 下面是正确答案，有时侯选人可能会用一个循环，这也是一种可接受的答案。 27 | 28 | function spacify(str) { 29 | return str.split('').join(' '); 30 | } 31 | 32 | 接下来，我会问侯选人，如何把这个方法放入 String 对象上面，例如： 33 | 34 | 'hello world'.spacify(); 35 | 36 | 问这个问题可以让我考察侯选人是否对 function prototypes (方法原型)有一个基本的理解。这个问题会经常引起一些有意思的讨论：直接在对象的原型（prototypes）上添加方法是否安全，尤其是在 Object 对象上。最后的答案可能会像这样： 37 | 38 | String.prototype.spacify = function(){ 39 | return this.split('').join(' '); 40 | }; 41 | 42 | 到这儿，我通常会让侯选人解释一下函数声明和函数表达式的区别。 43 | 44 | 45 | ## 第二部分：参数 arguments 46 | 47 | 下一步我会问一些简单的问题去考察侯选人是否理解参数（arguments）对象。我会让他们定义一个未定义的log方法作为开始。 48 | 49 | log('hello world') 50 | 51 | 我会让侯选人去定义log，然后它可以代理console.log的方法。正确的答案是下面几行代码，其实更好的侯选人会直接使用 apply. 52 | 53 | function log(msg)　{ 54 | console.log(msg); 55 | } 56 | 57 | 他们一旦写好了，我就会说我要改变我调用 log 的方式，传入多个参数。我会强调我传入参数的个数是不定的，可不止两个。这里我举了一个传两个参数的例子。 58 | 59 | log('hello', 'world'); 60 | 61 | 希望你的侯选人可以直接使用 apply 。有时人他们可能会把 apply 和 call 搞混了，不过你可以提醒他们让他们微调一下。传入 console 的上下文也非常重要。 62 | 63 | function log(){ 64 | console.log.apply(console, arguments); 65 | }; 66 | 67 | 接下来我会让侯选人给每一个 log 消息添加一个"(app)"的前辍，比如： 68 | 69 | '(app) hello world' 70 | 71 | 现在可能有点麻烦了。好的侯选人知道 arugments 是一个伪数组，然后会将他转化成为标准数组。通常方法是使用 Array.prototype.slice ，像这样： 72 | 73 | function log(){ 74 | var args = Array.prototype.slice.call(arguments); 75 | args.unshift('(app)'); 76 | 77 | console.log.apply(console, args); 78 | }; 79 | 80 | ## 第三部分：上下文 81 | 82 | 下一组问题是考察侯选人对上下文和 this 的理解。我先定义了下面一个例子。注意 count 属性不是只读取当前下下文的。 83 | 84 | var User = { 85 | count: 1, 86 | 87 | getCount: function() { 88 | return this.count; 89 | } 90 | }; 91 | 92 | 我又写了下面几行，然后问侯选人log输出的会是什么。 93 | 94 | console.log(User.getCount()); 95 | 96 | var func = User.getCount; 97 | console.log(func()); 98 | 99 | 这种情况下，正确的答案是1和 undefined 。你会很吃惊，因为有很多人被这种最基础的上下文问题绊倒。func 是在 winodw 的上下文中被执行的，所以会访问不到count属性。我向侯选人解释了这点，然后问他们怎么样保证User总是能访问到func的上下文，即返回正即的值：1 100 | 101 | 正确的答案是使用 Function.prototype.bind ，例如： 102 | 103 | var func = User.getCount.bind(User); 104 | console.log(func()); 105 | 106 | 接下来我通常会说这个方法对老版本的浏览器不起作用，然后让侯选人去解决这个问题。很多弱一些的侯选人在这个问题上犯难了，但是对于你来说雇佣一个理解apply和call的侯选人非常重要。 107 | 108 | Function.prototype.bind = Function.prototype.bind || function(context){ 109 | var self = this; 110 | 111 | return function(){ 112 | return self.apply(context, arguments); 113 | }; 114 | } 115 | 116 | ## 第四部分：弹出窗口（Overlay library） 117 | 118 | 面试的最后一部分，我会让侯选人做一些实践，通过做一个‘弹出窗口’的库。我发现这个非常有用，它可以全面地展示一名前端工程师的技能：HTML,CSS和JavaScript。如果侯选人通过了前面的面试，我会马上让他们回答这个问题。 119 | 120 | 实施方案是由侯选人自己决定的，但是我也希望他们能通过以下几点来实现： 121 | 122 | 在遮罩中最好使用position中的fixed代替absolute属性，这样即使在滚动的时侯，也能始终让遮罩始盖住整个窗口。当侯选人忽略时我会提示他们这一点，并让他们解释fixed和absolute定位的区别。 123 | 124 | .overlay { 125 | position: fixed; 126 | left: 0; 127 | right: 0; 128 | bottom: 0; 129 | top: 0; 130 | background: rgba(0,0,0,.8); 131 | } 132 | 133 | 他们如何让里面的内容居中也是需要考察的一点。一些侯选人会选择CSS和绝对定位，如果内容有固定的宽、高这是可行的。否则就要使用JavaScript. 134 | 135 | .overlay article { 136 | position: absolute; 137 | left: 50%; 138 | top: 50%; 139 | margin: -200px 0 0 -200px; 140 | width: 400px; 141 | height: 400px; 142 | } 143 | 144 | 我也会让侯选人确保当遮罩被点击时要自动关闭，这会很好地考查事件冒泡机制的机会。通常侯选人会在overlay上面直接绑定一个点击关闭的方法。 145 | 146 | $('.overlay').click(closeOverlay); 147 | 148 | 这是个方法，不过直到你认识到点击窗口里面的东西也会关闭overlay的时侯——这明显是个BUG。解决方法是检查事件的触发对象和绑定对象是否一致，从而确定事件不是从子元素里面冒上来的，就像这样： 149 | 150 | $('.overlay').click(function(e){ 151 | if (e.target == e.currentTarget) 152 | closeOverlay(); 153 | }); 154 | 155 | ## 其他方面 156 | 157 | 当然这些问题只能覆盖前端一点点的知识的，还有很多其他的方面你有可能会问到，像性能，HTML5 API, AMD和CommonJS模块模型，构造函数（constructors），类型和盒子模型（box model）。根据侯选人的情况，我经常会随机提些问题。 158 | 159 | 160 | 原文地址： [blog.sourcing.io](http://blog.sourcing.io/interview-questions?utm_source=ourjs.com) 161 | -------------------------------------------------------------------------------- /resume/1.md: -------------------------------------------------------------------------------- 1 | # Web前端程序员简历模板 2 | 3 | 本简历模板由国内首家互联网人才拍卖网站「 [JobDeer.com](http://www.jobdeer.com) 」提供。 4 | 5 | （括号里的是我们的顾问编写的说明，建议在简历书写完成后统一删除） 6 | 7 | ## 先讲讲怎样才是一份好的技术简历 8 | 9 | 首先，一份好的简历不光说明事实，更通过FAB模式来增强其说服力。 10 | 11 | - Feature：是什么 12 | - Advantage：比别人好在哪些地方 13 | - Benefit：如果雇佣你，招聘方会得到什么好处 14 | 15 | 其次，写简历和写议论文不同，过分的论证会显得自夸，反而容易引起反感，所以要点到为止。这里的技巧是，提供论据，把论点留给阅读简历的人自己去得出。放论据要具体，最基本的是要数字化，好的论据要让人印象深刻。 16 | 17 | 举个例子，下边内容是虚构的： 18 | 19 | 2006年，我参与了手机XX网发布系统WAPCMS的开发（```这部分是大家都会写的```）。作为核心程序员，我不但完成了网站界面、调度队列的开发工作，更提出了高效的组件级缓存系统，通过碎片化缓冲有效的提升了系统的渲染效率。（```这部分是很多同学忘掉的，要写出你在这个项目中具体负责的部分，以及你贡献出来的价值。```）在该系统上线后，Web前端性能从10QPS提升到200QPS，服务器由10台减少到3台（``` 通过量化的数字来增强可信度 ```）。2008年我升任WAPCMS项目负责人，带领一个3人小组支持着每天超过2亿的PV（``` 这就是Benefit。你能带给前雇主的价值，也就是你能带给新雇主的价值。 ```）。 20 | 21 | 有同学问，如果我在项目里边没有那么显赫的成绩可以说怎么办？讲不出成绩时，就讲你的成长。因为学习能力也是每家公司都看中的东西。你可以写你在这个项目里边遇到了一个什么样的问题，别人怎么解决的，你怎么解决的，你的方案好在什么地方，最终这个方案的效果如何。 22 | 23 | 具体、量化、有说服力，是技术简历特别需要注重的地方。 24 | 25 | （以上内容在写完简历后，对每一段进行评估，完成后再删除） 26 | 27 | --- 28 | 29 | 30 | # 联系方式 31 | （HR会打印你的简历，用于在面试的时候联系，所以联系方式放到最上边会比较方便） 32 | 33 | - 手机：135******** （```如果是外地手机，可注明。如经常关机，要写上最优联系时间```） 34 | - Email：goodman@gmail.com （```虽然我觉得QQ邮箱无所谓，不过有些技术人员比较反感，建议用G```） 35 | - QQ/微信号：6*******（```提供一个通过网络可以联系到你的方式```） 36 | 37 | --- 38 | 39 | # 个人信息 40 | 41 | - 胶布帝/男/1990 42 | - 本科/萌鹿大学计算机系 43 | - 工作年限：3年 44 | - 微博：[@JobDeer](http://weibo.com/jobdeer) （``` 如果没有技术相关内容，也可以不放 ```） 45 | - 技术博客：http://blog.github.io ( ``` 使用GitHub Host的Big较高 ``` ) 46 | - Github：http://github.com/geekcompany ( ``` 有原创repo的Github帐号会极大的提升你的个人品牌 ``` ) 47 | 48 | - 期望职位：Web前端高级程序员，应用架构师 49 | - 期望薪资：税前月薪15k~20k，特别喜欢的公司可例外 50 | - 期望城市：北京 51 | 52 | --- 53 | 54 | # 工作经历 55 | （工作经历按逆序排列，最新的在最前边，按公司做一级分组，公司内按二级分组） 56 | 57 | ## ABC公司 （ 2012年9月 ~ 2014年9月 ） 58 | 59 | ### DEF项目 60 | 我在此项目负责了哪些工作，分别在哪些地方做得出色/和别人不一样/成长快，这个项目中，我最困难的问题是什么，我采取了什么措施，最后结果如何。这个项目中，我最自豪的技术细节是什么，为什么，实施前和实施后的数据对比如何，同事和领导对此的反应如何。 61 | 62 | 63 | ### GHI项目 64 | 我在此项目负责了哪些工作，分别在哪些地方做得出色/和别人不一样/成长快，这个项目中，我最困难的问题是什么，我采取了什么措施，最后结果如何。这个项目中，我最自豪的技术细节是什么，为什么，实施前和实施后的数据对比如何，同事和领导对此的反应如何。 65 | 66 | 67 | ### 其他项目 68 | 69 | （每个公司写2~3个核心项目就好了，如果你有非常大量的项目，那么按分类进行合并，每一类选一个典型写出来。其他的一笔带过即可。） 70 | 71 | 72 | ## JKL公司 （ 2010年3月 ~ 2012年8月 ） 73 | 74 | ### MNO项目 75 | 我在此项目负责了哪些工作，分别在哪些地方做得出色/和别人不一样/成长快，这个项目中，我最困难的问题是什么，我采取了什么措施，最后结果如何。这个项目中，我最自豪的技术细节是什么，为什么，实施前和实施后的数据对比如何，同事和领导对此的反应如何。 76 | 77 | 78 | ### PQR项目 79 | 我在此项目负责了哪些工作，分别在哪些地方做得出色/和别人不一样/成长快，这个项目中，我最困难的问题是什么，我采取了什么措施，最后结果如何。这个项目中，我最自豪的技术细节是什么，为什么，实施前和实施后的数据对比如何，同事和领导对此的反应如何。 80 | 81 | 82 | ### 其他项目 83 | 84 | （每个公司写2~3个核心项目就好了，如果你有非常大量的项目，那么按分类进行合并，每一类选一个典型写出来。其他的一笔带过即可。） 85 | 86 | --- 87 | 88 | # 开源项目和作品 89 | （这一段用于放置工作以外的、可证明你的能力的材料） 90 | 91 | ## 开源项目 92 | （对于程序员来讲，没有什么比Show me the code能有说服力了） 93 | 94 | - [STU](http://github.com/yourname/projectname)：项目的简要说明，Star和Fork数多的可以注明 95 | - [WXYZ](http://github.com/yourname/projectname)：项目的简要说明，Star和Fork数多的可以注明 96 | 97 | ## 技术文章 98 | （挑选你写作或翻译的技术文章，好的文章可以从侧面证实你的表达和沟通能力，也帮助招聘方更了解你） 99 | 100 | - [一个产品经理眼中的云计算：前生今世和未来](http://get.jobdeer.com/706.get) 101 | - [来自HeroKu的HTTP API 设计指南(翻译文章)](http://get.jobdeer.com/343.get) （ ```好的翻译文章可以侧证你对英文技术文档的阅读能力```） 102 | 103 | ## 演讲和讲义 104 | （放置你代表公司在一些技术会议上做过的演讲，以及你在公司分享时制作的讲义） 105 | 106 | - 2014架构师大会演讲：[如何通过Docker优化内部开发](http://jobdeer.com) 107 | - 9月公司内部分享：[云计算的前生今世](http://jobdeer.com) 108 | 109 | # 技能清单 110 | （我一般主张将技能清单写入到工作经历里边去。不过很难完整，所以有这么一段也不错） 111 | 112 | 以下均为我熟练使用的技能 113 | 114 | - Web开发：PHP/Hack/Node 115 | - Web框架：ThinkPHP/Yaf/Yii/Lavaral/LazyPHP 116 | - 前端框架：Bootstrap/AngularJS/EmberJS/HTML5/Cocos2dJS/ionic 117 | - 前端工具：Bower/Gulp/SaSS/LeSS/PhoneGap 118 | - 数据库相关：MySQL/PgSQL/PDO/SQLite 119 | - 版本管理、文档和自动化部署工具：Svn/Git/PHPDoc/Phing/Composer 120 | - 单元测试：PHPUnit/SimpleTest/Qunit 121 | - 云和开放平台：SAE/BAE/AWS/微博开放平台/微信应用开发 122 | 123 | ## 参考技能关键字 124 | 125 | 本技能关键字列表是从最近招聘Web前端的数百份JD中统计出来的，括号中是出现的词频。如果你的简历要投递给有机器（简历分选系统）和不如机器（不懂技术的HR）筛选简历环节的地方，请一定从下边高频关键词中选择5～10个适合你自己的。 126 | 127 | - web(889) 128 | - javascript(596) 129 | - css(555) 130 | - html(430) 131 | - jquery(323) 132 | - html5(312) 133 | - js(311) 134 | - ajax(196) 135 | - css3(176) 136 | - w3c(168) 137 | - div(156) 138 | - php(134) 139 | - xhtml(106) 140 | - java(92) 141 | - ui(78) 142 | - photoshop(75) 143 | - dom(63) 144 | - xml(56) 145 | - json(54) 146 | - yui(51) 147 | - flash(45) 148 | - bootstrap(43) 149 | - python(43) 150 | - http(38) 151 | - dreamweaver(38) 152 | - ext(33) 153 | - linux(33) 154 | - seo(32) 155 | - prototype(29) 156 | - chrome(28) 157 | - pc(28) 158 | - nodejs(28) 159 | - firefox(26) 160 | - ps(25) 161 | - angularjs(25) 162 | - fireworks(24) 163 | - extjs(23) 164 | - safari(22) 165 | - www(22) 166 | - mobile(22) 167 | - jsp(22) 168 | - mvc(22) 169 | - backbone(21) 170 | - node(21) 171 | - ruby(20) 172 | - github(19) 173 | - ios(18) 174 | - ie6(18) 175 | - android(18) 176 | - asp(18) 177 | - sass(17) 178 | - wap(16) 179 | - mootools(16) 180 | - ie(16) 181 | - mysql(15) 182 | - flex(14) 183 | - firebug(13) 184 | - bom(13) 185 | - webapp(12) 186 | - less(12) 187 | - web2(11) 188 | - angular(10) 189 | - git(10) 190 | - dw(10) 191 | - as(10) 192 | - mac(10) 193 | - psd(8) 194 | - o2o(7) 195 | - dojo(7) 196 | - actionscript3(6) 197 | - grunt(5) 198 | - ue(5) 199 | - zepto(5) 200 | - actionscript(5) 201 | - ie8(5) 202 | - coffeescript(5) 203 | - django(4) 204 | 205 | 206 | 207 | 208 | --- 209 | 210 | # 致谢 211 | 感谢您花时间阅读我的简历，期待能有机会和您共事。 212 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 这里将收集我做过的所有的前端面试笔试题，并根据自己的理解提供解答，以及一些关于前端找工作方面的经验等。我将持续更新和维护该仓库，更欢迎你和我一起来维护:smile::smile::smile:。 2 | 3 | 欢迎拍砖，一起刷题，涨姿势，get新技能，找到好工作。 4 | 5 | 6 | Sponsor 7 | 8 | 9 | 10 | 11 | ## 前端笔试面试题部分 12 | 13 | |试题链接|原题概述|标签分类|更新状态| 14 | |---|---|---|---| 15 | |[1.md](/questions/1.md) |Front End Web Development Quiz CSS部分| CSS |已完结 :v: | 16 | |[2.md](/questions/2.md)|Front End Web Development Quiz HTML部分| HTML |已完结 :v: | 17 | |[3.md](/questions/3.md)|FEX 面试题| General|待完善 :punch: | 18 | |[4.md](/questions/4.md)|前端面试常见问题| General|待完善 :punch: | 19 | |[5.md](/questions/5.md)|前端面试HTML 相关问题| HTML|已完结 :v: | 20 | |[6.md](/questions/6.md)|前端面试CSS 相关问题| CSS |待完善 :punch: | 21 | |[7.md](/questions/7.md)|前端面试JS 相关问题|JavaScript|待完善 :punch: | 22 | |[8.md](/questions/8.md)|前端面试jQuery 相关问题|jQuery|待解答 :fist: | 23 | |[9.md](/questions/9.md)|前端面试代码相关问题|JavaScript|待解答 :fist: | 24 | |[10.md](/questions/10.md)|前端面试有趣的问题| General|待解答 :fist: | 25 | |[11.md](/questions/11.md)|一些面试题| General|待完善 :punch: | 26 | |12.md|[BAT及互联网公司2014前端笔试面试题--HTML,CSS篇](http://www.cnblogs.com/coco1s/p/4034937.html)|HTML,CSS|待添加 :smile:| 27 | |13.md|[BAT及互联网公司2014前端笔试面试题--JavaScript篇](http://www.cnblogs.com/coco1s/p/4029708.html)|JavaScript|待添加 :smile:| 28 | |14.md|[收集的前端面试题和答案](https://github.com/qiu-deqing/FE-interview)|General|待添加 :smile:| 29 | |15.md|[各大互联网公司2014前端笔试面试题–JavaScript篇](http://www.codeceo.com/article/2014-javascript-interview.html#13688-tsina-1-6076-57d4d90508c08d162896a47818ce968b)|JavaScript|待添加 :smile:| 30 | |16.md|[2014年最新前端开发面试题](https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions/Questions-and-Answers)| General|待添加 :smile: | 31 | |17.md|[前端面试资源汇总](https://github.com/infp/Front-end-Interview)| General|待添加 :smile: | 32 | |18.md|[5个典型的JavaScript面试题（上）](http://web.jobbole.com/80564/)|JavaScript|待添加 :smile:| 33 | |19.md|[再来5个JavaScript面试题](http://web.jobbole.com/81785/)|JavaScript|待添加 :smile:| 34 | |20.md|[BAT web前端开发方向校招都考些什么？](http://www.zhihu.com/question/26188893)|General|待添加 :smile: | 35 | |21.md|[Eleme 笔试题](https://github.com/sofish/hire)|General|待添加 :smile: | 36 | |22.md|[一些JS题目的解答](https://github.com/xufei/blog/blob/master/posts/2013-12-02-%E4%B8%80%E4%BA%9BJS%E9%A2%98%E7%9B%AE%E7%9A%84%E8%A7%A3%E7%AD%94.md)|JavaScript|待添加 :smile: | 37 | |23.md|[最全前端面试问题及答案总结](https://github.com/allenGKC/Front-end-Interview-questions)|General|待添加 :smile: | 38 | |24.md|[阿里航旅前端开发校招面试题 ](https://github.com/jayli/jayli.github.com/issues/19)|General|待添加 :smile: | 39 | |25.md|[ElemeFE Node 面试题](https://github.com/ElemeFE/node-interview)|General|待添加 :smile: | 40 | 41 | ## 前端面经部分 42 | 43 | 44 | 1. [面试前端工程师](/interview/1.md) 45 | 2. [知乎|web前端开发方向校招考什么](http://www.zhihu.com/question/26188893) :arrow_upper_right: 46 | 3. [知乎|腾讯web前端方向实习笔试准备](http://www.zhihu.com/question/20966351/answer/24401878) :arrow_upper_right: 47 | 4. [如何在面试中识别一个坏老板](http://get.jobdeer.com/6384.get/) :arrow_upper_right: 48 | 5. [谈谈面试与面试题](https://github.com/wintercn/blog/issues/4) @ [wintercn](https://github.com/wintercn) :arrow_upper_right: 49 | 6. [说说最近几次面试](http://www.cnblogs.com/yexiaochai/p/4366051.html) @ [叶小钗](http://weibo.com/yiquinian) :arrow_upper_right: 50 | 7. [在LinkedIn做面试官的故事](https://baijia.baidu.com/s?old_id=52449) :arrow_upper_right: 51 | 8. [写给前端面试者](http://www.w3cplus.com/css/write-to-front-end-developer-interview.html) @大漠 :arrow_upper_right: 52 | 53 | 54 | ## 简历怎么写? 55 | 56 | 1. [精益技术简历之道](http://www.cnblogs.com/figure9/p/lean-technical-resume.html) @ [peng_gong](http://weibo.com/pegong) :arrow_upper_right: 57 | 2. [如何写好技术简历 ](http://get.jobdeer.com/744.get) @ [easychen](https://github.com/easychen) :arrow_upper_right: 58 | 3. [Web 前端程序员简历模板](/resume/1) @ [easychen](https://github.com/easychen) 59 | 4. [吐嘈「个人简历」](http://mp.weixin.qq.com/s?__biz=MzA5NDY0ODkxNA==&mid=200168752&idx=1&sn=348edc7956f1ac9652aa2523b902bef5&scene=4) @ [rank](https://www.zhihu.com/people/rank) :arrow_upper_right: 60 | 5. [如何写打动人的「个人简历」](http://mp.weixin.qq.com/s?__biz=MzA5NDY0ODkxNA==&mid=200173772&idx=1&sn=895a5c66548c1b4a72153b2217350ca1&scene=4) @[rank](https://www.zhihu.com/people/rank) :arrow_upper_right: 61 | 6. [使用 vue 生成漂亮的简历](https://github.com/salomonelli/best-resume-ever) :arrow_upper_right: 62 | 63 | 64 | 65 | 66 | **Github Issue 博客平台** 67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /questions/5.md: -------------------------------------------------------------------------------- 1 | # [前端工作面试HTML相关问题](https://github.com/darcyclarke/Front-end-Developer-Interview-Questions#html) 2 | 3 | * Q: `doctype`（文档类型）的作用是什么？ 4 | 5 | A: 在HTML中 `doctype` 有两个主要目的。 6 | - 对文档进行有效性验证: 7 | 8 | 它告诉用户代理和校验器这个文档是按照什么DTD 写的。这个动作是被动的，每次页面加载时，浏览器并不会下载DTD 并检查合法性，只有当手动校验页面时才启用。 9 | 10 | - 决定浏览器的呈现模式: 11 | 12 | 对于实际操作，通知浏览器读取文档时用哪种解析算法。如果没有写，则浏览器则根据自身的规则对代码进行解析，可能会严重影响HTML 排版布局。浏览器有三种方式解析HTML文档。 13 | * 非怪异（标准）模式 14 | * 怪异模式 15 | * 部分怪异（近乎标准）模式 16 | 17 | 关于IE浏览器的文档模式，浏览器模式，严格模式，怪异模式，DOCTYPE标签，可详细阅读[模式？标准！](http://padding.me/blog/2014/07/04/mode-or-standard/)的内容。 18 | 19 | * Q: 浏览器标准模式和怪异模式之间的区别是什么？ 20 | 21 | A: 在“标准模式”(Standards Mode) 页面按照 HTML 与 CSS 的定义渲染，而在“怪异模式”(Quirks Mode)就是浏览器为了兼容很早之前针对旧版本浏览器设计、并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式。浏览器基于页面中文件类型描述的存在以决定采用哪种渲染模式；如果存在一个完整的`DOCTYPE`则浏览器将会采用标准模式，而如果它缺失则浏览器将会采用怪异模式。 22 | 23 | 强烈建议阅读加深理解：[怪异模式（Quirks Mode）对 HTML 页面的影响](http://www.ibm.com/developerworks/cn/web/1310_shatao_quirks/)，这里列下浏览器标准模式和怪异模式的区别： 24 | 25 | 1. 盒模型： 26 | 27 | 在怪异模式下，盒模型为IE盒模型而非标准模式下的W3C 盒模型：在 IE 盒模型中， 28 | box width = content width + padding left + padding right + border left + border right， 29 | box height = content height + padding top + padding bottom + border top + border bottom。 30 | 而在 W3C 标准的盒模型中，box 的大小就是 content 的大小。 31 | 32 | 2. 图片元素的垂直对齐方式: 33 | 34 | 对于`inline`元素和`table-cell`元素，在 IE Standards Mode 下 vertical-align 属性默认取值为`baseline`。而当`inline`元素的内容只有图片时，如`table`的单元格`table-cell`。在 IE Quirks Mode 下，`table`单元格中的图片的 `vertical-align` 属性默认为`bottom`，因此，在图片底部会有几像素的空间。 35 | 36 | 3. ``元素中的字体: 37 | 38 | CSS 中，描述`font`的属性有`font-family`，`font-size`，`font-style`，`font-weigh`,上述属性都是可以继承的。而在 IE Quirks Mode 下，对于`table` 元素，字体的某些属性将不会从`body`或其他封闭元素继承到`table`中，特别是 `font-size`属性。 39 | 40 | 4. 内联元素的尺寸: 41 | 42 | 在 IE Standards Mode 下，non-replaced inline 元素无法自定义大小，而在 IE Quirks Mode 下，定义这些元素的`width`和`height` 属性，能够影响该元素显示的大小尺寸。 43 | 44 | 5. 元素的百分比高度: 45 | 46 | CSS 中对于元素的百分比高度规定如下，百分比为元素包含块的高度，不可为负值。如果包含块的高度没有显式给出，该值等同于“auto”（即取决于内容的高度）。所以百分比的高度必须在父元素有声明高度时使用。 47 | 48 | 当一个元素使用百分比高度时，在 IE Standards Mode 下，高度取决于内容的变化，而在 Quirks Mode 下，百分比高度则被正确应用。 49 | 50 | 6. 元素溢出的处理： 51 | 52 | 在 IE Standard Mode 下，`overflow`取默认值 `visible`，即溢出可见，这种情况下，溢出内容不会被裁剪，呈现在元素框外。而在 Quirks Mode 下，该溢出被当做扩展`box`来对待，即元素的大小由其内容决定，溢出不会被裁剪，元素框自动调整，包含溢出内容。 53 | 54 | 另可参考阅读： 55 | 56 | 57 | 58 | * Q: 使用 XHTML 的局限有哪些？ 59 | * 如果页面使用 'application/xhtml+xml' 会有什么问题吗？ 60 | 61 | A: xhtml 语法要求严格，必须有`head`、`body` 每个dom 必须要闭合。空标签也必须闭合。例如``, `
`, ``等。另外要在属性值上使用双引号。一旦遇到错误，立刻停止解析，并显示错误信息。 62 | 如果页面使用'application/xhtml+xml',一些老的浏览器会不兼容。 63 | 64 | * Q: 如果网页内容需要支持多语言，你会怎么做？ 65 | * 在设计和开发多语言网站时，有哪些问题你必须要考虑？ 66 | 67 | A: 编码使用`UTF-8`，空间域名需要支持多浏览地址,准备多套模板。 68 | 在设计和开发多语言网站时，需要考虑 69 | - 应用字符集的选择 70 | - 语言书写习惯&导航结构 71 | - 数据库驱动型网站 72 | - css 盒子会因为内容尺寸不一样出现不对齐偏移 73 | 74 | * Q: `data-`属性的作用是什么？ 75 | 76 | A: `data-`为前端开发者提供自定义的属性，这些属性集可以通过对象的`dataset`属性获取，不支持该属性的浏览器可以通过`getAttribute`方法获取: 77 | 78 | `
...
` 79 | 80 | `div.dataset.commentNum; // 10` 81 | 82 | 需要注意的是，`data-`之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。并不是所有的浏览器都支持.`dataset`属性，测试的浏览器中只有Chrome 和Opera 支持。 83 | 84 | 即：当没有合适的属性和元素时，自定义的 data 属性是能够存储页面或 App 的私有的自定义数据。 85 | 86 | > Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements. 87 | 88 | * Q:如果把 HTML5 看作做一个开放平台，那它的构建模块有哪些？ 89 | 90 | A: 开放网络平台: 91 | 92 | > The Open Web Platform is the collection of open (royalty-free) technologies which enables the Web. Using the Open Web Platform, everyone has the right to implement a software component of the Web without requiring any approvals or waiving license fees. 93 | 94 | 开放网络平台（Open Web Platform）是一些开放的（免版权）技术的集合，这些技术激活了互联网。使用开放网络平台时，每个人都有权实现 Web 上的一个组件，而不用向任何人索取许可和证书。 95 | 96 | 97 | 将 HTML5 看做开放网络平台，那它的构建模块有哪些？我想，所谓构建模块，指的应该是开放网络平台这个技术集合中的技术。 98 | 99 | - HTML 100 | - DOM 101 | - CSS 102 | - SVG 103 | - MathML 104 | - Web APIs 105 | + Canvas WebGL 106 | + Audio 107 | + Web Storage 108 | + File, File System 109 | + History, contentEditable, Drag & Drop, HTML Editing Commands 110 | + Web Sockets 111 | + Web Workers 112 | + Server-Send Events 113 | + XMLHttpRequest 114 | + Geolocation, Device Orientation 115 | + DOM Events, Touch Events, Progress Events 116 | + Custom application development 117 | + Clipboard and events 118 | + Web Notifications, Web Messaging 119 | + Offine Web Applications 120 | + Media Capture API 121 | + Timing control for script-based animations, Page Visibility, Navigation + Timing, Resource Timing 122 | + Selectors 123 | + DOM Traversal, DOM XPath, Element Traversal 124 | + EcmaScript / JavaScript 125 | + HTTP 126 | + URI 127 | + Media Accessibility Checklist 128 | 129 | 该答案引自: 130 | 131 | * Q: 请描述一下 cookies，sessionStorage 和 localStorage 的区别？ 132 | 133 | A: sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，可以方便的在web请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。 134 | 135 | sessionStorage、localStorage、cookie都是在浏览器端存储的数据，其中sessionStorage 的概念很特别，引入了一个“浏览器窗口”的概念。sessionStorage 是在同源的同窗口（或tab）中，始终存在的数据。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage 即被销毁。同时“独立”打开的不同窗口，即使是同一页面，sessionStorage 对象也是不同的 136 | 137 | cookies会发送到服务器端。其余两个不会。 138 | 139 | Microsoft 指出 Internet Explorer 8 增加cookie 限制为每个域名50个，但IE7 似乎也允许每个域名50个cookie。Firefox 每个域名cookie 限制为50个。Opera每个域名cookie 限制为30个。Firefox 和Safari 允许cookie 多达4097个字节，包括名（name）、值（value）和等号。Opera 许cookie 多达4096个字节，包括：名（name）、值（value）和等号。Internet Explorer 允许cookie 多达4095个字节，包括：名（name）、值（value）和等号。 140 | 141 | - Cookie 142 | + 每个域名存储量比较小（各浏览器不同，大致4K） 143 | + 所有域名的存储量有限制（各浏览器不同，大致4K） 144 | + 有个数限制（各浏览器不同） 145 | + 会随请求发送到服务器 146 | - LocalStorage 147 | + 永久存储 148 | + 单个域名存储量比较大（推荐5MB，各浏览器不同） 149 | + 总体数量无限制 150 | - SessionStorage 151 | + 只在 Session 内有效 152 | + 存储量更大（推荐没有限制，但是实际上各浏览器也不同） 153 | 154 | 155 | * 请描述一下 `GET` 和 `POST` 的区别? 156 | 157 | A: 区别如下： 158 | * get 向指定的资源请求数据,请求的数据会附在URL 之后,就是把数据放置在请求行（request line）中），以?分割URL和传输数据，多个参数用&连接； 159 | * post 向指定的资源提交要被处理的数据。get 方法，查询请求是在url中显示的，有长度限制，get 方法是安全幂等的。而post 方法请求是封装在http 消息包体中 160 | 161 | &|get|post 162 | ---|---|---- 163 | 后退/刷新|无害|请求重新提交 164 | 书签|可做书签|不可做 165 | 缓存|可被缓存|不能被缓存 166 | 历史|保留在浏览器记录里|不保留 167 | 对数据长度限制|限制（2048字符）|不限制 168 | 安全性|url中暴露数据|相对安全 169 | 可见性|url中可见|不可见 170 | 171 | 总结： 172 | - 对于get 来说，是向服务器端请求数据，其请求在url 中可见，其长度有限制（2048字符）个体方法是安全幂等，这里的安全是指用于获取信息而非修改信息，幂等是指每次请求得到的结果都一样。 173 | - 对于post 来说，是向服务器端提交数据，每次刷新或者后退都会重新提交，post 请求的数据封装在http 请求的首部里。 174 | 175 | 176 | tips: 以上部分答案参考自： 177 | 178 | - [paddingme](http://padding.me) 179 | - [Witcher42](http://witcher42.github.io/) 180 | - [郑州网建](http://camnpr.com/) 181 | -------------------------------------------------------------------------------- /questions/4.md: -------------------------------------------------------------------------------- 1 | # [前端工作面试常见问题](https://github.com/darcyclarke/Front-end-Developer-Interview-Questions#general) 2 | 3 | **备注**: [Rebecca Murphey](http://rmurphey.com/) 的 [Baseline For Front-End Developers](http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/) 是你在准备面试前应该阅读的绝佳资源。 4 | 5 | 6 | **记住：** 很多问题都是开放的，可以引发有趣的讨论。这比直接的答案更能体现此人的能力。 7 | 8 | ###常见问题： 9 | 10 | * Q: 你在昨天/本周学到了什么？ 11 | 12 | * Q: 编写代码的哪些方面能够使你兴奋或感兴趣？ 13 | 14 | * Q: 在制作一个Web应用或Web站点的过程中，你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的？ 15 | 16 | A: 17 | 安全性： 18 | - [从“黑掉Github”学Web安全开发](http://coolshell.cn/articles/11021.html) 19 | - [零基础如何学习 Web 安全？](http://www.zhihu.com/question/21606800) 20 | - [Web前端－－黑客技术揭秘（菜鸟知识）](http://www.myhack58.com/Article/60/61/2014/48629.htm) 21 | - [Web前端攻防](http://drops.wooyun.org/tips/2686) 22 | - [前端冷知识集锦,很多都是web安全能用到的小技巧](http://www.toolmao.com/things_you_dont_know_about_frontend) 23 | 24 | 高性能： 25 | - [雅虎的34条黄金准则](http://www.ha97.com/2710.html) 26 | - [【高性能前端1】高性能HTML](http://www.alloyteam.com/2012/10/high-performance-html/) 27 | - [【高性能前端2】高性能CSS](http://www.alloyteam.com/2012/10/high-performance-css/) 28 | - [【高性能前端3】高性能JavaScript](http://www.alloyteam.com/2012/10/high-performance-front-end-high-performance-javascript/) 29 | - [【高性能前端4】Appcache Facts 中译版](http://www.alloyteam.com/2012/10/appcache-facts/) 30 | 31 | SEO： 32 | - [SEO在网页制作中的应用](http://www.imooc.com/learn/204) 33 | 34 | * Q: 谈谈你喜欢的开发环境。(例如操作系统，编辑器，浏览器，工具等等) 35 | 36 | A: 37 | - **我要攒钱买MBPR**; 38 | - 操作系统：windows,linux; 39 | - 编辑器：Sublime Text,以前用过一段时间Vim,后来转到Sublime Text; 40 | - 浏览器：Chrome,Firefox; 41 | - 工具：Photoshop,Eclipse,Fiddler 等; 42 | - 前端框架：Bootstarp，jQuery等。 43 | 44 | * Q: 你最熟悉哪一套版本控制系统？ 45 | 46 | A: 47 | - Git 48 | - SVN 49 | 50 | * Q: 你能描述一下当你制作一个网页的工作流程吗？ 51 | 52 | 53 | * Q: 你能描述一下渐进增强和优雅降级之间的不同吗? 54 | * 如果提到了特性检测，可以加分。 55 | 56 | A: 57 | - 渐进增强(progressive enhancement)：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。 58 | - 优雅降级(graceful degradation)：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。 59 | 60 | 61 | 　区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。　 62 | “优雅降级”观点 63 | 64 | 　“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。 65 | 66 | 　在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。 67 | 68 | 　“渐进增强”观点 69 | 70 | 　“渐进增强”观点则认为应关注于内容本身。 71 | 72 | 　内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在 73 | 74 | - [CSS “渐进增强”在web制作中常见应用举例](http://www.zhangxinxu.com/wordpress/2010/04/css-%E6%B8%90%E8%BF%9B%E5%A2%9E%E5%BC%BA%E5%9C%A8web%E5%88%B6%E4%BD%9C%E4%B8%AD%E5%B8%B8%E8%A7%81%E5%BA%94%E7%94%A8%E4%B8%BE%E4%BE%8B/) 75 | - [译)理解“渐进增强(Progressive Enhancement)”](http://ued.taobao.org/blog/2008/10/understanding-progressiveen-hancement-chs-translation/) 76 | - [認識優雅降級與漸進增強](http://augus-blog.logdown.com/posts/143403-graceful_degradation_and_progressive_enhancement) 77 | - [优雅降级和渐进增强](http://hanazawakana.iteye.com/blog/1711556) 78 | - [渐进增强、优雅降级](http://blog.csdn.net/xiongzhengxiang/article/details/7999525) 79 | - [理解前端开发中的优雅降级及渐进增强](http://www.biaodianfu.com/graceful-degradation-progressive-enhancement.html) 80 | - [http://www.w3cfuns.com/blog-5426413-5396597.html](http://www.w3cfuns.com/blog-5426413-5396597.html) 81 | - [渐进增强和优雅降级之间的有什么不同？](http://segmentfault.com/q/1010000000264469) 82 | 83 | * Q: 请解释一下什么是“语义化的 HTML”。 84 | 85 | A: 86 | - [如何理解 web 语义化](http://www.zhihu.com/question/20455165) 87 | - [关于HTML语义化的一些理解](http://www.cnblogs.com/season-huang/p/3548514.html) 88 | - [再谈语义化](http://ued.ctrip.com/blog/?p=2735) 89 | - [语义化标签的实战意义](http://ued.sina.com.cn/?p=157) 90 | - [关于Web语义化—张振强](http://studio.ewe.com.cn/?p=455) 91 | - [语义化标签规范](http://hikejun.com/work/qq/spec/html_reference.html) 92 | 93 | * Q: 你如何对网站的文件和资源进行优化？ 94 | * 期待的解决方案包括： 95 | * 文件合并 96 | * 文件最小化/文件压缩 97 | * 使用 CDN 托管 98 | * 缓存的使用 99 | * 其他 100 | 101 | * Q: 为什么利用多个域名来提供网站资源会更有效？ 102 | * 浏览器同一时间可以从一个域名下载多少资源？ 103 | * 104 | 105 | * Q: 请说出三种减少页面加载时间的方法。（加载时间指感知的时间或者实际加载时间） 106 | 107 | * Q: 如果你参与到一个项目中，发现他们使用 Tab 来缩进代码，但是你喜欢空格，你会怎么做？ 108 | * 建议这个项目使用像 EditorConfig (http://editorconfig.org/) 之类的规范 109 | * 为了保持一致性，接受项目原有的风格 110 | * 直接使用 VIM 的 retab 命令 111 | 112 | * Q: 请写一个简单的幻灯效果页面 113 | * 如果不使用JS来完成，可以加分。 114 | ``` 115 | 116 | 117 | 118 | 135 | 136 | 137 |
138 | 139 | 140 | 141 | 142 |
143 | 147 | 148 | 149 | ``` 150 | 151 | 可以这样写，但是不能支持所有浏览器。 152 | 153 | ``` 154 | 155 | 156 | 157 | 174 | 175 | 176 |
177 | 178 | 179 |
180 |
181 | one 182 | two 183 |
184 | 185 | 186 | ``` 187 | 188 | * Q: 你都使用哪些工具来测试代码的性能？ 189 | * Profiler, JSPerf, Dromaeo 190 | 191 | * Q: 如果今年你打算熟练掌握一项新技术，那会是什么？ 192 | 193 | * Q: Long-Polling, Websockets, SSE(Server-Sent Event) 之间有什么区别？ 194 | 195 | * Q: 请谈一下你对网页标准和标准制定机构重要性的理解。 196 | 197 | A: “一次编码。随处运行”。 198 | 网页标准和标准制定机构都是为了能让web发展的更‘健康’，开发者遵循统一的标准，降低开发难度，开发成本，SEO也会更好做，也不会因为滥用代码导致各种BUG、安全问题，最终提高网站易用性。 摘自: 199 | 200 | * Q: 什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？ 201 | 202 | A: http://blog.csdn.net/laney1206/article/details/8591264 203 | 204 | 205 | * Q: 请尽可能完整得描述下从输入URL到整个网页加载完毕及显示在屏幕上的整个流程 206 | 207 | A: 208 | - [从输入 URL 到页面加载完成的过程中都发生了什么事情？](http://fex.baidu.com/blog/2014/05/what-happen/) 209 | - [从FE的角度上再看输入url后都发生了什么](http://div.io/topic/609) 210 | - [当你输入一个网址，实际会发生什么?](http://blog.jobbole.com/33951/) 211 | - [从输入 URL 到页面加载完的过程中都发生了什么事情 —— 网络优化篇](http://oilbeater.com/%E6%8A%80%E6%9C%AF%E7%9B%B8%E5%85%B3/2014/05/09/from-url-to-webpage.html) 212 | 213 | 214 | 215 | -------------------------------------------------------------------------------- /questions/7.md: -------------------------------------------------------------------------------- 1 | # [前端工作面试 JS 相关问题](https://github.com/darcyclarke/Front-end-Developer-Interview-Questions#js) 2 | 3 | * Q：解释下事件代理。 4 | 5 | A: 当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。这主要得益于浏览器的事件冒泡机制。 6 | 7 | ``` 8 | var delegate = function(client, clientMethod) { 9 | return function() { 10 | return clientMethod.apply(client, arguments); 11 | } 12 | } 13 | 14 | var agentMethod = delegate (client, clientMethod); 15 | agentMethod(); 16 | ``` 17 | 18 | 相关阅读： 19 | - [JavaScript事件代理和委托（Delegation）](http://www.cnblogs.com/owenChen/archive/2013/02/18/2915521.html) 20 | - [事件代理](http://www.cnblogs.com/owenChen/archive/2013/02/18/2915521.html) 21 | - [事件代理的应用](http://tangram.baidu.com/article/138) 22 | 23 | * Q: 解释下 JavaScript 中 `this` 是如何工作的。 24 | 25 | 26 | A: `this` 在 JavaScript 中主要由以下五种使用场景。 27 | 28 | - 作为函数调用，`this` 绑定全局对象，浏览器环境全局对象为 window 。 29 | * 内部函数内部函数的 `this` 也绑定全局对象，应该绑定到其外层函数对应的对象上，这是 JavaScript的缺陷，用`that`替换。 30 | - 作为构造函数使用，`this` 绑定到新创建的对象。 31 | - 作为对象方法使用，`this` 绑定到该对象。 32 | - 使用`apply`或`call`调用 `this` 将会被显式设置为函数调用的第一个参数。 33 | 34 | 参考阅读： 35 | - [深入浅出 JavaScript 中的 this](http://www.ibm.com/developerworks/cn/web/1207_wangqf_jsthis/#ibm-pcon) 36 | - [this 的工作原理](http://bonsaiden.github.io/JavaScript-Garden/zh/#function.this) 37 | 38 | 39 | 40 | * Q: 解释下原型继承的原理。 41 | 42 | A:原型继承的基础是原型链查找。 43 | 原型链查找基本概念： 44 | 1. 每一个函数 F 都有一个原型对象（prototype）F.prototype 45 | 2. 每一个函数都可以通过 new 关键字化身成为一个类构造函数，new F 会产生一个对象 O 46 | 3. 在调用对象的某个属性或者方法，比如 http://O.xxx 的时候，会首先查找对象自身是否有这个方法或者属性，如果没找到就会去对象的构造函数的原型对象中查找（注意有两个定语），也就是查找 O 的构造函数 F 的原型对象 http://F.prototype.xxx 47 | 4. F.prototype 也是一个对象，查找 http://F.prototype.xxx 的时候会重复第 3 步的过程 48 | 49 | 参考： 50 | - [深入理解javascript原型继承](http://www.jianshu.com/p/d2742610ec30#) 51 | - [JavaScript原型继承工作原理](http://www.ituring.com.cn/article/56184) 52 | - [Prototypal Inheritance in JavaScript](http://javascript.crockford.com/prototypal.html) 53 | 54 | * Q: 你是如何测试JavaScript代码的？ 55 | 56 | * A: AMD vs. CommonJS？ 57 | 58 | Q: 可参考: 59 | 60 | * Q: 什么是哈希表？ 61 | 62 | A: 哈希表是根据关键字（Key value）而直接访问在内存存储位置的数据结构。也就是说，它通过把键值通过一个函数的计算，映射到表中一个位置来访问记录，这加快了查找速度。这个映射函数称做散列函数，存放记录的数组称做散列表。 63 | 64 | * Q: 解释下为什么接下来这段代码不是 IIFE(立即调用的函数表达式)：`function foo(){ }();`. 65 | * 要做哪些改动使它变成 IIFE? 66 | 67 | A: 可参考 [前端编码风格规范之 JavaScript 规范](http://roshanca.com/2014/web-develop-styleguide-javascript/) 68 | 69 | 总是将代码包裹成一个 IIFE(Immediately-Invoked Function Expression)，用以创建独立隔绝的定义域。这一举措可防止全局命名空间被污染。 70 | 71 | IIFE 还可确保你的代码不会轻易被其它全局命名空间里的代码所修改（i.e. 第三方库，window 引用，被覆盖的未定义的关键字等等）。 72 | 73 | 不推荐 74 | ``` 75 | var x = 10, 76 | y = 100; 77 | 78 | // Declaring variables in the global scope is resulting in global scope pollution. All variables declared like this 79 | // will be stored in the window object. This is very unclean and needs to be avoided. 80 | console.log(window.x + ' ' + window.y); 81 | ``` 82 | 推荐 83 | ``` 84 | // We declare a IIFE and pass parameters into the function that we will use from the global space 85 | (function(log, w, undefined){ 86 | 'use strict'; 87 | 88 | var x = 10, 89 | y = 100; 90 | 91 | // Will output 'true true' 92 | log((w.x === undefined) + ' ' + (w.y === undefined)); 93 | 94 | }(window.console.log, window)); 95 | ``` 96 | 97 | IIFE（立即执行的函数表达式）:无论何时，想要创建一个新的封闭的定义域，那就用 IIFE。它不仅避免了干扰，也使得内存在执行完后立即释放。 98 | 99 | 所有脚本文件建议都从 IIFE 开始。 100 | 101 | 立即执行的函数表达式的执行括号应该写在外包括号内。虽然写在内还是写在外都是有效的，但写在内使得整个表达式看起来更像一个整体，因此推荐这么做。 102 | 103 | 不推荐 104 | ``` 105 | (function(){})(); 106 | ``` 107 | 108 | 推荐 109 | ``` 110 | (function(){}()); 111 | ``` 112 | so，用下列写法来格式化你的 IIFE 代码： 113 | ``` 114 | (function(){ 115 | 'use strict'; 116 | 117 | // Code goes here 118 | 119 | }()); 120 | ``` 121 | 如果你想引用全局变量或者是外层 IIFE 的变量，可以通过下列方式传参： 122 | ``` 123 | (function($, w, d){ 124 | 'use strict'; 125 | 126 | $(function() { 127 | w.alert(d.querySelectorAll('div').length); 128 | }); 129 | }(jQuery, window, document)); 130 | ``` 131 | 132 | 133 | 134 | * Q: 描述以下变量的区别：`null`，`undefined` 或 `undeclared`？ 135 | * 该如何检测它们？ 136 | 137 | 138 | A: `undefined`是Js语言类型，而`undeclared`是一种Js语法错误。在JavaScript中，有两个表示‘空’的值`undefined`和`null`，`undefined`是一个值为`undefined` 的类型。JavaScript语言也定义了一个全局变量，它的值是 `undefined`，这个变量也被称为`undefined`。 但是这个变量不是一个常量，也不是一个关键字。这意味着它的值可以轻易被覆盖。为了避免可能对`undefined`值的改变，一个常用的技巧是使用一个传递到匿名包装器的额外参数。在调用时，这个参数不会获取任何值。如下例子： 139 | 140 | ``` 141 | var undefined = 123; 142 | (function(something, foo, undefined) { 143 | // 局部作用域里的 undefined 变量重新获得了 `undefined` 值 144 | })('Hello World', 42); 145 | ``` 146 | 147 | 待修改。 148 | 149 | - 150 | - 151 | 152 | 153 | * 什么是闭包，如何使用它，为什么要使用它？ 154 | 155 | * 请举出一个匿名函数的典型用例？ 156 | 157 | * 解释 “JavaScript 模块模式” 以及你在何时使用它。 158 | * 如果有提到无污染的命名空间，可以考虑加分。 159 | * 如果你的模块没有自己的命名空间会怎么样？ 160 | 161 | * 你是如何组织自己的代码？是使用模块模式，还是使用经典继承的方法？ 162 | 163 | * Q: 请指出 JavaScript 宿主对象和原生对象的区别？ 164 | 165 | A: 宿主对象是指DOM和BOM。原生对象是Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、Math等对象。 166 | 167 | * Q:指出下列代码的区别： 168 | 169 | ```javascript 170 | function Person(){} 171 | var person = Person(); 172 | var person = new Person(); 173 | ``` 174 | 175 | A: 第一行是定义了一个函数 Person()；第二行代码是执行函数 Person() 并将其返回值复制给变量 person，如果 Person() 是一个构造器函数的话，新的对象将不会被创建，并且 this 将被绑定到全局对象上；第三行代码是用构造函数 Person() 构造一个实例对象 person。 176 | 177 | 178 | 179 | * Q:`.call` 和 `.apply` 的区别是什么？ 180 | 181 | A: [关于javascript中apply()和call()方法的区别](http://www.cnblogs.com/fighting_cp/archive/2010/09/20/1831844.html) 182 | 183 | * 请解释 `Function.prototype.bind` 的作用？ 184 | 185 | * 你何时优化自己的代码？ 186 | 187 | * 你能解释一下 JavaScript 中的继承是如何工作的吗？ 188 | 189 | * 在什么时候你会使用 `document.write()`？ 190 | * 大多数生成的广告代码依旧使用 `document.write()`，虽然这种用法会让人很不爽。 191 | 192 | * 请指出浏览器特性检测，特性推断和浏览器 UA 字符串嗅探的区别？ 193 | 194 | * 请尽可能详尽的解释 AJAX 的工作原理。 195 | 196 | Q: Ajax 全称为 Asynchronous JavaScript and XML（异步 JavaScript 和 XML），是一种创建交互式网页应用的网页开发技术。 197 | Ajax 的原理简单来说通过 XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然后用 JavaScript来操作 DOM 而更新页面。这其中最关键的一步就是从服务器获得请求数据。 198 | 199 | 以往我们浏览网页的原理是由 Client 向 Server 提交页面申请，再由 Server 将申请通过 HTTP 传回给 Client 生成浏览页面： 200 | 201 | ![Ajax 原理图](http://yianbin.qiniudn.com/fe-ajax-a.png) 202 | 203 | 使用 Ajax 后的工作原理如下图，可见通过 Ajax 在用户交互方面有了很大改进，用户可以不用为提交了 Form 而长时间等待服务器应答，而且通过 Ajax 也可以开发出华丽的 Web 交互页面。 204 | 205 | ![Ajax 原理图](http://yianbin.qiniudn.com/fe-ajax-b.png) 206 | 207 | 转自：[AJAX 的工作原理](https://github.com/infp/Front-end-Interview/blob/master/source/javascript.md#21%E8%AF%B7%E5%B0%BD%E5%8F%AF%E8%83%BD%E8%AF%A6%E5%B0%BD%E7%9A%84%E8%A7%A3%E9%87%8A-ajax-%E7%9A%84%E5%B7%A5%E4%BD%9C%E5%8E%9F%E7%90%86) 208 | 209 | * 请解释 JSONP 的工作原理，以及它为什么不是真正的 AJAX。 210 | 211 | * 你使用过 JavaScript 模板系统吗？ 212 | * 如有使用过，请谈谈你都使用过哪些库，比如 Mustache.js，Handlebars 等等。 213 | 214 | * 请解释变量声明提升。 215 | 216 | * 请描述下事件冒泡机制。 217 | 218 | * "attribute" 和 "property" 的区别是什么？ 219 | 220 | * 为什么扩展 JavaScript 内置对象不是好的做法？ 221 | 222 | * 为什么扩展 JavaScript 内置对象是好的做法？ 223 | 224 | * 请指出 document load 和 document ready 两个事件的区别。 225 | 226 | * Q: `==` 和 `===` 有什么不同？ 227 | 228 | A: `==`（相等运算法），`===`（严格相等运算符） JavaScript 对象的比较是引用的比较，非值的比较，对象和其本身相等，和其他任何对象不相等。 `===` 首先计算其操作数的值，然后比较，比较过程无任何类型转换。 `==` 如果两个操作数不是同一类型的，则相等运算符进行一些类型转换进行比较。 `==` 这里截取 [JavaScript 相等表格](http://dorey.github.io/JavaScript-Equality-Table)上的的两张图片让大家更为直观的感受下。 229 | 230 | ![](http://paddingme.qiniudn.com/1396461120383-2.png) 231 | 232 | ![](http://paddingme.qiniudn.com/1396464279990-1.png) 233 | 234 | 引用下[温特大大](http://weibo.com/wintercn)的总结就是：**只要记住 `null` 只和`undefined` 相等，有 `number` 都转 `number`，有 `boolean` 也转 `number`，有 `string` 都转 `string`，对象互相不等，`NaN` 互相不等就可以了**。 235 | 236 | * 你如何从浏览器的 URL 中获取查询字符串参数。 237 | 238 | * 请解释一下 JavaScript 的同源策略。 239 | 240 | * 请描述一下 JavaScript 的继承模式。 241 | 242 | * 如何实现下列代码： 243 | ```javascript 244 | [1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5] 245 | ``` 246 | 247 | * 描述一种 JavaScript 中实现 memoization(避免重复运算)的策略。 248 | 249 | * 什么是三元表达式？“三元” 表示什么意思？ 250 | 251 | * 函数的参数元是什么？ 252 | 253 | * 什么是 `"use strict";` ? 使用它的好处和坏处分别是什么？ 254 | -------------------------------------------------------------------------------- /questions/6.md: -------------------------------------------------------------------------------- 1 | # 前端面试CSS 相关问题 2 | 3 | * Q：描述下 “reset” CSS 文件的作用和使用它的好处。 4 | 5 | A： 6 | - 作用以及好处：因为各个浏览器默认对CSS的渲染有差异，"reset" CSS 通过重新定义标签样式，对浏览器进行默认样式“清零”重置，样式保持一致。 7 | - 不足: 8 | + css文件大小增加； 9 | + 许多样式本身就需要重置，多此一举； 10 | + 增加浏览器对CSS 的渲染。 11 | 12 | 可以阅读以下文章增强了解： 13 | - [CSS reset的重新审视 – 避免样式重置](http://www.zhangxinxu.com/wordpress/2010/04/css-reset%E7%9A%84%E9%87%8D%E6%96%B0%E5%AE%A1%E8%A7%86-%E9%81%BF%E5%85%8D%E6%A0%B7%E5%BC%8F%E9%87%8D%E7%BD%AE/) 14 | - [常见标签的默认属性值及相互作用——关于CSS reset的思考](http://www.cnblogs.com/dolphinx/p/3509515.html) 15 | - [reset.css](http://baike.baidu.com/view/5186496.htm) 16 | - [前端面试问题](http://handyxuefeng.blog.163.com/blog/static/454521722013111714040259/) 17 | 18 | * Q: 解释下浮动和它的工作原理。 19 | 20 | A: 浮动出现的最开始出现的意义是用来让文字环绕图片而已。`float`可以自动包裹元素。`float`会导致高度塌陷。`float`为什么会导致高度塌陷：元素含有浮动属性 –> 破坏`inline box` –> 破坏`line box`高度 –> 没有高度 –> 塌陷。什么时候会塌陷：当标签里面的元素只要样子没有实际高度时会塌陷。浮动会脱离文档流。产生自己的块级格式化上下文。 21 | 22 | 可以阅读以下文章增加理解： 23 | - [CSS float浮动的深入研究、详解及拓展(一)](http://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%B8%80/) 24 | - [CSS float浮动的深入研究、详解及拓展(二)](http://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%BA%8C/) 25 | - [那些年我们一起清除过的浮动](http://www.iyunlu.com/view/css-xhtml/55.html) 26 | - 《CSS权威指南》 27 | 28 | * 列举不同的清除浮动的技巧，并指出它们各自适用的使用场景。 29 | 30 | + 直接把```
```放到当作最后一个子标签放到父标签那儿，此方法兼容性强，使用方便，但是浪费了一个标签，而且只能使用一次，而且有时候如果不注意中间多了个空格会产生一段空白高度。 31 | - 优点：通俗易懂，容易掌握； 32 | - 缺点：可以想象通过此方法，会添加多少无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦。 33 | + 如下: 34 | 35 | ``` 36 | .clearfix{overflow:hidden; zoom:1;} 37 | ``` 38 | 此方法优点在于代码简洁，涵盖所有浏览器，可是对于`overflow:hidden;`要是里面的元素要是想来个`margin`负值定位或是负的绝对定位，岂不是直接被裁掉了，所以此方法是有不小的局限性的。 39 | - 优点：不存在结构和语义化问题，代码量极少； 40 | - 缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。 41 | + 如下： 42 | 43 | ``` 44 | .fix{zoom:1;} 45 | .fix:after{ 46 | display:block; 47 | content:'.'; 48 | clear:both; 49 | line-height:0; 50 | visibility:hidden;} 51 | ``` 52 | 53 | `line-height:0`写成`height:0`也是可以的。不会影响任何其他样式，通用性强，覆盖面广，我很推荐哦。 54 | + 父元素也浮动： 55 | - 优点：不存在结构和语义化问题，代码量极少 56 | - 缺点：使得与父元素相邻的元素的布局会受到影响，不可能一直浮动到body，不推荐使用 57 | 58 | 总结： 59 | + 其一，通过在浮动元素的末尾添加一个空元素，设置 `clear：both`属性，`after`伪元素其实也是通过 `content` 在元素的后面生成了内容为一个点的块级元素； 60 | + 其二，通过设置父元素 `overflow` 或者`display：table` 属性来闭合浮动，这里的原理涉及到BFC，不再赘述。 61 | 62 | 同样请参考上一题给出的参考文章进行阅读加以理解。 63 | 64 | 65 | * Q: 解释下 CSS sprites，以及你要如何在页面或网站中使用它。 66 | 67 | A: CSS Sprites就是把网页中一些小图片整合到一张图片文件中，再利用CSS的`background-image`，`background- repeat`，`background-position`的组合进行背景定位，`background-position`可以用数字能精确的定位出背景图片的位置。可以减少http请求。 68 | 69 | 70 | * Q: 你最喜欢的图片替换方法是什么，你如何选择使用。 71 | 72 | A: 73 | - 一些图标是使用before和after伪元素; 74 | - 还有一些使用iconfont; 75 | - 使用sprite图; 76 | - 用背景图片代替图片。 77 | 78 | 举个栗子： 79 | 80 | ``` 81 |

[content]

82 | ``` 83 | 84 | ``` 85 | .nir { 86 | height: 100px; /* height of replacement image */ 87 | padding: 0; 88 | margin: 0; 89 | overflow: hidden; 90 | } 91 | 92 | .nir:before { 93 | content: url(image.gif); 94 | display: block; 95 | } 96 | ``` 97 | 98 | 详细可阅读：[CSS image replacement with pseudo-elements](http://nicolasgallagher.com/css-image-replacement-with-pseudo-elements/) 99 | 100 | * Q：讨论CSS hacks，条件引用或者其他。 101 | 102 | A: CSS主要由三种方法： 103 | 104 | - 属性前缀法(即类内部Hack)：例如 IE6能识别下划线"\_"和星号" \* "，IE7能识别星号" \* "，但不能识别下划线"\_"，IE6~IE10都认识"\9"，但firefox前述三个都不能认识。 105 | - 选择器前缀法(即选择器Hack)：例如 IE6能识别`*html .class{}`，IE7能识别`*+html .class{}`或者`*:first-child+html .class{}`。 106 | - IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)： ，针对IE6及以下版本： 。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。 107 | 108 | ``` 109 | 110 | 111 | 112 | Css Hack 113 | 129 | 130 | 131 |
test
132 | 133 | 134 | ``` 135 | 136 | 想要更多的了解CSS hack 方面的知识可以参考： 137 | 138 | - [史上最全的CSS hack方式一览](http://blog.csdn.net/freshlover/article/details/12132801) 139 | - [史上最全的css hack](http://www.cnblogs.com/wuqiang/archive/2011/08/23/2150240.html) 140 | 141 | * Q: 如何为有功能限制的浏览器提供网页？ 142 | * Q: 你会使用哪些技术和处理方法？ 143 | 144 | A: 功能限制的浏览器，比如 IE 低版本、手机浏览器、奇葩国内浏览器，会在很多功能上不符合 Web 标准，而应对的方式有这么几种： 145 | 146 | - 只提供符合 Web 标准的页面； 147 | - 提供另一个符合那些浏览器标准的页面(例如说移动端一套css,电脑端一套css); 148 | - 兼容：这里有两种思路，一个是渐进增强，一个优雅降级。 149 | 渐进增强的思路就是提供一个可用的原型，后来再为高级浏览器提供优化。优雅降级的思路是根据高级浏览器提供一个版本，然后有功能限制的浏览器只需要一个刚好能用的版本。当然，工作中的标准都是尽量满足设计，如果不能满足的话就尽量贴近，不得已（性能之类的问题）才会砍掉某个浏览器版本上的需求。 150 | 151 | 相关技术: 152 | - Media Query 153 | - CSS hack 154 | - 条件判断 `除IE外都可识别 ` 155 | 156 | * Q： 有哪些的隐藏内容的方法（如果同时还要保证屏幕阅读器可用呢？） 157 | 158 | A: `display:none`看不见也摸不着，屏幕阅读器更会忽略其内容；而`visibility:hidden`虽然看得见但是摸不着，占据了一定的物理空间，屏幕阅读器也会忽略。如果想要在读屏设备中让这些内容可见。解决方案的基本思路都是将这些内容放到屏幕、视线意外的地方，或者就是将大小设置成 0。比如 `text-indent: -9999em;`、`overflow: hidden;`、`height: 0`。 159 | 160 | ``` 161 | .texthidden { 162 | display:block;/*统一转化为块级元素*/ 163 | overflow: hidden; 164 | width: 0; 165 | height: 0; 166 | } 167 | ``` 168 | 更详细的方法可以参考这篇文章[HIDING CONTENT FOR ACCESSIBILITY](http://snook.ca/archives/html_and_css/hiding-content-for-accessibility) 169 | 170 | 不过既然这是了读屏而优化的，那么可以用 media query 来完成，media speech 用于语音输出的读屏设备。 171 | ``` 172 | @media speech { 173 | /* media-specify rules */ 174 | } 175 | ``` 176 | 177 | 以上转自[Witcher42](http://witcher42.github.io/2014/06/06/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/)给出的答案。 178 | 179 | * Q：你用过栅格系统吗？如果使用过，你最喜欢哪种？ 180 | 181 | A：使用过bootstarp。易于上手，学习成本低，还能做出比较大方美观的页面。 182 | 183 | 可阅读[栅格系统延续美学](http://mux.baidu.com/?p=1550)。 184 | 185 | * Q: 你用过媒体查询，或针对移动端的布局/CSS 吗？ 186 | 187 | A: 188 | 189 | ``` 190 | @media screen and (min-width:600px) { 191 | nav { 192 | float: left; 193 | width: 25%; 194 | } 195 | section { 196 | margin-left: 25%; 197 | } 198 | } 199 | @media screen and (max-width:599px) { 200 | nav li { 201 | display: inline; 202 | } 203 | } 204 | ``` 205 | 206 | 可参考： 207 | - [CSS媒体查询](https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries) 208 | - [使用 CSS 媒体查询创建响应式网站](http://www.ibm.com/developerworks/cn/web/wa-cssqueries/) 209 | * Q:你熟悉 SVG 样式的书写吗？ 210 | 211 | A: 212 | ``` 213 | 214 | 215 | Hello, out there 216 | 217 | 218 | 219 | ``` 220 | 221 | 教程参考: [SVG教程](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial) 222 | 223 | * Q: 如何优化网页的打印样式？ 224 | 225 | A: 226 | 227 | `` 228 | 229 | 其中media指定的属性就是设备，显示器上就是screen，打印机则是print，电视是tv，投影仪是projection。 230 | 231 | `` 232 | 233 | 但打印样式表也应有些注意事项： 234 | 235 | 1 打印样式表中最好不要用背景图片，因为打印机不能打印CSS中的背景。如要显示图片，请使用html插入到页面中。 236 | 2 最好不要使用像素作为单位，因为打印样式表要打印出来的会是实物，所以建议使用pt和cm。 237 | 3 隐藏掉不必要的内容。（`@print div{display:none;}`） 238 | 4 打印样式表中最好少用浮动属性，因为它们会消失。 239 | 如果想要知道打印样式表的效果如何，直接在浏览器上选择打印预览就可以了。 240 | 241 | * Q: 书写高效 CSS 时会有哪些问题需要考虑？ 242 | 243 | A: 244 | + 样式是：从右向左的解析一个选择器 245 | + ID最快，Universal最慢 有四种类型的key selector，解析速度由快到慢依次是：ID、class、tag和universal 246 | + 不要tag-qualify （永远不要这样做 ul#main-navigation { } ID已经是唯一的，不需要Tag来标识，这样做会让选择器变慢。） 247 | + 后代选择器最糟糕（换句话说，下面这个选择器是很低效的： html body ul li a { }） 248 | + 想清楚你为什么这样写 249 | + CSS3的效率问题（CSS3选择器（比如 :nth-child）能够漂亮的定位我们想要的元素，又能保证我们的CSS整洁易读。但是这些神奇的选择器会浪费很多的浏览器资源。） 250 | + 我们知道#ID速度是最快的，那么我们都用ID，是不是很快。但是我们不应该为了效率而牺牲可读性和可维护性` 251 | 252 | 可参考： 253 | 254 | 等我重写这道题答案。=。= 255 | 256 | * 使用 CSS 预处理器的优缺点有哪些？(SASS，Compass，Stylus，LESS) 257 | * 描述下你曾经使用过的 CSS 预处理的优缺点。 258 | 259 | * 如果设计中使用了非标准的字体，你该如何去实现？ 260 | * Webfonts (字体服务例如：Google Webfonts，Typekit 等等。) 261 | 262 | * 解释下浏览器是如何判断元素是否匹配某个 CSS 选择器？ 263 | 264 | * 解释一下你对盒模型的理解，以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局。 265 | 266 | * 请解释一下 ```* { box-sizing: border-box; }``` 的作用, 并且说明使用它有什么好处？ 267 | 268 | * 请罗列出你所知道的 display 属性的全部值 269 | 270 | * 请解释一下 inline 和 inline-block 的区别？ 271 | 272 | * 请解释一下 relative、fixed、absolute 和 static 元素的区别 273 | 274 | * 你目前在使用哪一套CSS框架，或者在产品线上使用过哪一套？(Bootstrap, PureCSS, Foundation 等等) 275 | * 如果有，请问是哪一套？如果可以，你如何改善CSS框架？ 276 | 277 | * 请问你有使用过 CSS Flexbox 或者 Grid specs 吗？ 278 | * 如果有，请问在性能和效率的方面你是怎么看的？ 279 | 280 | -------------------------------------------------------------------------------- /questions/1.md: -------------------------------------------------------------------------------- 1 | 2 | ## CSS 部分问题与解答 3 | 4 | 5 | 这里是 [Front End Web Development Quiz](http://davidshariff.com/quiz/) 中的 CSS部分问题与解答. 6 | 7 | 1. Q: CSS 属性是否区分大小写？ 8 | 9 | ``` 10 | ul { 11 | MaRGin: 10px; 12 | } 13 | ``` 14 | 15 | A: 不区分。 16 | HTML，CSS都对大小写不敏感，但为了更好的可读性和团队协作一般都小写，而在XHTML 中元素名称和属性是必须小写的。 17 | 18 | 2. Q: 行内(inline)元素 设置`margin-top`和`margin-bottom` 是否起作用？ 19 | 20 | A: 不起作用。(答案是起作用，个人觉得不对。) 21 | 22 | html 里的元素分为替换元素（replaced element）和非替换元素（non-replaced element）。 23 | - 替换元素是指用作为其他内容占位符的一个元素。最典型的就是`img`，它只是指向一个图像文件。以及大多数表单元素也是替换，例如`input`等。 24 | - 非替换元素是指内容包含在文档中的元素。例如，如果一个段落的文本内容都放在该元素本身之内，则这个段落就是一个非替换元素。 25 | 26 | 讨论`margin-top`和`margin-bottom`对行内元素是否起作用，则要对行内替换元素和行内非替换元素分别讨论。 27 | 28 | 首先我们应该明确外边距可以应用到行内元素，规范中是允许的，不过由于在向一个行内非替换元素应用外边距，对行高(line-height)没有任何影响。由于外边距实际上是透明的。所以对声明`margin-top`和`margin-bottom`没有任何视觉效果。其原因就在于行内非替换元素的外边距不会改变一个元素的行高。而对于行内非替换元素的左右边距则不是这样，是有影响的。 29 | 30 | 而为替换元素设置的外边距会影响行高，可能会使行高增加或减少，这取决于上下外边距的值。行内替换元素的左右边距与非替换元素的左右边距的作用一样。来看看demo: 31 | 32 | 33 | 34 | 3. Q: 对内联元素设置`padding-top`和`padding-bottom`是否会增加它的高度？（原题是Does setting padding-top and padding-bottom on an inline element add to its dimensions?） 35 | 36 | A: 答案是不会。同上题比较纠结，不太明白这里的 dimensions指的是到底是什么意思？放置一边，咱们来分析下。对于行内元素，设置左右内边距，左右内边距将是可见的。而设置上下内边距，设置背景颜色后可以看见内边距区域有增加，对于行内非替换元素，不会影响其行高，不会撑开父元素。而对于替换元素，则撑开了父元素。看下demo，更好的理解下： 37 | 38 | 39 | 40 | 4. Q: 设置`p`的`font-size:10rem`，当用户重置或拖曳浏览器窗口时，文本大小是否会也随着变化？ 41 | 42 | A: 不会。 43 | 44 | `rem`是以`html`根元素中`font-size`的大小为基准的相对度量单位，文本的大小不会随着窗口的大小改变而改变。 45 | 46 | 5. Q: 伪类选择器`:checked`将作用与`input`类型为`radio`或者`checkbox`,不会作用于`option`。 47 | 48 | A: 不对。 49 | 50 | 伪类选择器`checked`的定义很明显: 51 | 52 | > The :checked CSS pseudo-class selector represents any radio (``), checkbox (``) or option (`