前端无法让我冷静

你的名字 2021-07-24 22:42 1278阅读 0赞

![format_png][]

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

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

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

## img标签的用法 ##

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

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

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

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

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

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

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

** 01**

![format_png 1][]

![format_png 2][]

![format_png 3][]

设置Cookie

![format_png 4][]

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，只要这一串与当前网站不一致，浏览器会认为你已经跨域了。

![format_png 5][]

## cookie是什么，怎么存储 ##

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

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

![format_png 6][]

## 如何用CSS实现一个三角形 ##

![format_png 7][]

## 手写bind函数 ##

![format_png 8][]

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

![format_png 9][]

## 实现一个响应式的正方形 ##

![format_png 10][]

## 倒计时怎么做？ ##

![format_png 11][]

## React 组件生命周期 ##

![format_png 12][]

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

![format_png 13][]

## react怎样提高性能 ##

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

## vue页面之间的通信 ##

第一种，父子组件通信

一.父组件向子组件传值

![format_png 14][]

![format_png 15][]

![format_png 16][]

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

![format_png 17][]

![format_png 18][]

![format_png 19][]

vuex

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

## 介绍一下CSS的盒子模型 ##

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

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

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

positon:relative; 和 position:absolute

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

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

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

## 保持浮动层水平垂直居中 ##

![format_png 20][]

利用定位与margin：auto

![format_png 21][]

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

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的区别 ##

![format_png 22][]

#### ![情人节分割线][format_png 23] ####

##  ##

## 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，老实说，几乎没区别。

![format_png 24][]

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\])

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

参数方式是不一样的

![幼苗][format_png 25]

## 各大浏览器的内核总结 ##

![format_png 26][]

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

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

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

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

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

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

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

![format_png 27][]

## HTML5新增标签、属性 ##

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

![format_png 28][]

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;
      }

![format_png 29][]

## 对闭包的理解 ##

![format_png 30][]

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

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表的方式 ##

![format_png 31][]

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

![format_png 32][]

## 对vuex的理解 ##

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

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

![format_png 33][]

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

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

![format_png 34][]

## Vue 有哪些指令？ ##

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

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

![format_png 35][]

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

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

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

![format_png 36][]

## 前端如何优化网站性能？ ##

减少 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)

![format_png 37][]

![format_png 38][]

![format_png 39][]

ES5的基本数据类型，Undefined，Null，Number，String，Boolean。引用类型，Object

![format_png 40][]

## JavaScript 数据类型 ##

字符串值，数值，布尔值，数组，对象。

![format_png 41][]

![format_png 42][]

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。

引用数据类型：对象(Object)、数组(Array)、函数(Function)。

JavaScript 对象是拥有属性和方法的数据。

![format_png 43][]

JavaScript 数据类型  
在 JavaScript 中有 5 种不同的数据类型：

string  
number  
boolean  
object  
function  
3 种对象类型：

Object  
Date  
Array  
2 个不包含任何值的数据类型：

null  
undefined

![format_png 44][]

ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。

let 声明的变量只在 let 命令所在的代码块内有效。

const 声明一个只读的常量，一旦声明，常量的值就不能改变。

![format_png 45][]

JSON 语法规则  
数据为 键/值 对。  
数据由逗号分隔。  
大括号保存对象  
方括号保存数组

javascript:void(0) 这样的代码

javascript:void(0) 中最关键的是 void 关键字， void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。

`#` 包含了一个位置信息，默认的锚是`#top` 也就是网页的上端。

而javascript:void(0), 仅仅表示一个死链接。

**这是一个有质量，有态度的公众号**

![format_png 46][]

点关注，有好运

![format_png 47][]

