前端无法让我冷静

本文主要是介绍前端无法让我冷静，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

行内标签和块标签有哪些以及都有什么特点

块标签
每一个块属性标签都是从新的一行开始，而且之后的元素也都会从新的一行开始
可以设置宽度、高度，行高，距顶部距离，距底部距离
块属性标签的宽度假如不做设置，会直接默认为父元素宽度的100%
块属性标签是可以直接嵌套的
p标签中不能嵌套div标签

行内标签
行属性标签它和其它标签处在同一行内
无法设置宽度，高度行高距顶部距离距底部距离
宽度是直接由内部的文字或者图片等内容撑开的
行属性标签内部不能嵌套行属性标签

img标签的用法

<img src="/i/eg_tulip.jpg"  alt="上海鲜花港 - 郁金香" />

img 元素向网页中嵌入一幅图像。

请注意，从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。

HTML 与 XHTML 之间的差异
在 HTML 中，<img> 标签没有结束标签。

在 XHTML 中，<img> 标签必须被正确地关闭。

请描述一下cookies，sessionStorage和localStorage的区别？

相同点：都存储在客户端
不同点：
1.存储大小
2.有效时间

数据与服务器之间的交互方式

设置Cookie

var name = "jack";  
var pwd = "123";  
var now = new Date();  
now.setTime(now.getTime() +1 * 24 * 60 * 60 * 1000);//转毫秒  
var path = "/";//可以是具体的网页  
document.cookie = "name=" + name + ";expires=" + now.toUTCString() + ";path=" + path;//姓名  
document.cookie= "pwd=" + pwd + ";expires=" + now.toUTCString()+ ";path=" + path; //密码

高度跟据内容自适应的div 如何实现垂直居中？

div{
display:flex;
align-items:center;
}

Bom是什么？列举你知道的Bom对象

BOM是browser object model的缩写，简称浏览器对象模型

Bom对象
window对象
document对象
location对象
navigator对象
screen对象
history对象

hybrid通信的实现原理

1.H5向Native通信
2.Native向H5通信
3.H5页面之间通信

fetch和ajax的区别

Ajax
利用的是XMLHttpRequest对象来请求数据的

fetch
window的一个方法主要特点是
1、第一个参数是URL
2、第二个参数可选参数可以控制不同的init对象
3、使用了js 中的promise对象

data-xxx 属性的作用是什么？

data-为H5新增的为前端开发者提供自定义的属性，这些属性集可以通过对象的 dataset 属性获取，不支持该属性的浏览器可以通过 getAttribute 方法获取

什么是浏览器的标准模式和怪异模式

标准模式：浏览器按W3C标准解析执行代码
怪异模式：使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以称之为怪异模式。

XSS是什么说一下？

XSS 指的是：黑客通过 “HTML 注入 ” 篡改网页，插入恶意脚本，从而在用户浏览网页时，控制用户浏览器的一种攻击。

CSRF了解吗？

CSRF（Cross-site request forgery）跨站请求伪造，也被称为“One Click Attack”或者Session Riding，通常缩写为CSRF或者XSRF，是一种对网站的恶意利用。

如何理解跨域

跨域是浏览器施加的安全显示，即不同源的的网站不能问其他网站的内容

跨域，所谓域就是指http(s)://host:port，只要这一串与当前网站不一致，浏览器会认为你已经跨域了。

cookie是什么，怎么存储

Cookie是保存在客户端的纯文本文件
jquery.cookie.js扩展包

$.cookie("test", "1", { expires: 7 }); //读取cookie
$.cookie("test");//删除cookie
$.cookie("test", "1", { expires: -1 }); 
//设置过期时间为负就失效了

如何用CSS实现一个三角形

手写bind函数

什么是函数节流？
简单讲就是让一个函数无法在短时间内连续调用，只有当上一次函数执行后过了规定的时间间隔，才能进行下一次该函数的调用。

