前端面试-综合问题版

一、基础

#1.1 HTML

• html5新标签有哪些
• canvas、svg、webGL
• 你是如何理解 HTML语义化的，有什么好处
• 前端需要注意哪些SEO?
• manifest、worker、socket
• input和textarea的区别
• 用一个div模拟textarea的实现

#1.2 CSS

• css3有什么新特性，浏览器支持怎么样
• 伪类是什么？有哪些？会有哪些兼容性问题？如何处理？
• css预处理器知道吗？用过哪些？有什么优劣？后处理器知道吗？
• 盒模型有哪几种？怪异模式和标准模式？
• less、sass、postcss、prefix
• 层叠优先级
• 圣杯、双飞燕布局
• float清除浮动
• flex布局、 grid布局、table布局
• css以及中轴旋转、动画变换
• 绘制三角形、矩形、菱形、梯形（奇巧淫技，可以不问）
• sprite图（雪碧图）知道吗？svg雪碧图了解吗？
• px、em、rem、vw、vh？rem的根节点样式在什么时候设置？
• position有哪些？他们的定位原点是什么？
• 媒体查询用css好还是用js好？
• link和@import的区别？
• 响应式布局的原理
• css低版本浏览器兼容问题，额外需要什么后缀来声明浏览器兼容
• !important意义，是否应当规避使用？
• BFC块级上下文、IFC，实现双栏高度对齐
• BEM命名法，有什么优势，有什么劣势
• 1px边框问题
• （水平）居中有哪些实现方式、（垂直）居中有哪些实现方式

#1.3 JavaScript

• typeof以及弱类型转换规则？NaN、undefined、null
• dom的节点操作？能够背api还是知道api？
• ajax是什么？知道底层实现原理吗？知道fetch吗？自己封装过吗？
• GET、POST意义？restful架构下还有别的什么请求？OPTION请求是什么？
• 事件冒泡和事件捕获是怎样的？对应的默认方法有什么？一般在什么情况使用？
• call、apply、bind
• 如何判断数据类型？
• hoisting是什么？具体表现是怎样的？
• 匿名函数是什么？函数表达式和函数声明的区别？
• let、const暂时性锁区知道吗？表现是怎样的？
• 严格模式是什么？有什么好处？use strict
• arguments是什么类型？callee和caller有什么区别？
• Date.format实现过吗？思路是怎样的？
• 动画：setTimeout何时执行，requestAnimationFrame的优点
• 你知道new一个对象有几步吗？

#二、高级

#2.1 Browser

• 打开一个网页经历了那些过程？
• 浏览器加载白屏是什么原因？
• 千万访问量的项目，前端需要注意些什么？

#2.2 JavaScript

