面試3

時間 2019-11-24

原文原文鏈接

同源策略

協議+域名+端口徹底相同才叫同源如下三種行爲受到限制: （1）沒法讀取非同源網頁的 Cookie、LocalStorage 和 IndexedDB。php

（2）沒法接觸非同源網頁的 DOM。css

（3）沒法向非同源地址發送 AJAX 請求（能夠發送，但瀏覽器會拒絕接受響應）。html

解決： cookie 瀏覽器經過document.domain屬性來檢查是否同源。 A 網頁的網址是http://w1.example.com/a.html，B 網頁的網址是http://w2.example.com/b.html（一級域名同樣，二級不同）前端

// 兩個網頁都須要設置
document.domain = 'example.com';
複製代碼

這時候a設置一個cookie，b就能夠讀到這個cookiehtml5

AJAX: jsonp CORS（「跨域資源共享」）:Access-Control-Allow-Originreact

Content-Type: text/html; charset=utf-8webpack

安全

XSS

XSS（Cross-site scripting)即跨站點script 舉例web

惡意用戶 A 在網站提交留言爲<script>console.log(document.cookie)</script>，這段代碼被上傳到服務器。
B訪問網站的留言，這段腳本在 B 的瀏覽器直接執行，惡意用戶 H 的腳本就能夠任意操做 B 的 cookie。有了 cookie，惡意用戶 H 就能夠僞造 B 的登陸信息。

產生緣由：前端的代碼在顯示留言的時候，操做DOM的時候innerHTML方法，或者用了jQuery中的$p.html(content)方法。面試

解決辦法：ajax

前端儘可能使用innerText（jQuery就是用text()方法，不要本身）
將 < >'' ' 這些可疑的符號轉義，如<變成 < （HTML實體）

CSRF攻擊

（CSRF的全名爲Cross-site request forgery）僞造跨站請求過程：

假設給用戶賺錢的請求連接是：www.game.com/Transfer.ph…
而後若是客戶端已經驗證並登錄www.game.com網站，此時客戶端瀏覽器保存了遊戲網站的驗證cookie（已登陸，而且瀏覽器保存了須要登陸的cookie）
客戶端再tab另外一個頁面進行訪問惡意攻擊者的網站，並從惡意攻擊者的網站構造的連接（好比構造一個img標籤，url就是構造的虛假的連接，例如是http://www.game.com/Transfer.php?toUserId=100&vMoney=1000）來訪問遊戲網站（再開一個網頁，這個網頁裏有一個img標籤，url是假的）
瀏覽器將會攜帶該遊戲網站的cookie進行訪問，1000塊遊戲幣就轉給那個虛假的userid了（由於已經登陸了，瀏覽器裏保存了cookie，因此瀏覽器會帶着這個cookie訪問這個假的img的連接）

對於get請求能夠很輕鬆的攻擊，對於post，攻擊者可誘導用戶進入帶 Form 表單可用POST方式提交參數的頁面。

解決方法：

服務端在收到路由請求時，生成一個隨機數，在渲染請求頁面時把隨機數埋入頁面（通常埋入 form 表單內，）
服務端設置setCookie，把該隨機數做爲cookie或者session種入用戶瀏覽器
當用戶發送 GET 或者 POST 請求時帶上_csrf_token參數（對於 Form 表單直接提交便可，由於會自動把當前表單內全部的 input 提交給後臺，包括_csrf_token）
後臺在接受到請求後解析請求的cookie獲取_csrf_token的值，而後和用戶請求提交的_csrf_token作個比較，若是相等表示請求是合法的。

解決方法： 一Token字符串驗證。總結：

服務器請求的時候，生成一個隨機數
而後埋到要提交的form表單裏，方法是生成一個input標籤頁（）
服務端設置setCookie，把該隨機數做爲cookie保存到客戶端瀏覽器裏
在發送請求的時候把cookie裏的token隨機數和form表單裏的隨機數進行比較，若是一致，就經過驗證

二讓用戶本身填寫驗證碼

性能優化

HTTP緩存
CSS引用寫在<head></head>,script標籤寫在body閉合標籤前面，先加載內容與樣式。
圖：懶加載，雪碧圖。
壓縮代碼：css去掉回車，空格。
CDN：靜態文件放在CDN。
webpack，將幾個小文件組成大文件，減小請求次數。

地平線須要學習的：

webGL

three.js 封裝了webGL的API

數組方法，快排，冒泡，數組去重

數組方法

Array.isArray() Array.isArray(arr) // true

2.實例方法 valueOf()，toString() arr.valueOf() // [1, 2, 3]返回自己 arr.toString() // "1,2,3,4,5,6"

push()，pop() shift()//刪除第一個元素

join()//變成一個字符串

concat()//數組合並

reverse()//顛倒數組

slice(起始位置，終止位置)//[起始位置，終止位置)減下來一部分（一小片）數組，一小片，返回一個新數組，原數組不變

