├── README.md └── file ├── 2018进击的大前端.pdf ├── 万字面试干货.md ├── 前端书籍.md ├── 前端面试指南.pdf ├── 特殊时期的10条生存建议.pdf ├── 面经 ├── 2018前端校招面经合集.md ├── 201958同城前端社招面经.md ├── 2019字节跳动前端社招面经（一）.md ├── 2019字节跳动前端社招面经（二）.md ├── 2019小米前端社招面经.md ├── 2019快手前端社招面经.md ├── 2019快看漫画前端社招面经.md ├── 2019搜狐前端社招面经.md ├── 2019猫眼前端社招面经.md ├── 2019猿辅导前端社招面经.md ├── 2019美菜网前端社招面经.md ├── 2019蚂蚁金服前端社招面经.md ├── 2020伴鱼前端社招面经.md ├── 2020作业帮前端社招面经.md ├── 2020图虫前端社招面经.md ├── 2020快手前端社招面经.md ├── 2020抖音前端社招面经.md ├── 2020滴滴出行前端社招面经.md ├── 2020知乎前端社招面经.md ├── 2020神策数据前端社招面经.md ├── 2020老虎证券前端社招面经.md ├── 2020跟谁学前端社招面经.md ├── 2020转转前端社招面经.md ├── 2020阿里UC前端社招面经.md ├── 2020阿里高德前端社招面经.md └── index.md └── 面试汇总2018.md /README.md: -------------------------------------------------------------------------------- 1 | # 前端开发面试题 2 | 3 | ## 2024-07-24 更新 4 | 5 | > 日子越来越紧，更新《特殊时期的10条生存建议》，希望对你有帮助。 6 | 7 | [特殊时期的10条生存建议](file/特殊时期的10条生存建议.pdf) 8 | 9 | [勇闯自媒体工具箱](https://nod3hje6q7.feishu.cn/docx/R0bMdftngoAjTfx7fhDcHVbHnih) 10 | 11 | ## 2024-07-02 更新 12 | 13 | > 越来越卷了，日子越来越难了，希望新更新的面试题能帮到你，希望对你有帮助。 14 | 15 | [2024前端高频面试题-- html篇](https://juejin.cn/post/7316349850855211046) 16 | 17 | [2024前端高频面试题-- CSS篇](https://juejin.cn/post/6844904013620592654) 18 | 19 | [2024前端高频面试题-- JS篇](https://juejin.cn/post/7330065707358208010) 20 | 21 | [2024前端高频面试题之--VUE篇](https://juejin.cn/post/7343484473184698405) 22 | 23 | [2024前端高频面试题之-- react篇](https://juejin.cn/post/7349971654590857216) 24 | 25 | [2024前端高频面试题-- 前端工程化篇](https://juejin.cn/post/7350535815132659749) 26 | 27 | [2024前端高频面试题-- HTTP和浏览器篇](https://juejin.cn/post/7351301328206331939) 28 | 29 | [2024前端高频面试题-- 手写代码篇](https://juejin.cn/post/7353456468094599205) 30 | 31 | [2024前端高频面试题-- 数据结构与算法篇](https://juejin.cn/post/7356060104565997605) 32 | 33 | ## 2023 更新 34 | 35 | [一图搞定前端面试之基础篇](https://juejin.cn/post/7287496730885537811) 36 | 37 | [【前端面经】2023面试复盘之美团](https://juejin.cn/post/7298650438253641769) 38 | 39 | [【前端面经】2023面试复盘之小红书](https://juejin.cn/post/7298927442488754213) 40 | 41 | [【前端面经】2023面试复盘之阿里云](https://juejin.cn/post/7298188812215287845) 42 | 43 | [【前端面经】2023面试复盘之蚂蚁金服](https://juejin.cn/spost/7298248624700669962) 44 | 45 | [【前端面经】2023面试复盘之快手](https://juejin.cn/post/7303413519906717705) 46 | 47 | [【前端面经】2023面试复盘之字节跳动](https://juejin.cn/post/7298218459795734582) 48 | 49 | [万字总结我在寒冬里的面试准备经历](https://juejin.cn/spost/7270095064440864804) 50 | 51 | [前端铜九铁十面试必备八股文——【HTML&CSS】](https://juejin.cn/post/7269794410573512758) 52 | 53 | [前端铜九铁十面试必备八股文——【JavaScript】](https://juejin.cn/post/7270471613547249699) 54 | 55 | [前端铜九铁十面试必备八股文——【Vue】](https://juejin.cn/post/7270862391155261495) 56 | 57 | [前端铜九铁十面试必备八股文——【浏览器】](https://juejin.cn/post/7271542727350108195) 58 | 59 | [前端铜九铁十面试必备八股文——【网络相关】](https://juejin.cn/post/7271165389694058556) 60 | 61 | [前端铜九铁十面试必备八股文——【性能优化】](https://juejin.cn/post/7273119689185673253) 62 | 63 | [前端铜九铁十面试必备八股文——【工程化】](https://juejin.cn/post/7272009063406272571) 64 | 65 | [前端铜九铁十面试必备八股文——【手写代码】](https://juejin.cn/post/7272737742307065914) 66 | 67 | ## 2020-09-01 更新 68 | 69 | [网友面经合集2018-2020](file/面经/index.md) 70 | 71 | ## 2020-06-11 更新 72 | 73 | [力扣](https://leetcode-cn.com/) 74 | 75 | [木易杨，公众号「高级前端进阶」作者，每天搞定一道前端大厂面试题](https://github.com/Advanced-Frontend/Daily-Interview-Question) 76 | 77 | [大前端面试题库 碎片时间刷刷题](http://bigerfe.com/) 78 | 79 | [最全Vue知识点（基础到进阶，覆盖vue3）](https://mp.weixin.qq.com/s/wqG0IH50zF43zynEHNud5w) 80 | 81 | [qiankun 微前端方案实践及总结](https://juejin.im/post/5ed73b73e51d4578724e3fa4) 82 | 83 | [vue项目部署的最佳实践](https://juejin.im/post/5eb2243e51882555d8457833) 84 | 85 | ## 2020-03-09 更新 推荐阅读 86 | 87 | [FE-Interview前端面试题整理](http://demo.iboomer.cn/FE-Interview-Questions/) 88 | 89 | ## 2020-02-22 更新 90 | 91 | [我在阿里招前端，我该怎么帮你？](https://segmentfault.com/a/1190000021761594) 92 | 93 | [（近3万字，持续更新中）从面试前到终面，全面为您保驾护航](https://juejin.im/post/5e4f7f2ae51d4526d0595090) 94 | 95 | [涨薪30%以上看这篇万字干货就行.md](file/万字面试干货.md) 96 | 97 | ## 2020-02-16 更新 98 | 99 | [前端程序员面试宝典.pdf](https://pan.baidu.com/s/157byyVWX4b-cftXDKgSRBg) 提取码: xtg5 100 | 101 | [2019前端面试题（深圳）](https://zhuanlan.zhihu.com/p/60832562) 102 | 103 | [老码农的字节跳动前端面试总结](https://zhuanlan.zhihu.com/p/68974750) 104 | 105 | ## 2018-08-03 更新 106 | 107 | [前端面试指南.pdf](file/前端面试指南.pdf) 108 | 109 | [WEB前端知识总结](https://zhuanlan.zhihu.com/p/25334672) 110 | 111 | [2018进击的大前端.pdf](file/2018进击的大前端.pdf) 112 | 113 | ## 2018-07-24 更新 114 | 115 | [写简历的技巧](https://github.com/atian25/blog/issues/3) 116 | 117 | ## 2018-07-12 更新 118 | 119 | [总结了17年初到18年初百场前端面试的面试经验(含答案)](https://juejin.im/post/5b44a485e51d4519945fb6b7) 120 | 121 | [JavaScript 标准参考教程（alpha）](http://javascript.ruanyifeng.com/) 122 | 123 | [ECMAScript 6入门](http://es6.ruanyifeng.com/) 124 | 125 | [全栈工程师培训材料](https://github.com/ruanyf/jstraining) 126 | 127 | ## 2018-01-01 128 | 129 | [面试汇总](file/面试汇总2018.md) 130 | 131 | [前端书籍](file/前端书籍.md) -------------------------------------------------------------------------------- /file/2018进击的大前端.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jon1301/webQd/f8d01ddb5720e903c7dcdced8eae9cfbeef5c1bf/file/2018进击的大前端.pdf -------------------------------------------------------------------------------- /file/万字面试干货.md: -------------------------------------------------------------------------------- 1 | 转载自 https://mp.weixin.qq.com/s/1iWeSqf-E9NrVb-GPEV53Q 2 | 3 | 4 | # 面试题篇 5 | 6 | 面试题只能应对 1 - 2 面，刷题固然重要，但是对于项目相关的准备也是必须的。一般来说目前面试题能准备的范围如下： 7 | 8 | JS 基础 / 进阶相关 9 | HTML / CSS 相关，这方面问的真的很少了 10 | 浏览器 / 性能优化 / 工程相关 11 | 框架使用相关，也就是基础问题 12 | 框架原理相关，就算你没看过源码，你也得知道它的原理，当下的面试基本是不会原理就寸步难行 13 | 计科相关，比如算法 / 数据结构 / 网络，基本这三样，最多加个操作系统 14 | 以上是大致范围，大家可以照着把题目归类，当然除了这些还会有些别的，比如说设计模式等等的问题。另外会刷面试题只是一部分，如果只能生搬硬套，稍微题目变种一下就不会的话也没啥用。更好的办法是把这些内容内化，了解这个题目为什么要这样解，并且和自身的项目所结合。比如说项目中做过性能优化，那么你就可以把相关的性能优化答案都聊一下。 15 | 16 | 以下几个链接的内容大部分都是笔者身边朋友所写，就职的都是一二线公司。这些内容看完足以，没必要一直盯着面试题去刷，其他还有我们需要准备的内容，面试题并不是本文的重点。 17 | 18 | [1] 19 | 中高级前端大厂面试秘籍，为你保驾护航金三银四，直通大厂: https://juejin.im/post/5c64d15d6fb9a049d37f9c20 20 | 21 | [2] 22 | 两年工作经验成功面试阿里P6总结: https://juejin.im/post/5d690c726fb9a06b155dd40d 23 | 24 | [3] 25 | 16年毕业的前端er在杭州求职ing: https://juejin.im/post/5a64541bf265da3e2d338862 26 | 27 | [4] 28 | 「中高级前端面试」JavaScript手写代码无敌秘籍: https://juejin.im/post/5c9c3989e51d454e3a3902b6 29 | 30 | [5] 31 | 腾讯前端面试篇: https://juejin.im/post/5c19c1b6e51d451d1e06c163 32 | 33 | [6] 34 | 前端面试考点多？: https://juejin.im/post/5aae076d6fb9a028cc6100a9 35 | 36 | [7] 37 | 三年经验前端面试总结: https://juejin.im/post/5d9c2005f265da5bb977c55e 38 | 39 | [8] 40 | 一个合格(优秀)的前端都应该阅读这些文章: https://juejin.im/post/5d387f696fb9a07eeb13ea60 41 | 42 | 43 | 44 | # 怎么谈做过的项目 45 | 46 | 谈好项目经历才是面试环节中最重要的一点，即使之前的题目你答得再好，项目经历讲不好依旧凉凉。 47 | 48 | 项目考察一是为了确认这个项目是否是你做过的，二是为了了解你的技术深度，是否是做过就算还是会有自己的思考。 49 | 50 | 考察的问题一般分为以下几点： 51 | 52 | 项目基础相关的内容，比如涉及到的技术栈、功能、业务相关的问题。 53 | 54 | 项目具体的细节内容，比如说这个功能你是如何实现的，为什么这样做等等。 55 | 56 | 考察深度问题，比如说你做这个项目的时候有没有遇到过什么问题，是如何解决的，另外也可能会与上面的面试题结合起来问 57 | 58 | 基于以上几点，你可以这样去准备项目问答： 59 | 60 | 这个项目涉及的技术栈相关的内容，无论是基础的还是深度的，因为这里很可能会问到框架原理。 61 | 想想做这个项目的过程中是否有遇到过一些困难，最终是如何解决的，实在想不起来的话可以看看 Git Commit。 62 | 这个项目自己是否做过一些优化，包括代码、开发效率、性能、体验等等相关的领域。 63 | 这个项目当中存在的一些问题，可能的解决思路。 64 | 这个项目最终达成的成果。 65 | 这个项目带给你的成长是什么，当然别说让我学会了某某 API 这种没价值的内容。 66 | 另外项目这块还要结合着简历来说，因为面试官问你项目肯定是从简历上得来的问题，下文中会写到如何在简历中写项目经历。 67 | 68 | # 面试如何请假、如何提出辞职 69 | 70 | 其实真的没必要考虑我该如何请假才能让上级觉得我不是去面试的，当然实话实说请假是去面试的肯定也不行。既然要请假，那么就直接说家里有事、自己有事就行了，一般人不会那么事逼问你到底干嘛去的。 71 | 72 | 开口提辞职时先要有一个借口，比如什么通勤太远啦、加班太多啦等等的一些个人原因。然后再感激一下领导和公司这一段时间的栽培给自己带来了很大的成长，最后表示在离职之前会认真交接好所有的工作，希望领导能批准自己的离职申请。 73 | 74 | 这时领导可能会开始挽留你，记住一点：一旦决定辞职就别犹豫，上级挽留也一定不要留下来，因为在你辞职的那一刻起公司就认为你是个不稳定的因子，即使你被挽留下来也不大可能会有什么好的发展，同时也不要因为公司曾经带给了你成长所以犹豫到底要不要走。人往高处走，水往低处流，人生没有不散的宴席。 75 | 76 | # 准备简历篇 77 | 78 | 简历不是用来记你的流水账的。罗列一堆技术点、你完成了什么任务以及你的自我评价没多大价值，只是造就了一份又臭又长的简历。 79 | 80 | 你可以按照以下几点来修改自己的简历： 81 | 82 | 控制简历页数在 2 页以下，简历不是写得越长越牛逼，而是用内容去吸引人家的。 83 | 84 | 按照用人方的要求以及自身具备但别人不怎么会的领域去写技术栈，不用大篇幅地去罗列技术栈。你熟悉 React 的话人家就默认你熟悉前端三大件了，更不用说用编辑器写代码、用 Git 提交代码、用 Ajax 请求数据了，把原本用来罗列这些技术栈的篇幅留给更重要的项目吧 85 | 86 | 写项目经历的时候把重点的几个项目拿出来介绍就行了，不需要把你做过的所有项目都罗列出来。具体内容可以参考 Star 法则，也就是做了什么，得到了怎样的结果。怎样的结果是最重要的而不是罗列自己做了什么任务。用数据去量化你的结果是一个很好的方式，不知道怎么去量化的话可以多了解下你的上级是如何写 PPT、画大饼的。举个例子你们要提高日活，那么肯定会有个具体提高的数值，这个数值就是可量化的。 87 | 88 | 斟酌熟悉、精通等字眼，不要给自己挖坑。最后确保每一个写上去的技术点自己都能说出点什么，不要出现面试官问你一个技术点却只能答出用过。 89 | 90 | 别用 Word 格式，容易出问题，PDF 是更好的选择。 91 | 92 | 不推荐用模板，要不花里胡哨要不都是招聘网站的 Logo，自己用 Markdown 写完直接转 PDF 就好了。 93 | 94 | 文件命名格式：姓名_求职岗位必写 95 | 96 | 一般来说简历的排版格式如下： 97 | 98 | 排版格式 99 | 你的个人信息：姓名、年级、性别、手机号、邮箱、学校及专业 100 | 你的技术栈，按照用人方来罗列 101 | 项目经历挑几个讲，按照 Star 法则 102 | 如何粗略判断公司是否靠谱 103 | 104 | 毕竟不是每个人都能去大公司的，所以分辨一个公司是否靠谱是相当重要的，这关系到将来几个月甚至几年的职业道路。 105 | 106 | 这里笔者推荐使用「天眼查」去查询一家公司的信息，在这里我们可以查询到一家公司的几个重要指标 107 | 108 | 具体的一个融资情况，一家公司好不好，拥有的资本肯定是重要的一块。一家不错的公司，往往前期融到的金额就很高并且领投的 VC 也是知名的，比如 IDG 资本、高瓴资本、红杉资本等等 109 | 核心团队的介绍，通过介绍我们可以了解到高管的一个教育背景，行业的经验等等 110 | 公司涉及到了哪些司法、经营上的风险 111 | 然后还可以在脉脉、群里问问这公司是否靠谱，不靠谱的公司就别投递简历了。 112 | 113 | # 投递简历篇 114 | 115 | 首选一定是内推，实在没办法才选择各大招聘网站投递。现在获取内推的渠道实在太多了，比如微博、知乎、V2ex、脉脉，再不行也还能群里问问。 116 | 117 | 另外还需要注意分批投递简历，投递前应该先把想投递的几个公司分出几个档次。先投递档次最低的，就算失败了，也就当在攒经验。这样多面几次，把握大了就可以开始投递更加心仪的公司了，增加成功几率。 118 | 119 | 最后如果你是通过邮件投简历的话，可以选择在早上上班的时候去投递。 120 | 121 | #通用问答篇 122 | 123 | ## 自我介绍 124 | 自我介绍应该是 99% 的一面都会问到的一个问题，所以推荐面试前直接写一份自我介绍。 125 | 126 | 自我介绍是用于让面试官快速了解你信息的一个环节，但是切记不要啰里啰嗦地说一大堆，准备以下几个环节即可： 127 | 128 | 个人信息，就把简历里写的个人信息说一下，另外还可以附带一些个人的荣誉（社招的就不用去讲学校里获得的荣誉了，除非是有什么大赛得过奖）。 129 | 介绍匹配的技术栈。 130 | 挑一个个人认为最好的项目说一下，描述方式也是按照 Star 法则。这个项目如果是匹配用人方招聘需求的那就更好了。 131 | 自身亮点，比如平时有写文章或者维护的 Github 等等，提升面试官对你的好感。 132 | 按照上述几个环节，大致可以整理出这样的格式： 133 | 134 | 面试官你好，我叫 XXX，就读于 XX 学校 XX 专业，拥有 XX 年前端工作经验，获得过 ACM 省级金牌（介绍自己获得过有含金量的比赛名次），曾供职于 XX 公司（介绍先前工作过的一二线企业）。我在上家公司任职 XX 岗位，主要负责 XX 工作，擅长 XX 技术栈。其中在我负责的 XX 项目中，我完成了 XX 工作，实现了性能 XX% 的提升（这里就是按照 Star 法则去介绍一个自己负责的最佳项目）。另外我还坚持写作，在 XX 平台发表了 XX 文章，共计获得了 XX 点赞/阅读（这里就是介绍自身的亮点）。以上就是我的自我介绍，谢谢！ 135 | ## 职业规划 136 | 这个其实就是想了解你与公司发展的匹配程度如何。假如说你一个写代码的说过几年想做产品了、运营了、创业了，那么可能就有点危险了。只要你讲出符合自己职业的道路即可，比如说想晋级到高工 -> 架构师等等。 137 | 138 | ## 你的缺点 139 | 这个问题切记不能回答自己的性格缺陷、能力不行、沟通不好等等，可以说一些工作中遇到的问题。比如说在某次需求评审的时候因为自己没有坚持个人的想法，导致这个需求存在的问题没有解决掉，最后这个项目结果不好没有达到预期等等。 140 | 141 | ## 你有什么想问我的 142 | 这个问题确实不怎么好答，相信很多人都被这个问题困扰过 143 | 144 | 回答没什么想问的呢，可能会给面试官一个你并不想进公司的感觉 145 | 瞎问呢又怕惹得面试官不高兴了 146 | 其实这个问题问得好的话反而是一个能很好了解对方公司的一个渠道。 147 | 148 | ## 以下是一些笔者认为不错的提问，能够很好地了解到对方公司的一些东西，包括开发流程、职业晋升、公司发展等等。大家可以选择性地提出 2 - 3 个感兴趣的问题，这样不仅能帮助到自身了解到公司的一些情况，也能给予面试官一个不错的印象，以下问题针对于技术面： 149 | 150 | 公司常用的技术栈是什么？ 151 | 你们如何测试代码？ 152 | 你们如何解决线上故障？ 153 | 你们如何准备故障恢复？是否有完善的发布机制？ 154 | 公司是否有技术分享交流活动？有的话，多久一次呢？ 155 | 一次迭代的流程是怎么样的？从 PRD 评审开始到发布这一整个流程。 156 | 公司技术团队的架构和人员组成？ 157 | 有公司级别的学习资源吗？比如电子书订阅或者在线课程？ 158 | 你们认为和竞品相比有什么优势？ 159 | 为什么从上家公司离职 160 | 这个问题无论如何都不能说上家公司的任何不好，不管是加班多、上下级问题、与同事之间的矛盾或者其他的情况。 161 | 162 | 一般就把问题归于自身就行，可以说考虑到自身的职业发展，想去一个更加适合自己成长的公司。 163 | 164 | # 谈薪篇 165 | 166 | 到手的才是真的，饼太大容易噎着，当然饼也是有可能兑现的，这就看自身机遇了，一般来说在薪资满意的情况下，再去吃饼：比如说期权。 167 | 168 | 这里简单说下 offer 里的期权到底是什么。假如公司承诺给你 5000 期权，1 美金的行权价，4 年行权。这就意味着你可以通过 1 美金买一股期权，但是 1 股期权不一定就等比上市后的股票，还可能需要稀释。假如稀释 10 倍的话那也就是 500 股票，你还得花 4 年才能拿到所有的股票，最后行权还有税，所以说大部分的期权其实没啥用。 169 | 170 | 接下来就是具体谈薪的部分啦。 171 | 172 | 在面试之前首先要想好自己想要的薪资，假如说你当前薪资为 10K，那么涨幅在 3K 以上是正常的。如果只有 1K - 2K 的涨幅跳槽是没多大意义，毕竟换公司存在成本。另外很多 HR 会压低你的报价，毕竟公司都是有预算的，能省一点是一点，所以我们需要给出一个压价的空间。所以在具体报价的时候你可以给出 14 - 15K 的心理价位，如果对方接受了那么皆大欢喜，如果压价到自己的期望薪资的话也不差。 173 | 174 | ## 最后在和 HR 讨论待遇的时候，应该问清楚以下几点 175 | 176 | 具体的工资（也就是合同上签订的工资），不要杂七杂八什么绩效加起来的那种 177 | 五险一金缴纳的比例，这个在交满和不交满的情况下其实是很大一笔收益。交满虽然自己交的也多了，但是大头公积金是能取出来的，医疗保险看病也用得到，只有养老金稍微虚幻了一点 178 | 加班是否有加班工资或者调休 179 | 是否是 996，我个人很不推荐 996 的公司 180 | 加薪升职的情况 181 | 其他各种福利，比如餐补、房补、交通补、节假日福利、另外的保险等等，这个算是锦上添花 182 | 年终奖如何发放，员工平均能拿到几个月 183 | 选择 Offer 篇 184 | 185 | 这里分校招和社招来讲。 186 | 187 | 校招 188 | 对于校招来说，平台 > 团队 > 其他。在平台差不多的情况下可以去选择更好的团队，但是在平台存在差距的情况下务必要选择平台更大的，职业生涯初期就职的平台越好那么将来也会更顺，即使好的平台工资给的低也不要紧，毕竟这段校招的经历不会长。 189 | 190 | 社招 191 | 对于社招来说，其实还是看自己缺什么去补什么的。假如说你缺钱，那么可能有更好的平台摆在你面前也会选择给更多钱的一方；假如说你想去个更大的平台，那么可能小平台开的价更高你也不想去；假如说你想通勤近点多陪陪家人，那么远的公司肯定也就不考虑了。 192 | 193 | 如果你觉得几个条件自己都不缺或者把握不好的，可以参考下笔者的思路： 194 | 195 | 按照权重先这样选择：平台 | 薪资（两者看个人选择） > 团队 > 加班 & 通勤。 196 | 钱多有时候不一定好。钱多如果加班也多，那肯定比不过薪资差点但是不加班的公司。另外 HR 和你谈的年终奖也不一定拿得到，说不到到了年终把你裁了呢~ 197 | 去深入了解下具体要去的团队，可以加个未来上级的微信聊聊，同时也四处询问下这个团队是否靠谱。毕竟一个团队以及直属领导的好坏，会直接影响着你的绩效和晋升空间。 198 | 通勤时间，如果你已经有房了，那么通勤时间是需要考虑上的。如果每次通勤需要一小时以上外加公司还要加班的话，其实幸福感会蛮低的。 199 | 更新 200 | 201 | # 学历问题 202 | 在评论里看到有读者说到了学历问题。这个问题内推可以解决大部分卡学历的情况，当然大公司对于学历的要求会严格一点，如果自身技术不是很突出的话确实会遇到这种让人不开心的问题。 203 | 204 | 但是世界上也不是就大厂才能写代码不是。 205 | 206 | # QA 环节 207 | Q：网上有人说任务重的公司可以帮助刚毕业的学生快速成长, 请问这是否正确? 208 | 209 | A：要看做的任务是什么。如果整天让你做同一件事情，那么成长会有多大呢。。 210 | 211 | Q：不 996 的公司相较于 996 的公司除轻松些外还有哪些优点? 212 | 213 | A：轻松就是最大的优点啦，能有更多的可支配时间，身体健康也会好点。另外不 996 的公司相比来说做事效率也会快多了。 214 | 215 | Q：如何区分投递的公司是否 996? 216 | 217 | A：只能靠自己问，并且有些不是公司全部 996，而是某个团队 996。 218 | 219 | 最后 220 | 221 | 觉得文章还行的读者可以点个赞，另外有任何问题也可以评论区交流。 222 | -------------------------------------------------------------------------------- /file/前端书籍.md: -------------------------------------------------------------------------------- 1 | # 前端书籍整理 2 | 3 | 书不在多，而在精。推荐书籍以后会不断更新。 4 | 5 | ## 入门 6 | 7 | ### HTML 8 | 9 | [Head First HTML与CSS(第2版)](https://book.douban.com/subject/25752357/) 10 | 11 | ### CSS 12 | 13 | [CSS权威指南(第3版)](https://book.douban.com/subject/2308234/) 14 | 15 | ### JavaScript 16 | 17 | [JavaScript DOM编程艺术(第2版)](https://book.douban.com/subject/6038371/) 18 | 19 | [JavaScript高级程序设计(第3版)](https://book.douban.com/subject/10546125/) 20 | 21 | ## 进阶 22 | 23 | ### HTML5 24 | 25 | [HTML5权威指南](https://book.douban.com/subject/25786074/) 26 | 27 | ### CSS 28 | 29 | [精通CSS(第2版)](https://book.douban.com/subject/4736167/) 30 | 31 | [CSS禅意花园](https://book.douban.com/subject/2052176/) 32 | 33 | [超越CSS](https://book.douban.com/subject/2345964/) 34 | 35 | [CSS Secrets(中文版)](https://book.douban.com/subject/26745943/) 36 | 37 | ### Javascript 38 | 39 | [JavaScript权威指南(第5版)](https://book.douban.com/subject/2228378/) 40 | 41 | [JavaScript语言精粹](https://book.douban.com/subject/3590768/) 42 | 43 | [JavaScript设计模式](https://book.douban.com/subject/3329540/) 44 | 45 | [高性能JavaScript](https://book.douban.com/subject/5362856/) 46 | 47 | [编写可维护的JavaScript](https://book.douban.com/subject/21792530/) 48 | 49 | ### Node.js 50 | 51 | [Node.js开发指南](https://book.douban.com/subject/10789820/) 52 | 53 | [Node.js实战](https://book.douban.com/subject/25870705/) 54 | 55 | [深入浅出Node.js](https://book.douban.com/subject/25768396/) 56 | 57 | ### JQuery 58 | 59 | [锋利的jQuery](https://book.douban.com/subject/10792216/) 60 | 61 | [jQuery权威指南(第2版)](https://book.douban.com/subject/25774789/) 62 | 63 | ### Bootstrap 64 | 65 | [深入理解Bootstrap](https://book.douban.com/subject/25886197/) 66 | 67 | [Bootstrap实战](https://book.douban.com/subject/26376363/) 68 | 69 | ### AngularJs 70 | 71 | [用AngularJS开发下一代Web应用](https://book.douban.com/subject/25752512/) 72 | 73 | [AngularJS权威教程](https://book.douban.com/subject/25945442/) 74 | 75 | ### React 76 | 77 | [React 引领未来的用户界面开发框架](https://book.douban.com/subject/26378583/) 78 | 79 | [React Native入门与实战](https://book.douban.com/subject/26694486/) 80 | 81 | ### 性能实践 82 | 83 | [高性能网站建设指南](https://book.douban.com/subject/26411563/) 84 | 85 | [高性能网站建设进阶指南](https://book.douban.com/subject/26410870/) 86 | 87 | [Web性能实践日志](https://book.douban.com/subject/25891125/) 88 | 89 | [Web性能权威指南](Web性能权威指南) 90 | 91 | ### HTTP 92 | 93 | [HTTP权威指南](https://book.douban.com/subject/10746113/) 94 | 95 | [图解HTTP](https://book.douban.com/subject/25863515/) 96 | 97 | ### 版本控制工具 98 | 99 | [Pro Git](https://book.douban.com/subject/3420144/) 100 | 101 | [Git版本控制管理](https://book.douban.com/subject/5311565/) 102 | 103 | [GitHub入门与实践](https://book.douban.com/subject/26462816/) 104 | 105 | -------------------------------------------------------------------------------- /file/前端面试指南.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jon1301/webQd/f8d01ddb5720e903c7dcdced8eae9cfbeef5c1bf/file/前端面试指南.pdf -------------------------------------------------------------------------------- /file/特殊时期的10条生存建议.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jon1301/webQd/f8d01ddb5720e903c7dcdced8eae9cfbeef5c1bf/file/特殊时期的10条生存建议.pdf -------------------------------------------------------------------------------- /file/面经/2018前端校招面经合集.md: -------------------------------------------------------------------------------- 1 | # 2018 秋招前端面经合集 2 | 3 | 三方签完后，算是结束了自己的求职旅程。从 8 月开始到 11 月，三个多月的战线，经历了很多坎坷，心态上起起伏伏，但还是坚持到了最后。个人水平有限，目前有拿到爱奇艺、苏宁、百度外卖、好未来、CVTE 的 Offer。回忆整理了当时的面试题，同时写了一下自己的经验和感受，希望能够给盆友们一些帮助。 4 | 5 | 个人情况：本科双非，计算机类专业。没有实习经历，有几个自己做的项目，就上了战场。 6 | 7 | ### 面试部分 8 | 9 | #### CVTE内推 10 | 11 | 电话一面，视频一面。CVTE 的前端面试还是相当有水平的，一面结合基础和项目问了一大把，有些答得不够深入；二面写代码写了很长时间，说了说思路。 12 | 13 | ##### 一面（50min） 14 | 15 | 1. 自我介绍？ 16 | 2. 为什么要做前端？（方向要明确） 17 | 3. 最近在学什么东西？ 18 | 4. React 的相对于传统框架的优势是什么？（组件化、Virtual DOM 方面的优势） 19 | 5. React 怎么做数据管理？介绍下 Redux ？React Component 的生命周期？说下 React-Router ？（React技术栈常问面试题） 20 | 6. 简单说一下 Webpack 的原理？ 21 | 7. 项目用到了 WebSocket，说下 WebSocket 吧？长轮询和短轮询？ 22 | 8. LocalStorage 和 SessionStorage 的区别？ 23 | 9. 项目用到了 FIS ，介绍一下？相对于 Webpack 有什么区别？ 24 | 10. CSS 清除浮动的方法？ 25 | 11. 左右两列定宽，中间自适应的方法？（有多种方式） 26 | 12. 浏览器事件代理的原理？ 27 | 13. 介绍一下闭包？应用场景？ 28 | 14. 说一下 JavaScript 的继承方法？ 29 | 15. 用过哪些排序算法？快速排序和选择排序的时间复杂度？ 30 | 16. 前端攻击 XSS，CSRF ？避免方法？（前端安全方面的知识） 31 | 17. 前端性能优化的方法？ 32 | 18. 说一下 HTTP 缓存机制？ 33 | 19. 还有什么要问我的？ 34 | 35 | ##### 二面（40min） 36 | 37 | 1. 自我介绍？ 38 | 2. 聊项目？ 39 | 3. 写代码实现一个 diff 函数？（深比较） 40 | ``` 41 | 对比两个参数是否相等， 42 | diff(1, 1) // true 43 | diff(1, '1') // false 44 | diff({name: 'cvte'}， {name: 'cvte'}) // true 45 | diff({name: 'cvte'}， {name: 'seewo'}) //false 46 | ``` 47 | 4. 写代码实现一个 cut 函数？（考察正则的用法） 48 | ``` 49 | cut(3123123123.123) //3, 123, 123, 123.123 50 | ``` 51 | 52 | 5. 为什么要选择前端？ 53 | 6. 对前端框架的认识和理解？（对比前端三大框架的优劣） 54 | 7. 前端安全方面有什么了解？ 55 | 8. 感觉自己前端哪方面比较薄弱？ 56 | 9. 还有什么要问我的？ 57 | 58 | #### 蘑菇街 59 | 60 | 电话两面。一面问基础和聊发展方向，二面技术 Leader 面简单聊了几句就结束了。 61 | 62 | ##### 一面（50min） 63 | 64 | 1. 自我介绍？ 65 | 2. 对前端这个行业怎么看，为什么要做前端？ 66 | 3. 对自己未来的规划？ 67 | 4. 说一下你理解的前端开发流程？ 68 | 5. 如何理解 JavaScript 闭包？ 69 | 6. 如何理解 JavaScript this 关键字？ 70 | 7. JavaScript 基本数据类型？ 71 | 8. Undifined 和 Null 的区别？ 72 | 9. 了解的 JavaScript 数组方法？ 73 | 10. CSS单位 rem 和 em 的区别？ 74 | 11. 了解的原生 JavaScript 方法？ 75 | 12. CSS 选择器优先级？ 76 | 13. 如何理解 HTML 语义化？ 77 | 14. 如何取消一个事件监听？ 78 | 15. '==' 和 '===' 的区别？ 79 | 16. 如何选择前端框架？ 80 | 17. 你的优点和缺点是什么？ 81 | 18. 当你在一个团队的时候，你的憧憬是什么？ 82 | 19. 还有什么想问我的？ 83 | 84 | ##### 二面（30min） 85 | 86 | 1. 聊项目？ 87 | 2. 从什么时候接触前端的？ 88 | 3. 你专业方向是 J2EE，当时为什么不选择 J2EE？ 89 | 4. JavaScript 和其他语言的面向对象的区别？ 90 | 5. 继续聊项目？ 91 | 6. 兼职实习在做什么？ 92 | 7. 上一次面试官问的什么问题，哪些答的好，哪些答的不好，之后有查过嘛？（药丸） 93 | 8. 还有什么要问我的？ 94 | 95 | #### 拼多多 96 | 97 | 电话三面。问的很简单，三面完之后等了很长时间，应该是没通过。 98 | 99 | ##### 一面（20min） 100 | 101 | 1. 自我介绍 102 | 2. CSS 中 inline 元素可以设置 padding 和 margin 吗？ 103 | 3. 左边固定，右边自适应的两列布局，右面的 DOM 顺序在左边前面，说下实现？ 104 | 4. CSS box-sizing 的值有哪些？ 105 | 5. JavaScript 的基本数据类型？ 106 | 6. 如何判断 JavaScript 数据类型？ 107 | 7. 如何给元素添加事件？ 108 | 8. 如何阻止事件冒泡、阻止默认行为？ 109 | 9. 有一个字符串，里面包括 11 位手机号，如何把里面的手机号替换成别的字符？ 110 | 10. Header 头 Set-cookie: http-only 是干什么用的？ 111 | 11. 还有什么想问我的？ 112 | 113 | ##### 二面（25min） 114 | 115 | 1. 自我介绍？ 116 | 2. 讲讲你做过的项目？ 117 | 3. 项目中提到了 React，问：React 组件的生命周期？父子组件之间如何通信？子组件之间如何通信？ 118 | 4. 前端性能优化？ 119 | 5. HTTP 缓存原理？ 120 | 6. JavaScript 的垃圾回收机制？ 121 | 7. CSS BFC 原理？ 122 | 8. box-sizing 属性（两种盒子模型）？ 123 | 9. 稳定的排序和不稳定的排序？ 124 | 10. 快速排序的思路？ 125 | 11. 堆排序的思路？ 126 | 12. 还有什么想问我的？ 127 | 128 | ##### 三面（25min） 129 | 130 | 1. 问了下学习成绩，考虑过读研吗？为什么选择工作？（很纠结的问题） 131 | 2. 问了下项目的情况和学习经历？ 132 | 3. 有没有拿到其他公司的 Offer？ 133 | 4. 了解我们公司吗？用过我们的产品吗？感觉怎么样？ 134 | 5. 了解我们工作时间和待遇吗？ 135 | 6. 问了下家庭情况？ 136 | 7. 你所期望的薪资价位？ 137 | 8. 还有什么想问我的？ 138 | 139 | #### 京东 140 | 141 | 第一次现场面，有点小紧张。一面问的基础很多。 142 | 143 | ##### 一面（45min） 144 | 145 | 1. 自我介绍？ 146 | 2. 问了下在学校学过的课程？ 147 | 3. HTML5 和 CSS3 新特性？ 148 | 4. LocalStorage、SessionStorage、Cookie的区别？ 149 | 5. 两个页面之间如何实现通信？ 150 | 6. CSS 清除浮动的方法？ 151 | 7. CSS 实现左右垂直居中的方法？ 152 | 8. 用过哪种 CSS 预处理器，简单介绍一下？ 153 | 9. JavaScript typeof 对不同类型的返回结果？ 154 | 10. JavaScript 数组常用方法有哪些？ 155 | 11. 解释 JavaScript 闭包，应用场景有哪些？ 156 | 12. 说下 JavaScript 原型和原型链？ 157 | 13. JavaScript 继承方法有哪些，各有什么优劣势？ 158 | 14. JavaScript 按值传递和引用传值的区别？ 159 | 15. JavaScript 对象的浅拷贝和深拷贝区别？ 160 | 16. 用过哪些前端构建工具？ 161 | 17. 双向数据绑定有没有尝试实现过？ 162 | 18. React 父子之间如何实现数据通信？ 163 | 19. React Redux 数据管理的机制？ 164 | 20. 还有什么想问我的？ 165 | 166 | #### 艺龙旅行网 167 | 168 | 视频两面，当时是在很艰苦的条件下完成的面试。 169 | 170 | ##### 一面（30min） 171 | 172 | 1. 聊了一下学校做过的项目？ 173 | 2. 说几种 HTTP 的状态码？ 174 | 3. JavaScript 基本数据类型？ 175 | 4. JavaScript 跨域的方式？ 176 | 5. 介绍几种 CSS 伪类？ 177 | 6. CSS 选择器优先级？ 178 | 7. 比较一下链表、数组、哈希表？ 179 | 8. 你觉得一个方法写多少行合适？ 180 | 9. 如何处理团队之间的矛盾？ 181 | 10. 还有什么要问我的？ 182 | 183 | ##### 二面（25min） 184 | 185 | 1. 聊项目？ 186 | 2. 微信小程序非页面级组件的实现方式？（小程序的坑） 187 | 3. 使用过的 CSS 布局方式？ 188 | 4. Webpack 的原理？（编译原理） 189 | 5. Webpack 打包出来的文件如何拆包？（没实现过） 190 | 6. 对 ES6 的了解？ 191 | 7. 场景题：1000 个列表如何给每一个列表添加删除事件？（事件委托原理） 192 | 8. JavaScript 事件冒泡和事件捕获？ 193 | 9. 还有什么要问我的？ 194 | 195 | #### 美图 196 | 197 | 电话一面。随便聊了几句。 198 | 199 | ##### 一面（20min） 200 | 201 | 1. 自我介绍？ 202 | 2. 聊项目？ 203 | 3. JavaScript 继承方法？ 204 | 4. JavaScript 基本数据类型和复杂数据类型？ 205 | 5. JavaScript 伪数组是什么？ 206 | 6. 在移动端有哪些尝试？ 207 | 7. CSS display 属性的值及作用？ 208 | 8. HTML5 的新特性？ 209 | 9. 了解的图片的常用格式？ 210 | 10. 从浏览器 URL 输入到页面显示经历了哪些过程？（三次握手、四次挥手） 211 | 11. 通过哪些方式学习前端的？ 212 | 12. 你认为前端工程师的职责是？ 213 | 13. 你对自己未来的规划？ 214 | 14. 还有什么想问我的？ 215 | 216 | #### CVTE校招 217 | 218 | 视频三面，问的挺有难度，各种基础项目 + 手写代码。 219 | 220 | ##### 一面（20min） 221 | 222 | 1. 自我介绍？ 223 | 2. 聊项目？ 224 | 3. TCP Socket 建立连接的原理？ 225 | 4. HTTP 长轮询的原理？ 226 | 5. HTTPS 服务端和客户端连接的原理？（SSL 验证原理） 227 | 6. HTTPS 哪些有薄弱的地方容易被攻击？ 228 | 7. ES6 箭头函数 this 指向的是哪里？ 229 | 8. ES5 var 关键字、ES6 let 和 const 关键字的区别？ 230 | 9. React 父组件和子组件、子组件和子组件如何传递数据？ 231 | 10. React 子组件向层级高的父组件传数据的弊端，如何解决？（React Redux 的原理） 232 | 11. 你前端方面有什么优势？ 233 | 12. 还有什么要问我的？ 234 | 235 | ##### 二面（50min） 236 | 237 | 1. 聊项目？ 238 | 2. 为什么技术选型用 React，而不用 Vue 和 Angular？ 239 | 3. React 组件间的通信方式？Redux 的原理？ 240 | 4. 开始写代码，三个题目（考察正则、原型、闭包）： 241 | 242 | ``` 243 | 实现一个函数 commafy，它接受一个数字作为参数，返回一个字符串，可以把整数部分从右到左每三位数添加一个逗号，如：12000000.11 转化为 12,000,000.11。 244 | ``` 245 | 246 | ``` 247 | 实现一个函数 fun，例： 248 | fun(1).add(1).min(2).num // 最终输出为 -2 249 | ``` 250 | 251 | ``` 252 | 实现一个 compose 函数，它接受任意多个函数作为参数（这些函数都只接受一个参数），然后 compose 返回的也是一个函数，达到以下的效果： 253 | const operate = compose(div2, mul3, add1, add1) 254 | operate(0) // => 相当于 div2(mul3(add1(add1(0)))) 255 | operate(2) // => 相当于 div2(mul3(add1(add1(2)))) 256 | ``` 257 | 258 | 5. 你平时是如何学习前端的？ 259 | 6. 你未来的职业规划是怎样的？ 260 | 7. 还有什么想问我的？ 261 | 262 | ##### 三面（30min） 263 | 264 | 1. 对自己的前两次面试打个分，为什么？ 265 | 2. 之前有在公司实习过吗，感觉如何？ 266 | 3. 有拿到其它 Offer 吗，为什么投递 CVTE？ 267 | 4. 喜欢做成熟性产品还是创业型产品？ 268 | 5. 对加班有什么看法？ 269 | 6. 对 CVTE 的福利待遇有了解吗？ 270 | 7. 你期望获得的薪资？ 271 | 8. 未来 5-10 年的规划是怎样的？ 272 | 9. 你感到最有压力的事是什么？ 273 | 10. 还投过哪些公司，期望去哪家公司？ 274 | 11. 还有什么要问我的？ 275 | 276 | #### 唱吧 277 | 278 | 现场四面，偏向于项目。 279 | 280 | ##### 一面（25min） 281 | 282 | 1. 自我介绍？ 283 | 2. JavaScript 创建构造函数的过程中发生了什么？ 284 | 3. JavaScript 的继承方式？ 285 | 4. 类似于静态变量在 JavaScript 如何实现？（闭包） 286 | 5. 常用的 CSS 布局方式？左栏定宽，右栏自适应如何实现？ 287 | 6. 平时如何学习前端的？ 288 | 7. 还有什么想问我的？ 289 | 290 | ##### 二面（20min） 291 | 292 | 1. 聊项目？ 293 | 2. 前端的职责是什么？ 294 | 3. 对前后端交互有什么认识？ 295 | 4. 了解的前端攻击方式，如何预防？ 296 | 5. 有没有做过 Hybrid 的前端页面？ 297 | 6. 前端有哪些坑人的地方？ 298 | 7. 为什么要做前端？ 299 | 8. 还有什么要问我的？ 300 | 301 | ##### 三面（15min） 302 | 303 | 1. 类似微博或微信客户端扫码登录是如何实现的？ 304 | 2. 长轮询的原理？ 305 | 3. 一个数组，如何统计每个数出现的次数？ 306 | 4. 用过哪些前端工具？ 307 | 5. 如何看待学习框架和基础之间的关系？ 308 | 309 | ##### 四面（25min） 310 | 311 | 1. 自我介绍？ 312 | 2. 通过哪些渠道知道我们公司的招聘的？ 313 | 3. 了解我们公司的哪些产品？ 314 | 4. 如何准备这次面试的？ 315 | 5. 个人履历情况？ 316 | 6. 自己的职业规划是怎样的？ 317 | 7. 如何看待在 BAT 等大厂和创业公司工作？ 318 | 8. 介绍了一下公司的福利和待遇？ 319 | 9. 还有什么想问我的？ 320 | 321 | #### 滴滴 322 | 323 | ##### 一面（50min） 324 | 325 | 视频一面，手撕代码很难受。 326 | 327 | 1. 自我介绍？ 328 | 2. 手写代码找出二叉树节点的最长距离？ 329 | 3. 手写代码实现链表的逆序？ 330 | 3. 手写代码找出数组中的最长递增序列？（动态规划） 331 | 4. 双向循环链表如何最快的找到节点？ 332 | 5. 解决 Hash 冲突的方式？ 333 | 6. B树和B+树的特点？ 334 | 7. 作业调度的算法？ 335 | 8. 产生死锁的原因？ 336 | 9. TCP 和 UDP 的区别？ 337 | 10. TCP 三次握手的各个阶段？ 338 | 11. TCP 的滑动窗口机制？ 339 | 12. TCP 拥塞控制的方式？ 340 | 13. 浏览器内核渲染的原理？ 341 | 14. 有没有研究过 Chrome 的源码？ 342 | 15. 还有什么要问我的？ 343 | 344 | #### 百度外卖 345 | 346 | 电话三面，几乎把前端技术栈问了个遍，相当有水平。 347 | 348 | ##### 一面（30min） 349 | 350 | 1. 自我介绍？ 351 | 2. CSS position 属性的值有哪些？ 352 | 3. CSS Flex 弹性布局的应用场景？ 353 | 4. CSS 单位 em 和 rem 的区别？ 354 | 5. 两边定宽，中间自适应布局的实现方法？ 355 | 6. JavaScript 闭包的理解？ 356 | 7. 对 AMD 和 CMD 理解？ 357 | 8. HTTP 状态码 200 和 304 分别代表什么？ 358 | 9. 问做过的项目和难点？ 359 | 10. 对 React 技术栈的了解？ 360 | 11. React 组件的生命周期、通信方式？ 361 | 12. Webpack 常用的插件？ 362 | 13. 还有什么要问我的？ 363 | 364 | ##### 二面（50min） 365 | 366 | 1. 自我介绍？ 367 | 2. JavaScript 原型和原型链？ 368 | 3. JavaScript this 关键字的理解？ 369 | 4. 常用的设计模式？（单例模式、工厂模式、观察者模式等） 370 | 5. 如何实现一个观察者模式？ 371 | 6. 对 ES6 的了解？ 372 | 7. 箭头函数的应用场景？ 373 | 8. Promise 的特点和实现方式？ 374 | 9. Async/Await 的使用场景？ 375 | 10. Iterator（迭代器）、Generator（生成器）的用法？ 376 | 11. ES6 的 Class 继承和 ES5 有什么不同？ 377 | 12. ES6 的模块化解决了哪些问题？如何进行编译的？ 378 | 13. AMD、CMD、CommonJS 的区别和联系？ 379 | 14. 为什么说 Node.js 是非阻塞 I/O 的运行环境？ 380 | 15. Node.js 的事件驱动模型？ 381 | 16. Angular 脏检查的机制？ 382 | 17. React Virtual DOM 的原理？ 383 | 18. Vue 和前面两种框架的区别？ 384 | 18. 单向数据绑定和双向数据绑定？ 385 | 19. 如何看待前些时间 Angular 和 Vue 撕逼这件事？ 386 | 20. 场景题：栅格布局 CSS 代码如何实现？如何避免重复劳动？（CSS 预处理器） 387 | 21. 场景题：假设有一个列表的数据，React 如何更快的加载数据？（优化方法） 388 | 22. 还有什么要问我的？ 389 | 390 | ##### 三面（15min） 391 | 392 | 1. 自我介绍？ 393 | 2. 学校和专业情况？ 394 | 3. 为什么要选择这个职位？ 395 | 4. 个人职业规划？ 396 | 5. 对公司业务的了解？ 397 | 6. 期望的薪资是多少？ 398 | 7. 还有什么要问我的？ 399 | 400 | #### 创新工场 401 | 402 | 电话简单聊了几句。 403 | 404 | ##### 一面（30min） 405 | 406 | 1. 自我介绍？ 407 | 2. 聊项目？ 408 | 3. 前端如何调试 bug？ 409 | 4. 前端性能优化的方法？ 410 | 5. JavaScript 闭包应用场景？ 411 | 6. 前端跨域的方法？ 412 | 7. 算法题：一个数组包含 1000 个数字，如何找出第 K 大的数字？ 413 | 8. 还有什么要问我的？ 414 | 415 | #### 好未来 416 | 417 | 视频两面，问的比较浅显。 418 | 419 | ##### 一面（25min） 420 | 421 | 1. 聊项目？ 422 | 2. HTML5 的新特性了解多少？ 423 | 3. CSS 实现水平垂直居中的方法？ 424 | 4. CSS 动画的实现方式？ 425 | 5. 左右两栏定宽，中间自适应的实现方法？ 426 | 6. JavaScript 的基本数据类型？ 427 | 7. JavaScript this 关键字的理解？ 428 | 8. ES6 的箭头函数的使用？ 429 | 9. 用过哪些前端框架，评价一下优劣势？ 430 | 10. 看过哪些框架的源代码？ 431 | 11. 还有什么要问我的？ 432 | 433 | ##### 二面（20min） 434 | 435 | 1. 自我介绍？ 436 | 2. 聊项目？ 437 | 3. 438 | ``` 439 | var a 440 | function foo(b) { 441 | a = b 442 | } 443 | console.log(foo(2)) // output 444 | ``` 445 | 4. 446 | ``` 447 | for (var i = 0; i < 3; i++) { 448 | console.log(i) 449 | } 450 | setTimeout(console.log(i)) // output 451 | ``` 452 | 5. 手写实现数组去重？ 453 | 6. 手写封装一个 Promise？ 454 | 7. 手写实现 React 高阶组件？ 455 | 8. 手写实现一个 Redux 中的 reducer (state, action) => newState？ 456 | 9. 什么是函数柯里化？ 457 | 10. 还有什么要问我的？ 458 | 459 | #### 苏宁 460 | 461 | 电话一面，视频一面。 462 | 463 | ##### 一面（25min） 464 | 465 | 1. 自我介绍？ 466 | 2. 如何学习前端的？ 467 | 3. 对 CSS Flex 布局的了解？ 468 | 4. CSS 实现水平垂直居中的方法？ 469 | 5. CSS 清除浮动的方法？ 470 | 6. JQuery DOM 操作相关方法？ 471 | 7. ES6 let 暂时性死区的理解？ 472 | 8. ES6 Promise 的使用方法和应用场景？ 473 | 9. ES6 Arrow Functions 的问题？ 474 | 10. 对 JavaScript this 关键字的理解？ 475 | 11. this 丢失的问题如何解决？ 476 | 12. ES5 Object 有哪些常用的方法？ 477 | 13. Object.keys() 传入数组后会返回什么？ 478 | 14. DOM 事件流的机制？ 479 | 15. 事件冒泡的普遍应用场景？ 480 | 481 | ##### 二面（20min） 482 | 483 | 1. 自我介绍？ 484 | 2. 为什么要做前端？ 485 | 3. 对大公司和小公司的看法？ 486 | 4. 对加班有什么看法？ 487 | 5. 如何保持一个不断学习的状态？ 488 | 6. 如何看待学习前端和计算机基础之间的关系？ 489 | 7. 平时有压力的时候是怎么解决的？ 490 | 8. 你以后的职业规划大体是什么样的？ 491 | 9. 还有什么要问我的？ 492 | 493 | #### 美团 494 | 495 | 现场四面，面试体验很好，美团的技术很不错。现在还在备胎池里待着。 496 | 497 | ##### 一面（45min） 498 | 499 | 1. 自我介绍？ 500 | 2. 聊项目？（主要深挖项目中用到技术） 501 | 3. HTML5 WebSocket 通信及原理？ 502 | 4. TCP 三次握手和四次挥手？ 503 | 5. React 中 state 更新的触发机制？ 504 | 6. React 的 Virtual DOM 原理？其中的 Diff 算法能描述一下吗？ 505 | 7. 对 Vue 了解哪些？ 506 | 8. 前端工作流工具用过哪些？Webpack 的原理？ 507 | 9. JavaScript 实现异步的方法？ 508 | 10. ES6 的了解？ 509 | 11. 手写实现一个 Promise？ 510 | 12. 手写快速排序？ 511 | 13. 手写链表反转？ 512 | 14. 还有什么要问我的？ 513 | 514 | ##### 二面（45min） 515 | 516 | 1. 自我介绍？ 517 | 2. 应用题：用纯CSS写一个左右滑动的开关按钮？ 518 | 3. 代码输出题：以下代码的输出结果？ 519 | ``` 520 | 'use strict' 521 | var a = 5 522 | var obj = { 523 | b: 6 524 | fun: function() { 525 | console.log(this.a) // output 526 | console.log(this.b) // output 527 | } 528 | } 529 | ``` 530 | 4. 代码输出题：以下代码的输出顺序？ 531 | ``` 532 | var a = new Promise(function(resolve, reject) { 533 | console.log(1) // output 534 | setTimeout(() => console.log(2), 0) // output 535 | console.log(3) // output 536 | console.log(4) // output 537 | resolve(true) 538 | }) 539 | a.then(v => { 540 | console.log(5) // output 541 | }) 542 | console.log(6) // output 543 | ``` 544 | 5. 手写一个闭包？ 545 | 6. 手写原型链继承？其它的继承方式？ 546 | 7. 手写原生 Ajax ？ 547 | 8. HTTP 状态码有哪些？ 548 | 9. 还有什么要问我的？ 549 | 550 | ##### 三面（30min） 551 | 552 | 1. 算法题： 553 | ``` 554 | 类似 IP 地址 `192.168.1.1` => `11000000.10101000.00000001.00000001`，必须验证是一个合法的 IP 地址 555 | ``` 556 | 2. 算法题：从一堆数里找出前 K 大的数？ 557 | 3. 聊项目？ 558 | 4. 让你感觉压力很大的一件事是？ 559 | 5. 这辈子你做过最疯狂的事是什么？ 560 | 6. 平时看过那些书？ 561 | 7. 还有什么要问我的？ 562 | 563 | ##### 四面（25min） 564 | 565 | 1. 自我介绍？ 566 | 2. 你是怎么过来的？ 567 | 3. 个人职业规划和发展？ 568 | 4. 拿到过哪些 Offer，薪资是多少？ 569 | 5. 你平时的兴趣爱好？ 570 | 6. 对你影响最深的一个人是？ 571 | 7. 个人家庭情况？ 572 | 8. 如何处理团队成员之间的矛盾？ 573 | 9. 对美团的了解和看法？ 574 | 10. 还有什么要问我的？ 575 | 576 | #### 爱奇艺 577 | 578 | 现场两面。难度一般，面完让回来等第三面。后来直接给了 Offer。 579 | 580 | ##### 一面（45min） 581 | 582 | 1. 自我介绍？ 583 | 2. JavaScript 基本数据类型？ 584 | 3. 代码题：说出以下代码的输出结果？ 585 | ``` 586 | console.log(null == undefined) // output 587 | console.log(null === undefined) // output 588 | console.log(typeof(new Object()) == typeof(null)) // output 589 | console.log(new Number('1') == 1) // output 590 | console.log(new Number('1') === 1) // output 591 | console.log(new Object('1') == 1) // output 592 | console.log(new Object('1') === 1) // output 593 | console.log(new Boolean() == false) // output 594 | console.log(new Boolean() === true) // output 595 | ``` 596 | 4. 代码题：说出以下代码的输出结果？ 597 | ``` 598 | var a = 1 599 | if (true) { 600 | console.log(a) // output 601 | var a = 2 602 | var b = 3 603 | console.log(b) // output 604 | } 605 | console.log(a) // output 606 | console.log(b) // output 607 | b = 4 608 | ``` 609 | 5. 代码题：说出以下代码的输出结果？ 610 | ``` 611 | var a = 1 612 | function a () {} 613 | console.log(a) // output 614 | ``` 615 | 6. 代码题：说出以下代码的输出结果？ 616 | ``` 617 | var a = 1 618 | function fun(a, b) { 619 | a = 2 620 | arguments[0] = 3 621 | arguments[1] = 1 622 | return a + b 623 | } 624 | console.log(fun(0, 0)) // output 625 | console.log(a) // output 626 | ``` 627 | 7. 代码题：说出以下代码的输出结果？ 628 | ``` 629 | for (var i = 0; i < 5; i++) { 630 | setTimeout(function() { 631 | console.log(i) // output 632 | }, 0) 633 | } 634 | console.log(i) // output 635 | ``` 636 | 8. 代码题：说出以下代码的输出结果？ 637 | ``` 638 | function A() { 639 | this.num1 = 1 640 | } 641 | A.prototype.num2 = 2 642 | function B() { 643 | this.num1 = 3 644 | } 645 | B.prototype = new A() 646 | var b1 = new B() 647 | console.log(b1.num1) // output 648 | console.log(b1.num2) // output 649 | var b2 = B() 650 | console.log(b2.num1) // output 651 | console.log(b2.num2) // output 652 | ``` 653 | 10. 谈一下对闭包的理解？ 654 | 11. 谈一下 JavaScript 的继承方式？ 655 | 12. 博客中写了哪些文章？ 656 | 13. GitHub 中写了些什么东西？ 657 | 14. 还有什么要问我的？ 658 | 659 | ##### 二面（20min） 660 | 661 | 1. 自我介绍？ 662 | 2. 聊项目？ 663 | 3. 如何保证的 Socket 实时通信的稳定性？ 664 | 4. TCP/IP 五层模型？各层的协议类型？ 665 | 5. ARP 协议的工作过程？ 666 | 6. IP 数据报的格式？ 667 | 7. TCP 三次握手和四次挥手？ 668 | 8. TCP 的重传机制？ 669 | 9. DNS 查询过程？ 670 | 11. HTTP RESTful接口？ 671 | 12. HTTP 常见状态码？ 672 | 13. 单线程和多线程的区别？ 673 | 14. JavaScript 中的异步队列？ 674 | 15. JavaScript 事件的处理机制？ 675 | 16. React DOM 的更新机制？ 676 | 17. React 受控组件和非受控组件的区别？ 677 | 18. 还有什么要问我的？ 678 | 679 | ### 经验分享 680 | 681 | 笔者从八月多就开始准备简历，那时候一些大厂的内推已经开始。这些公司的校招一般分两个阶段，内推阶段（8月-9月）：通过类似内推码的方式进行网申，不刷简历，但是大部分还是会笔试；校招阶段（9月-11月），正常网申，有可能会刷简历。大约投了四五十家的简历，然后准备做笔试。因为自己没有实习经历，加上双非背景，简历被刷是正常的事，就通过了几家笔试。前几场面试几乎连跪，快到十月了还没有拿到一个 Offer，那时候心态快崩了。后面继续投简历做笔试，获得了几个面试机会，就是硬着头皮也要上了。最后总算没有辜负那些天的坚持，拿到了几个 Offer。 682 | 683 | #### 关于笔试 684 | 685 | 笔试是面试的重要参考条件。这些大厂参加笔试人不计其数，想从中脱颖而出得到面试机会很难。所以要提前做好准备，多刷刷题。笔者从九月份开始几乎每天做笔试，有时候一天下来好几场笔试。大部分都是这种。 686 | 687 | **笔试常考题型：** 688 | 689 | 1. 计算机基础: 数据结构、操作系统、网络原理 690 | 2. 智力题、概率题 691 | 3. 前端方向: HTML/CSS基础、JavaScript 基础、框架（React、Vue 等）、Node.js 692 | 4. 编程题：常规水题、动态规划、贪心算法 693 | 694 | 笔者水平太渣，加上双非背景，做了很多笔试得到面试机会的不多。建议校招之前有时间刷一遍 LeetCode，对于提高编程水平很有帮助。 695 | 696 | #### 关于面试 697 | 698 | 经历了这几场面试，总结了几点的感受： 699 | 700 | **1. 校招基础很重要，项目经验要有一点** 701 | 702 | 对于一个校招生，并没有很多的项目积累，所以校招看重基础方面的东西比较多。但是他们也要可以尽快干活的，所以平时准备几个能说的项目，比如小 Demo 类似的。 703 | 704 | **2. 实习经历是加分项** 705 | 706 | 能通过春季实习生招聘的尽快进去，转正会比秋招找工作的几率大很多，而且对秋招找工作来说是加分项。 707 | 708 | **3. 实力很重要，也要看缘分** 709 | 710 | 决定能不能通过面试的因素主要有：遇到的面试官、岗位匹配度、部门 Leader 的意见、该岗位 HC 的数量等。综合这几方面的因素，`面试 = 70%实力 + 30%运气` 。所以面试不通过并不能说明你实力不行。 711 | 712 | **4. 面试也是积累的过程** 713 | 714 | 面试是一个综合表达自己各方面，能够发现自己的不足，并及时弥补的过程。无论结果如何都对自己是一次提升，下一次可以比以前做得更好。 715 | 716 | 最后，希望大家都能找到自己满意的工作！ -------------------------------------------------------------------------------- /file/面经/201958同城前端社招面经.md: -------------------------------------------------------------------------------- 1 | # 2019 58同城前端社招面经 2 | 3 | ## 一面 4 | 5 | 1. `JSBrigde` 原理，`Native` 端回调函数怎么执行的 6 | 7 | 2. 如何设计一个 `$.JSONP()` 方法 8 | 9 | 3. 实现 `ES5 bind()` 方法 10 | 11 | 4. `Promise` 链式调用的 `catch()` 的返回 12 | 13 | 5. `Vue` 双向数据绑定原理 14 | 15 | 6. `Node.js` 的事件循环机制 16 | 17 | 7. 长列表数据的优化方案 18 | 19 | 8. 每隔 `5s` 轮询一次请求，你如何实现 -------------------------------------------------------------------------------- /file/面经/2019字节跳动前端社招面经（一）.md: -------------------------------------------------------------------------------- 1 | # 2019 字节跳动前端社招面经（一） 2 | 3 | 西瓜视频方向，上来先做了几道笔试题： 4 | 5 | ## 一面（卒） 6 | 7 | 1. 实现图片裁剪效果 8 | 2. 宏任务、微任务的执行顺序（Promise, nextTicks, setImmediate） 9 | 3. JavaScript this 的指向（let 全局变量的坑）： 10 | ``` 11 | let a = 'ByteDance1' 12 | let obj = { 13 | a: 'ByteDance2', 14 | fun1: function() { 15 | console.log(this.a) 16 | } 17 | } 18 | let fun2 = obj.fun1 19 | fun2.call(null) 20 | ``` 21 | 4. 一道动态规划的题目 22 | 23 | 之后，照着面试题问了下： 24 | 25 | 1. this 绑定的方式，它们的区别（call, apply, bind） 26 | 2. 跨域的处理方式（前端和后端） 27 | 3. 聊项目，你印象最深的一个项目 28 | 4. React 性能优化方案 29 | 5. React-Redux connect() 方法 30 | 6. 找出对象数组中对象 Key 相同的值，reduce 函数？ 31 | 7. Ajax, Fetch 的区别 32 | 8. 实现二叉树反转（剑指 Offer 原题） -------------------------------------------------------------------------------- /file/面经/2019字节跳动前端社招面经（二）.md: -------------------------------------------------------------------------------- 1 | # 2019 字节跳动前端社招面经（二） 2 | 3 | 另一条业务线捞起来继续面，头条 APP 主端方向，上来还是先做笔试题： 4 | 5 | ## 一面（卒） 6 | 7 | 1. 简述 HTTPS 密钥交换原理 8 | 2. 说明 ES6 Module 和 CommonJS 的区别 9 | 3. setTimeout 和 requestAnimationFrame 的区别（setTimeout ms 一定是精确的吗，描述 JavaScript 事件队列） 10 | 4. ['1', '2', '3'].map(parseInt) 的输出 11 | 5. 简述 CSRF、XSS、SQL 注入 和 DDoS 攻击的区别 12 | 6. 纯 CSS 实现一个盒子占外部盒子宽度的 80%，且高度为自身宽度的 30% 13 | 7. 模拟实现 ES5 中的 bind 函数 14 | 8. 算法：一定规律的点阵：第一行为 3 个点分布居中排列，第二行为 2 个点分布居中排列，第三行为 3 个点分布居中排列... 算出该点阵共有多少个点 15 | 9. 算法：请打印出一颗二叉树的左视图看到的节点，如二叉树： 16 | 17 | ``` 18 | 1 19 | ╱╲ 20 | 2 4 21 | ╱╲ 22 | 7 9 23 | ╱╲ 24 | 3 5 25 | ``` 26 | 27 | 输出为：`1, 2, 7, 3` 28 | 29 | 10. 聊项目相关（React、React Native 等） -------------------------------------------------------------------------------- /file/面经/2019小米前端社招面经.md: -------------------------------------------------------------------------------- 1 | # 2019 小米前端社招面经 2 | 3 | 拉勾网上投的简历，第二天 HR 打来电话约面试。 4 | 5 | 2019.02.21，小米的办公区有一种小而美的氛围，这次面的是小米商城方向。 6 | 7 | ## 笔试热身 8 | 9 | 上来先拿来几张笔试题，让先做做，题目大致如下： 10 | 11 | 1. 常用设计模式的有哪些 12 | 2. 为什么要有同源跨域的限制 13 | 3. script 标签属性 defer 和 async 的区别 14 | 4. 对象的创建方式有哪几种 15 | 5. JavaScript 异步编程的方式 16 | 6. 造成内存泄漏的原因 17 | 7. 深拷贝和浅拷贝的实现 18 | 8. 快速排序 19 | 9. 统计一段字符串的总字节数 20 | 10. 函数柯里化 21 | 22 | 这几面主要是围绕简历问的问题： 23 | 24 | ## 一面 25 | 26 | 1. 对 MVVM 模式的理解 27 | 2. React Native 的原理 28 | 3. React Diff 算法 29 | 4. Vue 的生命周期 30 | 5. JSBrige 原理 31 | 6. 聊项目 32 | 33 | ## 二面 34 | 35 | 没有问太细的问题，主要是聊项目 36 | 37 | ## 三面 38 | 39 | 1. 两数之和（leetcode 第一题） 40 | 2. JavaScript 继承的实现方式 41 | 3. 双向数据绑定原理 42 | 4. 常用的数组方法 43 | 5. reduce 的应用场景 44 | 6. 聊项目 45 | 46 | ## 四面（HR） 47 | 48 | 这一面是 HR 面 49 | 50 | 1. 聊职业发展 51 | 2. 聊现任公司的相关背景 52 | 3. 聊期望薪资和待遇 53 | 54 | ## 五面 55 | 56 | 商城方向的总负责人，围绕个人发展和商城技术栈聊了聊 -------------------------------------------------------------------------------- /file/面经/2019快手前端社招面经.md: -------------------------------------------------------------------------------- 1 | # 2019 快手前端社招面经 2 | 3 | ## 一面 4 | 5 | 1. 请写出以下代码执行结果： 6 | 7 | ```js 8 | var a = {x: 1} 9 | var b = a 10 | a.x = a = {n: 1} 11 | console.log(a) 12 | console.log(b) 13 | ``` 14 | 15 | 2. 请写出以下代码执行结果: 16 | 17 | ```js 18 | Function.prototype.a = () => alert(1) 19 | Object.prototype.b = () => alert(2) 20 | function A() {} 21 | const a = new A() 22 | a.a() 23 | a.b() 24 | ``` 25 | 26 | 3. 请写出以下代码执行结果： 27 | 28 | ```js 29 | let a = 0 30 | console.log(a) 31 | console.log(b) 32 | let b = 0 33 | console.log(c) 34 | function c() {} 35 | ``` 36 | 37 | 4. 请写出以下代码执行结果： 38 | 39 | ```js 40 | var x = 10 41 | function a(y) { 42 | var x = 20 43 | return b(y) 44 | } 45 | function b(y) { 46 | return x + y 47 | } 48 | a(20) 49 | ``` 50 | 51 | 5. 请写出以下代码执行结果： 52 | 53 | ```js 54 | console.log(1) 55 | setTimeout(() => { 56 | console.log(2) 57 | }) 58 | process.nextTick(() => { 59 | console.log(3) 60 | }) 61 | setImmediate(() => { 62 | console.log(4) 63 | }) 64 | new Promise(resolve => { 65 | console.log(5) 66 | resolve() 67 | console.log(6) 68 | }) 69 | .then(() => { 70 | console.log(7) 71 | }) 72 | Promise.resolve() 73 | .then(() => { 74 | console.log(8) 75 | process.nextTick(() => { 76 | console.log(9) 77 | }) 78 | }) 79 | ``` 80 | 81 | 6. 请写出以下代码执行结果： 82 | 83 | ```js 84 | [1, 2, 3, 4, 5].map(parseInt) 85 | ``` 86 | 87 | 7. 请写出以下代码执行结果： 88 | 89 | ```js 90 | typeof typeof typeof [] 91 | ``` 92 | 93 | 8. 以下 CSS 最终是什么颜色： 94 | 95 | ```html 96 | 101 |
abc
102 | ``` 103 | 104 | 9. 以下 CSS 最终是什么颜色： 105 | 106 | ```html 107 | 111 |

