進修工作中碰到的題目，和輕易遺忘的細碎學問，部份為摘抄，如若侵權，請示知。

HTML篇

CSS篇

box-sizing：

設置盒子模子為範例情勢或許IE情勢。屬性有三個：
1.content-box：默許值，border和padding不盤算到width。
2.padding-box：padding算入width。
3.border-box：border和padding都邑算入width。
4.別的範例情勢下，背景實際上是包括邊框的，可以運用background-clip來設置。
5.同理background-origin也可以設置背景圖片的位置。
6.IE盒子模子會轉變

四個邊框暗影

邊框暗影也可以設置透明度，如許看起來會很雅觀，而且還會處置懲罰沒透明度會湧現暗影和背景色一樣的狀況。

 box-shadow: -1px 0 2px rgb(000, 000, 000, 0.2),
      0 0 0 rgb(000, 000, 000, 0.2),
      1px 0 2px rgb(000, 000, 000, 0.2), 
      0 2px 4px rgb(000, 000, 000, 0.2);

瀏覽器襯着道理

(差別瀏覽器迥然差別)
1.平常以8K單元接收要求的內容，並剖析个中的HTML構建DOM Tree(display:none的元素不會襯着)。CSS構建CSS Rule Tree。
2.DOM，CSS兼并天生Render Tree。依據CSS2範例，tree中每一個節點都成為box，具有width，height，margin，padding等屬性。
3.瀏覽器依據Render Tree可以曉得網頁中的節點，各節點的關聯或款式或位置。末了經由歷程顯卡繪製出來。

迴流(reflow)和重繪(repaint)

迴流：Render Tree中一些元素尺寸規劃等發作轉變，頁面須要從新構建，頁面須要實行reflow操縱。
重繪：Render Tree中一些元素表面一類的屬性發作轉變，不會影響規劃，這會觸發repaint。

削減reflow

Dom Tree的每一個節點都有reflow要領，一個節點的reflow可以觸發其他節點的reflow，reflow不可防止，難以預測。
1.將屢次的款式操縱兼并到一次操縱，可以新建一個類選擇器，將這些款式增添進來。
2.display:none不在Tree中，修正屬性不會觸發迴流，可以先隱蔽再操縱，再顯現。
3.DocumentFragment緩存操縱，這個還沒聽過。
4.position設置為absolute或fixed。如許轉變CSS會大大削減reflow。
5.不要運用table規劃。
6.防止不必要的龐雜CSS選擇器，尤其是子女選擇器！

css3動畫

/*css3動畫可以在css中編寫*/
/*1.設置*/
@keyframes animateName {
 /*animate here,0%可以設置動畫的初始狀況*/
 0%{
    transform: translateX(0px);
    transform: rotate(0deg);
    opacity: 1;
 }
 50%{
    /*...css code here*/
 }
 100%{
    /*...css code here*/
 }
}
/*2.運用*/
.someEle{
/*縮寫： 動畫稱號 實行時間 延遲時間*/
 animation: animateName 0.5s 1.5s;
/*全稱
animation-name: ;
animation-duration: ;
animation-delay: ;
用來堅持動畫處於末了一幀的狀況
animation-fill-mode: forwards;
*/
}

JavaScript篇

推斷變量是不是是數組：

(注重跨frame實例化對象不同享原型)

var a=[];
a.constructor===Array;
a instanceof Array ===true;

instanceof

用法：(object instanceof constructor)
用來磨練constructor.prototype是不是存在於參數object的原型鏈上，用於檢測對象範例

javascript繼承/原型/工場情勢

1.工場情勢

• 籠統了建立對象的歷程,處置懲罰了建立多個類似對象的題目

• 關於對象辨認題目並沒有處置懲罰

     function createPerson(name,age) {
       var obj = {};
       obj.name=name;
       obj.age=age;
       obj.info=function() {
         // ...code here
       }
       return obj;
     }

2.原型

• 我們建立的每一個函數都有prototype(原型)屬性,它是一個指針,指向一個對象(原型對象),它可以使一切對象實例同享屬性和要領
• 原型對象初始會默許取得constructor屬性,它是一個指針,指向原型屬性地點的函數

3.幾種繼承要領