splice方法用於刪除原數組的一部分紅員，並能夠在刪除的位置添加新的數組成員，返回值是被刪除的元素。注意，該方法會改變原數組。(裁剪下來)

var a = ['a', 'b', 'c', 'd', 'e', 'f'];
a.splice(4, 2) // ["e", "f"]
a // ["a", "b", "c", "d"]
複製代碼

從下標4開始，日後刪2個

sort()//按字典序排序，能夠傳入函數做爲參數規定排序的方式。直接改變了原數組

遍歷： map()//映射，並返回一個新數組，裏面函數能夠調整數組的值

forEach()//forEach方法不返回新數組，只用來遍歷數據

filter()//過濾一個數組 [1, 2, 3, 4, 5].filter(function (elem) { return (elem > 3); }) // [4, 5]

indexOf()//indexOf方法返回給定元素在數組中第一次出現的位置. 若是沒有出現則返回-1

String的方法

屬性：length

方法： var s = new String('abc'); s.charAt(1) // "b" 這個方法徹底能夠用數組下標替代。 'abc'.charAt(1) // "b" 'abc'[1] // "b"

concat()

slice()減一小塊下來，返回新字符串，[起始位置，結束位置) substring()同樣，優先使用slice() substr()同樣，優先使用slice()

indexOf() 用於肯定一個字符串在另外一個字符串中第一次出現的位置，返回結果是匹配開始的位置。若是返回-1，就表示不匹配

trim()去除字符串兩端的空格，返回新字符串

toLowerCase() toUpperCase() 變換大小寫

split()將字符串分割爲數組 'a|b|c'.split('|') // ["a", "b", "c"]，與jion相對應

Math

Math.floor()，Math.ceil()地板值，天花板值，相對於數軸的。

Math.round()四捨五入

Math.random() [0,1)的隨機數

快排

let a = [1,1,1,2,2.2,12,14,23,443,5,5,435,45656768,4,6,7,5,8,33,67,86,2,86,67,845,4,24,5342,1,2]
function quickSort (arr){
  if(arr.length<=1) {return arr}
  // let midIndex = Math.floor(arr.length/2)
  // let midItem = arr.splice(0,1)[0]
  let midItem = arr[0]
  let left = []
  let right = [] 
  for(i = 0;i<arr.length;i++){
    if(i!==0){//跳過中間值
      if(arr[i]<midItem){
        left.push(arr[i])
      }else{
        right.push(arr[i])
      }
    }
  }
  return quickSort(left).concat([midItem],quickSort(right))
}
console.log(quickSort(a))
複製代碼

jsbin.com/ravujoyopi/…

數組去重

let a=[1,1,1,2,2,2,3,3,3,3,undefined,'xxx','xxx','3','3','undefined']

function f(array){
  let hash = {}
  let returnArr = []
  for(let i=0;i<array.length;i++){
    let arrItemStr = (typeof array[i]) + array[i] + ""//防止undefined和'undefined'轉換成字符串而後衝突

    if(hash[arrItemStr]!==1){//說明未進入hash
      hash[arrItemStr]=1
      returnArr.push(array[i])
    }
  }
// console.log(hash)
  return returnArr
}
console.log(f(a))


//2：
console.log(Array.from(new Set(a)))
複製代碼

ES6

瞭解let const 解構賦值箭頭函數 promise

canvas SVG

數據可視化

d3.js echarts，2d的柱狀圖，折線圖，餅圖，3d的有3d地球模型，3d柱狀圖，3d地圖

video標籤

接下來的學習目標就是react

自我介紹

我是一名軟件工程專業的大四學生，由於對前端感興趣，因此自學前端半年多，對技術頗有熱情，想找一份工做一遍工做一邊提高本身的技術能力。

Array的幾個用法必定要搞會，記下來

string.slice( array.join( indexOf()

網易面試

僞類，僞元素

僞類： :hover :focus :active :visited :link :first-child ，:last-child ，nth-child()用來選取不一樣狀態的元素僞元素： ::before ::after ,實際存在的元素，用content：''來作小三角形，小圓點

html5標籤

html5標籤header footer main artical section aside nav，有點：若是都用div或者span來着，那麼不清楚每一部分的含義，語義化，結構清晰，提升可讀性。有利於seo，好比標題是h1，爬蟲爬取數據會優先爬取標題。

DOCTYPE 規定使用哪一個版本的html 使用html5

元素

塊級元素：div p header footer main artical section aside nav 行內元素：span、a、b、i，strong 行內塊元素：img，input，button

this的題目

function f() {
		console.log(this.x);
	}
	f();
	var x = 2;
	var a = {x: 1};
	a.f = f;
	var b = a.f;
	a.f();
	b();
複製代碼

undefined、一、2 this實質：當前函數所在做用域

typeof

Array.isarray()

原生ajax：1234的狀態分別是什麼

class用法

二面以前項目看一遍

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。