Font-End_面試題

時間  2019-12-05
標籤 font end 面試 欄目 快樂工作 简体版
原文   原文鏈接

HTML

HTML5新增了哪些內容或API，使用過哪些javascript

語義，連通性，離線存儲，多媒體，2D/3D 繪圖和效果，性能集成，設備訪問 Device Access，樣式設計php

HTML5修改的目標：css

  1. 將互聯網語義化
  2. 提供更好地支持各類媒體的嵌入

新增應用程序接口APIhtml

  1. HTML Geolocation - 地理位置
  2. HTML Drag and Drop - 拖放
  3. HTML Local Storage - (本地存儲)
  4. HTML Application Cache - 應用程序緩存
  5. HTML Web Workers - Web Workers
  6. HTML Canvas/WebGL - Canvas WebGL
  7. HTML Audio/Video - Audio Video

元素與屬性前端

  1. 文件類型聲明:<!DOCTYPE HTML>。
  2. 新的解析順序：再也不基於SGML解析。
  3. 新增經常使用元素: section（寫文章的時候會常常用到，w3school中說：文檔中的節（section、區段）。好比章節、頁眉、頁腳或文檔中的其餘部分。）, video/audio, nav,aside, canvas, footer, header, mark（標記高亮）新增標籤MDN
  4. input元素的新type： date, email, url
  5. 新的屬性： charset（用於meta）, async（用於script）
  6. 新的全域屬性：contenteditable(元素是否可被用戶編輯), contextmenu(上下文菜單是指在用戶交互（例如右鍵點擊）時出現的菜單), draggable(用於標識元素是否容許使用 拖放操做API 拖動), dropzone, hidden, spellcheck

input和textarea的區別vue

inputhtml5

  1. 須要type值
  2. value屬性指定初始值，maxlength屬性指定輸入最長的長度，size屬性指定顯示字符長度
  3. 寬高只能經過CSS樣式指定

textareajava

  1. 使用標籤對,且內容在標籤對中:<textarea>內容</textarea>
  2. 使用row、col指定大小

區別：input單行文本框， textarea多行文本框react

移動設備忽略將頁面中的數字識別爲電話號碼的方法webpack

設置mate

<meta content="telephone=no" name="format-detection">

doctype的做用是什麼

激活不一樣瀏覽器渲染模式

label的標籤的做用是

屬性: for和accesskey

for的做用：爲哪一個控件服務.
accesskey的做用：訪問這個控件的熱鍵.

做用：用戶界面中項目的標題

png八、24的區別是

根本區別：存儲方式不一樣.
png8有1位的布爾透明通道（要麼徹底透明，要麼徹底不透明）
png24有8位（256階）的布爾透明通道（半透明）

特色：
png8和gif又一些類似之處，模式都是索引顏色，只支持像素級的純透明，不支持alpha透明。
"IE6 不支持PNG透明"，是指不支持PNG-24的透明，可是IE6支持PNG8的透明，就像支持gif的透明同樣。

請說下移動端常見的適配不一樣屏幕大小的方法

  1. Rem佈局
  2. 流式佈局
  3. Felx佈局

移動端佈局
移動端H5頁面適配問題研究
移動web適配利器-rem

html標籤語義化的好處

  1. 利於SEO優化。
  2. 在樣式丟失的時候，還能夠比較好的呈現結構。
  3. 更好的支持各類終端，例如無障礙閱讀和有聲小說等。
  4. 利於團隊開發和維護，遵循W3C規範，減小代碼差別，提升效率。

頁面DOM節點太多，會出現什麼問題？如何優化？

問題：

頁面卡頓，幀率降低

優化：

  • 採用Virtual DOM， virtual-dom
  • 屢次操做DOM，改成批量一次操做DOM
  • 及時移走頁面不用的DOM
  • 避免沒必要要的DIV嵌套