• 表达式和语句有什么区别？如何把语句转换为表达式？
• 什么叫执行上下文栈(·Execution Context Stack)·? 一个函数调用会产生多少个上下文环境？如何激活一个上下文，什么叫caller(调用者)，什么叫callee(被调用者)？给你一段代码能否画出执行过程中的上下文堆栈变化？
• 执行上下文包括哪些结构(状态/属性)，如何追踪关联代码的执行进度？
• eval在调用的时候有哪些特别的地方？eval函数自身会产生上下文吗？会影响当前的调用上下文吗？
• 什么叫变量对象？什么叫活动对象？
• 词法作用域是什么？闭包是如何形成的？
• var foo = function bar () {}命名函数表达式中(上述的foo函数)bar变量是定义在哪一层作用域的？
• (0, 1, 2) 的结果是什么？
• var foo = { value: 2, bar: function () { return this.value; } 中(foo.bar, foo.bar)()的this值是什么？(foo.bar = foo.bar)()、(false || foo.bar)()呢?

#2.3 HTTP

• http1.0和http1.1的区别
• http请求码有哪些？206、302、303、304、307
• 能说下304具体怎样实现吗？
• http缓存逻辑是怎样的？协商缓存与强缓存？Last-Modified / Etag / Expires / Cache-Control？
• osi七层协议和tcp/ip四层协议
• 三次握手和四次握手
• 跨域是什么？http协议中如何判断跨域？如何解决跨域问题？
• http2具体内容？SDPY了解么？
• HTTPS如何实现？tsl/ssl是什么？对称加密、非对称加密在什么时候、对什么数据加密？
• DNS劫持是什么？
• 浏览器在一次 HTTP 请求中，需要传输一个 4097 字节的文本数据给服务端，可以采用那些方式?

#2.4 优化

• 首屏优化
• 预加载资源、预解析DNS
• 懒加载图片怎么做
• iframe一般怎么使用？
• window.onload、document.ready顺序？iframe会阻塞吗？
• cdn是什么？如何查找最近的cdn？
• gzip、chucked
• 前端安全：xss攻击和防范、CSRF、CORS
• 硬件加速怎样开启
• 优化中会提到缓存的问题，问：静态资源或者接口等如何做缓存优化
• 页面DOM节点太多，会出现什么问题？如何优化？

#2.5 Products

这里主要是一些生产中真实存在的问题

• 一个feed流，有哪些展现方式？如果当前页面可视区有5个格子，而你有20条信息需要展示，请问有哪些自动展示的算法？
• 移动端的缓存机制有哪几种？
• 小程序如何与native通信？react-native实现原理？jsbridge如何实现？
• 过万条数据如何加载和渲染？
• 如何在前端解析二进制，流媒体、图片二进制数据怎样渲染到页面上？
• 如何解析二进制音频、视频？
• 文件如何显示上传百分比？
• 如何制作一个富文本，需要考虑哪些结构？
• html5的播放器怎么做？视频直播如何在浏览器里面实现？HLS、RTMP
• 如何在浏览器里面裁剪图片？如何裁剪视频，对视频做逐帧分析？
• 如何实现一个具有引导功能的组件库？
• 如何封装一个Form和FormItem，使其能够跟input、select、checkbox、radio等组件进行 数据存储、数据校验（自定义逻辑）、校验反馈？
• echart这类图像库的实现原理？
• i18n的国际化方案应该是怎样的？
• 数据埋点的意义是什么？应当针对哪些数据进行埋点？如何构建一个埋点系统？
• 小程序的实现原理是什么？这【五篇】文章将带你深入了解「微信小程序」

#三、 Framework

#3.1 React

• React的生命周期mount和update描述下
• React的生命周期中的isBatchingUpdates了解吗？Transaction知道吗
• React的vdom如何实现？jsx是怎样解析的？
• React的Fiber`是什么？具有什么样的特性？
• React的diff/patch算法原理
• React的组件逻辑（受控、非受控）？如何设计一个组件库
• React的数据流，Redux、Mobx、Rxjs，发布订阅模式、观察者模式，flux和no-flux
• React的事件注册和事件分发知道吗？
• Redux解决了什么痛点（有什么优点），又有什么缺点
• Redux的中间件有哪些？redux-actions、redux-promise、redux-thunk、redux-saga、redux-immutable了解过哪些？说说中间件的意义
• Redux有什么优化方案？
• SSR了解过吗？怎样做？了解Koa么？
• React-Native了解过吗？JavascriptCore是什么？

#3.2 Vue

• Vue是如何设计响应式系统的？（依赖收集）
• 什么时候使用computed, methods,watch？之间有什么样区别？
• template 和 render(jsx) 有什么的联系？
• this.$nextTick是如何设计的？
• Vue 组件 data 为什么必须是函数？

#3.3 AngularJS

尽管angularJS已经基本退出了历史舞台，但是相信有的同学还是做过相关的项目，并很有可能被面试官问起

• angularJS的数据绑定采用什么机制？详述原理
• 如果通过angularJS的 directive/component 规划一套全组件化体系，可能遇到哪些挑战？
• 一个angularJS应用应当如何良好地分层？
• ng-click中写的表达式，能使用JS原生对象上的方法，比如Math.max之类的吗？为什么

#四、文章

• 总结了17年初到18年初百场前端面试的面试经验(含答案)
• 前端基础面试整理(一)