• 原型鏈繼承：此時屬性有點像java中的靜態屬性,沒有個別之分

      function Super(name) {
           this.name=name;
         }
      Sub.prototype = new Super();
      Sub.prototype.constructor = Sub;

• 借用組織函數：可以將屬性變成實例屬性,然則函數復用左支右絀

     function Super(name) {
       this.name=name;
     }
     function Sub(name) {
       Super.call(this,name);
     }

• 組合繼承：運用原型完成要領復用,借用組織函數完成每一個實例有本身的屬性

• 原型式繼承：對傳入的對象舉行了淺複製,包括援用範例值得屬性會同享響應的值

     function object(o) {
       function F() {}
       F.prototype=o;
       return new F();
     }
     // ES5新增Object.create()要領範例了原型式繼承
     

• 寄生式繼承：組合繼承會兩次超範例組織函數,一次是建立子範例原型(new),一次是在子範例組織函數內部(call),終究實例上的屬性會屏障原型中的同名屬性,這是可以用寄生式繼承處置懲罰：經由歷程借用組織函數繼承屬性,經由歷程原型鏈的混成情勢來繼承要領

     function inheritPrototype(subType,superType){
       var prototype = Object(subType.prototype); //建立對象
       prototype.constructor = subType;           //加強對象
       subType.prototype = prototype;             //指定對象
     }   
     function SuperType(name) {
           this.name=name;
         }
         function SubType(name,age) {
           Super.call(this,name);
           this.age = age
         }
         inheritPrototype(SubType,SuperType);
     // 這個例子的高效率體現在只調用了一次SuperType組織函數,同時原型鏈還能堅持穩定,可以一般的運用instanceof呵呵isPrototypeOf()

this作用域。

• this對象是在運行時基於函數的實行環境綁定的,全局函數中為window,被作為某個對象的要領調用時,this即是誰人對象
• 每一個函數實行時都邑自動取得兩個特別變量：argumens和this,內部函數搜刮這兩個變量時只會搜刮到其運動對象位置,所以不可以直接接見外部函數中的這兩個變量
• 把外部作用域中的this對象保留在一個閉包可以接見的變量里,就可以讓閉包接見該對象了

    var obj = {
    name:"inner",
    getName:function() {
        // 這裏的this指向obj
        // 保留this
        var that = this;
      return function() {
          // 這裏的this不能指向外部函數中的this
          // console.log(this.name)
          console.log(that.name);
      }
    }
    }

• 箭頭函數的this指向當前上下文，而且運用bind/apply無效，在Vue中也可以會致使一些毛病，React中偶然則可以很輕易的綁定組件中的this

new的意義

1.建立一個新對象
2.將這個新對象的__proto__指向組織函數的prototype(行將新建立對象的隱式原型指向組織函數的顯現原型)。
3.將組織函數的this指向這個新建立的對象(行將this指向這個新對象)。
4.無返回值或非對象返回則返回這個對象，不然返回這個返回的新對象。

typeof

防止XSS

(可以理解為一種js注入，既然是注入就須要對輸入舉行範例)
XSS體式格局：a.注入湧現在URL中，然後又隨服務器返回到瀏覽器b.這個注入會存儲在服務端。
1.防止運用eval，new Function要領可接收字符串情勢的js代碼。
2.cookie的httpOnly可以阻撓js讀取cookie。
3.注重innerHTML,document.write要領。
4.對用戶輸入的數據舉行HTML Entity編碼。

作廢冒泡

event.cancleBubble=true;這類相當於全局作廢事宜冒泡。

ajax完成的歷程(原生的js)

// 建立對象
var http = new XMLHttpRequest();
// 設置要求概況
http.open(method, url, true);
// 發送
http.send();
// 經由歷程事宜推斷要求處置懲罰結果,處置懲罰返回的數據
http.onreadystatechange = function () {
    if (http.readyState == 4 && http.status == 200) {
            // http.responseText為返回的字符串
            // code here
        
        }
    }

進口函數