頁面的渲染過程

  • 解析整個HTML，獲得DOM樹和樣式樹
  • DOM樹和樣式樹，通過渲染，獲得一棵渲染樹
  • 根據渲染樹，開始佈局，計算各個節點寬度，位置，高度等。
  • 而後開始繪製整個頁面並顯示
  • 在渲染過程當中若是使用GPU，還能夠進行GPU渲染

高性能DOM

一個網站，在頁面上承載最多的內容就是DOM。並且不管是經過加載JS，加載Image，也都是經過HTML標籤來實現的。

DOM性能優化：

  • 站點的網絡消耗
  • DOM初始化過程（瀏覽器）
  • DOM結構以及動態操做（人爲）
  • JS執行過程（瀏覽器 - V8）
  • JS邏輯組織（人爲）

站點的網絡消耗基本上無法控制，複雜的網絡，在一個下行的終端實際上選擇不了會接觸什麼樣的網絡環境。

DOM的初始化過程沒法控制，瀏覽器內部有DOM解析引擎，它的解析快慢改變不了。

DOM的操做以及動態操做，一個頁面的DOM結構是在製做頁面的時候定義下來的，能夠採用各類方式，好比：多層嵌套，底層嵌套，絕對定位，相對定位。
動態操做就是DOM在運行到必定階段以後發生。

JS執行過程跟瀏覽器內核相關，依靠JS引擎執行。它的執行快慢沒法改變，可以優化的是JS邏輯組織部分。

迴流Reflow：對於DOM結構的各個元素都有本身的盒子模型，這些都須要瀏覽器根據各個樣式（瀏覽器的默認，開發人員定義的）來計算，並根據計算結果將元素放到它該出現的位置
重繪Repaint：當各個盒子的位置，大小以及其它屬性，例如：顏色，字體大小等都肯定下來後，瀏覽器因而便把這些元素都按照各自的特性繪製一遍，因而頁面的內容出現了。

什麼狀況觸發迴流或者重繪？
DOM元素的添加，修改（內容），刪除（迴流+重繪），僅修改DOM的元素的字體顏色（只有重繪，所以不須要調整佈局），迴流必定會觸發重繪，可是重繪不必定觸發迴流

避免觸發迴流和重繪，提升DOM的性能：
display的值會影響佈局，從而影響整個頁面元素的位置發生變化，因此會更改DOM-Tree,須要從新render-Tree的結構，先將元素從document中刪除，完成修改後再把元素放回原來的位置，若是須要建立多個DOM結構，可使用documentFragment建立完成後一次性添加到document

在前端開發中，頁面渲染指什麼？

資料

前端工程師手冊
維基百科HTML5
MDN-HTML5

CSS

左右佈局：左邊定寬、右邊自適應，很多於3種方法

absolute + padding

<div class="auto-w">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

<style>
    .auto-w {
        position: relative;
        width: 500px;
        height: 200px;
        padding-left: 100px;
    }
    .auto-w .left {
        position: absolute;
        left: 0;
        width: 100px;
        height: 100%;
        background: pink;
    }
    .auto-w .right {
        width: 100%;
        height: 100%;
        background: cyan;
    }
</style>

flex

<div class="auto-w">
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<style>
    .auto-w {
        display: flex;
        width: 500px;
        height: 200px;
    }
    .auto-w .left {
        width: 100px;
        height: 100%;
        background: pink;
    }
    .auto-w .right {
        height: 100%;
        background: cyan;
        flex-grow: 1;
    }
</style>

float

<div class="auto-w">
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<style>
    .auto-w {
        width: 400px;
        height: 100px;
    }
    .auto-w .left {
        float: left;
        width: 100px;
        height: 100%;
        background: pink;
    }
    .auto-w .right {
        height: 100%;
        background: cyan;
    }
</style>

CSS3用過哪些新特性

  1. Selector
  2. @font-face 字體
  3. border-radius 圓角
  4. box-shadow text-shadow 文本和框的陰影
  5. Word-wrap 樣式

  6. 多列布局（multi-column layout）

    <style>
