我的问题

时间 2020-06-18

标签我的问题繁體版

原文原文链接

html和css

w3c 规范

结构化标准语言
样式标准语言
行为标准语言

html5新增的标签有哪些？

audio
video
nav
progress
time
aside
mark
aside
section
figurejavascript

盒模型

常见的盒模型有w3c盒模型（又名标准盒模型）box-sizing:content-box和IE盒模型（又名怪异盒模型）box-sizing:border-box。
标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin
低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margincss

css3 新特性

常问：html

word-wrap 文字换行
text-overflow 超过指定容器的边界时如何显示
text-decoration 文字渲染
text-shadow文字阴影
gradient渐变效果
transition过渡效果 transition-duration：过渡的持续时间
transform拉伸，压缩，旋转，偏移等变换
animation动画
audio音频
vadio视频
RGBA和透明度

css3 边框

border-radius 圆角
box-shadow 盒子阴影
border-image 边框图片

css3 背景

background-image 背景图片
background-size 背景大小
background-origin 背景图像的位置区域
background-clip 背景剪裁属性是从指定位置开始绘制

BFC

BFC是块级格式化上下文。前端

计算BFC高度时，浮动元素也会参与计算、
在BFC这个元素垂直方向的边距会发生重叠
BFC的区域不会与浮动元素的box重叠
BFC在页面上是一个独立的容器，其里外的元素不会互相影响

BFC应用:
防止margin重叠
清除内部浮动
自适应两栏布局
防止字体环绕html5

BFC的生成条件：
根元素
float值不为none
overflow的值不为visible
display的值为inline-block,table-cell,table-caption
position的值为absolute，fixedjava

弹性盒

display:flex;
align-items:center;
justify-conter:center;

元素垂直水平居中

不须要知道宽和高node

position：absolute；top:0；left:0；right:0；bottom:0;margin:auto;

须要知道宽和高webpack

position:absolute;top:50%;left:50%;margin-top:+/-50%(自身高度的50%)；margin-left:+/-50%;

css定位方式

position：static;//默认定位
position：relative;//相对定位（参照物是自身,不脱离文档流）
position:absolute;//绝对定位（参照物是父元素，遵循就近原则，寻找父元素及其爷爷元素中设置 position:relative 属性进行定位，脱离文档流；若是都不设置定位属性，就以根元素<html>进行定位。）
position:fixed;//固定定位（参照物是可视区窗口，脱离文档流）相对于浏览器窗口进行定位。
position:sticky;//元素不脱离文档流ios

rem和em的区别

总而言之，就是浏览器把谁转化成“px”
rem 依据的是html的font-size值。1rem=16px
em 依据的是父元素的font-size值。css3

浏览器内核

Trident IE浏览器
Gecko Firefox浏览器
Webkit Chrome Safari
Blink Chrome Opera

移动端1像素问题

伪元素+scale

.box{
    width:100%;
    height:1px;
    margin:20px 0;
    position:relative;
}
.box::after{
    content:'';
    position:absolute;
    bottom:0;
    width:100%;
    height:1px;
    transform:scaleY(0.5);
    transform-origin:0 0;
    background:red;
}

<div class="box"><div>

border-image

div{
    border-width:1px 0px;
    -webkit-border-image:url(xxx.png) 2 0 stretch;
    border-image:url(xxx.png) 2 0 stretch;
}

作移动端开发有没有遇到不兼容的问题?如何解决？

使用背景图来代替img标签

background:url(../images/icon/all.png) no-repeat center center;
   -webkit-background-size:50px 50px;
   background-size: 50px 50px;
   display:inline-block; 
   width:100%; 
   height:50px

防止手机中网页放大和缩小,设置meta标签中的viewport;

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

浮动子元素撑开父元素盒子高度

1.父元素设置为 overflow: hidden;

2.父元素设置为 display: inline-block;

　如何解决移动端滚动条卡顿问题

安卓或者ios

\-webkit-overflow-scrolling: auto; / 当手指从触摸屏上移开，滚动会当即中止 \*/  
\-webkit-overflow-scrolling: touch; /\* 当手指从触摸屏上移开，会保持一段时间的滚动 ，继续滚动的速度和持续的时间和滚动手势的强烈程度成正比

