HTML
-
HTML5新增加的內(nèi)容或者API
-
API層
- canvas: 用來(lái)寫游戲還是很不錯(cuò)的移迫，推薦開源游戲框架：pixi.js
- 離線: 想起 Cache Manifest , 和 Cache APIs 厨埋。再加上 Service Worker 的特性，用戶體驗(yàn)?zāi)芴嵘簧佟?/li>
- 拖放: Drag & Drop , 對(duì)用戶體驗(yàn)也有很大的提升雨效。推薦開源庫(kù)：dragula
- 歷史: 簡(jiǎn)而言之就是可以使用history對(duì)象控制地址了徽龟，一般會(huì)被單頁(yè)應(yīng)用用作路由控制唉地，如果不支持，然后降級(jí)為hash旷祸。
- 網(wǎng)絡(luò)存儲(chǔ): sessionStorage & localStorage讼昆，這個(gè)應(yīng)該不陌生浸赫，保存一些稍大的數(shù)據(jù)，或者不適合放在Cookie的羡榴，就用網(wǎng)絡(luò)存儲(chǔ)校仑。 類似的還有 IndexedDB 和 WebSQL传惠。 推薦開源庫(kù)：localForage卦方。
-
元素與屬性
- section 文檔中的節(jié)（section、區(qū)段）尘吗。比如章節(jié)睬捶、頁(yè)眉近刘、頁(yè)腳或文檔中的其他部分跌宛。寫文章的時(shí)候經(jīng)常會(huì)用到
- <video> 和 <audio>: 視頻和音頻疆拘。相關(guān)開源庫(kù)：video.js。
- <footer> 和 <header>: 之前<div class='footer OR header'></div>的寫法換成標(biāo)簽<footer> 和 <header>就行了回右，為了語(yǔ)義化翔烁，推薦。
- <mark> 標(biāo)記高亮一個(gè)詞侣背。
- <datalist> 提醒用戶可以輸入哪些贩耐，查看 w3school 的 demo厦取。
- <nav>表示導(dǎo)航等等虾攻，還要更多的標(biāo)簽霎箍，目的是為了寫出更好語(yǔ)義化的HTML。
-
-
input與textarea的區(qū)別
- input
- 可以指定 type 為 url, email, 可以方便地檢測(cè)用戶輸入蛇券。還是指定為 file, submit, button, checkbox, radio, datetime, color等，改變input的樣式和行為筋夏。
- 可以通過(guò) value 屬性指定初始值
- 寬高只能通過(guò) CSS 指定
- textarea
- 可以輸入多行文字
- 輸入值初始化需要用標(biāo)簽對(duì)包裹图呢，并可以?shī)A雜 HTML 代碼蛤织，而不會(huì)被瀏覽器解析
<textarea><h1>h1</h1></textarea>- 寬高能用 CSS 或 rows, cols 指定
- 相同點(diǎn)
- 都可以使用 maxlength, minlength等限制輸入
- input
-
用一個(gè)div模擬textarea的實(shí)現(xiàn)
- 加個(gè) contenteditable 屬性就行
- 在項(xiàng)目中如果需要用到富文本指蚜，在 Github 中搜索 rich editor 就行了，或者搜索 WYSIWYG (what you see is what you get), 百度的 ueditor 也是不錯(cuò)的
-
忽略頁(yè)面中的電話號(hào)碼
<meta name="format-detection" content="telephone=no" /> -
左右布局：左邊定寬绽媒、右邊自適應(yīng)
- absolute + padding
<style> .example-1 { position: relative; height: 100px; width: 60%; padding-left: 100px; } .example-1 .left { position: absolute; width: 100px; left: 0; height: 100%; background: #0f0; } .example-1 .right { background: #f00; width: 100%; height: 100%; } </style> <div class='example-1 auto-width'> <div class='left'>left</div> <div class='right'>right</div> </div> - flex布局未來(lái)趨勢(shì)
- table (內(nèi)容過(guò)多時(shí) 會(huì)出問(wèn)題)
<style> .example-3 { display: table; height: 100px; width: 60%; } .example-3 .left { width: 100px; height: 100%; background: #0f0; display: table-cell; } .example-3 .right { background: #f00; height: 100%; display: table-cell; } </style> <div class='example-3 auto-width'> <div class='left'>left</div> <div class='right'>right</div> </div> - float解決方案
<style> .example-4 { height: 100px; width: 60%; } .example-4 .left { float: left; width: 100px; height: 100%; background: #0f0; } .example-4 .right { background: #f00; overflow: hidden; height: 100%; } </style> <div class='example-4 auto-width'> <div class='left'>left</div> <div class='right'>right</div> </div>
- absolute + padding
-
BFC囤热、IFC
- BFC: ‘Block Formatting Context’, BFC 表現(xiàn)原則: 內(nèi)部子元素再怎么翻江倒海旁蔼，翻云覆雨都不會(huì)影響外部的元素,自成一方天地疙教。
- IFC: Inline Formatting Contexts, 直譯為”內(nèi)聯(lián)格式化上下文”,個(gè)人理解為行內(nèi)盒子模型松逊。
-
圖片懶加載
核心代碼時(shí)檢測(cè)當(dāng)前元素是否在當(dāng)前視圖中：function elementInViewport(el) { var rect = el.getBoundingClientRect() // For invisible element. 對(duì)于不可見(jiàn)元素 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) ) } -
實(shí)現(xiàn)頁(yè)面加載進(jìn)度條
- AJAX
- Elements
- Document
- Event Lag
-
事件委托
利用事件冒泡和e.target來(lái)確定事件和元素经宏。在jQuery中有$.delegate方法去代理事件烁兰。使用委托代理的原因：- 需要綁定事件的元素很多，且處理邏輯類似广辰。
- 元素是動(dòng)態(tài)創(chuàng)建择吊，或頻繁增加几睛、刪除粤攒，導(dǎo)致元素綁定事件過(guò)于復(fù)雜的夯接。
// 參考 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); } }); }; -
實(shí)現(xiàn) extend 函數(shù)
淺拷貝使用 Object.assign 就夠了盔几，大多數(shù)情況下，使用該方法肝匆。
直接 Clone 一個(gè) Nested Object 的簡(jiǎn)便方法:var origin = {"a": "a"} var copy = JSON.parse(JSON.stringify(origin)); -
跨域的問(wèn)題以及解決方式
-
解決方式：
- JSONP(JSON with Padding): 利用加載 JS 文件不需要遵循同源策略的原理旗国。
- CORS(Cross-Origin Resource Sharing): 在服務(wù)器端返回允許跨域訪問(wèn)的頭能曾。
- WebSockt：利用 WebSocket 不需要遵循同源策略的原理。
-
JSONP
JSONP 原理是加載一個(gè) script蕊程，并執(zhí)行一段回調(diào) JS 藻茂，因?yàn)榧虞d JS 不需要遵循同源策略题造。但由此也帶來(lái)了JSONP的一些問(wèn)題：- 無(wú)法發(fā)送特定的頭部
- 只能是 GET 請(qǐng)求
- 無(wú)法發(fā)送 body
-
-
拖拽功能
<ul id='drag'> <li draggable="true">1</li> <li draggable="true">2</li> <li draggable="true">3</li> <li draggable="true">4</li> <li draggable="true">5</li> </ul> <script> var ele; document.querySelector('#drag').addEventListener('dragstart', function (e) { ele = e.target; ele.classList.add('draging'); }) document.querySelector('#drag').addEventListener('dragover', function (e) { e.preventDefault(); if (e.target.nodeName === 'LI') { e.target.parentNode.insertBefore(ele, e.target); } }) document.querySelector('#drag').addEventListener('drop', function (e) { ele.classList.remove('draging'); }) </script> -
手寫parseInt的實(shí)現(xiàn)
- const parseInt = str => str - 0;
- const parseInt = str => str / 1;
- const parseInt = str => str * 1;
- const parseInt = str => +str;
- 復(fù)雜寫法
const parseInt = str => { let n = 0; let i = 1; str.split('').reverse().map(s => { n += i * (s.charCodeAt(0) - 48); i *= 10; }); return n; } -
分頁(yè)器組件
為了減少服務(wù)端查詢次數(shù)爹脾，點(diǎn)擊“下一頁(yè)”怎樣能確保還有數(shù)據(jù)可以加載（請(qǐng)求數(shù)據(jù)不會(huì)為空）不恭？- 服務(wù)器需要返回總數(shù)换吧，當(dāng)前偏移量佑力，根據(jù)總數(shù)和偏移量判斷是否是最后一頁(yè)打颤。
- 參考微信的接口编饺，給一個(gè)下一頁(yè)的起始項(xiàng)的id响驴，如果當(dāng)前頁(yè)最后一個(gè)id和下一頁(yè)起始id相同，就是最后一頁(yè)鲸沮。
-
require.js的實(shí)現(xiàn)原理
與webpack相比锅论，兩者打包的異同及優(yōu)缺點(diǎn)- 同：
都以模塊化方式組織代碼 - 異：
requirejs 只能加載JS文件
webpack 可以打包JS最易，CSS藻懒，甚至是圖片
- 同：
-
項(xiàng)目中使用過(guò)哪些優(yōu)化方法
- 頁(yè)面靜態(tài)化，（如：Jada, Pug在靜態(tài)編譯后部署）
- CDN加速, 多地緩存
- 前端渲染 (Data + View) / 后端渲染( SSR, SEO 等), 視具體情況選擇归敬，如：
- 前端渲染弄慰，適合大流量的場(chǎng)景
- 后端渲染陆爽，適合SEO優(yōu)化扳缕，用戶體驗(yàn)提升等場(chǎng)景
- 縮減域名躯舔，以減少DNS解析時(shí)間粥庄，（可采用<link rel="dns-prefetch" >進(jìn)行優(yōu)化）
- 如果遇到域名解析的問(wèn)題，可嘗試HTTPDNS方案
- Combo服務(wù)器合并CSS,JS請(qǐng)求,減少第一屏網(wǎng)絡(luò)請(qǐng)求布讹。（如果采用HTTP2.0方案描验，資源合并可省略）
- 異步加載非核心業(yè)務(wù)和邏輯資源
- 資源和請(qǐng)求緩存膘流，可參考緩存的答案
- Cache-Control/Expires 前端緩存
- Last-Modified/Etag 服務(wù)器端緩存，304
- 如果是和Native混合開發(fā)的耕魄，還可以使用Native緩存
- DNS就近解析應(yīng)用服務(wù)器吸奴，需要和CDN配合使用
-
輸入一個(gè)URL奄抽，Enter之后發(fā)生了什么
- 瀏覽器解析URL, 如: https://www.google.com.hk/#newwindow=1&q=hello
- 協(xié)議：http, https等
- 域名：www.google.com.hk
- 資源路徑: /
- 參數(shù)查詢：q=hello, 關(guān)鍵詞hello
- DNS
- 瀏覽器 DNS 緩存
- HOSTS 查詢
- DNS 服務(wù)器查詢
- ARP 查詢
- TCP 握手, TLS 握手
- HTTP(s), (或SPDY逞度， 或HTTP2.0)
- Header
- Domain
- Body
- Gateway / Nginx档泽，網(wǎng)關(guān)和負(fù)載均衡服務(wù)器
- 查詢本地緩存
- 請(qǐng)求上游應(yīng)用服務(wù)器
- 瀏覽器解析HTML揖赴，并請(qǐng)求資源
- CSS
- JS
- 圖片
- 生成 DOM-Tree燥滑，結(jié)合CSS進(jìn)行渲染
- 瀏覽器解析URL, 如: https://www.google.com.hk/#newwindow=1&q=hello
-
頁(yè)面的渲染過(guò)程
- 解析整個(gè)HTML铭拧，得到DOM樹和樣式樹
- DOM樹和樣式樹，經(jīng)過(guò)渲染呕臂，得到一顆渲染樹
- 根據(jù)渲染樹歧蒋，開始布局谜洽，計(jì)算各個(gè)節(jié)點(diǎn)寬度易桃，位置晤郑，高度等
- 然后開始繪制整個(gè)頁(yè)面并顯示
- 在渲染過(guò)程中如果使用了GPU造寝，還可以進(jìn)行GPU渲染
-
靜態(tài)資源或者接口等如何做緩存優(yōu)化
- redis/memcache 做數(shù)據(jù)緩存
- SQL 查詢做緩存
- 指定 Cache-Control/Expires 緩存時(shí)間
- Last-Modified/Etag 緩存 ( 304 ) 方案
- 網(wǎng)關(guān)服務(wù)器做緩存诫龙，需要更新時(shí)，再回源到應(yīng)用服務(wù)器
- CDN多機(jī)房谷异，多網(wǎng)關(guān)緩存
-
頁(yè)面DOM節(jié)點(diǎn)太多歹嘹，會(huì)出現(xiàn)什么問(wèn)題尺上？如何優(yōu)化怎抛？
- 頁(yè)面卡頓芽淡，幀率下降
- 優(yōu)化：
- 采用Virtual Dom技術(shù)挣菲，可參考: virtual-dom
- 多次操作DOM己单，改為批量一次操作DOM
- 及時(shí)移走頁(yè)面不用的DOM
- 避免不必要的DIV嵌套
前端安全問(wèn)題 CSRF和XSS
-
CSRF Cross-site request forgery 跨站請(qǐng)求偽造
-
簡(jiǎn)單描述：
跨站請(qǐng)求偽造（英語(yǔ)：Cross-site request forgery）纹笼，也被稱為 one-click attack 或者 session riding，通陈В縮寫為 CSRF 或者 XSRF元暴， 是一種挾制用戶在當(dāng)前已登錄的Web應(yīng)用程序上執(zhí)行非本意的操作的攻擊方法茉盏。[1] 跟跨網(wǎng)站腳本（XSS）相比鸠姨，XSS 利用的是用戶對(duì)指定網(wǎng)站的信任，CSRF 利用的是網(wǎng)站對(duì)用戶網(wǎng)頁(yè)瀏覽器的信任
-
防御措施
- 檢查referer, X-Requested-With, Orign頭
- 使用POST代替GET
- 添加校驗(yàn)Token至表單中
- 添加驗(yàn)證碼或其他人機(jī)驗(yàn)證手段连茧，如 Google 的 recaptcha
- 把Token放到自定義的HTTP Header, Cookie-to-Header Token
-
-
XSS: Cross-site_scripting
- 簡(jiǎn)單描述:
跨站腳本（英語(yǔ)：Cross-site scripting，通常簡(jiǎn)稱為：XSS）是一種網(wǎng)站應(yīng)用程序的安全漏洞攻擊祟峦，是代碼注入的一種搀愧。它允許惡意用戶將代碼注入到網(wǎng)頁(yè)上咱筛，其他用戶在觀看網(wǎng)頁(yè)時(shí)就會(huì)受到影響迅箩。這類攻擊通常包含了HTML以及用戶端腳本語(yǔ)言饲趋。
- 防御措施
- 過(guò)濾特殊字符串 ( encoding / escaping )
- 保護(hù)Cookie
- 使用HttpOnly字段防止被JS獲取奕塑，（因?yàn)楣敉ǔ?huì)采集敏感信息）
- 使用HTTPs代替HTTP，（運(yùn)營(yíng)商經(jīng)常會(huì)通過(guò)注入廣告）
- 禁用JS盟猖，（這個(gè)不太現(xiàn)實(shí)）
- 推薦式镐！設(shè)置CSP: Content_Security_Policy 介紹娘汞，Content-Security-Policy 文檔你弦。這個(gè)在Github有使用：
Content-Security-Policy:default-src 'none'; base-uri 'self'; block-all-mixed-content; child-src render.githubusercontent.com; connect-src 'self' uploads.github.com status.github.com collector.githubapp.com api.github.com www.google-analytics.com github-cloud.s3.amazonaws.com github-production-repository-file-5c1aeb.s3.amazonaws.com github-production-user-asset-6210df.s3.amazonaws.com wss://live.github.com; font-src assets-cdn.github.com; form-action 'self' github.com gist.github.com; frame-ancestors 'none'; img-src 'self' data: assets-cdn.github.com identicons.github.com collector.githubapp.com github-cloud.s3.amazonaws.com *.githubusercontent.com; media-src 'none'; script-src assets-cdn.github.com; style-src 'unsafe-inline' assets-cdn.github.com - 設(shè)置 X-XSS-Protection 頭
-
HTTP 安全頭
- Strict-Transport-Security: Strict-Transport-Security: max-age=31536000 ; includeSubDomains
- Public-Key-Pins: Public-Key-Pins: pin-sha256="d6qzRu9zOECb90Uez27xWltNsj0e1Md7GkYYkVoZWmM="; pin-sha256="E9CZ9INDbd+2eRQozYqqbQ2yXLVKB9+xcprMF+44U1g="; report-uri="http://example.com/pkp-report"; max-age=10000; includeSubDomains
- X-Frame-Options: X-Frame-Options: deny
- X-XSS-Protection: X-XSS-Protection: 1; mode=block
- X-Content-Type-Options: X-Content-Type-Options: nosniff
- Content-Security-Policy: Content-Security-Policy: script-src 'self'
- X-Permitted-Cross-Domain-Policies: X-Permitted-Cross-Domain-Policies: none
- Referrer-Policy: Referrer-Policy: no-referrer
跨域
跨域請(qǐng)求的含義
瀏覽器的同源策略扮叨，出于防范跨站腳本的攻擊，禁止客戶端腳本（如JavaScript）對(duì)不同域的服務(wù)進(jìn)行跨站調(diào)用狸捅。
一般的尘喝，只要網(wǎng)站的 協(xié)議名protocol斋陪、 主機(jī)host无虚、 端口號(hào)port 這三個(gè)中的任意一個(gè)不同友题，網(wǎng)站間的數(shù)據(jù)請(qǐng)求與傳輸便構(gòu)成了跨域調(diào)用度宦。
跨域請(qǐng)求并非是瀏覽器限制了發(fā)起跨站請(qǐng)求戈抄，而是請(qǐng)求可以正常發(fā)起，到達(dá)服務(wù)器端输莺，但是服務(wù)器返回的結(jié)果會(huì)被瀏覽器攔截模闲。
利用 JSONP 實(shí)現(xiàn)跨域調(diào)用
JSONP 是 JSON 的一種使用模式尸折，可以解決主流瀏覽器的跨域數(shù)據(jù)訪問(wèn)問(wèn)題实夹。其原理是根據(jù)XmlHttpRequest 對(duì)象受到同源策略的影響橄浓，而<script>標(biāo)簽元素卻不受同源策略影響，可以加載跨域服務(wù)器上的腳本亮航，網(wǎng)頁(yè)可以從其他來(lái)源動(dòng)態(tài)產(chǎn)生JSON資料荸实。用JSONP獲取的不是 JSON 數(shù)據(jù)，而是可以直接運(yùn)行的 JavaScript 語(yǔ)句缴淋。
如果理解 JSONP 的原理的話就不難理解為什么只能使用 GET 請(qǐng)求方法了准给。
由于是通過(guò) script 標(biāo)簽進(jìn)行請(qǐng)求，所以上述傳輸過(guò)程根本上是以下的形式：
<script src = 'http://localhost:3001/ajax/deal?callback=jsonpCallback&name=chiaki&id=3001&_=1473164876032'></script>-
JSONP總結(jié):
- 只能使用 GET 方法發(fā)起請(qǐng)求重抖，這是由于 script 標(biāo)簽自身的限制決定的。
- 不能很好的發(fā)現(xiàn)錯(cuò)誤钟沛，并進(jìn)行處理畔规。
- 與 Ajax 對(duì)比，由于不是通過(guò) XmlHttpRequest 進(jìn)行傳輸恨统，所以不能注冊(cè) success叁扫、 error 等事件監(jiān)聽函數(shù)。
<script> // function success_jsonpCallback(data) { // console.log("in success_jsonpCallback ") // console.log(data) // } $.ajax({ type:'get', dataType:'jsonp', url:'http://localhost:3000/users/list', jsonp:"callback123", jsonpCallback:"success_jsonpCallback", success:function(res) { console.log(res) }, error:function(err,status) { console.log(err) console.log(status) } }) </script> <!-- 后臺(tái)拿到的 req.query 對(duì)象 { callback123: 'success_jsonpCallback', _: '1498535014927' } 發(fā)送的ajax請(qǐng)求是: /users/list?callback123=success_jsonpCallback&_=1498535569911 -->服務(wù)器端 (需要返回函數(shù)的調(diào)用形式)
router.get('/list', function(req, res, next) { console.log(req.query) var users = [ {id:1, name:"F"}, {id:2, name:"Z"}, {id:3, name:"X"}, {id:4, name:"M"}, {id:5, name:"N"}, {id:6, name:"A"}, {id:7, name:"B"}, {id:8, name:"D"}, {id:9, name:"C"}, {id:10, name:"L"}, ]; var data = req.query.callback123+"("+JSON.stringify(users)+")"; res.send(data); });
使用 CORS 實(shí)現(xiàn)跨域調(diào)用
1 什么是 CORS畜埋？
Cross-Origin Resource Sharing（CORS）
跨域資源共享是一份瀏覽器技術(shù)的規(guī)范莫绣，提供了 Web 服務(wù)從不同域傳來(lái)沙盒腳本的方法，以避開瀏覽器的同源策略由捎，是 JSONP 模式的現(xiàn)代版兔综。與 JSONP 不同，CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求狞玛。用 CORS 可以讓網(wǎng)頁(yè)設(shè)計(jì)師用一般的 XMLHttpRequest软驰，這種方式的錯(cuò)誤處理比 JSONP 要來(lái)的好。另一方面心肪，JSONP 可以在不支持 CORS 的老舊瀏覽器上運(yùn)作《Э鳎現(xiàn)代的瀏覽器都支持 CORS。
-
服務(wù)器端控制
res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "X-Requested-With"); res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS"); res.header("X-Powered-By", ' 3.2.1') res.header("Content-Type", "application/json;charset=utf-8"); -
CORS 與 JSONP 的對(duì)比
- CORS 除了 GET 方法外硬鞍，也支持其它的 HTTP 請(qǐng)求方法如 POST慧瘤、 PUT 等。
- CORS 可以使用 XmlHttpRequest 進(jìn)行傳輸固该，所以它的錯(cuò)誤處理方式比 JSONP 好锅减。
- JSONP 可以在不支持 CORS 的老舊瀏覽器上運(yùn)作。
一些其它的跨域調(diào)用方式
- window.name
window對(duì)象有個(gè)name屬性伐坏，該屬性有個(gè)特征：即在一個(gè)窗口 (window)的生命周期內(nèi)怔匣，窗口載入的所有的頁(yè)面都是共享一個(gè)window.name的，每個(gè)頁(yè)面對(duì) window.name 都有讀寫的權(quán)限桦沉，window.name是持久存在一個(gè)窗口載入過(guò)的所有頁(yè)面中的每瞒，并不會(huì)因新頁(yè)面的載入而進(jìn)行重置金闽。
- window.postMessage()
這個(gè)方法是 HTML5 的一個(gè)新特性，可以用來(lái)向其他所有的 window 對(duì)象發(fā)送消息剿骨。需要注意的是我們必須要保證所有的腳本執(zhí)行完才發(fā)送 MessageEvent代芜，如果在函數(shù)執(zhí)行的過(guò)程中調(diào)用了他，就會(huì)讓后面的函數(shù)超時(shí)無(wú)法執(zhí)行浓利。
