[TOC] <br/><br/><br/> # <b style="color:#4F4F4F;">簡介說明</b> 原文鏈接： - [硬件加速中的“層”和層疊上下文中的“層”](https://mp.weixin.qq.com/s/xuWgEMh9Y8Eq_Go2uBH24g) - [瀏覽器層合成與頁面渲染優化](https://juejin.cn/post/6844903966573068301) - [瀏覽器跨頁面通信方案](https://juejin.cn/post/6919334960818192391) - [Cookie的SameSite了解吧，那SameParty呢](https://cloud.tencent.com/developer/article/2062315) - [你不知道的前端高分屏圖片加載方案](https://mp.weixin.qq.com/s/TaHLyibhciT2uk35T2367Q) - [通過幾行 JS 就可以讀取電腦上的所有數據](https://mp.weixin.qq.com/s/E4EA8SfgI_zBlVmVEBGQBA) - [瀏覽器及nodeJS中的EventLoop事件循環機制](https://zhuanlan.zhihu.com/p/389250124) - [Deco 編輯器開放性技術架構解析](https://jishuin.proginn.com/p/763bfbd7124e) - [基于自然流布局的可視化拖拽搭建平臺設計方案](https://mp.weixin.qq.com/s/WFwGw4OkGOKopIgz4rrCTg) - [js判斷客戶端是PC端還是移動端訪問](https://hotsuitor.blog.csdn.net/article/details/90905730) - [基于FFmpeg + nginx + flv.js 實現的網頁 ?(播放) 攝像頭](https://mp.weixin.qq.com/s/oLfrrppukfflHwvMusugTg) - [自動化生成骨架屏的技術方案設計與落地](https://mp.weixin.qq.com/s/z6ovNVlfd0Nc3_FwqMxXow) - [在瀏覽器控制臺安裝 NPM 包](https://mp.weixin.qq.com/s/dDAC758fUu8Ia4gtfuwzYg) - [編寫一個瀏覽器擴展](https://mp.weixin.qq.com/s/m-MYwM4CXZ1lR_zyvBLJiQ) - [一鍵支持暗色模式](https://mp.weixin.qq.com/s/AHHxUatITmwdRr-OyHQHQw) - [前端 “一鍵換膚“ 的幾種方案](https://mp.weixin.qq.com/s/_wOihA75a5EFpk7Ltil9mQ) - [前端換膚的N種方案](https://mp.weixin.qq.com/s/4W24J-B6wkBaCzbWpK3ppg) - [Dooring可視化之從零實現動態表單設計器](https://mp.weixin.qq.com/s/9z8DPJ9tdQIav6sHYdE9XQ) - [劃線高亮和插入筆記的技術實現](https://mp.weixin.qq.com/s/ejLJ4LNnxOXgIKQgBsX9vg) - [前端跨頁面通信](https://blog.csdn.net/p3118601/article/details/88966864) - [復雜場景下喚起App實踐](https://juejin.cn/post/7039974294926917640) - [如何在網頁中使用響應式圖像](https://mp.weixin.qq.com/s/RuejbQ92aSnvF_-KF4-dxQ) - [可視化大屏開發的一點思考](https://mp.weixin.qq.com/s/bM4sGZHEWmeNdCKmDLeQCw) - [虛擬 DOM 到底是什么](https://mp.weixin.qq.com/s/zcUXHEqtoz6pYlp1KUeUKw) - [手寫一個虛擬DOM庫，徹底讓你理解diff算法](https://mp.weixin.qq.com/s/au2Z5qOh8451dSbQ1Wo-Pw) - [小程序的鼻祖在國內就這么消亡了](https://mp.weixin.qq.com/s/11jacUC53QOiR3rUR5pPLA) - [實現一個很牛逼的掃碼功能](https://mp.weixin.qq.com/s/PTPdFxQFM9ysLTfFAPygCA) - [淺聊WebRTC視頻通話](https://mp.weixin.qq.com/s/sGvfR9McNu-Reyi-3b0MTg) - [三種視頻流瀏覽器播放解決方案](https://juejin.cn/post/6844903953126129671) - [前端網頁如何打開一個PC本地應用](https://juejin.cn/post/6844903989155217421) - [Python 已可在瀏覽器端運行，來搶前端飯碗](https://mp.weixin.qq.com/s/gusjKuSzEyJPFhZLkL9mGA) - [Share Element動畫實現案例](https://stackblitz.com/edit/nextjs-as4uje?file=README.md) - [前端應該知道的：開放圖譜協議（The Open Graph protocol）](https://segmentfault.com/a/1190000040863000) - [RSS用于發布站點更新的數種 XML 文檔格式](https://developer.mozilla.org/zh-CN/docs/Glossary/RSS) - [RSS 教程](https://www.runoob.com/rss/rss-tutorial.html) - [微前端-最容易看懂的微前端知識](https://zhuanlan.zhihu.com/p/141530392) - [架構設計：微前端架構](https://zhuanlan.zhihu.com/p/79388540) - [初探 MicroApp，一個極致簡潔的微前端框架](https://mp.weixin.qq.com/s/gNS6FUhPWHD-IXdlUAop5A) - [Web App Manifest](https://developer.mozilla.org/zh-CN/docs/Web/Manifest) - [ARIA 狀態及屬性 - 無障礙](https://developer.mozilla.org/zh-CN/docs/Web/Accessibility/ARIA/Attributes) - [OGC標準WMTS服務概念與地圖商的瓦片編號流派-web地圖切片加載](https://zhuanlan.zhihu.com/p/393081170) - [只需要點擊頁面上的元素，就能夠自動打開 vscode 定位到源代碼，支持多框架！](https://mp.weixin.qq.com/s/lW_VWn9dPZyMNgTfHA4Nqw) - [餓了么面試官：實現一下 Element-UI 官網的主題切換動畫！](https://mp.weixin.qq.com/s/zYT-7zNmjc_5O7PqAKU5NQ) ``` 版本：Browser常見問題 作用：Browser常見問題 ``` <br/> # <b style="color:#4F4F4F;">瀏覽器內核</b> <br/> # <span style="color:#619BE4">gecko</span> ***** gecko瀏覽器內核，開源內核 <br/> ### 示例內容 <span style="color:red;">1. 誰用過</span> ``` 網景公司開發的Netscape Netscape Mozilla FireFox ``` <br/> # <span style="color:#619BE4">gecko2</span> ***** 第二代的gecko內核 <br/> ### 示例內容 <span style="color:red;">1. 誰用過</span> ``` Netscape死掉后，由于IE壟斷嚴重，標準和W3C脫節，導致不滿微軟的員工叛逃 一起創辦了Mozilla公司，并且以Trident內核重新編寫，而且開源 Mozilla FireFox ``` <br/> # <span style="color:#619BE4">trident</span> ***** trident瀏覽器內核 <br/> ### 示例內容 <span style="color:red;">1. 誰用過</span> ``` 網景公司膨脹了，想要做操作系統，威脅到了微軟 微軟收購了Mosaic公司，開發了Trident內核 IE瀏覽器 ``` <br/> # <span style="color:#619BE4">webkit</span> ***** webkit內核 <br/> ### 示例內容 <span style="color:red;">1. 誰用過</span> ``` gecko和trident貪大包全，把各種內容加入瀏覽器導致運行緩慢， 勤勞追求極致的蘋果公司開發了webkit內核用于Safari瀏覽器 Google很喜歡這個內核，于是拿來用了 Firefox也很喜歡，也用了 Safari Chrome Mozilla FireFox ``` <span style="color:red;">2. 發展史</span>  <br/> # <span style="color:#619BE4">blink</span> ***** blink內核 <br/> ### 示例內容 <span style="color:red;">1. 誰用過</span> ``` 2013谷歌和蘋果發生矛盾分道揚鑣，谷歌自主開發了blink內核 blink其實是webkit的一個分支，為了切斷與蘋果的關系 Chrome ``` <br/> # <b style="color:#4F4F4F;">常見問題</b> <br/> # <span style="color:#619BE4">判斷客戶端是PC端還是移動端</span> ***** 判斷客戶端是PC端還是移動端 <br/> ### 示例內容 <span style="color:red">1. 解決代碼</span> ``` function IsPC(){ var userAgentInfo = navigator.userAgent; var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"); var flag = true; for (var v = 0; v < Agents.length; v++) { if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; } } return flag; } if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //alert(navigator.userAgent); window.location.href ="iPhone.html"; } else if (/(Android)/i.test(navigator.userAgent)) { //alert(navigator.userAgent); window.location.href ="Android.html"; } else { window.location.href ="pc.html"; }; ``` <br/> # <span style="color:#619BE4">判斷用戶網絡類型</span> ***** 判斷用戶網絡類型 <br/> ### 示例內容 <span style="color:red">1. 解決代碼</span> ``` getNetworkType() function getNetworkType() { var ua = navigator.userAgent; var networkStr = ua.match(/NetType\/\w+/) ? ua.match(/NetType\/\w+/)[0] : 'NetType/other'; networkStr = networkStr.toLowerCase().replace('nettype/', ''); var networkType; switch(networkStr) { case 'wifi': networkType = 'wifi'; break; case '4g': networkType = '4g'; break; case '3g': networkType = '3g'; break; case '3gnet': networkType = '3g'; break; case '2g': networkType = '2g'; break; default: networkType = 'other'; } alert(networkStr) } ``` <br/> # <span style="color:#619BE4">判斷是否支持Passive</span> ***** 判斷是否支持Passive <br/> ### 示例內容 <span style="color:red">1. 解決代碼</span> ``` // ref https://github.com/WICG/EventListenerOptions/pull/30 function isPassive() { var supportsPassiveOption = false; try { addEventListener("test", null, Object.defineProperty({}, 'passive', { get: function () { supportsPassiveOption = true; } })); } catch (e) { } return supportsPassiveOption; } ``` <br/> # <span style="color:#619BE4">多圖加載完畢回調函數</span> ***** 多圖加載完畢回調函數 <br/> ### 示例內容 <span style="color:red">1. 解決代碼</span> ``` var img = [], flag = 0, mulitImg = [ 'http://www.daqianduan.com/wp-content/uploads/2017/03/IMG_0119.jpg', 'http://www.daqianduan.com/wp-content/uploads/2017/01/1.jpg', 'http://www.daqianduan.com/wp-content/uploads/2015/11/jquery.jpg', 'http://www.daqianduan.com/wp-content/uploads/2015/10/maid.jpg' ]; var imgTotal = mulitImg.length; for(var i = 0 ; i < imgTotal ; i++){ img[i] = new Image() img[i].src = mulitImg[i] img[i].onload = function(){ //第i張圖片加載完成 flag++ if( flag == imgTotal ){ //全部加載完成 } } } ``` <span style="color:red">2. 使用Promise</span> ``` let mulitImg = [ 'http://www.daqianduan.com/wp-content/uploads/2017/03/IMG_0119.jpg', 'http://www.daqianduan.com/wp-content/uploads/2017/01/1.jpg', 'http://www.daqianduan.com/wp-content/uploads/2015/11/jquery.jpg', 'http://www.daqianduan.com/wp-content/uploads/2015/10/maid.jpg' ]; let promiseAll = [], img = [], imgTotal = mulitImg.length; for(let i = 0 ; i < imgTotal ; i++){ promiseAll[i] = new Promise((resolve, reject)=>{ img[i] = new Image() img[i].src = mulitImg[i] img[i].onload = function(){ //第i張加載完成 resolve(img[i]) } }) } Promise.all(promiseAll).then((img)=>{ //全部加載完成 }) ``` <br/> # <span style="color:#619BE4">阻止雙擊放大和雙指縮放</span> ***** 阻止雙擊放大和雙指縮放 <br/> ### 示例內容 <span style="color:red">1. 解決代碼</span> ``` <script> window.onload = function () { document.addEventListener('touchstart', function (event) { if (event.touches.length > 1) { event.preventDefault(); } }); let lastTouchEnd = 0; document.addEventListener('touchend', function (event) { let now = (new Date()).getTime(); if (now - lastTouchEnd <= 300) { event.preventDefault(); } lastTouchEnd = now; }, false); } </script> ``` <br/> # <span style="color:#619BE4">將屏幕寬度分為24個rem</span> ***** 將屏幕寬度分為24個rem <br/> ### 示例內容 <span style="color:red">1. 解決代碼</span> ``` <script> let html = document.documentElement; let deviceWidth = html.clientWidth; let GridNumber=24; html.style.fontSize = `${deviceWidth / GridNumber}px`; </script> ``` <br/> # <span style="color:#619BE4">URL scheme跳轉方案</span> ***** URL scheme跳轉方案 <br/> ### 示例內容 <span style="color:red">1. 解決代碼</span> ``` function clickMusic() { setTimeout(function() { alert('It seems that your device does not support our feature.'); }, 1000); document.write('<iframe style="border:none; width:1px; height:1px;" src="orpheus://song/1400256289"></iframe>'); } ``` <br/> # <span style="color:#619BE4">滾動穿透</span> ***** 解決移動端遮罩層滾動穿透問題 <br/> ### 示例內容 <span style="color:red">1. 解決代碼</span> ``` function fixedBody() { var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; document.body.style.cssText += 'position:fixed;top:-' + scrollTop + 'px;'; } function looseBody() { var body = document.body; body.style.position = ''; var top = body.style.top; document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top); body.style.top = ''; } var mask = document.getElementById("modal"); function open() { fixedBody(); mask.style.display = 'block'; } function close() { mask.style.display = 'none'; looseBody(); } ``` <br/> # <span style="color:#619BE4">點擊穿透</span> ***** 解決移動端click事件300ms延遲后再執行，導致彈出層消失底層元素被點擊 <br/> ### 示例內容 <span style="color:red">1. 解決代碼</span> ``` 1. 不使用帶有click事件的標簽，統一 touch 事件去管理 2. 加一個遮擋350ms延遲后再去除掉 touchend時禁用默認事件 mask.addEventListener("touchend", function (e) { e.preventDefault(); }) ``` <br/> # <span style="color:#619BE4">檢查控制臺被打開</span> ***** 檢查控制臺被打開 <br/> ### 示例內容 <span style="color:red">1. 解決代碼</span> ``` 第一個是 sindresorhus 大神寫的 devtools-detect，算是全平臺兼容(除IE)，但獨立窗口打開的時候是檢測不到的。 另一個是咱們國人 zswang 寫的 jdetects，目測也是 Chrome only，當然我的靈感也來至于他。 第三種 利用正則 (function () { var re = /x/; var i = 0; console.log(re); re.toString = function () { return alert('第 ' + (++i) + ' 次打開控制臺'); }; })(); ``` <br/> # <span style="color:#619BE4">監聽全屏改變事件</span> ***** 監聽全屏改變事件 <br/> ### 示例內容 <span style="color:red;">1. 解決代碼</span> ``` function checkFull() { var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled; if (isFull === undefined) isFull = false; return isFull; } $(window).resize(function () { if (!checkFull()) { console.log("退出全屏"); } }); ``` <br/> # <span style="color:#619BE4">取消默認事件</span> ***** 取消默認事件 <br/> ### 示例內容 <span style="color:red;">1. 解決代碼</span> ``` window.addEventListener(‘touchmove’, func, { passive: false }) touch-action: none; 應用 CSS 屬性 touch-action: none; 這樣任何觸摸事件都不會產生默認行為，但是 touch 事件照樣觸發 ``` <br/> # <span style="color:#619BE4">新頁預覽</span> ***** 打開新頁面并且預覽代碼 <br/> ### 示例內容 <span style="color:red;">1. 解決代碼</span> ``` if( $(".runCode").length == 0 ) { $(".cnblogs_code").before( $('<p><span class="runCode">運行下面代碼</span></p>') ); }; var isIE = /MSIE|Trident/i.test(navigator.userAgent.toLowerCase()); $(".runCode").on("click", function(evt) { evt.stopPropagation(); var $this = $(this), $p = $this.parent("p").next(".cnblogs_code"), code = $p.text(), code = $p.hasClass('jscode') ? ( "log下面可能有測試的數據, 你可以按F12打開看看(筆記本按fn+F12)" + code + "") : code; if(code.indexOf("<script>")==-1&&code.indexOf("<html>")==-1&&code.indexOf("<body>")==-1){ code = "<script>"+code+"</script>" }; if (!isIE) { window.open(URL.createObjectURL(new Blob([code], { type: "text/html; charset=utf-8" }))); } else { var d = window.open("about:blank").document; d.write(code); d.close(); } }); ``` <br/> # <span style="color:#619BE4">innertHtml添加的script不執行？</span> ***** innertHtml添加的script不執行 <br/> ### 示例內容 <span style="color:red;">1. 重新構造</span> ``` 這并不是瀏覽器的bug，因為w3c文檔就是這么規定的 var html = '<div>html</div><script>alert(1);<\/script>'; var cont = document.getElementById('cont'); cont.innerHTML = html; var oldScript = cont.getElementsByTagName('script')[0]; cont.removeChild(oldScript); var newScript = document.createElement('script'); newScript.type = 'text/javascript'; newScript.innerHTML = oldScript.innerHTML; cont.appendChild(newScript); ``` <span style="color:red;">2. eval大法</span> ``` var html = '<div>html</div><script>alert(1);<\/script>'; var cont = document.getElementById('cont'); cont.innerHTML = html; var oldScript = cont.getElementsByTagName('script')[0]; cont.removeChild(oldScript); var scriptText = oldScript.innerHTML; eval(scriptText); ``` <span style="color:red;">3. jQuery</span> ``` 使用jQuery的html() ``` <br/> # <span style="color:#619BE4">視頻流瀏覽器播放解決方案？</span> ***** 視頻流瀏覽器播放解決方案 <br/> ### 示例內容 <span style="color:red;">1. HLS</span> ``` HLS（Http Live Streaming)?是一個由蘋果公司提出的基于HTTP的流媒體網絡傳輸協議，直接把流媒 體切片成一段段，信息保存到m3u列表文件中， 可以將不同速率的版本切成相應的片；播放器可以直 接使用http協議請求流數據。 優勢： * 可以在不同速率的版本間自由切換，實現無縫播放 * 省去使用其他協議的煩惱 劣勢: * 延遲大小受切片大小影響，不適合直播，適合視頻點播。 * 實時性差，延遲高。HLS 的延遲基本在 10s+ 以上 * 文件碎片。特性的雙刃劍，ts 切片較小，會造成海量小文件，對存儲和緩存都有一定的挑戰 ``` <span style="color:red;">2. RTMP</span> [nginx-rtmp](https://blog.csdn.net/little__SuperMan/article/details/89071764) ``` RTMP（Real Time Message Protocol）由 Adobe 公司提出流媒體協議，并且是私有協議，未完全公 開，用來解決多媒體數據傳輸流的多路復用（Multiplexing）和分包（packetizing）的問題，RTMP協 議一般傳輸的是?flv，f4v?格式流。一般在?TCP?1個通道上傳輸命令和數據。 優勢： * 在于低延遲，穩定性高，支持所有攝像頭格式 * 專為流媒體開發的協議，對底層的優化比其它協議更加優秀 劣勢： * 瀏覽器需要加載 flash插件才能播放。 * RTMP 為 Adobe 私有協議，很多設備無法播放，特別是在 iOS 端，需要使用第三方解碼器才能播放 * 基于 TCP 傳輸，非公共端口，可能會被防火墻阻攔 ``` <span style="color:red;">3. RTSP</span> ``` RTSP（Real-Time Stream Protocol）由Real Networks 和Netscape共同提出的流媒體協議，RTSP協 議是共有協議，并有專門機構做維護。是TCP/IP協議體系中的一個應用層協議.?RTSP協議一般傳輸的 是?ts、mp4?格式的流，RTSP傳輸一般需要?2-3?個通道，命令和數據通道分離。基于文本的多媒體 放控制協議. RTSP定義流格式，流數據經由RTP傳輸； 優勢: 1. RTSP實時效果非常好，適合視頻聊天，視頻監控等方向。 劣勢： 1. 瀏覽器不能直接播放，只能通過插件或者轉碼 ``` <br/> # <span style="color:#619BE4">瀏覽器端解析XML格式文檔？</span> ***** 瀏覽器端解析XML格式文檔 <br/> ### 示例內容 <span style="color:red;">1. 舉例說明</span> ``` function parseXml(xml, arrayTags) { let dom = null; if (window.DOMParser) dom = (new DOMParser()).parseFromString(xml, 'text/xml'); else if (window.ActiveXObject) { dom = new ActiveXObject('Microsoft.XMLDOM'); dom.async = false; if (!dom.loadXML(xml)) throw dom.parseError.reason + ' ' + dom.parseError.srcText; } else throw new Error('cannot parse xml string!'); function parseNode(xmlNode, result) { if (xmlNode.nodeName === '#text') { let v = xmlNode.nodeValue; if (v.trim()) result['#text'] = v; return; } let jsonNode = {}, existing = result[xmlNode.nodeName]; if (existing) { if (!Array.isArray(existing)) result[xmlNode.nodeName] = [existing, jsonNode]; else result[xmlNode.nodeName].push(jsonNode); } else { if (arrayTags && arrayTags.indexOf(xmlNode.nodeName) !== -1) result[xmlNode.nodeName] = [jsonNode]; else result[xmlNode.nodeName] = jsonNode; } if (xmlNode.attributes) for (let attribute of xmlNode.attributes) jsonNode[attribute.nodeName] = attribute.nodeValue; for (let node of xmlNode.childNodes) parseNode(node, jsonNode); } let result = {}; for (let node of dom.childNodes) parseNode(node, result); return result; } ``` <br/> # <span style="color:#619BE4">慣性運動？</span> ***** 慣性運動 <br/> ### 示例內容 <span style="color:red;">1. 舉例說明</span> ``` <!DOCTYPE html> <html lang="zh-cn"> <head> <title>慣性運動</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <style> #box { background: pink; width: 100px; height: 100px; position: absolute; top: 100px; left: 100px; } </style> </head> <body> <div id="box"></div> <script> let boxDOM = document.getElementById('box'); let isDown = false; //是否按下鼠標 let timer = null; let inertance = 1.2; //慣性系數,越大,慣性越不明顯,不能小于0 let fv = 0; //滑動的力度 let startX = 0; boxDOM.onmousedown = function (e) { clearTimeout(timer); //清除定時器 fv = 0; startX = e.clientX; //鼠標按下的位置 isDown = true;//鼠標是否有按下，主要防止用戶是從容器外開始滑動的 } boxDOM.onmousemove = function (e) { if (isDown) { let moveFrame = e.clientX - startX; startX = e.clientX; fv = moveFrame; boxDOM.style.left = moveFrame + boxDOM.offsetLeft + 'px'; } } window.onmouseup = function (e) { if (isDown) { isDown = false; let friction = ((fv >> 31) * 2 + 1) * inertance; // 根據力度套用公式計算出慣性大小,公式要記住 let absFriction = Math.abs(friction); timer = setInterval(function () { fv -= friction; // 力度按 慣性的大小遞減 boxDOM.style.left = fv + boxDOM.offsetLeft + 'px'; if (Math.abs(fv) < absFriction) { // 如果力度減小到小于1了,結束,或者邊界彈回 clearInterval(timer); } }, 20); } } </script> </body> </html> ``` <br/> # <span style="color:#619BE4">瀏覽器渲染過程？</span> ***** 瀏覽器渲染過程 <br/> ### 示例內容 <span style="color:red;">1. 舉例說明</span>   <br/> # <span style="color:#619BE4">瀏覽器自動填充機制？</span> ***** 瀏覽器渲染過程 <br/> ### 示例內容 <span style="color:red;">1. 觸發條件</span> ``` 當瀏覽器遇到type="text"與type="password"的input標簽緊鄰時，會觸發瀏覽器自動填充行為 默認為黃色背景 firefox和360瀏覽器的處理方式是：只要檢測到頁面里有滿足填充機制的， 不管是不是display：none 的，只要檢測到就直接往里填充 ``` <br/>