响应式布局

所谓响应式布局，就是指同一个网页，在不一样的终端上的显示效果不一样，可是访问的确实是同一个页面，只是由于浏览器会根据终端的不一样选择的渲染方式也不一样。
换句话说就是先作好PC端的样式，而后使用css中的@media媒体查询来适配不一样的终端。这里有一个比较好的习惯是将页面栅格化，啥是栅格化，bootstrap就是栅格化，栅格化就是将页面划分红一块一块的区域，而后在不一样的终端适配，最后将栅格从新排列。
响应式布局须要遵循如下几点：

①页面元素宽度不是用px做为单位，而是使用百分比。

②页面框架之间使用流式布局，也就是用float属性，这样当元素超出屏幕宽度的时候会滑倒下面而不是撑出水平滚动条。

③还有就是注意图片的大小，尤为是宽度，一样使用百分比

/*当设备宽度小于800px的时候切换成移动端的布局*/    

@media screen and (max-width: 800px) {    

    .header img {    

        width: 15%;    

        height: 15%;    

    }    

    .main {    

        float: none;    

        width: 95%;    

        margin: 0 auto;    

        box-sizing: border-box;    

    }    

}

圣杯布局

body{
    min-width: 550px;
}
#container{
    padding-left: 200px;
    padding-right: 150px;
}
#container .column{
    float: left;
}
#center{
    width: 100%;
}
#left{
    width: 200px;
    margin-left: -100%;
    position: relative;
    right: 200px;
}
#right{
    width: 150px;
    margin-right: -150px;
}

<div id="container">
    <div id="center" class="column">center</div>
    <div id="left" class="column">left</div>
    <div id="right" class="column">right</div>
</div>

双飞翼布局

body {
    min-width: 500px;
}
#container {
    width: 100%;
}
.column {
    float: left;
}
#center {
    margin-left: 200px;
    margin-right: 150px; 
}
#left {
    width: 200px;
    margin-left: -100%;
}
#right {
    width: 150px;
    margin-left: -150px;
}

<div id="container" class="column">
    <div id="center">center</div>
</div>
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>

javascript

js 中常见的数据类型:
string
number
boolean
underfined
Null
NaN
object
symbol

typeof

能够判断出'string','number','boolean','underfined','symbol'
当判断typeof(null)时值为'object',判断数组和对象的值均为'object'

instanceof

原理是构造函数的 prototype 属性是否出如今对象的原型链中的任何位置

cookie,sessionStorage和localStorage

cookie用来保存登陆信息，大小限制为4KB左右
localStorage是Html5新增的，用于本地数据存储，保存的数据没有过时时间，通常浏览器大小限制在5MB
sessionStorage接口方法和localStorage相似，但保存的数据的只会在当前会话中保存下来，页面关闭后会被清空。

跨域

什么是跨域？
跨域是指一个域下的文档或脚本试图去请求另外一个域下的资源，这里跨域是广义的。
什么是同源策略？
同源策略/ SOP（Same origin policy）是一种约定，由Netscape公司发布。它是浏览器最核心，也最基本的安全功能，若是有了同源策略，所谓类似是指协议+域名+端口三者相同，若是有一个不一样，即为非同源。
跨域解决方案：
１.　cors 跨域资源共享
设置响应头

response.setHeader("Access-Control-Allow-Origin", "*")

缺点：是会引发CSRF攻击，如何解决这个问题呢？
解决方法：1.主要使用token 2. 尽可能使用Post
２.　jsonp
jsonp缺点：只能实现get一种请求。

CORS与JSONP 区别

JSONP只能实现GET请求，而CORS支持全部类型的HTTP请求。
使用CORS，可使用普通的XMLHttpRequest发起请求和得到数据，比起JSONP有更好的错误处理。
JSONP主要被老的浏览器支持，它们每每不支持CORS，而绝大多数现代浏览器都已经支持了CORS。[低版本IE7如下不支持，要支持IE7仍是要用jsonp方式]

cookie 跨域问题

