51瀏覽器零碎知識

注意：谷歌瀏覽器的控制檯打印console.log(result),result定義處的打印結果也分爲當前值和最終值，二者常常不一致。當前值直接可見，當前值的右側有個向右的三角號，點擊可獲取最終值。1、引起迴流（Reflow）的操做：（1）改變DOM元素的大小或位置：（2）增長、刪除 DOM 結點時。（3）Resize 窗口的時候（移動端沒有這個問題），或是滾動的時候。（4）設置 style 屬性的值。注：display:none 會觸發 reflow，而 visibility:hidden 只會觸發 repaint，由於沒有發現位置變化。Reflow 的成本比 Repaint 的成本高得多的多。DOM Tree 裏的每一個結點都會有 reflow 方法，一個結點的 reflow 頗有可能致使子結點，甚至父點以及同級結點的 reflow。2、瀏覽器解析工做流程的五個步驟：一個渲染引擎大體包括HTML解釋器，CSS解釋器，JavaScript引擎解析渲染該過程主要分爲如下5個步驟：（1）生成DOM樹：用HTML解析器解析HTML生成DOM樹，放在內存上，（2）生成樣式規則：用CSS解析器解析CSS生成style rules（3）生成Render樹：（1）（2）合併，生成Render樹，放在內存上，（4）佈局Render樹：把Render樹佈局到瀏覽器上（5）繪製Render樹：把Render樹繪製到瀏覽器上![圖片描述](attimg://article/content/picture/201805/20/194545evognvaninidi7lr.png)重繪：尺寸和位置沒有變化迴流：尺寸或位置有變化3、http請求的過程：（1）瀏覽器查找當前URL是否存在本地緩存（2）瀏覽器開啓線程，解析URL，經過CDN、DNS找到服務器（3）瀏覽器經過三次握手，與服務器創建鏈接（4）瀏覽器請求報文--服務器響應報文--瀏覽器接受數據--瀏覽器渲染頁面（5）瀏覽器與服務器經過四次揮手，斷開鏈接4、主要瀏覽器的內核及其前綴（1）IE trident -ms-（2）歐朋 presto -o-（3）谷歌 webkit -webkit-（4）火狐 gecko -moz-5、棧和隊列的區別（1）棧：先進後出（2）隊列：先進先出6、驗證用戶是否登陸的邏輯：1)用戶密碼登陸時，在後臺的req中記住session.2)若是用戶保存登陸密碼，則記住cookie，不然把當前用戶的cookie設置爲空;3)每次用戶須要向後臺進行請求時，進行狀態檢驗：session是否存在？若存在，則繼續進行請求操做，並將session的有效時間從新設置一次；若session不存在，則判斷cookie是否存在？若存在，使用該cookie完成自動登陸，即完成了一次 「 在後臺的req中記住session 」 );若不存在，則頁面重定向到登陸頁面。來源，http://blog.csdn.net/xixi880928/article/details/693893377、怎麼讓Chrome支持小於12px 的文字？span{font-size: 12px;display: inline-block;-webkit-transform:scale(0.8);}8、前端路由與單頁頁面一、路由就是指隨着瀏覽器地址欄的變化，展現給用戶的頁面也不相同。二、傳統的網頁根據用戶訪問的不一樣的地址，瀏覽器從服務器獲取對應頁面的內容展現給用戶。這樣形成服務器壓力比較大，並且用戶訪問速度也比較慢。在這種場景下，出現了單頁應用。三、單頁應用，就是隻有一個頁面，用戶訪問一個網址，服務器返回的頁面始終只有一個，就算用戶改變了瀏覽器地址欄的內容且頁面發生了跳轉，服務器不會從新返回新的頁面。四、優勢：（1）沒有了網絡延遲，用戶體驗會有至關大的提高。後端路由每次訪問一個新頁面的時候都要向服務器發送請求，而後服務器再響應請求，這個過程確定會有延遲。（2）前端路由作單頁面網頁，頁面變了Url也會變，用戶能複製到想要的url。用ajax請求作不到這一點五、缺點：（1）首次加載時間相對較長。在第一次加載的時候，須要將全部前端資源進行加載，前端資源會比多頁面應用大一些，加載時間相對較長。（2）對搜索引擎不友好： 單頁應用只有一個頁面，沒法對每個路由作SEO。（3）沒有合理地利用緩存：使用瀏覽器的前進，後退鍵的時候會從新發送請求。9、擴展谷歌瀏覽器插件的步驟（以「React Developer Tools」爲例）：（1）打開http://www.cnplugins.com/，（2）在「輸入Chrome插件名稱」裏輸入「React Developer Tools」（3）點擊「插件下載」（4）點擊「高速下載器下載」（5）打開chrome://downloads/找到「React Developer Tools」（6）打開chrome://extensions/ ，並將React Developer Tools」拖拽至這個頁面10、清除緩存（1）用ajax請求服務器最新文件，並加上請求頭If-Modified-Since和Cache-Control。xmlHttp.setRequestHeader("If-Modified-Since","0");xmlHttp.setRequestHeader("Cache-Control","no-cache");（2）直接用cache:false（3）用隨機數（4）隨機時間11、不一樣頁面之間的通訊（1）使用localStorage+storageA、使用localStorage.setItem(key,value);添加內容B、使用storage事件監聽添加、修改、刪除的動做（2）使用cookie+setInterval　（3）iframe（4）postmessage　12、window對象window對象是相對於web瀏覽器而言的，它並非ECMAScripta規定的內置對象，內置對象的定義是：「由ECMAScript實現提供的、不依賴於宿主環境的對象，這些對象在ECMAScript程序執行以前就已經存在了。」window對象是宿主對象也就是在必定的環境中才會生成的對象（這裏也就是指瀏覽器），而global對象是在任何環境中都存在的。window對象具體也就是指瀏覽器打開的那個窗口。十3、編程方式（1）面向過程編程：根據業務邏輯直接寫代碼。（2）函數式編程：把運算過程封裝成函數。（3）面向對象編程：對函數進行分類和封裝。十4、動態添加樣式（1）obj.style.width = '400px'; obj.style.height = '300px';（2）obj.style.cssText = "width:400px; height:300px;";十五：設置一個主機用兩塊顯示屏右鍵=>屏幕分辨率=>（多顯示器）複製顯示改成擴展顯示十六：解決：使用驅動器G中的光盤以前須要將其格式化（1）Windows鍵+X（2）輸入chkdsk G:/f（其中G是你U盤的盤符，f是fix修復的意思）。十七：debugger一、在js代碼裏寫debugger；二、刷新網頁；三、按f12四、觸發debugger所在的代碼塊五、按f8(暫停/繼續)、f10(單步執行，不會進入函數內部)、f11(單步進入，會進入函數內部)十8、刪除（360、unlocker）沒法刪除的文件參見：http://www.d9soft.com/school/soft_jiaocheng/37851.html（1）新建記事本，在記事本內容中寫入如下命令：DEL /F /A /Q \\?\%1RD /S /Q \\?\%1（2）將文件另存爲：類型爲「全部文件」，名字爲任意，後綴爲「.bat」的文件；（3）而後將要刪掉的文件拖至這個.bat文件上。十9、用cmd在D盤建立目錄aaa並進入（1）window+r（2）輸入cmd，點擊肯定（3）輸入cd/（回到c盤根目錄）（4）d:（進入d盤）（5）md aaa（6）cd aaa二10、安裝包（1）本地本文件夾安裝 npm install AAA（2）本地全局安裝 npm install -g AAA查看本地全局文件的安裝位置 npm prefix -g（3）開發依賴 npm install AAA --save-dev（4）開發生產依賴 npm install AAA --save不上線的項目用（1）（2），上線的項目用（3）（4）二11、谷歌瀏覽器，開啓「容許網站運行flash」步驟設置----顯示高級設置----隱私設置----內容設置----flash----(勾選)容許網站運行flash二12、cnpm安裝和使用,來源https://npm.taobao.org/一、安裝cnpm:npm install -g cnpm --registry=https://registry.npm.taobao.org二、卸載cnpm:npm install -g cnpm --registry=https://registry.npm.taobao.org三、使用cnpm：cnpm install aaaa或cnpm install node-sass@latest四、查看npm版本：npm -v五、查看cnpm版本：cnpm -v六、npm和cnpm不互斥（四、5能夠前後運行，不會干擾或覆蓋）二十3、安裝某個包的某個版本一、npm install --save-dev react-router@2.8.1二十5、webstorm代碼衝突解決```javascript<<<<<<< HEAD本地向服務器提交的內容（我寫的）=======服務器下載到本地的內容（人家寫的）>>>>>>> b0ef58d69851fedad4169878a62033c0ce16246c```附：烏班圖1、烏班圖之打開pycharm軟件,編輯內容一、python@ubuntu:~s cd /opt/pycharm-2016.3.1/bin/二、python@ubuntu:/opt/pycharm-2016.3.1/bin$ sudo su三、[sudo]python的密碼: python 四、root@ubuntu:/opt/pycharm-2016.3.1/bin# ls四、root@ubuntu:/opt/pycharm-2016.3.1/bin# ./pycharm.sh2、烏班圖之另起命令頁面ctrl+shift+t3、烏班圖之服務器啓動一、python@ubuntu:/opt/pycharm-2016.3.1/bin$ cd/二、python@ubuntu:/$ ls三、python@ubuntu:/$ cd home/python四、python@ubuntu:/$ sudo su五、[sudo]python的密碼: python 六、root@ubuntu:/home/python#workspace cd audit-web/七、root@ubuntu:/home/python/audit-web# ls八、root@ubuntu:/home/python/workspace audit-web# python manage.py runserver4、WebStrom Live Template 建代碼塊來源：https://blog.csdn.net/liangrongliu1991/article/details/79626960一、File—editor—live templates—javascript，+，abbreviation:(簡寫代碼，好比ccc)，templates text: (詳寫代碼，好比console.log())，define(勾選，好比javascript,typescript)，apply，ok5、函數註釋```javascript/** * Publishes an event so that it can be dispatched by the supplied plugin.//說明函數用途 * @param {object} dispatchConfig Dispatch configuration for the event.//參數 參數數據類型 參數名 參數用途 * @param {object} PluginModule Plugin publishing the event.//參數 參數數據類型 參數名 參數用途 * @param {string} eventName Plugin publishing the event.//參數 參數數據類型 參數名 參數用途 * @return {boolean} True if the event was successfully published.//返回值 返回值數據類型 返回值含義 * @private //全局函數仍是私有函數 */function publishEventForPlugin(dispatchConfig, pluginModule, eventName) {}```附1、獲取某張單色圖片真實顏色的步驟：（1）用微信截圖，在截圖的過程當中，有rgb顏色提示，記下這三組數字；（2）再經過https://www.sioe.cn/yingyong/yanse-rgb-16/轉換成十六進制顏色代碼。