window.onload=function(){…}和$(document).ready(function(){…})
1.js中須要守候圖片等一切元素加載終了才會實行，jq中則是守候DOM構造繪製完成即可實行。
2.js這要領只能實行一個，jq編寫多個進口函數，多個都邑實行。
3.假如須要守候一切元素加載終了則運用$(window).load(function(){…}),這個相當於js中的window.onload。
4.一些題目：jq3版本js進口函數總是會先實行。jq2版本是一般遞次，3版本好像在網頁資本很少的時刻js的進口函數就會先實行。
5.jq可簡寫為$(function(){…})。

promise

首先會實行Promise里的要領，要領里會有一個resolve和result，相當於兩個指針，實行到一個就會觸發響應的then或許是catch，then里是一個函數，接收的參數經由歷程resolve傳入。

onmouseover/enter

onmouseover:移動到子元素也會繼承觸發over。
onmouseenter:子元素不會影響。

前端機能的優化

1.防止全局查找，全局查找須要觸及作用域鏈上的查找。
2.防止運用with一句，with會建立本身的作用域，會增添實行代碼的作用域鏈的長度，with語句中的代碼的實行時間一定會比表面的代碼的實行時間長。

function test(){
  with(document.body){
  alert(tagName);
  innerHtml="Hello";
  }
}
function test(){
  var body=document.body;
  alert(body.tagName);
  body.innerHtml="Hello";
  }
}

3.幾個算法龐雜度的例子
O(1):var value=10;arr[1];
O(log n):二分查找，總的實行時間和值得數目有關，但並不一定要取得的每一個值。
O(n):遍歷一個數組中的元素。
O(n^2):每一個值最少須要獵取n次，比方插入排序。
思緒：可以將屢次運用的一個龐雜度高點的變量設為局部變量。
4.優化輪迴：
減值迭代：
優化輪迴體
簡化停止前提：由於每次輪迴都邑盤算停止前提，然後和他比較。
運用后測試輪迴（do-while）：

5.睜開輪迴：輪迴次數不多可以睜開，削減了停止前提的推斷。
思緒：Duff裝配，將一切輪迴按每八個一同實行。

var iterations = Math.floor(values.length/8);
var leftover = values.length&8;//處置懲罰過剩的幾個元素
var i=0;
/*用來處置懲罰多出來的幾個元素*/
if(leftover>0){
  do{
  process(values[i++]);
  }while(--leftover>0);
}
/*餘下數目為8的倍數，不必憂鬱下標越界*/
do{
  process(values[i++]);
  //...以下省略其他7個輪迴體
}while(--iterations>0);
/*簡樸的數組輪迴測試發明實在要慢許多*/

6.防止兩重詮釋:Function(),eval();
7.原生要領快點，switch語句快點，位運算符快點，var語句可以兼并，迭代可以arr[i++]，只用一條語句建立數組或對象。
8.削減js和DOM的交互，可以推斷event.target的nodeName來綁定事宜，應用事宜冒泡的機制削減輪迴綁定事宜。
9.接見鳩合元素時運用局部變量，如許不必重複遍歷作用域鏈？所以輕微快點，過量運用hover也會影響機能

onfoucus沒有冒泡

可以運用onfoucusin。

淺拷貝深拷貝

參考變量的援用，深拷貝可以先建立一個空容器，然後向个中賦值完成拷貝。

node.js

npm -S和npm -D

1.

• -S --save， 
• -D 是 --save-dev

2.-save和save-dev可以免卻你手動修正package.json文件的步驟。

• npm install module-name -save 自動把模塊和版本號增添到dependencies部份 ，平常是項目開闢到上線都邑用到的包
• npm install module-name -save-dve 自動把模塊和版本號增添到devDependencies部份 ，平常是東西裝置的運用

react跨域cookie

• 服務器端:

app.all('*', function (req, res, next) {
  res.header("Access-Control-Allow-Origin", req.headers.origin); //須要顯現設置泉源
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
  res.header("Access-Control-Allow-Credentials", true); //帶cookies7     res.header("Content-Type", "application/json;charset=utf-8");
  next();
});

• 客戶端運用axios:

 var params = new URLSearchParams();
      params.append('username', "");
      params.append('password', "");
      params.append('nickname', "");
      axios({
          method: "post",
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8',
          },
          url: "http://localhost:3000/users/register",
          data: params
        }).then().catch()

如許設置，就可以在要求時加上cookie了