.multi_column_style { 
-webkit-column-count: 3; 
-webkit-column-rule: 1px solid #bbb; 
-webkit-column-gap: 2em; 
} 
</style>
  
<div class="multi_column_style"> 

</div>

// Column-count：表示佈局幾列。
// Column-rule：表示列與列之間的間隔條的樣式
// Column-gap：表示列於列之間的間隔

  7. transform 轉換

    2D 轉換
rotate 旋轉，圖片轉個90或180度 
translate 位置移動
scale, skew, matrix 等
3D 轉換
rotate(XYZ) 根據x,y,z軸旋轉
translate(XYZ), scale(XYZ)  
perspective 透視, 景深，這個不少3D效果都要設置一下，否則3D仍是會」2D」的效果
  8. transition: 過渡，好多簡單的動畫，移個位置，變個長短.
  9. animation: 動畫，3D能夠調用硬件渲染。
  10. @media 媒體查詢，適用於一些響應式佈局中
  11. flex: flex佈局，cssreference
  12. word-wrap, background-size, background-origin, border-image, box-sizing, calc, linear-gradient, radial-gradient
  13. will-change: 改善渲染性能,使用CSS3 will-change提升頁面滾動、動畫等渲染性能

BFC、IFC

盒模型佈局的CSS渲染模式

BFC：Black Formatting Context,塊級格式上下文。 BFC表現原則：內部子元素再怎麼折騰，都不會影響外部的元素，自成一方天地.
深刻理解BFC

BFC造成（一條或多條均可以造成BFC）:

  1. float 的值不爲 none
  2. position 的值不爲 static 或 relative
  3. display屬性爲inline-boxs、table-cells、table-captions的不是塊盒的塊容器(除非這個值已經被傳播到視口),
  4. overflow不爲visible的塊盒纔會爲它的內容建立新的BFC。
  5. body元素

IFC：Inline Formatting Context, 直譯"內聯格式化上下文"，理解成行內盒子模型. 高度由其包含行內元素中最高的實際高度計算而來（不受到豎直方向的padding/margin影響)

對柵格的理解

基礎就是float 和 width:百分比

以規則的網格陣列來規範網頁中的版面佈局以及信息分佈。

盒子模型 加了box-sizing 以後怎樣

  1. IE5.x 以及Quirks(怪異)模式的IE6，IE7中，border和padding都包含在width和height中。
  2. 標準瀏覽器中width和height僅僅包含content, 不包含border和padding。
  3. CSS3定義了box-sizing屬性：box-sizing: content-box | border-box | inherit;
    content-box: 該屬性維持CSS2.1盒模型的組成方式。border-box：該屬性將從新定義CSS2.1盒模型組成模式(與IE6解析相同)

樣式權重的排序

!important > id > class > tag[name=val] > tag

display有哪些屬性值，有什麼做用？

  1. none：元素不會顯示，並且改變元素現實的空間也不會保留
  2. inline：將元素顯示爲內聯元素，元素先後沒有換行符
  3. block:將元素顯示爲塊級元素，元素先後會帶有換行符
  4. inline-block：行內塊元素
  5. list-item：此元素會做爲列表顯示
  6. table: 會做爲會計表格來顯示(相似table),表格先後帶有換行符.
  7. inherit: 應該從父級繼承display屬性的值
  8. box: 彈性盒子模型(CSS3新增)
  9. flex： flex佈局(CSS3新增)
  10. grid: 柵格盒模型值(CSS3新增)

MDN-display

1像素邊框問題

緣由：因爲移動端通常都會設置視口(屏幕寬度爲設備寬度),width=device-width,initial-scale=1，而有些屏幕是2倍屏，致使在移動端上設置1px就是看上去的2px