123

112 | ``` 113 | 114 | 10. 请解释以下什么是 `BFC`, `IFC`, `FFC` 115 | 116 | 11. `visibility: hidden` 与 `display: none` 的区别 117 | 118 | 12. CSS 中你所知道的长度单位有哪些，有哪些区别 119 | 120 | 13. `img` 标签的 `alt` 和 `title` 的区别 121 | 122 | 14. 如何理解 `a11y` 123 | 124 | 15. 请解释一下 Node 中垃圾回收算法主要有哪些，分别使用在什么场景 125 | 126 | 16. 什么是死锁，以及死锁产生的必要条件有哪些 127 | 128 | 17. 请实现一个算法，实现数组乱序，要求每个数字出现在每个位置的概率是平均的 129 | 130 | 18. 请补充以下代码： 131 | 132 | ```js 133 | function add() { 134 | 135 | } 136 | function one() { 137 | 138 | } 139 | function two() { 140 | 141 | } 142 | console.log(one(add(two()))) // 3 143 | console.log(two(add(one()))) // 3 144 | ``` 145 | 146 | 19. 请实现一个 `cacheRequest` 方法，保证当使用 `Ajax` 请求相同资源时，真实网络层中，实际只发出一次请求（假设已存在 `request` 方法用于封装 `Ajax` 请求，调用格式为：`request(url, successCallback, failCallback)`）。比如调用方代码如下： 147 | 148 | ```js 149 | // a.js 150 | cacheRequest('/user', data => { 151 | console.log('我是从 A 中请求的 user，数据为' + data) 152 | }) 153 | // b.js 154 | cacheRequest('/user', data => { 155 | console.log('我是从 B 中请求的 user，数据为' + data) 156 | }) 157 | ``` -------------------------------------------------------------------------------- /file/面经/2019快看漫画前端社招面经.md: -------------------------------------------------------------------------------- 1 | # 2019 快看漫画前端社招面经 2 | 3 | ## 一面 4 | 5 | 1. JavaScript 事件循环原理 6 | 2. 实现深拷贝函数 7 | 3. 实现 JavaScript 多继承 8 | 4. 实现防抖和节流 9 | 5. 实现数组去重 10 | 6. CSS 左右定宽，中间自适应的方法 11 | 12 | ## 二面 13 | 14 | 一个二分查找的变形算法题 15 | 16 | ## 三面 17 | 18 | 主要是 HR 的问题 -------------------------------------------------------------------------------- /file/面经/2019搜狐前端社招面经.md: -------------------------------------------------------------------------------- 1 | # 2019 搜狐前端社招面经 2 | 3 | 进去搜狐媒体大厦，先填了一个面试信息表，然后 HR 领到了面试的楼层。面试问题主要问了简历上的过往经历和项目经验： 4 | 5 | ## 一面 6 | 7 | 1. 对 MVVM 模式的理解 8 | 2. 前端跨域的方式，JSONP 服务端返回的结果，HTTP 请求头和响应头 9 | 3. 简单请求和复杂请求 10 | 4. Vue 响应式原理（双向数据绑定） 11 | 5. Vue mixin 的使用 12 | 6. 尾递归调用 13 | 7. JSBrige 原理 14 | 8. React Diff 算法 15 | 9. React Native 和 Native 的转化原理 16 | 10. React 和 Vue 的使用场景和区别 17 | 11. 聊项目相关 18 | 19 | ## 二面 20 | 21 | 1. setTimout 实现 setInterval 22 | 2. 统计字符串出现最多的字符 23 | 3. React 和 Vue 的使用 24 | 3. 聊项目相关 25 | 26 | ## 三面 27 | 28 | 主要聊项目 -------------------------------------------------------------------------------- /file/面经/2019猫眼前端社招面经.md: -------------------------------------------------------------------------------- 1 | # 2019 猫眼前端社招面经 2 | 3 | ## 一面 4 | 5 | 暂时记起了这些： 6 | 7 | 1. 原型的相关问题 8 | 9 | 2. `Promise` 的输出： 10 | 11 | ```js 12 | Promise.resolve(1) 13 | .then(() => { 14 | console.log(2) 15 | return 3 16 | }) 17 | .then((data) => { 18 | console.log(data) 19 | }) 20 | .catch(() => { 21 | new Error('error') 22 | }) 23 | .then(() => { 24 | console.log(4) 25 | }) 26 | ``` 27 | 28 | 3. `HTTP` 简单请求和复杂请求 29 | 30 | 4. `React` 的父子组件创建的生命周期 31 | 32 | 5. `React` 的 `Vitual DOM` 和 `Diff` 算法 33 | 34 | 6. 手写归并排序 -------------------------------------------------------------------------------- /file/面经/2019猿辅导前端社招面经.md: -------------------------------------------------------------------------------- 1 | # 2019 猿辅导前端社招面经 2 | 3 | ## 一面 4 | 5 | 1. 对 Web 语义化的理解 6 | 2. CSS 垂直左右居中的方式 7 | 3. CSS 选择器的优先级、继承关系 8 | 4. JavaScript 原型链和继承方式 9 | 5. 对 JavaScript this 的理解 10 | 6. Promise.all() 和 Promise.race() 的区别 11 | 7. 实现数组扁平化并从小到大排序：`[1, [2, 3], [2, 3, 5], 7] -> [1, 2, 2, 3, 3, 5,7]` 12 | 8. 手写快速排序 13 | 14 | -------------------------------------------------------------------------------- /file/面经/2019美菜网前端社招面经.md: -------------------------------------------------------------------------------- 1 | # 2019 美菜网前端社招面经 2 | 3 | # 一面 4 | 5 | 1. `CSS` 选择器的优先级排序 6 | 7 | 2. 以下代码的输出： 8 | 9 | ```js 10 | function A() { 11 | this.name = name 12 | } 13 | A.prototype.name = 'xiaoming' 14 | var a = new A() 15 | console.log(a.name) 16 | ``` 17 | 18 | 3. 前端模块化的方式 19 | 20 | 4. JavaScript 异步回调的解决方案 21 | 22 | 5. 实现数组去重 23 | 24 | 6. 用原生 `DOM API` 实现一个 `prepend()` 方法 25 | 26 | 7. `CSRF` 产生的原因和解决方法 27 | 28 | 8. `GET` 和 `POST` 的区别 29 | 30 | 9. 用过哪些框架/库，有深入研究原理吗 31 | -------------------------------------------------------------------------------- /file/面经/2019蚂蚁金服前端社招面经.md: -------------------------------------------------------------------------------- 1 | # 2019 蚂蚁金服前端社招面经 2 | 3 | # 一面 4 | 5 | 笔者说是 React 技术栈，所以问题基本都是 React： 6 | 7 | 1. React 组件间的通信方式 8 | 2. React 组件的生命周期 9 | 3. 网络请求在 componentWillMount 和 componentDidMount 有什么区别 10 | 4. React 组件实现按需加载 11 | 5. React 数据流的管理方式 12 | 6. React-Redux 相对原生 Redux 的改进 13 | 7. React-Redux connect 方法 mapStateToProps 和 mapDispatchToProps 参数的使用 14 | 8. Redux action 异步数据处理 15 | 9. 你有什么想问我的么 -------------------------------------------------------------------------------- /file/面经/2020伴鱼前端社招面经.md: -------------------------------------------------------------------------------- 1 | # 2020 伴鱼前端社招面经 2 | 3 | 1. 浏览器从输入 URL 到页面展示的过程 4 | 2. HTTP 强缓存和协商缓存 5 | 3. JavaScript 阻塞页面加载相关 6 | 4. CSS 元素垂直居中的方式 7 | 5. CSS 设置高度等于宽度的 3/4 8 | 6. JS 异步执行顺序： 9 | 10 | ```js 11 | console.log(1) 12 | async function async1() { 13 | console.log(2) 14 | await console.log(3) 15 | console.log(4) 16 | } 17 | setTimeout(function() { 18 | console.log(5) 19 | }, 0) 20 | async1() 21 | new Promise(function(resolve) { 22 | console.log(6) 23 | resolve() 24 | }).then(function() { 25 | console.log(7) 26 | }) 27 | console.log(8) 28 | ``` 29 | 30 | 7. this 的输出: 31 | 32 | ```js 33 | var name = '123' 34 | function func() { 35 | console.log(this.name) 36 | } 37 | var object = { 38 | name: 'object', 39 | getNameFunc: function(fn) { 40 | fn && fn() 41 | return function() { 42 | return this.name 43 | } 44 | } 45 | } 46 | console.log(object.getNameFunc(func)()) 47 | ``` 48 | 49 | 8. 聊项目 -------------------------------------------------------------------------------- /file/面经/2020作业帮前端社招面经.md: -------------------------------------------------------------------------------- 1 | # 2020 作业帮前端社招面试 2 | 3 | ## 一面 4 | 5 | 1. HTML 行内元素和块级元素 6 | 2. CSS3 新特性 7 | 3. CSS3 transform 属性和 left 区别 8 | 4. CSS pointer-events 属性 9 | 5. display: none 和 visibility: hidden 区别 10 | 6. JavaScript this 关键字 11 | 7. JavaSCript 闭包和应用 12 | 8. 防抖和节流 13 | 9. Promise 和应用 14 | 10. 数组去重 15 | 11. 事件委托和使用场景 16 | 12. Tab 组件的设计 17 | 18 | ## 二面 19 | 20 | 聊项目和聊人生 21 | 22 | ## 三面（HR） 23 | 24 | 1. 上两家公司的情况，为什么离职 25 | 2. 期望的团队是什么样的 26 | 3. 职业发展和规划 -------------------------------------------------------------------------------- /file/面经/2020图虫前端社招面经.md: -------------------------------------------------------------------------------- 1 | # 2020 图虫前端社招面经 2 | 3 | 1. CSS 实现等腰三角形 4 | 2. CSS 实现宽高等比 5 | 3. JS 实现 sleep 函数 6 | 4. TS 实现两个数相加（TS 函数重载） 7 | 5. react hooks 实现倒计时 -------------------------------------------------------------------------------- /file/面经/2020快手前端社招面经.md: -------------------------------------------------------------------------------- 1 | # 2020 快手前端社招面经 2 | 3 | ## 一面 4 | 5 | 1. JS 判断类型的方法 6 | 2. `Object.prototype.toString.call([])` 的输出 7 | 3. 以下代码的结果： 8 | 9 | ```js 10 | Function.prototype.a = () => alert(1); 11 | Object.prototype.b = () => alert(2); 12 | function A() {} 13 | const a = new A(); 14 | a.a(); 15 | a.b(); 16 | ``` 17 | 18 | 4. `Object.create(null)` 和 `null` 的区别 19 | 20 | 5. 跨域的方式，JSONP 的返回值是什么格式，CORS 前后端怎么设置 21 | 22 | 6. 以下代码的结果: 23 | 24 | ```js 25 | var x = 10; 26 | function a(y) { 27 | var x = 20; 28 | return b(y); 29 | } 30 | function b(y) { 31 | return x + y 32 | } 33 | a(20); 34 | ``` 35 | 36 | 7. Node Event 原理 37 | 38 | 8. 以下代码的结果： 39 | 40 | ```js 41 | console.log(1); 42 | 43 | setTimeout(() => { 44 | console.log(2) 45 | }); 46 | 47 | process.nextTick(() => { 48 | console.log(3); 49 | }); 50 | 51 | setImmediate(() => { 52 | console.log(4) 53 | }); 54 | 55 | new Promise(resolve => { 56 | console.log(5); 57 | resolve(); 58 | console.log(6); 59 | }).then(() => { 60 | console.log(7) 61 | }); 62 | 63 | Promise.resolve().then(() => { 64 | console.log(8); 65 | process.nextTick(() => { 66 | console.log(9) 67 | }); 68 | }); 69 | ``` 70 | 71 | 9. 代码实现一个 Promise.all() 72 | 73 | 10. input 输入框输入频繁的解决方法，数据异步请求同步返回的方法 74 | 75 | 11. 聊项目 -------------------------------------------------------------------------------- /file/面经/2020抖音前端社招面经.md: -------------------------------------------------------------------------------- 1 | # 2020 抖音前端社招面经 2 | 3 | # 一面 4 | 5 | 1. 代码题：类似 `['1.1.1.1.1', '6', '2.3.1', '2.1.1', '6.4.3.2']` 的版本号排序 6 | 7 | 2. 代码题：类型以下二叉树层级蛇形输出 8 | 9 | ``` 10 | 2 11 | 4 5 12 | 7 9 11 13 13 | ``` 14 | 15 | 输出结果为：2 4 5 13 11 9 7 16 | 17 | 3. 以下的输出： 18 | 19 | ```js 20 | const list = [1, 2, 3]; 21 | const square = num => { 22 | return new Promise((resolve, reject) => { 23 | setTimeout(() => { 24 | resolve(num * num); 25 | }, 1000); 26 | }); 27 | } 28 | function test() { 29 | list.forEach(async x => { 30 | const res = await square(x); 31 | console.log(res); 32 | }); 33 | } 34 | test() 35 | ``` 36 | 37 | 4. HTTPS 密钥交换原理 38 | 39 | 5. CommonJS 和 ES Module 区别 40 | 41 | 6. CSS 实现宽高等比 42 | 43 | 7. 以下的颜色： 44 | 45 | ```html 46 | 54 |
Bytedance
55 | ``` 56 | 57 | 8. Vuex 底层实现 58 | 59 | 9. 了解的设计模式 60 | 61 | 10. 代码实现实现一个 Event 62 | 63 | 11. 10000 个数字寻找最大的 100 个 -------------------------------------------------------------------------------- /file/面经/2020滴滴出行前端社招面经.md: -------------------------------------------------------------------------------- 1 | # 2020 滴滴出行前端社招面经 2 | 3 | ## 一面 4 | 5 | 笔试： 6 | 7 | 1. 实现一个文字居中，左右横线的布局 8 | 9 | 2. 以下代码的样式显示的字体大小，CSS 优先级的顺序是怎么样的： 10 | 11 | ```html 12 | 22 | ``` 23 | 24 | 3. 实现一个函数 find(obj, str)，满足： 25 | 26 | ``` 27 | var obj = {a : { b: { c: 1 } }} 28 | find(obj, 'a.b.c') // 1 29 | find(obj, 'a.d.c') // undefined 30 | ``` 31 | 32 | 4. 请写出以下代码的输出结果： 33 | 34 | ```js 35 | var a = 0, b = 0 36 | function A(a) { 37 | A = function(b) { 38 | alert(a+b++) 39 | } 40 | alert(a++) 41 | } 42 | A(1) 43 | A(2) 44 | ``` 45 | 46 | 5. 请写出匹配邮箱的正则表达式，如 `hello1988@gmail.com`，`hello1998@didichuxing.com.cn` 47 | 48 | 6. 请列出你知道的浏览器兼容问题，并给出解决方案 49 | 50 | 7. 请说出几种浏览器跨域的方法，并描述适用场景 51 | 52 | 8. 对于加快网页的加载速度有哪些优化的方法 53 | 54 | 9. 浏览器在输入 URL 到页面渲染，中间都经过了哪些事 55 | 56 | 10. 说说你对前端工程化的理解，以及在项目中如何运用的 57 | 58 | 11. 已知有两个栈，有 pop，push，getSize 接口，请用这两个栈实现 1 个队列，包含 dequeue 和 enqueue 接口 59 | 60 | 问答： 61 | 62 | 12. JSBridge 实现原理 63 | 64 | 13. React、Vue 的适用场景 -------------------------------------------------------------------------------- /file/面经/2020知乎前端社招面经.md: -------------------------------------------------------------------------------- 1 | # 2020 知乎前端社招面经 2 | 3 | 把 React 问的很深，基本上都是工作中没注意的地方 4 | 5 | 1. React 生命周期 6 | 2. React 新生命周期 getDerivedStateFromProps 的用法 7 | 3. React hooks 原理 8 | 4. React 循环 key 用 index 的适用场景 -------------------------------------------------------------------------------- /file/面经/2020神策数据前端社招面经.md: -------------------------------------------------------------------------------- 1 | # 2020 神策数据前端社招面经 2 | 3 | 1. HTML 语义化标签的作用 4 | 2. 举例 CSS3 的新特性 5 | 3. 响应式布局，CSS rem 单位 6 | 4. var, let, const 比较 7 | 5. 浏览器存储方案：cookie，localStorage, sessionStorage，适用场景 8 | 6. JS 变量提升 9 | 7. JS this 关键字，箭头函数的 this，call、apply、bind 区别 10 | 8. typeof 和 instanceof 11 | 9. Promise 使用，相对于回调函数优点 12 | 10. JS 原型链 13 | 11. 防抖和节流 14 | 12. 重绘和回流 15 | 13. React 封装表格组件，排序怎么实现 16 | 14. React hooks useEffect 的使用 17 | 15. 代码题: 实现一个表格内 date 字段正序和倒序 18 | 16. 代码题：calc 的实现，即输出一个数的最多乘积的数组 -------------------------------------------------------------------------------- /file/面经/2020老虎证券前端社招面经.md: -------------------------------------------------------------------------------- 1 | # 2020 老虎证券前端社招面试 2 | 3 | 1. CSS3 新特性 4 | 2. CSS position 属性的值和区别 5 | 3. CSS 左右定宽，中间自适应实现 6 | 4. 清楚浮动的方法 7 | 5. JavaScript 基本数据类型，BigInt 类型 8 | 6. var, let, const 区别 9 | 7. 宏任务和微任务 10 | 8. JavaScript 原型 11 | 9. HTTP 缓存 12 | 10. cookie 和 localStorage 13 | 12. 跨域解决方式 14 | 13. 正则表达式匹配 qq 邮箱 15 | 14. 写一个深拷贝 16 | 15. React 新生命周期 17 | 16. React setState 异步和执行顺序 18 | 17. React 常用的 hooks 19 | 18. React useEffect 如何获取 setState 之后的新数据 20 | -------------------------------------------------------------------------------- /file/面经/2020跟谁学前端社招面经.md: -------------------------------------------------------------------------------- 1 | # 2020 跟谁学前端社招面经 2 | 3 | ## 一面 4 | 5 | 1. 说出几个 HTML 的块级元素和行级元素 6 | 2. script 标签 defer 和 async 的区别 7 | 3. CSS 盒子模型 8 | 4. CSS BFC 9 | 5. CSS 外边距合并和解决方式 10 | 6. CSS 定位方式区别 11 | 7. JavaScript 基本数据类型 12 | 8. 结合代码问题：JS 的 this，箭头函数，call、apply、bind 函数 13 | 14 | ```js 15 | var a = { 16 | b: 1, 17 | get: function() { 18 | return this.b 19 | } 20 | } 21 | var getB = a.get 22 | console.log(getB()) 23 | ``` 24 | 25 | 9. 结合代码问题：JS 闭包 26 | 27 | ```js 28 | for (var i = 0; i < 5; i++) { 29 | setTimeout(function(i) { 30 | console.log(i) 31 | }, 1000) 32 | } 33 | ``` 34 | 35 | 10. 结合代码问题： 36 | 37 | ```js 38 | var char = 'a' 39 | (function() { 40 | if (typeof char === 'undefined') { 41 | var char = 'b' 42 | console.log(char) 43 | } else { 44 | console.log(char) 45 | } 46 | })() 47 | ``` 48 | 49 | 11. Vue 生命周期 50 | 12. Vue computed 和 watch 的区别 51 | 13. 编程题： 52 | 53 | 找出数组中绝对值最小的元素，如 [-1, 3, -100, 4, -20] -> -1 54 | 55 | ```js 56 | function findAbsMinOfArray() { 57 | // 编写代码 58 | } 59 | ``` 60 | 61 | ## 二面 62 | 63 | 聊项目，聊人生 64 | 65 | ## 三面 66 | 67 | 聊上两家公司的情况，聊职业发展和对现在的期望 -------------------------------------------------------------------------------- /file/面经/2020转转前端社招面经.md: -------------------------------------------------------------------------------- 1 | # 2020 转转前端社招面经 2 | 3 | # 一面 4 | 5 | 1. CSS3 动画 6 | 2. CSS 盒子模型 7 | 3. 左边定宽，右边自适应的实现方法 8 | 4. JavaScript 基本数据类型 9 | 5. 如何判断数据类型（typeof 和 instanceof） 10 | 6. JavaScript 原型 11 | 7. JavaScript this 12 | 8. JavaScript new 原理 13 | 9. JavaScript 继承 14 | 10. 微任务和宏任务 15 | 11. cookie 和 localStorage 16 | 12. HTTP 缓存相关 17 | 13. 跨域解决方案 18 | 14. Vue 双向数据绑定原理 19 | 15. Vuex 的使用 20 | 16. Vue-router 原理 21 | 17. Vue computed 和 watch 区别 22 | 18. React 和 Vue 对比 23 | 24 | # 二面 25 | 26 | 1. Event 实现原理 27 | 2. 聊项目 28 | 29 | # 三面 30 | 31 | HR 聊天 -------------------------------------------------------------------------------- /file/面经/2020阿里UC前端社招面经.md: -------------------------------------------------------------------------------- 1 | # 2020 阿里UC前端社招面经 2 | 3 | 1. ES6 的几种声明方式 4 | 2. const，let，var 的对比 5 | 3. 闭包的理解和应用 6 | 4. 防抖的实现 7 | 5. 宏任务和微任务的执行顺序 8 | 6. CSS 盒子模型 9 | 7. CSS 元素垂直巨中的方式 10 | 8. Flex 布局的伸缩属性 11 | 9. React props 和 state 区别 12 | 10. React setState 的过程 13 | 11. Redux 和 Redux 中间件的使用 14 | 12. leetcode 开平方题 -------------------------------------------------------------------------------- /file/面经/2020阿里高德前端社招面经.md: -------------------------------------------------------------------------------- 1 | # 2020 阿里高德前端社招面经 2 | 3 | ## 一面 4 | 5 | 1. Webpack 的配置 6 | 2. ES6 编译相关 7 | 3. Promise 的执行 8 | 4. 正则表达式相关 9 | 5. React 的生命周期 10 | 6. Flex 布局 11 | 7. 实现一个 Event，包含 on 和 emit 方法 12 | 13 | ## 二面 14 | 15 | 1. 介绍一个认为难的项目 16 | 2. RN 的一些原理 17 | 3. 代码：二叉树的遍历 18 | 4. 代码：Promise 实现间隔输出 -------------------------------------------------------------------------------- /file/面经/index.md: -------------------------------------------------------------------------------- 1 | 2 | [2020阿里高德前端社招面经.md](./2020阿里高德前端社招面经.md) 3 | 4 | [2020阿里UC前端社招面经.md](./2020阿里UC前端社招面经.md) 5 | 6 | [2020伴鱼前端社招面经.md](./2020伴鱼前端社招面经.md) 7 | 8 | [2020滴滴出行前端社招面经.md](./2020滴滴出行前端社招面经.md) 9 | 10 | [2020抖音前端社招面经.md](./2020抖音前端社招面经.md) 11 | 12 | [2020跟谁学前端社招面经.md](./2020跟谁学前端社招面经.md) 13 | 14 | [2020快手前端社招面经.md](./2020快手前端社招面经.md) 15 | 16 | [2020老虎证券前端社招面经.md](./2020老虎证券前端社招面经.md) 17 | 18 | [2020神策数据前端社招面经.md](./2020神策数据前端社招面经.md) 19 | 20 | [2020图虫前端社招面经.md](./2020图虫前端社招面经.md) 21 | 22 | [2020知乎前端社招面经.md](./2020知乎前端社招面经.md) 23 | 24 | [2020转转前端社招面经.md](./2020转转前端社招面经.md) 25 | 26 | [2020作业帮前端社招面经.md](./2020作业帮前端社招面经.md) 27 | 28 | [201958同城前端社招面经.md](./201958同城前端社招面经.md) 29 | 30 | [2019快看漫画前端社招面经.md](./2019快看漫画前端社招面经.md) 31 | 32 | [2019快手前端社招面经.md](./2019快手前端社招面经.md) 33 | 34 | [2019蚂蚁金服前端社招面经.md](./2019蚂蚁金服前端社招面经.md) 35 | 36 | [2019猫眼前端社招面经.md](./2019猫眼前端社招面经.md) 37 | 38 | [2019美菜网前端社招面经.md](./2019美菜网前端社招面经.md) 39 | 40 | [2019搜狐前端社招面经.md](./2019搜狐前端社招面经.md) 41 | 42 | [2019小米前端社招面经.md](./2019小米前端社招面经.md) 43 | 44 | [2019猿辅导前端社招面经.md](./2019猿辅导前端社招面经.md) 45 | 46 | [2019字节跳动前端社招面经（二）.md](./2019字节跳动前端社招面经（二）.md) 47 | 48 | [2019字节跳动前端社招面经（一）.md](./2019字节跳动前端社招面经（一）.md) 49 | 50 | [2018前端校招面经合集.md](./2018前端校招面经合集.md) 51 | 52 | 53 | -------------------------------------------------------------------------------- /file/面试汇总2018.md: -------------------------------------------------------------------------------- 1 | ## 目录 2 | 3 | 1. [前言](#user-content-preface) 4 | 2. [HTML 部分](#user-content-html) 5 | 3. [CSS 部分](#user-content-css) 6 | 4. [JavaScript 部分](#user-content-js) 7 | 5. [其他问题](#user-content-other) 8 | 6. [优质网站推荐](#user-content-web) 9 | 10 | ## 前言 ## 11 | 12 | 本文总结了一些优质的前端面试题（多数源于网络），初学者阅后也要用心钻研其中的原理，重要知识需要系统学习，透彻学习，形成自己的知识链。万不可投机取巧，只求面试过关是错误的！ 13 | 14 | 15 | ### 面试有几点需注意：(来源程劭非老师 github:@wintercn) 16 | 17 | 1. 面试题目： 根据你的等级和职位变化，入门级到专家级：范围↑、深度↑、方向↑。 18 | 19 | 2. 题目类型： 技术视野、项目细节、理论知识题，算法题，开放性题，案例题。 20 | 21 | 3. 进行追问： 可以确保问到你开始不懂或面试官开始不懂为止，这样可以大大延展题目的区分度和深度，知道你的实际能力。因为这种关联知识是长时期的学习，绝对不是临时记得住的。 22 | 23 | 4. 回答问题再棒，面试官（可能是你的直接领导面试），会考虑我要不要这个人做我的同事？所以态度很重要。（感觉更像是相亲） 24 | 25 | 5. 资深的工程师能把absolute和relative弄混，这样的人不要也罢，因为团队需要的你这个人具有可以依靠的才能（靠谱）。 26 | 27 | 28 | #### 前端开发面试知识点大纲 29 | 30 | ```html 31 | HTML/CSS： 32 | 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、 33 | 选择器优先级及使用、HTML5、CSS3、移动端适应 34 | 35 | JavaScript： 36 | 数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、 37 | 内存泄漏、事件机制、异步装载回调、模板引擎、Nodejs、JSON、ajax等。 38 | 39 | 其他： 40 | HTTP、安全、正则、优化、重构、响应式、移动端、团队协作、可维护、SEO、UED、架构、职业生涯 41 | ``` 42 | 43 | **备注：** 44 | 45 | 根据自己需要选择性阅读，面试题是对理论知识的总结，让自己学会应该如何表达。 46 | 47 | 资料答案不够正确和全面，**欢迎补充**答案、题目；最好是现在网上没有的。 48 | 49 | 格式不断修改更新中。 50 | 51 | 52 | ## HTML 53 | 54 | - Doctype作用? 严格模式与混杂模式如何区分？它们有何意义? 55 | 56 | ```html 57 | （1） 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器， 58 | 用什么文档类型 规范来解析这个文档。 59 | 60 | （2）严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。 61 | 62 | （3）在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。 63 | 64 | （4）DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。 65 | ``` 66 | 67 | - HTML5 为什么只需要写 '!DOCTYPE HTML'？ 68 | 69 | ```html 70 | HTML5 为什么只需要写 ''？ 71 | 72 | HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）； 73 | 74 | 而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。 75 | ``` 76 | 77 | - 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？ 78 | 79 | ```html 80 | （1）CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值， 81 | 比如div默认display属性值为“block”，成为“块级”元素； 82 | span默认display属性值为“inline”，是“行内”元素。 83 | 84 | （2）行内元素有：a b span img input select strong(强调的语气); 85 | 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p 86 | 87 | （3）知名的空元素： 88 |
89 | 鲜为人知的是： 90 | 91 | ``` 92 | 93 | - 请问css中的区块 inline inline-block block 三者有什么区别呢？ 94 | 95 | ```html 96 | 这样先讲内联元素和块级元素： 97 | 内联元素是不可以控制宽和高、margin等；并且在同一行显示，不换行。 98 | 块级元素时可以控制宽和高、margin等，并且会换行。 99 | 100 | inline：使用此属性后，元素会被显示为内联元素，元素则不会换行。 101 | block：使用此属性后，元素会被现实为块级元素，元素会进行换行。 102 | inline-block：是使元素以块级元素的形式呈现在行内。 103 | 意思就是说，让这个元素显示在同一行不换行，但是又可以控制高度和宽度，这相当于内联元素的增强。 104 | 105 | 要注意的是IE6 不支持inline-block 106 | ``` 107 | 108 | - link 和@import 的区别是？ 109 | 110 | ```html 111 | （1）link属于XHTML标签，而@import是CSS提供的; 112 | 113 | （2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载; 114 | 115 | （3）import只在IE5以上才能识别，而link是XHTML标签，无兼容问题; 116 | 117 | （4）link方式的样式的权重 高于@import的权重. 118 | ``` 119 | 120 | - 介绍一下你对浏览器内核的理解？ 121 | 122 | ```html 123 | 主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。 124 | 125 | 渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。 126 | 127 | JS引擎则：解析和执行javascript来实现网页的动态效果。 128 | 129 | 最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。 130 | ``` 131 | 132 | - 浏览器的内核分别是什么? 133 | 134 | ```html 135 | Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML] 136 | 137 | Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等 138 | 139 | Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;] 140 | 141 | Webkit内核：Safari,Chrome等。 [Chrome的：Blink（WebKit的分支）] 142 | 143 | 详细文章：[浏览器内核的解析和对比](http://www.cnblogs.com/fullhouse/archive/2011/12/19/2293455.html) 144 | ``` 145 | 146 | - 常见兼容性问题？ 147 | 148 | ```html 149 | - png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8. 150 | 151 | - 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。 152 | 153 | - IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。 154 | 155 | 浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;} 156 | 157 | 这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中 158 | 加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别) 159 | 160 | 渐进识别的方式，从总体中逐渐排除局部。 161 | 162 | 首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。 163 | 接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。 164 | 165 | //css 166 | .bb{ 167 | background-color:#f1ee18;/*所有识别*/ 168 | .background-color:#00deff\9; /*IE6、7、8识别*/ 169 | +background-color:#a200ff;/*IE6、7识别*/ 170 | _background-color:#1e0bd1;/*IE6识别*/ 171 | } 172 | 173 | - IE下,可以使用获取常规属性的方法来获取自定义属性, 174 | 也可以使用getAttribute()获取自定义属性; 175 | Firefox下,只能使用getAttribute()获取自定义属性. 176 | 解决方法:统一通过getAttribute()获取自定义属性. 177 | 178 | - IE下,even对象有x,y属性,但是没有pageX,pageY属性; 179 | Firefox下,event对象有pageX,pageY属性,但是没有x,y属性. 180 | 181 | - 解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。 182 | 183 | - Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 184 | 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决. 185 | 186 | 超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序: 187 | L-V-H-A : a:link {} a:visited {} a:hover {} a:active {} 188 | ``` 189 | 190 | - html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 191 | HTML5？ 192 | 193 | ```html 194 | - HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。 195 | 196 | - 绘画 canvas 197 | 用于媒介回放的 video 和 audio 元素 198 | 本地离线存储 localStorage (目前业界基本上统一为5M)长期存储数据，浏览器关闭后数据不丢失； 199 | sessionStorage 的数据在浏览器关闭后自动删除 200 | 201 | 语意化更好的内容元素，比如 article、footer、header、nav、section 202 | 表单控件，calendar、date、time、email、url、search 203 | 新的技术webworker, websockt, Geolocation 204 | 205 | - 移除的元素 206 | 207 | 纯表现的元素：basefont，big，center，font, s，strike，tt，u； 208 | 209 | 对可用性产生负面影响的元素：frame，frameset，noframes； 210 | 211 | 支持HTML5新标签： 212 | 213 | - IE8/IE7/IE6支持通过document.createElement方法产生的标签， 214 | 可以利用这一特性让这些浏览器支持HTML5新标签， 215 | 216 | 浏览器支持新标签后，还需要添加标签默认的样式： 217 | 218 | - 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架 219 | 222 | 如何区分： DOCTYPE声明\新增的结构元素\功能元素 223 | ``` 224 | 225 | - 语义化的理解？ 226 | 227 | ```html 228 | 用正确的标签做正确的事情！ 229 | html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析； 230 | 在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。 231 | 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。 232 | 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。 233 | ``` 234 | 235 | - HTML5的离线储存怎么使用，工作原理能不能解释一下？ 236 | 237 | ```html 238 | 在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。 239 | 240 | 原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。 241 | 242 | 如何使用： 243 | 1、页面头部像下面一样加入一个manifest的属性； 244 | 2、在cache.manifest文件的编写离线存储的资源； 245 | CACHE MANIFEST 246 | #v0.11 247 | CACHE: 248 | js/app.js 249 | css/style.css 250 | NETWORK: 251 | resourse/logo.png 252 | FALLBACK: 253 | / /offline.html 254 | 3、在离线状态时，操作window.applicationCache进行需求实现。 255 | 256 | 详细的使用请参考：[有趣的HTML5：离线存储](http://segmentfault.com/a/1190000000732617) 257 | 258 | localStorage 长期存储数据，浏览器关闭后数据不丢失； 259 | sessionStorage 数据在浏览器关闭后自动删除。 260 | ``` 261 | 262 | - 浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？ 263 | 264 | ```html 265 | 在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。 266 | 267 | 离线的情况下，浏览器就直接使用离线存储的资源。 268 | 269 | 详细的使用请参考：[有趣的HTML5：离线存储](http://segmentfault.com/a/1190000000732617) 270 | ``` 271 | 272 | - (写)描述一段语义的html代码吧。 273 | 274 | ```html 275 | （HTML5中新增加的很多标签（如：
、