[format_png]: /images/20210724/aec9857f392e45c394afb4cbeb5cb9db.png
[format_png 1]: /images/20210724/ba6244ca8cb8400296f67f9b61c9b408.png
[format_png 2]: /images/20210724/3d860bd186244709bf07746991a8e36e.png
[format_png 3]: /images/20210724/e91ffd805b0b4809b7b4013bc189aa92.png
[format_png 4]: /images/20210724/c6c10682004144e58d3ddb74798ee810.png
[format_png 5]: /images/20210724/1aa2cb092d594371b242657003046083.png
[format_png 6]: /images/20210724/fdc27ca4c01443d384bbe1883fd72d85.png
[format_png 7]: /images/20210724/6288820299ec4a588e64daffa4fbdbfe.png
[format_png 8]: /images/20210724/135221946b89459d93bf449d1db6ae6c.png
[format_png 9]: /images/20210724/0dde0716ae9440cfaf67b9d64c6e3acf.png
[format_png 10]: /images/20210724/6a9a3cacd2c54ace9be072677cd04c07.png
[format_png 11]: /images/20210724/04bd6025b2cb43a0af329ef4dd9f00fe.png
[format_png 12]: /images/20210724/6a46ec335bdd4056b676ababd0f497de.png
[format_png 13]: /images/20210724/d301c41aeed940469ba1b9baf6c23d2b.png
[format_png 14]: /images/20210724/2a289e39a832443fbefa2cda068358ac.png
[format_png 15]: /images/20210724/19c9aed315a54bf88dac3a4fe42f94ab.png
[format_png 16]: /images/20210724/f953fdd928c7425aaaca4316d9b3cf85.png
[format_png 17]: /images/20210724/c140171ece984dcda07099d3ff767491.png
[format_png 18]: /images/20210724/de89a66750824799af7e7dbc2af1db9a.png
[format_png 19]: /images/20210724/cca613ac4c464150897fe9aef15f5954.png
[format_png 20]: /images/20210724/1fb3de5312e24ace8a4c56e1b33f53fc.png
[format_png 21]: /images/20210724/65799ae224e6492282bbe21ad8fb08a5.png
[format_png 22]: /images/20210724/6e49114d27694b3d9618b31dd4f4f7b0.png
[format_png 23]: /images/20210724/bdbda67df53f4565ac886b71dff1c8ad.png
[format_png 24]: /images/20210724/803561e17a034b0aba144b73e58b3c95.png
[format_png 25]: /images/20210724/63f34471b7cf4c3cae03314009307bb0.png
[format_png 26]: /images/20210724/df57676dc51f4592822f00912710fe32.png
[format_png 27]: /images/20210724/7d8aa00d911f4f41abae640e4a571e7e.png
[format_png 28]: /images/20210724/b14e0ab3136c458698fbef97c82590f4.png
[format_png 29]: /images/20210724/939f52e8ee5d43c3a634315c3a35d905.png
[format_png 30]: /images/20210724/9b2fac68bfb74beb87afb77e19644c8d.png
[format_png 31]: /images/20210724/1dada2534195483b943b6044cc00c8c6.png
[format_png 32]: /images/20210724/47221c39ea1140509bcf119e970b5354.png
[format_png 33]: /images/20210724/a6e5f4c17d6f4b329e3b45b3e1c6dcbe.png
[format_png 34]: /images/20210724/e55bf484239641dbb9ffce8d1d675814.png
[format_png 35]: /images/20210724/c9c15e89484340c7ad994c8a348c1d8a.png
[format_png 36]: /images/20210724/8d8151e680424e37a472a97f88017ae3.png
[format_png 37]: /images/20210724/198599e1c1ec4534a0027c679abb6b16.png
[format_png 38]: /images/20210724/5025886f73974450812e5888a2ebe820.png
[format_png 39]: /images/20210724/6e354cde9fef4baab6bd92362925ba20.png
[format_png 40]: /images/20210724/75fd8f3a9b9b40a38b8c426ef78745b3.png
[format_png 41]: /images/20210724/a02c3f4777bd4da9a11f75d8f5129553.png
[format_png 42]: /images/20210724/0976a04687ce4ae387515ab8dc44ae67.png
[format_png 43]: /images/20210724/47c09870aeae4aea9d345d6a9d9b76d8.png
[format_png 44]: /images/20210724/822da4c881464af7a5315b26a769c1f9.png
[format_png 45]: /images/20210724/9786327fdb6c4cdaafca8ca053413460.png
[format_png 46]: /images/20210724/2ef81064fb364c44b85fc51b52a9ee75.png
[format_png 47]: /images/20210724/dc0047e443ce4b84b903441d1315f631.png