解決方法：

  1. 經過transform將寬度縮小一半，transform:scaleY(0.5)
  2. 經過@media媒體查詢，查詢當前設置的屏幕倍率，統一設置transform 移動端(手機)1像素邊框真正實現

  3. 模仿淘寶的設置，將屏幕寬度爲設計師的設計尺寸(通常爲750)。

    <meta name="viewport" content="width=750, user-scalable=no">

  4. 動態設置content

    (function(e){if(!e["_med"])e["_med"]={};var t=e["_med"];t.cookie=function(e,t,a){if(t!==undefined){a=a||{};if(typeof a.expires==="number"){var o=a.expires,l=a.expires=new Date;l.setTime(+l+o*864e5)}return document.cookie=[e,"=",String(t),a.expires?"; expires="+a.expires.toUTCString():"",a.path?"; path="+a.path:"",a.domain?"; domain="+a.domain:"",a.secure?"; secure":""].join("")}var r=e?undefined:{};var i=document.cookie?document.cookie.split("; "):[];for(var n=0,s=i.length;n<s;n++){var b=i[n].split("=");var d=b.shift();var p=b.join("=");if(e&&e===d){r=p;break}if(!e&&p!==undefined){r[d]=p}}return r};var a=document;var o=e.devicePixelRatio||1,l=a.documentElement.clientWidth,r=a.documentElement.clientHeight,i,n,s,b=/initial-scale=([\d\.]+?),/i,d,p;if(a.querySelector){p=a.querySelector('meta[name="viewport"]');if(p){d=b.exec(p.content+",");if(d){s=parseFloat(d[1],10)}}}if(s){l=l*s;r=r*s}if(screen){if(Math.abs(screen.width-l*o)<.2*screen.width){l=screen.width/o;r=screen.height/o;i=screen.width;n=screen.height}else{l=screen.width;r=screen.height;i=screen.width*o;n=screen.height*o}}else{i=l*o;n=r*o}var m="createTouch"in a&&"ontouchstart"in e?1:0;var c=["dw:"+l,"dh:"+r,"pw:"+i,"ph:"+n,"ist:"+m].join("&");t.cookie("_med",c,{expires:3650})})(window);

（水平）居中有哪些實現方式

  1. margin

    <div style='width: 100px; margin: 0 auto;'>margin<div>

  2. text-align

    <div style='text-align: center'>text-align</div>

  3. position+transform

    <div>
  <div style='position: relative; left: 50%; transform: translateX(-50%); display: inline-block;'>transform</div>
</div>

  4. flex

    <div style='display: flex; justify-content: center;'>
  <div>flex</div>
</div>

  5. table+margin

    <div>
  <div style='display: table; margin: 0 auto;'>table + margin</div>
</div>    
<!--display: table 在表現上相似 block 元素，可是寬度爲內容寬。-->

移動端的常見問題

  1. 點透事件 zepto的tap事件的點透問題的幾種解決方案
  2. 長時間按住頁面出現閃退問題
  3. 旋轉屏幕時，字體調整問題
  4. 上下拉動滾動條時卡頓，慢的問題

長時間按住頁面出現閃退問題

element {
  -webkit-touch-callout: none;
}

上下拉動滾動條時卡頓，慢的問題