nginx反向代理
jsonp
nodejs superagent 其实本质也是jsonp的方式

localStorage跨域问题

可使用postMessage和iframe

思路以下：

假设有a页面和b页面，两个页面。

经过a页面去修改b页面的本地数据：

> ①　在a页面建立一个iframe，嵌入b页面。
> ②　a页面经过postMessage传递指定格式的消息给b页面。
> ③　b页面解析a页面传递过来的消息内容，调用localStorage API 操做本地数据。
> ④　b页面包装localStorage的操做结果，并经过postMessage传递给a页面。
> ⑤　a页面解析b页面传递回来的消息内容，获得 localStorage 的操做结果。

var 、let 和const区别

在做用域方面

var 声明的变量不存在块及做用
let 声明的变量存在块及做用域、

在变量提高方面

var 声明的变量存在变量提高
let const声明的变量不存在变量提高惟一不一样的是 const 声明的变量一旦赋值就不能再改变了

在重复声明方面

var 能够屡次声明，let不存在屡次声明
const和let基本相同惟一不一样的是const声明的变量一旦赋值就不能在改变。

面向对象

特色：封装，继承，多态

封装
把一些数据和对数据的操做集中在一块儿，向外暴露须要的接口（属性和方法）
继承
一个类型的实例可以访问另一个类型的属性和方法。类和类之间的关系子类继承父类，你只不过是子类中的实例。
构造函数继承
原型链继承
组合继承
寄生组合式继承
class 继承

多态

所谓多态，就是同一个方法的多种调用方式

promise

promise是一个类，是异步编程的解决方案和回调函数的使用有关，多个回调函数使用行成回调地狱。promise有三个状态分别是等待，成功，失败，每一个promise都有一个.then的方法，resolve表明成功，reject表明失败，无论先调用resolve方法，仍是先调用reject方法，按照先调用先生效的原则。

ES5新增的有哪些？

像
数组:

forEach();map();every()filter();isArray()

string:

trim()

Data:

Date.now()

Json:

JSON.stringify()//将js对象转化成字符串
 JSON.parse()//将字符串转换为js值

this指向

ES6新增的有哪些？

let const能够再说说var,const,let的区别
模板字符串
解构赋值对数组和对象的优化
箭头函数，能够多说说，this指向问题
扩展运算符 ...
set方法，经常使用于数组去重
promise解决异步问题
set和map方法
for...of...

ES7新增

求幂运算符
```
Math.pow(3, 2) === 3 ** 2
```

Array.prototype.includes()

indexOf(3) > -1 //true
  区别：1. 简便性；includes返回值是布尔值，indexOf返回值是索引 2.精确性 对于NaN,在严格模式下，includes返回值是布尔值,indexOf返回值是-1

ES8新增

使用async await异步解决

Object.entries()

Object.entries({ one: 1, two: 2 })    
  //[['one', 1], ['two', 2]]
  Object.extries([1, 3])    //[['0', 1], ['1', 3]]

字符串填充padStart()、padEnd()

promise

Promise.all():当全部的异步都执行完毕之后才会执行.then中的操做。  
    Promise.race():只要有一个promise执行完毕后就会执行.then操做。

基础promise封装

===========

functionajax(url) {

    return newPromise(function (resolve, reject) {

        if (window.XMLHttpRequest) {

             var xhr=newXMLHttpRequest();

        } else {

            var xhr=newActiveXObject("Microsoft.XMLHTTP");

        }

        xhr.open("GET", url, true);

        xhr.send();

        xhr.onreadystatechange = function () {

        if (xhr.readyState==4) {

            if (xhr.status==200) {

                var data = xhr.responseText;

                resolve(data);

                }

            }

        }

    })

}

set和map区别

set: 　　
 set是ES6提供的一种新的数据结构，相似于数组，可是成员的值是惟一的没有重复的，接受的参数是一个数组方法有： 　　     add():添加 　　
    delete():删除 　　
    size:长度 　　
    has():查找 　　
    clear：清除全部 
