# 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 函数,把嵌套的数组扁平化
- 笔试
- 请写出下面代码的运行结果