我的問題

時間 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裏面通常都是對比本地文件和遠程分支的文件，而後把遠程分支上文件的內容手工修改到本地文件，而後再提交衝突的文件使其保證與遠程分支的文件一致，這樣纔會消除衝突，而後再提交本身修改的部分。特別要注意下，修改本地衝突文件使其與遠程倉庫的文件保持一致後，須要提交後才能消除衝突，不然沒法繼續提交。必要時可與同事交流，消除衝突。