map： 　　
map相似于对象，也是键值对的集合， 可是“键”的范围不限于字符串，各类类型的值（包括对象）均可以看成键方法有： 　　
    set():设置 　　
    get():获取 　　
    delete():删除 　　
    has():查找 　　
    clear():清除全部

for of 和for in区别:

for in 循环特别适合遍历对象
for…in是遍历数组、对象的key
for…of是遍历数组的value

闭包的概念及优缺点

=========
闭包的概念：

就是在一个函数外部可以访问该函数内部局部变量的函数。

优势：
避免全局变量的污染。
但愿一个变量长期储存在内存中。

缺点：
内内存泄漏
增长内存的使用量

this 指向问题

宗旨就是：谁调用它，它就指向谁

箭头函数中的this指向它的环境。
构造函数调用，this 指向实例对象
对象方法调用，此时 this 指向该方法所属的对象
经过事件绑定，此时 this 指向绑定事件的对象

如何改变this指向以及它们的区别

call apply bind

call和apply区别是参数个数不一样。
call的参数能够无限个；而apply的参数最多只能有两个。
bind是建立一个新函数，与被调函数有相同的函数体。

http和https的区别？

https协议须要申请证书，通常难免费
http是超文本传输协议，信息是明文传输的，https具备安全性，https采用的是加密传输协议。
http和https采用的不一样的链接方式，http端口号是80，https端口号是443.

节流和防抖

防抖
防抖是指在一段时间内，函数被触发屡次，可是只执行一次，当达到了必定的时间间隔就会执行一次

function debounce(fn, delay) {
  let timer = null;
  return function () {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, delay);
  }
}

节流
节流是会有规律的每隔时间n就执行一次函数。

function throttle(fn, cycle) {
  let start = Date.now();
  let now;
  let timer;
  return function () {
    now = Date.now();
    clearTimeout(timer);
    if (now - start >= cycle) {
      fn.apply(this, arguments);
      start = now;
    } else {
      timer = setTimeout(() => {
        fn.apply(this, arguments);
      }, cycle);
    }
  }
}

谈谈js事件循环机制

程序开始执行以后，主程序则开始执行同步任务，碰到异步任务就把它放到任务队列中,等到同步任务所有执行完毕以后，js引擎便去查看任务队列有没有能够执行的异步任务，将异步任务转为同步任务，开始执行，执行完同步任务以后继续查看任务队列，这个过程是一直循环的，所以这个过程就是所谓的事件循环，其中任务队列也被称为事件队列。经过一个任务队列，单线程的js实现了异步任务的执行，给人感受js好像是多线程的。

async 和 await

原理：async 和 await 用了同步的方式去作异步，async 定义的函数的返回值都是 promise，await 后面的函数会先执行一遍，而后就会跳出整个 async 函数来执行后面js的代码

get 和 post 区别

get 传输不安全，由于数据放在请求的 url 中；post 全部操做用户是看不到的。
get 传输数据量小，由于受到 url 长度的限制；post 传输的数据量较大，通常不受限制。
get 执行效率比 post 更好。get 是 form 提交的默认方式。

深拷贝和浅拷贝的区别

==========
浅拷贝：是将原对象和原数组的引用直接赋值给新数组，新对象/新数组只是原对象的一个引用。

Object.assign()
for...in ...

深拷贝：是将原对象和原数组的值直接拷贝给新的对象和数组。

JSON.stringify()
JSON.parse()
**借用JQ的extend方法**
扩展运算符 ...

Ajax

ajax是“Asynchronous JavaScript and XML”的缩写，是一种建立交互式网页应用的网页开发技术，
ajax具备如下优势：

使用异步方式与服务器通讯，具备更加迅速的响应能力。
优化了浏览器和服务器之间的传输，减小没必要要的数据往返，减小了带宽占用。
Ajax最大特色能够实现动态不刷新（局部刷新）

同时ajax也是有缺点的：
一、ajax不支持浏览器back按钮。
二、安全问题 AJAX暴露了与服务器交互的细节。
三、对搜索引擎的支持比较弱。
四、破坏了程序的异常机制。
五、不容易调试。

阻止事件流方式有哪些

==========

阻止冒泡的方式有哪些？

IE8: 事件对象.cancelBubble=true
火狐：事件对象.stopPropagation();

