# HTML
# HTML 语义化
# meta 有哪些属性，作用是什么
# viewport 有哪些参数，作用是什么
# canvas
# img 中 alt 和 title 的区别
# 说说 HTML5 在标签、属性、存储、API 上的新特性
# doctype 的作用是什么？
# href 和 src 有什么区别
# html5\CSS3 有哪些新特性、移除了那些元素？如何处理 HTML5 新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，地理定位等功能的增加。
绘画 canvas 元素 用于媒介回放的 video 和 audio 元素 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失； sessionStorage 的数据在浏览器关闭后自动删除 语意化更好的内容元素，比如 article、footer、header、nav、section 表单控件，calendar、date、time、email、url、search CSS3 实现圆角，阴影，对文字加特效，增加了更多的 CSS 选择器 多背景 rgba 新的技术 webworker, websockt, Geolocation 移除的元素 纯表现的元素：basefont，big，center，font, s，strike，tt，u； 对可用性产生负面影响的元素：frame，frameset，noframes；
是 IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签， 可以利用这一特性让这些浏览器支持 HTML5 新标签， 浏览器支持新标签后，还需要添加标签默认的样式：
当然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架
- <!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <![endif]-->1
2
3
4
5
6
# CSS
# Link 与 @import 导入css的区别
# 伪类和伪元素的区别 css3 新增的伪类有哪些
# 是否了解盒模型 介绍一下标准的 CSS 盒子模型 与低版本的 IE 盒子模型有什么不同
# 你知道什么是 BFC 吗 BFC 的布局规则是什么？如何创建 BFC？
# 居中布局：居中浮动元素 居中绝对定位的 DIV
# 方法一：已知元素的高宽
#div1 {
background-color: #6699ff;
width: 200px;
height: 200px;
position: absolute; /*父元素需要相对定位*/
top: 50%;
left: 50%;
margin-top: -100px; /*二分之一的height，width*/
margin-left: -100px;
}
2
3
4
5
6
7
8
9
10
# 方法二:未知元素的高宽
#div1 {
width: 200px;
height: 200px;
background-color: #6699ff;
margin: auto;
position: absolute; /*父元素需要相对定位*/
left: 0;
top: 0;
right: 0;
bottom: 0;
}
2
3
4
5
6
7
8
9
10
11
12
# 浮动元素和绝对定位元素的区别和应用?
# 请说说css的选择器以及选择器优先级
# 什么时候清除浮动 如何清除浮动 原理是什么
# CSS 动画
# css 单位有哪些
# 如果需要手动写动画，你认为最小时间间隔是多久，为什么
# 上下 margin 重合的问题
# opacity: 0、visibility: hidden、display: none （隐藏页面中 的元素有哪些 方式）
# display 有哪些值，以及作用
# position 的值
# **png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过 webp？
# 如何实现左侧宽度固定，右侧宽度自适应的布局
# 介绍一下 flex
# z###index 有什么需要注意的地方
# position 跟 display、overflow、float 这些特性相互叠加后会怎么样？
# css3 的新特性有哪些
# calc 函数
# CSS 中的 vertical###align 有哪些值？它在什么情况下才能生效？
# ::after 和:after 的区别
# CSS 有哪些样式可以给子元素继承!
# 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
# box###sizing常用的属性有哪些? 分别有啥作用?
# CSS 中transition和animate有何区别? animate 如何停留在最后一帧!
# css 创建一个三角形的原理
# “品”字布局如何设计
# 使用过 css 预处理器吗
# 在网页中的应该使用奇数还是偶数的字体？为什么呢
# 什么是响应式 什么是自适应
# 你对 line###height 是如何理解的？
# 如何设计一个 4 列等宽布局，各列之间的边距是 10px（考虑浏览器的兼容性）？
# CSS 如何实现三列布局，左侧和右侧固定宽度，中间自适应宽度？
# DOM
# 事件类型
# 说说DOM 中的事件流
# Node 节点获取及增删查改
# 讲讲事件冒泡和事件捕获
# 什么是事件代理
# 知道什么是事件委托吗
# JavaScript
# 判断是不是数组的方法,如何检测数组
Object.prototype.toString.call()
使用场景常用于判断浏览器内置对象时原理每一个继承 Object 的对象都有 toString 方法，如果 toString 方法没有重写的话，会返回 [Object type]，其中 type 为对象的类型。但当除了 Object 类型的对象外，其他类型直接使用 toString 方法时，会直接返回都是内容的字符串，所以我们需要使用 call 或者 apply 方法来改变 toString 方法的执行上下文。let timeManager = ['罗志祥','文章']const isArray =(targetArr)=>{ return Object.prototype.toString.call(targetArr) == "[object Array]"}const res = isArray(timeManager)console.log(res)1instanceof
使用场景使用 instanceof 判断一个对象是否为数组， 但 instanceof 只能用来判断对象类型，原始类型不可以。并且所有对象类型 instanceof Object 都是 true。原理instanceof 会判断这个对象的原型链上是否会找到对应的 Array 的原型，找到返回 true，否则返回 false。Array.isArray()
# var、let 和 const 区别的实现原理是什么
# JavaScript 的数据类型,存储有什么区别
# 为什么 0.1 + 0.2 != 0.3 ?
# 如何让 (a == 1 && a == 2 && a == 3) 的值为 true？
# es6 的新特性都有哪些？
# ==和===区别是什么？
# typeof 和 instance of 检测数据类型有什么区别？
# prototype 和 __proto__ 区别是什么？
# null和undefined有什么区别么
# for of , for in 和 forEach,map 的区别
# 如何判断两个变量相等
# 谈谈你对原型的理解？
# 什么是原型链？【原型链解决的是什么问题？】
# 说说你对执行上下文的理解
# 什么是变量提升
# 立即执行函数
# ↓ 谈谈作用域与作用域链的理解
# 闭包及作用闭包有哪些使用场景？优缺点是很什么
# 对象的拷贝：深拷贝与浅拷贝
# new 运算符 new 的原理是什么？通过 new 的方式创建对象和通过字面量创建有什么区别
# 箭头函数
# instanceof 实现的原理是什么 内部机制是怎样的
# ES5/ES6 的继承 分别有哪些优缺点？
# 类型的转化
# 防抖与节流，它们的作用是什么
# this 如何正确的判断 this 的指向? 箭头函数的 this 是什么？
# sort 函数
# 函数科里化
# 如何提升 JavaScript 变量的存储性能？
# ['1', '2', '3'].map(parseInt)
# [[3,2,1].reduce(Math.pow), [].reduce(Math.pow)]
# Set、Map、WeakSet 和 WeakMap 的区别
# 判断数组的方法
# JavaScript 中的数组是如何存储的
# 类数组和数组的区别是什么？
# call 与 applycall,aplly 和 bind 的内部是如何实现的？
# 数组的哪些 API 会改变原数组？
# 在 JS 中什么是变量提升？什么是暂时性死区？
# 可迭代对象有哪些特点
# 垃圾回收与内存泄漏
# jQuery
# 手写插件
# Vue
# 什么是 MVVM？谈谈你的理解
# 谈谈你对vue生命周期的理解
(1)什么是 Vue 的声明周期 (2)生命周期钩子的作用 (3)第一次页面加载触发哪几个生命周期钩子 (4)异步请求适合在哪个生命周期调用
# 请你谈谈Vue 组件中的Data
(1)组件中 data 为什么是一个函数？
(2)函数为什么返回一个对象，如果返回的不是个纯对象 Vue 是怎么做的？你有没有试过直接返回一个字符串或者其他类型
(3)data 中的 key 与 props 或者 methods 中冲突 vue 是怎么做的
(4)为什么初始化阶段才进行data 数据的合并？(这里指合并策略)
# 请你谈谈 Vue 数据响应原理
(1) Vue 框架怎么实现对象和数组的监听？ (2)直接给一个数组项赋值，Vue 能检测到变化吗？在 Vue 中怎么检测数组的变化
# Vue 内部是如何构建一个渲染函数的 render template el 的优先级如何
# 谈谈 Vue 中的 Transition 动画
# 你了解 Vue 中的选项合并策略嘛，请谈谈
# vue 组件中的参数如何传递？如何进行通信
# 说说 Vue 中$nextTick的实现原理 它的执行时机是什么时候 和 DOM 的渲染有什么关系
# vue 修饰符
# Vue 中的 key 有什么作用？
# vue 是如何实现数据的双向绑定
# v###show 与 v###if 有什么区别？
# v###model 的原理？
# Class 与 Style 如何动态绑定？
# vue 的单向数据流
# vue 中组件通信有几种方式
# 虚拟 DOM 原理以及优缺点
# computed watch methods 三者的应用场景与区别以及实现原理
# 对比一下 Object.defineProperty 与proxy
# 使用 JavaScript Proxy 实现简单的数据绑定
# Vue 是如何实现数据双向绑定的？
# vue###router 的路由模式有几种
# 能说下 vue###router 中常用的 hash 和 history 路由模式实现原理吗？
# vuex 的设计思想
# 单页面（SPA）应用的优缺点
# 谈谈你对 keep###alive 的了解？vue 里的 keep###alive 是怎么实现的
# 谈谈 Vue SSR 吗？说说 SSR？
# Vue 怎么用 vm.$set() 解决对象新增属性不能响应的问题 ？
# 你有对 Vue 项目进行哪些优化？可以从几方面入手
# 谈谈vue 3.0
# $route和$router的区别
# scoped 属性作用
# Vue###Router的两种模式主要依赖什么实现的
# Vue CLI 有哪些特性？
# 如何新增自定义指令
# vue 的数据劫持在不同的版本里是如何处理的？
# 了解 Element UI 组件的框架设计吗？
# 如何自动屏蔽 Input 的自动密码填充？
# React
# 列表组件中的 key
# setState 到底是异步还是同步?
# 为什么使用框架而不是原生
# 虚拟 DOM 的优劣如何
# 虚拟 DOM 的实现原理
# React 最新的生命周期是怎样的?
# React 的请求应该放在哪个生命周期中?
# Ajax 请求放在 componentDidMount 里进行处理还是放在componentWillMount 里进行处理比较合适？
# React 中 setState 什么时候是同步的，什么时候是异步的
# react###router 里的 <Link> 标签和 <a> 标签有什么区别
# react 与vue 的区别
# React 高阶组件的作用有哪些
# 简述下 flux 的思想
# redux 的工作流程?
# react###redux 是如何工作的?
# redux 与 mobx 的区别?
# redux 中如何进行异步操作?
# React 组件通信如何实现?
# React 有哪些优化性能是手段? 语法层面呢？
# React 如何进行组件/逻辑复用?
# mixin、hoc、render props、react###hooks 的优劣如何？
# 你是如何理解 fiber 的?
# 有没有使用过 React Hooks？使用 React Hooks 的同时为什么需要使用高阶组件？
# 受控组件以及非受控组件的区别
# Flutter
# TypeScript
# 谈你对 TypeScript 的理解？
# 比较一下 TypeScript 和 JavaScript，在什么情况下你觉得需要 TypeScript ?
# Node
# 谈谈 node 中的事件循环 浏览器和 Node.js 的事件循环机制有什么区别？
# Babel
# 谈谈babel 的原理是什么
# 框架
# React 和 Vue 的区别？
# 能对比一下 Create React App 和 Vue CLI 吗？
# 了解 MVC / MVP / MVVM 的区别吗？
# 测试
# 平常开发的过程中有写过单元测试或者 e2e 测试么？
# 自动化测试主要是做什么？
# WebPack
# 介绍下 webpack 热更新原理，是如何做到在不刷新浏览器的前提下更新页面的
# 介绍webpack 的实现原理
# Webpack 的 loader 和 plugins 的区别
# Webpack 构建速度优化有哪些方案？
# 浏览器
# 输入URL 发生了什么
# 常见的浏览器内核
# 常见的兼容性问题
一、什么是浏览器兼容问题
所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是我们web前端开发人员经常会碰到和必须要解决的问题.
概括的来说，浏览器兼容指的是同一份代码在不同的浏览器显示效果是不同的。 浏览器的兼容性大体分为样式兼容性（css），交互兼容性（javascript），浏览器 hack 三个方面。
一些概念：
# CSS Bug
Css样式在各浏览器中解析不一致的情况，或者说Css样式在浏览器中不能正确显示的问题称为CSS Bug
# CSS hack
CSS中，hack是指一种兼容css在不同浏览器中正确显示的技巧方法，因为他们都属于个人对css代码的非官方的修改，或非官方的补丁。有些人更喜欢使用patch（补丁）来描述这种行为。
# Filter
它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲，filter是一种用来过滤不同浏览器的hack类型。
那么，
- 不同的原因是什么？(不支持的属性? bug？)
- 如何让它展示正常?(条件注释？ 单独Hack？)
首先，让我们简单了解一下，三种兼容性的不同：
# 样式兼容性（css方面）
1.因为历史原因，不同的浏览器样式存在差异，可以通过 Normalize.css 抹平差异，也可以定制自己的 reset.css，例如通过通配符选择器，全局重置样式
{ margin: 0; padding: 0; }
2.在CSS3还没有成为真正的标准时，浏览器厂商就开始支持这些属性的使用了。CSS3样式语法还存在波动时，浏览器厂商提供了针对浏览器的前缀，直到现在还是有部分的属性需要加上浏览器前缀。在开发过程中我们一般通过IDE开发插件、css 预处理器以及前端自动化构建工程帮我们处理。
浏览器内核与前缀的对应关系如下
| 内核 | 主要代表的浏览器 | 前缀 |
|---|---|---|
| Trident | IE浏览器 | -ms |
| Gecko | Firefox | -moz |
| Presto | Opera | -o |
| Webkit | Chrome和Safari | -webkit |
3.在还原设计稿的时候我们常常会需要用到透明属性，所以解决 IE9 以下浏览器不能使用 opacit。
opacity: 0.5;
filter: alpha(opacity = 50); //IE6-IE8我们习惯使用filter滤镜属性来进行实现
filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50); //IE4-IE9都支持滤镜写法progid:DXImageTransform.Microsoft.Alpha(Opacity=xx)
2
3
# 交互兼容性（javascript）
1.事件兼容的问题，我们通常需要会封装一个适配器的方法，过滤事件句柄绑定、移除、冒泡阻止以及默认事件行为处理
var helper = {}
//绑定事件
helper.on = function(target, type, handler) {
if(target.addEventListener) {
target.addEventListener(type, handler, false);
} else {
target.attachEvent("on" + type,
function(event) {
return handler.call(target, event);
}, false);
}
};
//取消事件监听
helper.remove = function(target, type, handler) {
if(target.removeEventListener) {
target.removeEventListener(type, handler);
} else {
target.detachEvent("on" + type,
function(event) {
return handler.call(target, event);
}, true);
}
};
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2.new Date()构造函数使用，'2018-07-05'是无法被各个浏览器中，使用new Date(str)来正确生成日期对象的。 正确的用法是'2018/07/05'.
3.获取 scrollTop 通过 document.documentElement.scrollTop 兼容非chrome浏览器
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
# 浏览器 hack
解决浏览器兼容的主要方法是css hack 那么到底什么是css hack呢？
由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!
1.快速判断 IE 浏览器版本
<!--[if IE 8]> ie8 <![endif]-->
<!--[if IE 9]> 骚气的 ie9 浏览器 <![endif]-->
2
3
2.判断是否是 Safari 浏览器
/* Safari */
var isSafari = /a/.__proto__=='//';
2
3
3.判断是否是 Chrome 浏览器
/* Chrome */
var isChrome = Boolean(window.chrome);
2
3
二、为什么会有浏览器兼容问题
- 同一产品，版本越老， bug 越多
- 同一产品，版本越新，功能越多
- 不同产品，不同标准，不同实现方式
三、处理兼容的时候要考虑
- 浏览器市场份额
- 常查CSS属性是否兼容时
- 常查 Hack 的写法
四、处理兼容问题的思路
1、要不要做产品的角度（产品的受众、受众的浏览器比例、效果优先还是基本功能优先）成本的角度 (有无必要做某件事)
2、做到什么程度让哪些浏览器支持哪些效果
3、如何做根据兼容需求选择技术框架/库(jquery的版本)根据兼容需求选择兼容工具（htmlshiv.js、respond.js、css reset、normalize.css、modernizr）postcss
4、渐进增强和优雅降级渐进增强(progressive enhancement): 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验优雅降级 (graceful degradation): 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
五、处理兼容问题的手段 1、合适的框架Bootstrap (>=ie8)；jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)；Vue (>= ie9)...
2、条件注释
即IE条件注释是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。条件注释 (conditional comment) 是于 HTML 源码中被IE有条件解释的语句。条件注释可被用来向 IE 提供及隐藏代码。条件注释最初于微软的 Internet Explorer 5 浏览器中出现，并且直至 Internet Explorer 9 均支持。微软已宣布于 IE10 停止支持。
<!--[if IE 6]>
<p>You are using Internet Explorer 6.</p>
<![endif]-->
<!--[if !IE]><!-->
<script>alert(1);</script>
<!--<![endif]-->
2
3
4
5
6
7
if（如果是）非IE浏览器，else（那么）我的页面上该 标签会生效， 弹出一个1；如果在IE浏览器上，这段本身是有效的，即能控制该效果，所以在其他浏览器这段则会被注释掉。
<!--[if IE 8]>
<link href="ie8only.css" rel="stylesheet">
<![endif]-->
2
3
4
*3、CSS hack （1）定义：由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能在不同的浏览器中也能得到我们想要的页面效果。
（2）常见hack写法利用该方法去检测浏览器兼容问题
.box{
color: red;
_color: blue; /*针对后期检查将ie6和其他浏览器区别开来的标准*/
*color: pink; /*同上，ie6、7*/
color: yellow\9; /*ie/edge 6-8*/
}
2
3
4
5
6
以上属性均是采用样式覆盖形式，去相应地在所在浏览器属性生效
<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
2
3
（3）常见兼容处理范例
例子A：
.target{
display: inline-block;
*display: inline;/*在IE6、7中会生效，产生类似bfc的效果，可添加宽高，
与其他浏览器所使用的display: inline-block;有相同效果*/
*zoom: 1;
}
2
3
4
5
6
例子B：
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1; /* 仅对ie67有效 */
}
2
3
4
5
6
7
8
例子C：
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1; /* 仅对ie67有效 */
}
2
3
4
5
6
7
8
例子D：
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
2
3
4
例子E：
<!DOCTYPE html>
<!--[if IEMobile 7 ]> <html dir="ltr" lang="en-US"class="no-js iem7"> <![endif]-->
<!--[if IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie7 oldie"> <![endif]-->]-->
<!--[if IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie7 oldie"> <![endif]-->
<!--[if IE 8 ]> <html dir="ltr" lang="en-US" class="no-js ie8 oldie"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html dir="ltr" lang="en-US" class="no-js"><!--<![endif]-->
2
3
4
5
6
（4）常见属性的兼容情况：多使用 https://caniuse.com/
- inline-block: >=ie8
- inline-block: >=ie8
- inline-block: >=ie8
- inline-block: >=ie8
- inline-block: >=ie8
- inline-block: >=ie8
- 圆角: >= ie9
- 圆角: >= ie9
- 圆角: >= ie9
六、常见的浏览器兼容性问题以及解决办法 常见的浏览器兼容性可分为三类：
- HTML兼容
- CSS兼容
- JavaScript兼容
# （一）H5移动端ios/Android兼容性
viewport
<meta charset="utf-8">
<!--主要I是强制让文档的宽度与设备宽度保持1:1，最大宽度1.0，禁止屏幕缩放。-->
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<!--这个也是iphone私有标签，允许全屏浏览。-->
<meta content="yes" name="apple-mobile-web-app-capable">
<!--iphone的私有标签，iphone顶端状态条的样式。-->
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<!--禁止数字自动识别为电话号码，这个比较有用，因为一串数字在iphone上会显示成蓝色，样式加成别的颜色也是不生效的。-->
<meta content="telephone=no" name="format-detection">
<!--禁止email识别-->
<meta content="email=no" name="format-detection">
2
3
4
5
6
7
8
9
10
11
12
# 禁止复制、选中文本
.el {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
2
3
4
5
6
# 给不同屏幕大小的手机设置特殊样式
@media only screen and (min-device-width : 320px) and (max-device-width : 375px){}
# IOS中input键盘事件keyup、keydown、keypress支持不是很好, 用input监听键盘keyup事件，在安卓手机浏览器中是可以的，但是在ios手机浏览器中用输入法输入之后，并未立刻相应keyup事件，只有在通过删除之后才可以响应
方法：可以用html5的oninput事件去代替keyup
<input type="text" id="testInput">
<script type="text/javascript">
document.getElementById('input').addEventListener('input', function(e){
var value = e.target.value;
});
</script>
2
3
4
5
6
7
# ios 设置input 按钮样式会被默认样式覆盖
input,textarea {
border: 0;
-webkit-appearance: none;
}
2
3
4
# 消除 IE10 里面的那个叉号
input:-ms-clear{display:none;}
# 手机上的flex布局时会有兼容性问题，只用新版本的会出现安卓手机不识别的现象
flex布局对于低版本的安卓，不支持flex-wrap:wrap属性，但是ios系统支持换行属性，这个时候如何解决呢？当然是不使用换行，用其他方式代替。
.box{
display: -webkit-box;
/* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本语法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本语法: IE 10 */
display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
}
2
3
4
5
6
7
8
# input 的placeholder属性会使文本位置偏上
line-height: （和input框的高度一样高）---pc端解决方法
line-height：normal ---移动端解决方法
2
# input type=number之后，pc端出现上下箭头
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0;
}
2
3
4
5
# 实现android和ios系统手机打开相机并可选择相册功能
$(function () {
//获取浏览器的userAgent,并转化为小写
var ua = navigator.userAgent.toLowerCase();
//判断是否是苹果手机，是则是true
var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
if (isIos) {
$("input:file").removeAttr("capture");
};
})
2
3
4
5
6
7
8
9
10
# 移动端 HTML5 audio autoplay 失效问题
这个不是 BUG，由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放。 解决方法思路：先通过用户 touchstart 触碰，触发播放并暂停（音频开始加载，后面用 JS 再操作就没问题了）。
document.addEventListener('touchstart',function() {
document.getElementsByTagName('audio')[0].play();
document.getElementsByTagName('audio')[0].pause();
});
2
3
4
# 移动端 video在部分android机播放之后浮在最上层，设置z-index无效
这个目前没有好的办法解决 情景一：页面有视频，点击页面按钮显示弹出层（比如让用户输入用户信息），这时候视频会出现在弹出层上面，是不是很-d疼？ 方案：点击按钮时候把video隐藏hide，关闭弹出层show，过程中视频声音还在 情景二：页面很长，往下翻滚时，视频在播放，脱离文档流 方案：页面滚动到某一合适位置把video隐藏hide，回滚到某一位置show，过程中视频声音还在
# 关于 iOS 系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格
this.value = this.value.replace(/\u2006/g,'');
# 关于 iOS 与 OS X 端字体的优化(横竖屏会出现字体加粗不一致等)
iOS 浏览器横屏时会重置字体大小，设置 text-size-adjust 为 none 可以解决 iOS 上的问题，但桌面版 Safari 的字体缩放功能会失效，因此最佳方案是将 text-size-adjust 为 100% 。
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
text-size-adjust:100%;
2
3
# 移动端点击300ms延迟
原因：浏览器兴起初期，为了判断用户是双击还是单击，就设置了一个时间段300ms，用户单击后300ms后做事件处理，如果在300ms内连续点击，就判断为双击，做双击处理事件。 所以现在用click绑定事件呢，就会有300ms延迟的问题。 300ms尚可接受，不过因为300ms产生的问题，我们必须要解决。300ms导致用户体验并不是很好，解决这个问题，我们一般在移动端用tap事件来取代click事件。 推荐两个js，一个是fastclick，一个是tap.js
# （二）HTML兼容
解决 ie9 以下浏览器对 html5 新增标签不识别的问题 html5shiv.js
解决 ie9 以下浏览器不支持 CSS3 Media Query 的问题。 respond.js <script src="https://cdn.bootcss.com/respo...;>
picturefill.js
解决 IE 9 10 11 等浏览器不支持
高版本的浏览器用了低版本的浏览器无法识别的元素，从而导致不能解析。这点主要体现在html5的新标签上
htmlshim框架可以让低于IE9的浏览器支持html5
img的alt属性，在图片不存在的情况下，各浏览器的解析不一致
在chrome下显示的是一张破损的图片，在ff下显示的是alt的文字，而在IE中显示的是破损的图片加文字
ul标签内外边距问题
ul标签在IE6IE7中，有个默认的外边距，但是在IE8以上及其他浏览器中有个默认的内边距
<div id="test">
<p>文字</p>
<p>文字</p>
<p>文字</p>
</div>
2
3
4
5
IE的打印结果，有3个子节点，并且都为P元素；非IE则表现出极大的差异：居然打印出了7个子节点，当然也包括3个P元素子节点在内，除此之外还多了4个nodeType=3的子节点 改写为：
<div id="test"><p>文字</p><p>文字</p><p>文字</p></div>
# （三）IE6常见CSS解析Bug及hack
1、图片间隙
A)div中的图片间隙(该bug出现在IE6及更低版本中) 描述：在div中插入图片时，图片会将div下方撑大三像素。 hack1:将
B)dt,li中图片间隙（IE6） hack:添加声明：display:block; overflow:hidden;
2、 默认高度（IE6）
描述：在IE6及以下版本中，部分块元素拥有默认高度（低于18px~22px高度） hack1:给元素添加声明：font-size:0; hack2：给元素添加声明：overflow:hidden;
3、双倍浮向（双倍边距） 描述：当Ie6及更低版本浏览器在解析浮动元素时，会错误地把浮向边边界加倍显示。 hack:给浮动元素添加声明：display:inline;
4 、 百分比bug
描述：在IE6及以下版本中在解析百分比时，会按四舍五入方式计算从而导致50%加50%大于100%的情况。
hack:给右面的浮动元素添加声明：clear:right; 意思：清除右浮动。
clear 清除浮动
clear:left;清除左浮动
clear:right;清除右浮动
clear:both 清除两边浮动
5、表单元素行高不一致(IE,MOZ,C,O,S) 描述：表单元素行高对齐方式不一致 hack:给表单元素添加声明：float:left;
6、按钮元素默认大小不一 描述：各浏览器中按钮元素大小不一致 hack：统一大小 hack2:input外边套一个标签，在这个标签里写按钮的样式，把input的边框 和背景色去掉。 hack3:如果这个按钮是一个图片，直接把图片作为按钮的背景图即可。 浏览器解析按钮边框时，会把边框解析在按钮内部，不会影响按钮的原有大小
7)透明属性 IE浏览器写法：filter:alpha(opacity=value); 兼容其他浏览器写法：opacity:.value;(value的取值范围0-9)
在IE6及更低版本的浏览器里，如果想去掉input的默认边框，需将其border属性值设置成0方可兼容多个浏览器。
bug:子元素没设置任何浮动，设置了margin-top属性后，会错误的把margin-top的属性值添加给父元素.（块元素） hack1:给父元素添加overflow:hidden；声明。 如果父元素设置了浮动属性也不会出现这个问题。
在属性前可加以上这三个符号 _ 只有IE6以下支持,例如_height:100px;
- 只有IE7以下支持,例如*height:100px; +只有IE7以下支持,例如+height:100px; 针对IE8加属性值后缀\0（数字零）,例如：height:200px\0;
！important优先级声明，只有高版本支持，IE6不支持
main{height:60px!important;}
解决方法： 例如：
main{height:60px!important;height:70px;}
注：同时设两个高度，优先级声明的属性要放到前面。
# （四）JavaScript 兼容性
# 1、浏览器的宽高问题
var winW=document.body.clientWidth||document.docuemntElement.clientWidth;//网页可见区域宽
var winH=document.body.clientHeight||document.docuemntElement.clientHeight;//网页可见区域宽
//以上为不包括边框的宽高，如果是offsetWidth或者offsetHeight的话包括边框
var winWW=document.body.scrollWidth||document.docuemntElement.scrollWidth;//整个网页的宽
var winHH=document.body.scrollHeight||document.docuemntElement.scrollHeight;//整个网页的高
var scrollHeight=document.body.scrollTop||document.docuemntElement.scrollTop;//网页被卷去的高
var scrollLeft=document.body.scrollLeft||document.docuemntElement.scrollLeft;//网页左卷的距离
var screenH=window.screen.height;//屏幕分辨率的高
var screenW=window.screen.width;//屏幕分辨率的宽
var screenX=window.screenLeft;//浏览器窗口相对于屏幕的x坐标（除了FireFox）
var screenXX=window.screenX;//FireFox相对于屏幕的X坐标
var screenY=window.screenTop;//浏览器窗口相对于屏幕的y坐标（除了FireFox）
var screenYY=window.screenY;//FireFox相对于屏幕的y坐标
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2、event事件问题
/event事件问题
document.onclick=function(ev){//谷歌火狐的写法，IE9以上支持，往下不支持；
var e=ev;
console.log(e);
}
document.onclick=function(){//谷歌和IE支持，火狐不支持；
var e=event;
console.log(e);
}
document.onclick=function(ev){//兼容写法；
var e=ev||window.event;
var mouseX=e.clientX;//鼠标X轴的坐标
var mouseY=e.clientY;//鼠标Y轴的坐标
}
2
3
4
5
6
7
8
9
10
11
12
13
14
3、DOM节点相关的问题
function nextnode(obj){//获取下一个兄弟节点
if (obj.nextElementSibling) {
return obj.nextElementSibling;
} else{
return obj.nextSibling;
};
}
function prenode(obj){//获取上一个兄弟节点
if (obj.previousElementSibling) {
return obj.previousElementSibling;
} else{
return obj.previousSibling;
};
}
function firstnode(obj){//获取第一个子节点
if (obj.firstElementChild) {
return obj.firstElementChild;//非IE678支持
} else{
return obj.firstChild;//IE678支持
};
}
function lastnode(obj){//获取最后一个子节点
if (obj.lastElementChild) {
return obj.lastElementChild;//非IE678支持
} else{
return obj.lastChild;//IE678支持
};
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
4、document.getElementsByClassName问题
//通过类名获取元素
document.getElementsByClassName('');//IE 6 7 8不支持；
//这里可以定义一个函数来解决兼容问题，当然别在这给我提jQuery...
//第一个为全局获取类名，第二个为局部获取类名
function byClass1(oClass){//全局获取，oClass为你想要查找的类名，没有“.”
var tags=document.all?document.all:document.getElementsByTagName('*');
var arr=[];
for (var i = 0; i < tags.length; i++) {
var reg=new RegExp('\\b'+oClass+'\\b','g');
if (reg.test(tags[i].className)) {
arr.push(tags[i]);
};
};
return arr;//注意返回的也是数组，包含你传入的class所有元素；
}
function byClass2(parentID,oClass){//局部获取类名，parentID为你传入的父级ID
var parent=document.getElementById(parentID);
var tags=parent.all?parent.all:parent.getElementsByTagName('*');
var arr=[];
for (var i = 0; i < tags.length; i++) {
var reg=new RegExp('\\b'+oClass+'\\b','g');
if (reg.test(tags[i].className)) {
arr.push(tags[i]);
};
};
return arr;//注意返回的也是数组，包含你传入的class所有元素；
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
5、获取元素的非行间样式值
//获取元素的非行间样式值
function getStyle(object,oCss) {
if (object.currentStyle) {
return object.currentStyle[oCss];//IE
}else{
return getComputedStyle(object,null)[oCss];//除了IE
}
}
2
3
4
5
6
7
8
6、设置监听事件
function addEvent(obj,type,fn){//添加事件监听，三个参数分别为 对象、事件类型、事件处理函数，默认为false
if (obj.addEventListener) {
obj.addEventListener(type,fn,false);//非IE
} else{
obj.attachEvent('on'+type,fn);//ie,这里已经加上on，传参的时候注意不要重复加了
};
}
function removeEvent(obj,type,fn){//删除事件监听
if (obj.removeEventListener) {
obj.removeEventListener(type,fn,false);//非IE
} else{
obj.detachEvent('on'+type,fn);//ie，这里已经加上on，传参的时候注意不要重复加了
};
}
2
3
4
5
6
7
8
9
10
11
12
13
14
7、元素到浏览器边缘的距离
function offsetTL(obj){//获取元素内容距离浏览器边框的距离（含边框）
var ofL=0,ofT=0;
while(obj){
ofL+=obj.offsetLeft+obj.clientLeft;
ofT+=obj.offsetTop+obj.clientTop;
obj=obj.offsetParent;
}
return{left:ofL,top:ofT};
}
2
3
4
5
6
7
8
9
8、阻止默认事件
//js阻止默认事件
document.onclick=function(e){
var e=e||window.event;
if (e.preventDefault) {
e.preventDefault();//W3C标准
}else{
e.returnValue='false';//IE..
}
}
2
3
4
5
6
7
8
9
9、关于EVENT事件中的target
//关于event事件中的target
document.onmouseover=function(e){
var e=e||window.event;
var Target=e.target||e.srcElement;//获取target的兼容写法，后面的为IE
var from=e.relatedTarget||e.formElement;//鼠标来的地方，同样后面的为IE...
var to=e.relatedTarget||e.toElement;//鼠标去的地方
}
2
3
4
5
6
7
10、鼠标滚轮滚动事件
//鼠标滚轮事件
//火狐中的滚轮事件
document.addEventListener("DOMMouseScroll",function(event){
alert(event.detail);//若前滚的话为 -3，后滚的话为 3
},false)
//非火狐中的滚轮事件
document.onmousewheel=function(event){
alert(event.detail);//前滚：120，后滚：-120
}
2
3
4
5
6
7
8
9
10
# 重绘与回流
# 本地存储 cookie 与 token
# session、cookie、localStorage 的区别 了解 SameSite 属性吗
# 如何实现浏览器内多个标签页之间的通信?
# JSONP 的原理是什么？
# 移动端
# 触摸事件
# 移动端的兼容问题
# 移动端 300ms 延迟
# 移动端 rem
# 移动端 1px
# 服务端
# 模块化
# 模块化发展历史
# 异步编程
# setTimeout、Promise、Async/Await 的区别
# 模拟实现一个 Promise.finally
# Promise 构造函数是同步还是异步执行，then 中的方法呢 ?promise 如何实现 then 处理 ?
# Promise 和 setTimeout 的区别 ?
# 如何实现 Promise.all ?
# EventLoop
# async await 函数
# 性能优化
# 简单谈谈 WEB 性能可以从哪几方面优化
# content 方面
1、减少 HTTP 请求：合并文件、CSS 精灵、inline Image
2、减少 DNS 查询：DNS 缓存、将资源分布到恰当数量的主机名
3、减少 DOM 元素数量
# Server 方面
1、使用 CDN
2、配置 ETag
3、对组件使用 Gzip 压缩
# Cookie 方面
1、减小 cookie 大小
2、css 方面
3、将样式表放到页面顶部
4、不使用 CSS 表达式
5、使用不使用@import
# Javascript 方面
1、将脚本放到页面底部
2、将 javascript 和 css 从外部引入
3、压缩 javascript 和 css
4、删除不需要的脚本
5、减少 DOM 访问
# 图片方面
1、优化图片：根据实际颜色需要选择色深、压缩
2、优化 css 精灵
3、不要在 HTML 中拉伸图片
# 能说说首屏加载优化有哪些方案么
# 首屏和白屏的时间如何计算
# 什么是 GPU 加速，如何使用 GPU 加速，GPU 加速的缺点
# 异步加载 JS 脚本的方式有哪些？
# css 有哪些提高性能的方法
# 在 HTML 中如何做 SEO 优化？
# 了解 CSS 3 动画的硬件加速么？在重绘和重流方面有什么需要注意的点？
# 了解 SPA 的懒加载么？
# 安全问题
# CSRF 攻击
# XSS 漏洞
# CORS（跨域资款共享）
# 计算机网络
# http 与 https 协议
# 讲讲 http 的基本结构？
# HTTP2 和 HTTP1 有什么区别
# http 常见的状态码
# GET 与Post 的区别
# TCP 三次握手四次挥手
# 谈谈你对 TCP 的理解;
# HTTP 的请求报文由哪几部分组成
# HTTP 常见请求/响应头及其含义
# HTTPS 是如何进行加密的 谈谈 https 的原理？为什么 https 能保证安全？
# CDN 原理
# DNS 解析
# websocket 和 ajax 的区别是什么，websocket 的应用场景有哪些
# 讲讲 http 的缓存机制吧，强缓存，协商缓存？
# 数据结构算法
# 排序算法
# 全排列
# 各种排序
# 优先遍历和广度优先遍历
# 冒泡排序如何实现
# 二分查找
# 就多个数组的交集
let arr1 = [1, 2, 3];
let arr2 = [2, 3, 4];
let arr3 = [3, 4, 5, 6];
let a = new Set(arr1);
let b = new Set(arr2);
let c = new Set(arr3);
let getMix = (arr) => {
return arr.reduce((total, item, index) => {
if (index === 0) {
return [...total, ...item];
} else {
return total.filter((v) => item.includes(v));
}
// console.log(total)
// console.log(item)
// console.log(index)
}, []);
};
getMix([arr1, arr2, arr3]);
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 设计模式
# 常见的设计模式有哪些？
# 计模式中观察者模式和发布 / 订阅模式有哪些区别？
# 手写代码
# ↓ 手写数组去重方法
# ↓ 手写new操作符
# 手写JSON.stringify
# 手写JSON.parse
# 手写call或 apply
# 手写继承
# 手写函数柯里化
# 手写Promise
# 手写防抖与节流
# 手写深拷贝
# 手写instanceof
# 数组扁平化 :请实现一个 flattenDeep 函数，把嵌套的数组扁平化
# 笔试
# 请写出下面代码的运行结果
async function async1() {
console.log("async1 start");
await async2();
console.log("async1 end");
}
async function async2() {
console.log("async2");
}
console.log("script start");
setTimeout(function() {
console.log("setTimeout");
}, 0);
async1();
new Promise(function(resolve) {
console.log("promise1");
resolve();
}).then(function() {
console.log("promise2");
});
console.log("script end");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
- 计算两个数组的交集
- JS 实现
String.trim()方法; - 数组去重
- 简单实现一个发布者订阅机制
- HTML
- HTML 语义化
- meta 有哪些属性，作用是什么
- viewport 有哪些参数，作用是什么
- canvas
- img 中 alt 和 title 的区别
- 说说 HTML5 在标签、属性、存储、API 上的新特性
- doctype 的作用是什么？
- href 和 src 有什么区别
- html5\CSS3 有哪些新特性、移除了那些元素？如何处理 HTML5 新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
- CSS
- Link 与 @import 导入css的区别
- 伪类和伪元素的区别 css3 新增的伪类有哪些
- 是否了解盒模型 介绍一下标准的 CSS 盒子模型 与低版本的 IE 盒子模型有什么不同
- 你知道什么是 BFC 吗 BFC 的布局规则是什么？如何创建 BFC？
- 居中布局：居中浮动元素 居中绝对定位的 DIV
- 浮动元素和绝对定位元素的区别和应用?
- 请说说css的选择器以及选择器优先级
- 什么时候清除浮动 如何清除浮动 原理是什么
- CSS 动画
- css 单位有哪些
- 如果需要手动写动画，你认为最小时间间隔是多久，为什么
- 上下 margin 重合的问题
- opacity: 0、visibility: hidden、display: none （隐藏页面中 的元素有哪些 方式）
- display 有哪些值，以及作用
- position 的值
- **png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过 webp？
- 如何实现左侧宽度固定，右侧宽度自适应的布局
- 介绍一下 flex
- z###index 有什么需要注意的地方
- position 跟 display、overflow、float 这些特性相互叠加后会怎么样？
- css3 的新特性有哪些
- calc 函数
- CSS 中的 vertical###align 有哪些值？它在什么情况下才能生效？
- ::after 和:after 的区别
- CSS 有哪些样式可以给子元素继承!
- 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
- box###sizing常用的属性有哪些? 分别有啥作用?
- CSS 中transition和animate有何区别? animate 如何停留在最后一帧!
- css 创建一个三角形的原理
- “品”字布局如何设计
- 使用过 css 预处理器吗
- 在网页中的应该使用奇数还是偶数的字体？为什么呢
- 什么是响应式 什么是自适应
- 你对 line###height 是如何理解的？
- 如何设计一个 4 列等宽布局，各列之间的边距是 10px（考虑浏览器的兼容性）？
- CSS 如何实现三列布局，左侧和右侧固定宽度，中间自适应宽度？
- DOM
- 事件类型
- 说说DOM 中的事件流
- Node 节点获取及增删查改
- 讲讲事件冒泡和事件捕获
- 什么是事件代理
- 知道什么是事件委托吗
- JavaScript
- 判断是不是数组的方法,如何检测数组
- var、let 和 const 区别的实现原理是什么
- JavaScript 的数据类型,存储有什么区别
- 为什么 0.1 + 0.2 != 0.3 ?
- 如何让 (a == 1 && a == 2 && a == 3) 的值为 true？
- es6 的新特性都有哪些？
- ==和===区别是什么？
- typeof 和 instance of 检测数据类型有什么区别？
- prototype 和 __proto__ 区别是什么？
- null和undefined有什么区别么
- for of , for in 和 forEach,map 的区别
- 如何判断两个变量相等
- 谈谈你对原型的理解？
- 什么是原型链？【原型链解决的是什么问题？】
- 说说你对执行上下文的理解
- 什么是变量提升
- 立即执行函数
- ↓ 谈谈作用域与作用域链的理解
- 闭包及作用闭包有哪些使用场景？优缺点是很什么
- 对象的拷贝：深拷贝与浅拷贝
- new 运算符 new 的原理是什么？通过 new 的方式创建对象和通过字面量创建有什么区别
- 箭头函数
- instanceof 实现的原理是什么 内部机制是怎样的
- ES5/ES6 的继承 分别有哪些优缺点？
- 类型的转化
- 防抖与节流，它们的作用是什么
- this 如何正确的判断 this 的指向? 箭头函数的 this 是什么？
- sort 函数
- 函数科里化
- 如何提升 JavaScript 变量的存储性能？
- ['1', '2', '3'].map(parseInt)
- [[3,2,1].reduce(Math.pow), [].reduce(Math.pow)]
- Set、Map、WeakSet 和 WeakMap 的区别
- 判断数组的方法
- JavaScript 中的数组是如何存储的
- 类数组和数组的区别是什么？
- call 与 applycall,aplly 和 bind 的内部是如何实现的？
- 数组的哪些 API 会改变原数组？
- 在 JS 中什么是变量提升？什么是暂时性死区？
- 可迭代对象有哪些特点
- 垃圾回收与内存泄漏
- jQuery
- 手写插件
- Vue
- 什么是 MVVM？谈谈你的理解
- 谈谈你对vue生命周期的理解
- 请你谈谈Vue 组件中的Data
- 请你谈谈 Vue 数据响应原理
- Vue 内部是如何构建一个渲染函数的 render template el 的优先级如何
- 谈谈 Vue 中的 Transition 动画
- 你了解 Vue 中的选项合并策略嘛，请谈谈
- vue 组件中的参数如何传递？如何进行通信
- 说说 Vue 中$nextTick的实现原理 它的执行时机是什么时候 和 DOM 的渲染有什么关系
- vue 修饰符
- Vue 中的 key 有什么作用？
- vue 是如何实现数据的双向绑定
- v###show 与 v###if 有什么区别？
- v###model 的原理？
- Class 与 Style 如何动态绑定？
- vue 的单向数据流
- vue 中组件通信有几种方式
- 虚拟 DOM 原理以及优缺点
- computed watch methods 三者的应用场景与区别以及实现原理
- 对比一下 Object.defineProperty 与proxy
- 使用 JavaScript Proxy 实现简单的数据绑定
- Vue 是如何实现数据双向绑定的？
- vue###router 的路由模式有几种
- 能说下 vue###router 中常用的 hash 和 history 路由模式实现原理吗？
- vuex 的设计思想
- 单页面（SPA）应用的优缺点
- 谈谈你对 keep###alive 的了解？vue 里的 keep###alive 是怎么实现的
- 谈谈 Vue SSR 吗？说说 SSR？
- Vue 怎么用 vm.\$set() 解决对象新增属性不能响应的问题 ？
- 你有对 Vue 项目进行哪些优化？可以从几方面入手
- 谈谈vue 3.0
- $route和$router的区别
- scoped 属性作用
- Vue###Router的两种模式主要依赖什么实现的
- Vue CLI 有哪些特性？
- 如何新增自定义指令
- vue 的数据劫持在不同的版本里是如何处理的？
- 了解 Element UI 组件的框架设计吗？
- 如何自动屏蔽 Input 的自动密码填充？
- React
- 列表组件中的 key
- setState 到底是异步还是同步?
- 为什么使用框架而不是原生
- 虚拟 DOM 的优劣如何
- 虚拟 DOM 的实现原理
- React 最新的生命周期是怎样的?
- React 的请求应该放在哪个生命周期中?
- Ajax 请求放在 componentDidMount 里进行处理还是放在componentWillMount 里进行处理比较合适？
- React 中 setState 什么时候是同步的，什么时候是异步的
- react###router 里的 <Link> 标签和 <a> 标签有什么区别
- react 与vue 的区别
- React 高阶组件的作用有哪些
- 简述下 flux 的思想
- redux 的工作流程?
- react###redux 是如何工作的?
- redux 与 mobx 的区别?
- redux 中如何进行异步操作?
- React 组件通信如何实现?
- React 有哪些优化性能是手段? 语法层面呢？
- React 如何进行组件/逻辑复用?
- mixin、hoc、render props、react###hooks 的优劣如何？
- 你是如何理解 fiber 的?
- 有没有使用过 React Hooks？使用 React Hooks 的同时为什么需要使用高阶组件？
- 受控组件以及非受控组件的区别
- Flutter
- TypeScript
- 谈你对 TypeScript 的理解？
- 比较一下 TypeScript 和 JavaScript，在什么情况下你觉得需要 TypeScript ?
- Node
- 谈谈 node 中的事件循环 浏览器和 Node.js 的事件循环机制有什么区别？
- Babel
- 谈谈babel 的原理是什么
- 框架
- React 和 Vue 的区别？
- 能对比一下 Create React App 和 Vue CLI 吗？
- 了解 MVC / MVP / MVVM 的区别吗？
- 测试
- 平常开发的过程中有写过单元测试或者 e2e 测试么？
- 自动化测试主要是做什么？
- WebPack
- 介绍下 webpack 热更新原理，是如何做到在不刷新浏览器的前提下更新页面的
- 介绍webpack 的实现原理
- Webpack 的 loader 和 plugins 的区别
- Webpack 构建速度优化有哪些方案？
- 浏览器
- 输入URL 发生了什么
- 常见的浏览器内核
- 常见的兼容性问题
- 样式兼容性（css方面）
- 交互兼容性（javascript）
- 浏览器 hack
- （一）H5移动端ios/Android兼容性
- （二）HTML兼容
- （三）IE6常见CSS解析Bug及hack
- （四）JavaScript 兼容性
- 重绘与回流
- 本地存储 cookie 与 token
- session、cookie、localStorage 的区别 了解 SameSite 属性吗
- 如何实现浏览器内多个标签页之间的通信?
- JSONP 的原理是什么？
- 移动端
- 触摸事件
- 移动端的兼容问题
- 移动端 300ms 延迟
- 移动端 rem
- 移动端 1px
- 服务端
- 模块化
- 模块化发展历史
- 异步编程
- setTimeout、Promise、Async/Await 的区别
- 模拟实现一个 Promise.finally
- Promise 构造函数是同步还是异步执行，then 中的方法呢 ?promise 如何实现 then 处理 ?
- Promise 和 setTimeout 的区别 ?
- 如何实现 Promise.all ?
- EventLoop
- async await 函数
- 性能优化
- 简单谈谈 WEB 性能可以从哪几方面优化
- 能说说首屏加载优化有哪些方案么
- 首屏和白屏的时间如何计算
- 什么是 GPU 加速，如何使用 GPU 加速，GPU 加速的缺点
- 异步加载 JS 脚本的方式有哪些？
- css 有哪些提高性能的方法
- 在 HTML 中如何做 SEO 优化？
- 了解 CSS 3 动画的硬件加速么？在重绘和重流方面有什么需要注意的点？
- 了解 SPA 的懒加载么？
- 安全问题
- CSRF 攻击
- XSS 漏洞
- CORS（跨域资款共享）
- 计算机网络
- http 与 https 协议
- 讲讲 http 的基本结构？
- HTTP2 和 HTTP1 有什么区别
- http 常见的状态码
- GET 与Post 的区别
- TCP 三次握手四次挥手
- 谈谈你对 TCP 的理解;
- HTTP 的请求报文由哪几部分组成
- HTTP 常见请求/响应头及其含义
- HTTPS 是如何进行加密的 谈谈 https 的原理？为什么 https 能保证安全？
- CDN 原理
- DNS 解析
- websocket 和 ajax 的区别是什么，websocket 的应用场景有哪些
- 讲讲 http 的缓存机制吧，强缓存，协商缓存？
- 数据结构算法
- 排序算法
- 全排列
- 各种排序
- 优先遍历和广度优先遍历
- 冒泡排序如何实现
- 二分查找
- 就多个数组的交集
- 设计模式
- 常见的设计模式有哪些？
- 计模式中观察者模式和发布 / 订阅模式有哪些区别？
- 手写代码
- ↓ 手写数组去重方法
- ↓ 手写new操作符
- 手写JSON.stringify
- 手写JSON.parse
- 手写call或 apply
- 手写继承
- 手写函数柯里化
- 手写Promise
- 手写防抖与节流
- 手写深拷贝
- 手写instanceof
- 数组扁平化 :请实现一个 flattenDeep 函数，把嵌套的数组扁平化
- 笔试
- 请写出下面代码的运行结果