body {
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

旋轉時字體大小調整

/* 旋轉屏幕時，字體大小調整的問題 */
html, body, p, div {
    -webkit-text-size-adjust:100%;
}

忽略頁面中的電話號碼

<mate name="format-detection" content="telehone=no" />

資料

深刻了解 CSS3 新特性
HTML5常見問題

JavaScript

跨域解決方式

JSONP,domain, window.name,ifrome，反向代理(nginx)

什麼是閉包？閉包有什麼做用？

閉包：函數裏面套函數，外層函數沒法訪問裏面函數中的變量，裏面函數能夠訪問外層函數中的私有變量。
做用：防止全局變量

如何實現瀏覽器內多個標籤之間的通訊

localStorage,cookie

HTML5的存儲方式有哪些？有何區別？

存儲方式：localStorage,sessionStorage
區別：存儲時間不同，localStorage本地永久存儲，sessionStroage頁面關閉，ctrl+f5存儲的值清空(f5刷新值存在).

內存溢出

  1. 請求數據過大
  2. 死循環
  3. 引用對象，使用完不釋放
  4. 全局變量過多

表現：

  1. 意外的全局變量
  2. 被遺忘的計時器或回調函數
  3. 脫離 DOM 的引用
  4. 閉包

4類 JavaScript 內存泄漏及如何避免

圖片懶加載

原理：訪問一個頁面的時候，把img或者background相關屬性的加載默認圖（或者其它節約資源的圖片），當圖片在可可視區域內時，才設置圖片的真正路徑.

優勢：減輕服務器的壓力，用戶體驗好（加載好的頁面更快呈如今用戶面前）

function elementInViewport(el) {
    var rect = el.getBoundingClientRect()
    
    // For invisible element.
    if (rect.top + rect.bottom + rect.left + rect.right + rect.height + rect.width === 0) {
      return false;
    }
    
    return (
       rect.top   >= 0
    // Pre load.
    && rect.top   <= ((window.innerHeight || document.documentElement.clientHeight) + 100)
    && rect.left  >= 0
    // Hide carousel except the first image. Do not add equal sign.
    && rect.left  < (window.innerWidth || document.documentElement.clientWidth)
    )
}

實現頁面加載進度條

實現插件：PACE

  • AJAX （監控全部AJAX請求）
  • Elements （檢查頁面上的特定元素存在）
  • Document （document 的 readyState 事件）
  • Event Lag （檢查正在執行JavaScript的事件循環）

事件委託

利用事件冒泡和e.target來肯定事件和元素。在jQuery中有$.delegate方法去代理事件。

事件委託原理：

  1. 須要綁定事件的元素不少，且處理邏輯相似。
  2. 元素都是動態建立，或頻繁增長，刪除，致使元素綁定事件過於複雜。
// https://github.com/zenorocha/delegate/blob/master/src/delegate.js

const delegate = (element, selector, type, callback) => {
  element.addEventListener(type, (e) => {
    let target = e.path.find(ele => ele.matches(selector))
    if (target) {
      callback.call(element, e);
    }
  });
};

實現 extend 函數

淺拷貝使用ES6的Object.assign()
深拷貝：zepto extend

直接克隆一個Nested Object的簡便方法：

var origin = {a: 'a'}
var copy = JSON.parse(JSON.stringify(origin));

爲何會有跨域的問題以及解決方式

前端解決跨域問題的8種方案, HTTP訪問控制（CORS）,瀏覽器的同源策略

產生緣由：

  • 處於安全考慮，瀏覽器會限制從腳本內發起的跨域HTTP請求。 例如，XMLHttpRequset和Fetch都須要遵循同源策略
  • 同源策略限制從一個源加載的文檔或腳本如何與來自另外一個源的資源進行交互。 這是一個用於隔離潛在惡意文件的關鍵的安全機制。

解決方式：

  1. JSONP(JSON with Padding): 利用加載 JS 文件不須要遵循同源策略的原理。
  2. CORS(Cross-Origin Resource Sharing): 在服務器端返回容許跨域訪問的頭。
  3. WebSockt：利用 WebSocket 不須要遵循同源策略的原理。

JSONP原理、postMessage原理

can-anyone-explain-what-jsonp-is-in-layman-terms

JSONP 原理：加載一個 script，並執行一段回調 JS ，由於加載 JS 不須要遵循同源策略。

  1. 沒法發送特定的頭部
  2. 只能是GET請求
  3. 沒法發送 body

postMessage 文檔

動畫：setTimeout什麼時候執行，requestAnimationFrame的優勢

setTimeout 什麼時候執行:

tasks-microtasks-queues-and-schedules

requestAnimationFrame的優勢

【MDN】requestAnimationFrame

window.requestAnimationFrame() 方法告知瀏覽器執行動畫，並請求瀏覽器調用指定的函數在下一次重繪以前更新動畫。該方法將在重繪以前調用的回調做爲參數。

優勢：

  1. 在瀏覽器重繪前調用，保證瀏覽器渲染效率和性能
  2. 能夠精準地控制動畫的每一幀

主要在遊戲，動畫方面使用。用這個方法能夠保持較高幀頻率和效率。 好比一個60幀率的動畫，requestAnimationFrame通常會以16ms的間隔調用一次

手寫parseInt的實現：要求簡單一些，把字符串型的數字轉化爲真正的數字便可，但不能使用JS原生的字符串轉數字的API，好比Number()

const parseInt = str => str - 0;
const parseInt = str => str / 1;
const parseInt = str => str * 1;
const parseInt = str => +str;

複雜寫法：

const parseInt = str => {
  let n = 0;
  let i = 1;
  str.split('').reverse().map(s => {
    n += i * (s.charCodeAt(0) - 48);
    i *= 10;
  });
  return n;
}

編寫分頁器組件的時候，點擊「下一頁」怎樣能確保還有數據能夠加載（請求數據不會爲空）？

服務器須要返回總數，當前偏移量，根據總數和偏移量判斷是不是最後一頁。

ES6新增了哪些特性

ECMAScript 6 入門

require.js的實現原理（若是使用過webpack，進一步會問，二者打包的異同及優缺點）

requireJS實現原理研究

相同點：都以模塊化方式組織代碼
不一樣點：

  1. requirejs 只能加載JS文件
  2. webpack 能夠打包JS，CSS，甚至是圖片

promise的實現原理，進一步會問async、await是否使用過

使用框架 ( vue / react 等)帶來好處( 相對jQuery )

  1. MVVC架構，數據驅動視圖，數據綁定，減小DOM操做。
  2. 組件化組織頁面，效率更高，維護更簡便。
  3. Virtual Dom 帶來性能上的提高
  4. 路由控制，單頁應用更爲簡便

vue雙向數據綁定的實現

實現雙向數據綁定的關鍵是Observer. 即用戶改變了數據，框架如何知曉，並及時更新視圖。

vue2.17源碼學習

Observer實現包括：
參考：observer
Object.defineProperty

var obj = {}
Object.defineProperty(obj, 'key', {
  enumerable: true,
  set(x) {
    console.log(`set key: ${x}`);
    obj.__ob__  = obj.__ob__ || {};
    obj.__ob__.key = x;
  },
  get() {
    return obj.__ob__.key;
  }
})
obj.key = 'value';
/**
 * 輸出：
 * set key: value
 */

Proxy

var ele = {
  data: null
};
var handler = {
  get: function(target, key) {
    if (typeof target[key] === 'object' && target[key] !== null) {
      return new Proxy(target[key], handler)
    } else {
      return target[key];
    }
  },
  set: function(target, key, value) {
    console.log('set ' + key)
    target[key] = value;
    return value;
 }
}
ele = new Proxy(ele, handler);
ele.data = {a: 'a', b: {bb: 'bb'}}
ele.data.a = 'aa';
ele.data.b.bb = 'bb1';
ele.data.c = 'cc';
/*
 * 輸出：
 * set data
 * set a
 * set bb
 * set c
 */

其餘的數據操做，如：數組的push等，只須要在原生上加Hook就好了

var arr = [];
var __push = Array.prototype.push;

Array.prototype.push = function (...items) {
  console.log(`push: ${items}`);
  return __push.apply(this, items);
}

arr.push('value')
/**
 * 輸出：
 * push: value
 */

從視圖反向把數據流過來，稍微簡單些，只須要記錄對應的key值，而後在輸入框觸發change, keypress事件的時候，更新對應key的數據便可。

單頁應用，如何實現其路由功能

Hash

// https://github.com/zhoukekestar/modules/blob/master/src/views/views.js
window.addEventListener('hashchange', () => {
  // 隱藏其餘頁面
  Array.from(document.querySelectorAll('.page')).map(page => {
    page.style.display = 'none';
  });
  // 根據hash值顯示對應的頁面
  document.querySelector(location.hash).style.display = 'block';
});

使用HASH實現的簡單路由 測試：在線測試

History

// https://github.com/zhoukekestar/modules/blob/master/src/loadpage/loadpage.js
// push 頁面
history.pushState('', '', url);
// pop 頁面
window.onpopstate = (e) => {
};

使用History實現的簡單路由,在線測試

項目中使用過哪些優化方法

  • 頁面靜態化，（Pug在靜態編譯後部署）
  • CDN加速, 多地緩存

  • 前端渲染 (Data + View) / 後端渲染( SSR, SEO 等), 視具體狀況選擇，如：

    前端渲染，適合大流量的場景
後端渲染，適合SEO優化，用戶體驗提高等場景

  • 縮減域名，以減小DNS解析時間，（可採用<link rel="dns-prefetch" href="//xxx.com">進行優化）

    若是遇到域名解析的問題，可嘗試HTTPDNS方案
  • Combo服務器合併CSS，JS請求, 減小第一屏網絡請求。（若是採用HTTP2.0方案，資源合併可省略）
  • 異步加載非核心業務和邏輯資源

  • 資源和請求緩存，可參考緩存的答案

    Cache-Control/Expires 前端緩存
Last-Modified/Etag 服務器端緩存，304
  • 若是是和Native混合開發的，還可使用Native緩存
  • DNS就近解析應用服務器，須要和CDN配合使用

資料

網絡

靜態資源或者接口等如何作緩存優化

  • redis/memcache作數據緩存
  • SQL 查詢作緩存
  • 指定 Cache-Control/Expires 緩存時間
  • Last-Modified/Etag 緩存 ( 304 ) 方案
  • 網關服務器作緩存，須要更新時，再回源到應用服務器
  • CDN多機房，多網關緩存

輸入一個URL，Enter以後發生了什麼

具體步驟:

  1. 把URL地址經過DNS解析爲具體的服務器主機
  2. 瀏覽器封裝HTTP請求 (window.navigator.userAgent)
  3. 瀏覽器建立與服務器的TCP鏈接
  4. 瀏覽器發出HTTP請求
  5. 服務器收到請求後交給相應的進程處理
  6. 服務器把處理後的結果發送給瀏覽器
  7. 瀏覽器生成渲染樹和DOM樹渲染頁面
  8. 瀏覽器處理頁面中嵌入的資源和異步請求

  • 瀏覽器解析URL，如：https://www.google.co.jp/?gfe_rd=cr&ei=NPJtWZTXJabEXoKjqOAP&gws_rd=ssl包括

    協議：`http`,`https`等
域名：`www.google.co.jp`
資源路徑：`/`
參數查詢：`gfe_rd=cr`,關鍵詞`cr`

  • DNS

    瀏覽器DNS緩存
HOSTS查詢
DNS服務器查詢
ARP查詢
  • TCP握手，TLS握手

  • HTTP(s),(或SPDY，或HTTP2.0)

    Header
Domain
Body

  • Gateway/Nginx,網關和負載均衡服務器

    查詢本地緩存
請求上游應用服務器

  • 瀏覽器解析HTML，並請求資源

    CSS    
JS    
圖片
  • 生成DOM-Tree,結合CSS進行渲染

更爲完整詳細：what-happens-when-zh_CN

前端的安全

前端的安全問題有哪些，如何解決

  1. sql注入
  2. shell注入
  3. xss
  4. csrf
  5. 對數據加密
  6. 對關鍵字進行處理

sql注入

前端js防止SQL注入

思路：發現SQL注入位置(URL地址和Input輸入框)，判斷服務器類型和後臺數據庫類型.

解決方法：

URL地址防注入

// 過濾URL非法SQL字符
var sUrl = location.search.toLowerCase();
var sQuery = sUrl.substring(sUrl.indexOf('=') + 1); // 獲取查詢參數key
// SQL關鍵字
reg = /select|update|delete|truncate|join|union|exec|insert|drop|count|'|"|;|>|<|%/i;
if (reg.test(sQuery)) {
  console.log('輸入非法字符');
  location.href = sUrl.replace(sQuery, ''); // 從新跳轉
}

輸入文本框防注入

// 防止SQL注入
function AntiSqlValid(context) {
  reg = /select|update|delete|truncate|join|union|exec|insert|drop|count|'|"|;|>|<|%/i;
  if (reg.test(context.value)) {
    // 提示信息，其它操做
  }
  return;
}

shell注入

代碼注入

常見的Shell注入資源有system()，StartProcess()，java.lang.Runtime.exec()，System.Diagnostics.Process.Start()以及相似的應用程序接口

在請求地址上置換用戶提交的許多其餘單字。

處理特殊字符：$,;,|,&&,||,>,<

XSS
英語：Cross-site scripting，一般簡稱爲：XSS
網站應用程序的安全漏洞攻擊，是代碼注入的一種.

形成的結果：可能獲得更高的權限（如執行一些操做）、私密網頁內容、會話和cookie等各類內容。

檢測方法
測試網站是否有正確處理特殊字符

  1. ><script>alert(document.cookie)</script>
  2. ='><script>alert(document.cookie)</script>
  3. "><script>alert(document.cookie)</script>
  4. <img src="javascript:alert('XSS')">
  5. <iframe src="//baidu.com/t.html"></iframe>

涉及到的知識：HTTP,Cookie,Ajax等。

XSS原理：

XSS：JavaScript代碼
DDOS
Server Limit DOS: HTTP頭超長，致使域名沒法訪問。

  • 獲取Cookie中的信息
  • 破壞正常的頁面結構，插入惡意內容

XSS類型：

  • 反射型

    發出請求時，XSS代碼出如今URL中，做爲輸入提交到服務器端，服務器端解析後響應，XSS代碼隨響應內容一塊兒傳回給瀏覽器,最後瀏覽器解析執行XSS代碼。該過程像一次反射，稱之爲：反射型XSS

  • 存儲型

    存儲型XSS和放射型XSS的差異僅在於，提交的代碼會存儲在服務器端（數據庫，內存，文件系統等），下次請求目標頁面時不用再提交XSS代碼

響應頭：

// express框架
res.set('X-XSS-Protection', 0) // 默認是瀏覽器攔截，設置爲0以後，XSS代碼就生效

XSS預防措施：

  • 編碼

    對用戶輸入的數據進行HTML Entity編碼

  • 過濾

    移除用戶上傳的DOM屬性，如onerror，與事件相關等
移除用戶上傳的Style節點，Script節點，Iframe節點等

  • 校訂

    避免直接對HTML Entity解碼
使用DOM Parse轉換，校訂不配對的DOM標籤

跨站腳本

csrf

中文名稱：跨站請求僞造，也被稱爲：one click attack/session riding，縮寫爲：CSRF/XSRF。

理解成：攻擊者盜用了你的身份，以你的名義發送惡意請求.
CSRF攻擊是源於WEB的隱式身份驗證機制。WEB的身份驗證機制雖然能夠保證一個請求是來自於某個用戶的瀏覽器，但卻沒法保證該請求是用戶發送的。

CSRF的前端防護：

在每次POST，GET請求時，添加X-CSRFToken請求頭。

  1. 用戶操做限制，好比驗證碼；
  2. 請求來源限制，好比限制HTTP Referer才能完成操做；
  3. token驗證機制，好比請求數據字段中添加一個token，響應請求時校驗其有效性；

先後端分離架構下CSRF防禦機制

npm

暫時指定代理

// npm install mongoose --registry 內網ip
npm install mongoose --registry http://172.18.0.199

永久指定代理

// npm config set registry 內網ip
npm config set registry "http://172.18.0.199"

使用nrm動態切換代理

npm install -g nrm

測試代理最快

nrm test
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程