阻止浏览器的默认行为有哪些？

event.preventDefault();//现代浏览器。  
event.returnValue=false; //IE 低版本及部分现代浏览器。  
return false;//兼容性比较好 最好用在代码的最后面。

DOM二级事件和普通事件的区别

捕获由外向内传播；冒泡由内向外。
传统事件不支持捕获；DOM2级事件支持捕获。
传统事件多个相同的事件名，会覆盖；DOM2级事件会依次执行。
DOM2级事件有兼容性的。

　对前端性能优化有什么了解？通常都经过那几个方面去优化的？

减小请求数量
减少资源大小
优化网络链接
优化资源加载
减小重绘回流
性能更好的API
webpack优化

回流和重绘有什么区别？以及分别介绍它们。

区别：
回流必将引发重绘，而重绘不必定引发回流。

回流：
当render tree中的一部分（或所有）元素的属性改变而须要更新构建页面。这就称为回流。

重绘：
当render tree中的一些元素须要更新属性，而这些属性只是影响元素的外观，风格，而不影响布局的，称为重绘。

比方说：只有颜色改变的时候就只会发生重绘而不会引发回流，当页面布局和几何属性改变时就须要回流。

DOM 事件有哪些阶段？谈谈对事件代理的理解

或者问：js 事件传播流程是什么？
主要分为三个阶段，分别是：

捕获阶段
目标阶段
冒泡阶段

事件代理，又叫事件委托，就是说利用冒泡原理，事件不直接绑定到某原元素上，而是绑定到该元素的父元素上。
好处：（1）代码更简洁（2）节省内存开支

同步和异步

Javascript语言的一大特点就是单线程，同一时间只能作一件事。这门语言的设计者布兰登·艾奇意识到这个问题，因而将任务分为两种，一种是同步任务；另一种就是异步任务。

同步又叫阻塞模式，当一个方法被调用时，调用者须要等待该发法执行完毕才能执行，咱们就称这种方法时同步方法。

异步又叫非阻塞模式，当一个方法被调用时当即返回，并获取一个线程执行该方法内部的业务，调用者不用等待该方法执行完毕，咱们称这个方法为异步方法。

变量提高（变量的声明提高）

它是分为两步进行的，
第一步：预编译阶段。先扫描当前环境中全部声明的变量，包括变量声明和函数声明，将这些声明提高到原来的位置。
第二步：代码执行阶段。在原来的位置进行运算或者输出等操做。

map 和 foreach 区别

区别：
forEach()，不改变原数组，不会返回一个新的数组，没有返回值。
map()，不会改变原数组，会返回一个新的数组。
共同点：
参数一：function(currentValue, index, arr)必需
参数二: thisValue 可选

如何获取用户的浏览器是什么？

navigator.userAgent

原型和原型链

每个构造函数都有一个原型对象protype,每个原型对象都有一个指向构造函数的内部指针construct,每个实例都有一个指向原型对象的内部指针-proto-，原型对象上的属性和方法都能被实例所访问到。

排序算法

选择排序

function selectionSort(arr) {
    var len = arr.length;
    var minIndex, temp;
    for (var i = 0; i < len - 1; i++) {
        minIndex = i;
        for (var j = i + 1; j < len; j++) {
            if (arr[j] < arr[minIndex]) {     // 寻找最小的数
                minIndex = j;                 // 将最小数的索引保存
            }
        }
        temp = arr[i];
        arr[i] = arr[minIndex];
        arr[minIndex] = temp;
    }
    return arr;
}

冒泡排序

var examplearr=[8,94,15,88,55,76,21,39];
function sortarr(arr){
    for(i=0;i<arr.length-1;i++){
        for(j=0;j<arr.length-1-i;j++){
            if(arr[j]>arr[j+1]){
                var temp=arr[j];
                arr[j]=arr[j+1];
                arr[j+1]=temp;
            }
        }
    }
    return arr;
}
sortarr(examplearr);
console.log(examplearr);

快速排序