实现一个响应式的正方形

倒计时怎么做？

React 组件生命周期

React生命周期分为了挂载（装配）、更新、卸载以及捕错四个状态阶段

react怎样提高性能

react的组件渲染分为初始化渲染和更新渲染

vue页面之间的通信

第一种，父子组件通信

一.父组件向子组件传值

二.子组件向父组件传值或更新父组件值

vuex

状态管理模式、集中式存储管理

介绍一下CSS的盒子模型

盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)

有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 、padding

绝对定位、相对定位相关知识

positon:relative; 和 position:absolute

绝对定位：该元素相对于其父元素
相对定位：该元素相对于自己原有位置，偏移一定距离。相对的是自己。

什么时候需要清除浮动？清除浮动方法总结

父元素高度塌陷了
在父元素的最后加一个冗余元素并为其设置clear:both
采用伪元素，这里我们使用:after
使用overflow属性，给父元素添加overflow:hidden ||auto

保持浮动层水平垂直居中

利用定位与margin：auto

如何保持文字水平垂直居中

text-align:center; /*水平居中*/div{
width:200px;height:200px; /*设置div的大小*/
border:1px solid green; /*边框*/
text-align: center; /*文字水平居中对齐*/
line-height: 200px; /*设置文字行距等于div的高度*/
overflow:hidden;
}

display和position的取值、各自的意思和用法

position属性取值：static(默认)、relative、absolute、fixed、inherit

display属性取值：none、inline、inline-block、block、flex、inherit

选择器的种类及其优先级

1、类型选择器
2、简单属性选择器
3、组合选择器类型

归纳为!important > 内联 > ID > 类 > 伪类 | 属性选择 > 标签 | 伪对象 > 通配符 > 继承

canvas与svg的区别

px、em、rem的区别

PX
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的

EM
em是相对长度单位。相对于当前对象内文本的字体尺寸。

rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。

JavaScript的基本数据类型有哪些、解释一下原始数据类型和引用数据类型

ECMAScript包括两个不同类型的值：基本数据类型和引用数据类型。

JS有六大数据类型：
Number、String、Boolean、Null、Undefined、Object

存在堆中：引用数据类型（object、function）

存在栈中：基本数据类型（number、string、boolean、null、unedfined）

基本数据类型(5个)：Undefined,Null,Boolean,Number,String
引用（复杂）数据类型：Object (object,array,function,date等)

声明变量时不同的内存分配
不同的内存分配机制也带来了不同的访问机制
复制变量时的不同
参数传递的不同

谈谈null与undefined的区别

在JavaScript中，将一个变量赋值为undefined或null，老实说，几乎没区别。

null表示"没有对象"，即该处不应该有值。
undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。

变量类型检测的方法有哪些

判断数据类型共有四种方法：

1.typeof

2.instanceof

3.constructor

4.Object.prototype.toString.call

谈谈对原型链的理解，prototype是什么，什么时候用

prototype对象是实现面向对象的一个重要机制
在JavaScript中没有类的概念，都是函数
1.原型和原型链是JS实现继承的一种模型。
2.原型链的形成是真正是靠proto 而非prototype

函数里的this什么含义，this的指向问题

1.当函数没有用作构造函数时，this指向window
2.用作构造函数时，this指向新生成的对象

apply与call的区别，有哪些应用

本身无该方法，才选择调用
call方法：call(obj,x,y,z,.....)

调用一个对象的一个方法，以另一个对象替换当前对象

apply方法：apply(obj,[x,y,z])

应用某一对象的一个方法，用另一个对象替换当前对象。

参数方式是不一样的

各大浏览器的内核总结

JavaScript中split()和join()的区别

split()用于分割字符串，返回一个数组
join()用于连接多个字符或字符串

数组方法push()、pop()、unshift()、shift()

不同的是 push()、pop() 是从数组的尾部进行增减，unshift()、shift() 是从数组的头部进行增减。