function quickSort(arr){
        if(arr.length<1){
            return arr;
        }
        var pivotIndex=Math.floor(arr.length/2);//找到那个基准数
        var pivot=arr.splice(pivotIndex,1)[0]; //取出基准数，并去除，splice返回值为数组。
        var left=[]; 
        var right=[];
        for(var i=0;i<arr.length;i++){
            if(arr[i]<pivot){
                left.push(arr[i]);
            }else{
                right.push(arr[i]);
            }
        }
        return quickSort(left).concat([pivot],quickSort(right)); //加入基准数
    }
    arr=[2,1,5,8,3,7,4,6,9];
    console.log(quickSort(arr)); //[1, 2, 3, 4, 5, 6, 7, 8, 9]

浏览器的渲染原理(浏览器是怎样工做的)

用户输入url,浏览器向服务器发送请求，服务器返回html文件，浏览器载入html代码，当浏览器解析到head中有使用link标签引入的css样式的时候，浏览器再次向服务器发出请求，请求css文件，而后服务器返回css文件，当浏览器解析到html中body部分，此时的css文件已经到手了，浏览器开始渲染页面，当浏览器解析到img标签的时候，再次向服务器发送请求，此时浏览器是不会先加载图片的，而是先加载后面的代码，当服务器返回图片时，浏览器从新渲染这部分代码，当浏览器发现script标签的时候，很快去运行它，当浏览器解析到</html>，此时浏览器叹了口气，终于完成任务了，我太难了。

git常见面试题

经常使用的几个git命令？

新增文件的命令：git add file或者git add .
提交文件的命令：git commit –m
查看工做区情况：git status
拉取合并远程分支的操做：git fetch/git merge或者git pull
查看提交记录命令：git reflog

提交时发生冲突，你能解释冲突是如何产生的吗？你是如何解决的？

公共类的公共方法，我和别人同时修改同一个文件，他提交后我再提交就会报冲突的错误。
如何解决的就是发生冲突，在IDE里面通常都是对比本地文件和远程分支的文件，而后把远程分支上文件的内容手工修改到本地文件，而后再提交冲突的文件使其保证与远程分支的文件一致，这样才会消除冲突，而后再提交本身修改的部分。特别要注意下，修改本地冲突文件使其与远程仓库的文件保持一致后，须要提交后才能消除冲突，不然没法继续提交。必要时可与同事交流，消除冲突。

经过git stash命令，把工做区的修改提交到栈区，目的是保存工做区的修改；
经过git pull命令，拉取远程分支上的代码并合并到本地分支，目的是消除冲突；
经过git stash pop命令，把保存在栈区的修改部分合并到最新的工做空间中

能不能说一下git fetch和git pull命令之间的区别？

简单来讲：git fetch branch是把名为branch的远程分支拉取到本地；而git pull branch是在fetch的基础上，把branch分支与当前分支进行merge；所以pull = fetch + merge。

若是本次提交误操做，如何撤销？

若是想撤销提交到索引区的文件，能够经过git reset HEAD file；
若是想撤销提交到本地仓库的文件，能够经过git reset –soft HEAD^n恢复当前分支的版本库至上一次提交的状态，索引区和工做空间不变动；
能够经过git reset –mixed HEAD^n恢复当前分支的版本库和索引区至上一次提交的状态，工做区不变动；
能够经过git reset –hard HEAD^n恢复当前分支的版本库、索引区和工做空间至上一次提交的状态。

你使用过git stash命令吗？你通常什么状况下会使用它？

命令git stash是把工做区修改的内容存储在栈区。
如下几种状况会使用到它：

解决冲突文件时，会先执行git stash，而后解决冲突；
遇到紧急开发任务但目前任务不能提交时，会先执行git stash，而后进行紧急任务的开发，而后经过git stash pop取出栈区的内容继续开发；
切换分支时，当前工做空间内容不能提交时，会先执行git stash再进行分支切换；

如何把本地仓库的内容推向一个空的远程仓库？

首先确保本地仓库与远程之间是连同的。若是提交失败，则须要进行下面的命令进行连通：

git remote add origin URL

若是是第一次推送，则进行下面命令：

git push -u origin master

以后的提交，只须要下面的命令：

git push origin master