pop()用于移除数组末尾的最后一项，然后返回移除的项

unshift:将参数添加到原数组开头，并返回数组的长度
shift()：删除原数组第一项，并返回删除元素的值

HTTP协议的理解、TCP/IP三次握手

HTML5新增标签、属性

语义化标签的完善
p
article
aside
hgroup
header
footer
nav
figure
figcaption
mark
progress
time
wbr
datalist
details

Forms
新增input元素的种类：
search : 搜索输入框
tel : 电话号码输入框
url : 输入url地址
email : 邮件输入框
number : 数字输入框
range :特定范围内的数值选择器(通过拖动滚动条改变一定范围内的数字)
color : 颜色选取器只在 Opera 和 Blackberry 浏览器
datetime : 显示完整日期和时间 UTC标准时间
datetime-local : 显示完整日期和时间
time : 显示时间
month : 显示月
week : 显示周

es6与es5的差别

JavaScript一种动态类型、弱类型、基于原型的客户端脚本语言
什么是ES5
作为ECMAScript第五个版本
什么是ES6
ECMAScript6在保证向下兼容的前提下，提供大量新特性

CSS中clear的作用

图像的左侧和右侧均不允许出现浮动元素：img{float:left;clear:both;}

对闭包的理解

如何判断一个变量是否是数组

1、instanceof
function isArray (obj) {return obj instanceof Array;
}
2、Array对象的 isArray方法
function isArray (obj) {return Array.isArray(obj);
}
3、Object.prototype.toString
function isArray (obj) {return Object.prototype.toString.call(obj) === '[object Array]';
}

页面加载完成有两种事件
1.load是当页面所有资源全部加载完成后
2.ready()是当DOM文档树加载完成后执行一个函数

谈谈你对es6箭头函数的理解

在函数被传递后, 如果使用了箭头函数, this 最终将指向其定义处上下文的 this 对象。

箭头函数和普通函数一个很大的区别在于箭头函数不重新绑定作用域。

谈谈你对模块化的理解

模块化——把程序划分成独立运行且可以独立访问的模块，每个模块完成一个子功能，把这些模块集成起来构成一个整体，可以完成指定的功能满足用户的需求。

写一个数组去重的方法，使用hash表的方式

border-radius:3px 4px 5px 6px
代表设置对象左上角3px圆角、右上角4px圆角、右下角5px圆角、左下角6px圆角。

对vuex的理解

核心概念
Vuex 是适用于 Vue.js 应用的状态管理库

对JavaScript面向对象的了解，是否有应用过？

谈谈你对MVVM开发模式的理解

MVVM分为Model、View、ViewModel三者。
Model 代表数据模型，数据和业务逻辑都在Model层中定义；
View 代表UI视图，负责数据的展示；
ViewModel 负责监听 Model 中数据的改变并且控制视图的更新，处理用户交互操作；

Vue 有哪些指令？

v-html、v-show、v-if、v-for等等

v-if 和 v-show 有什么区别？

Vue中如何监控某个属性值的变化？

watch: {obj: {handler (newValue, oldValue) {console.log('obj changed')},deep: true}}

delete和Vue.delete删除数组的区别

前端如何优化网站性能？

减少 HTTP 请求数量
控制资源文件加载优先级
利用浏览器缓存
减少重排
减少 DOM 操作
图标使用 IconFont 替换

原生DOM对象转jQuery对象：
var box = document.getElementById('box');
var $box = $(box);
jQuery对象转原生DOM对象：
var $box = $('#box');
var box = $box[0];

jQuery如何扩展自定义方法

(jQuery.fn.myMethod=function () {alert('myMethod');
})
// 或者：
(function ($) {$.fn.extend({myMethod : function () {alert('myMethod');}})
})(jQuery)(function($){$.fn.extend({myMethod: function() {alert('myMethod');}})
})(jquery)