原创 輸入網址後發生了什麼
網站文件都是放在服務器上的，服務器地址是一串數字，爲方便記憶會爲其綁定一個域名。 輸入網址—DNS域名解析—建立TCP連接—發送HTTP請求—服務器處理並返回結果—瀏覽器生成頁面 域名解析：先查找本地host文件，如果有則跳過查詢直接訪
2018-12-01 00:06:04
原创 求一個數組中的最大值
求最大值： arr.sort()、arr.reverse() Math.max(...arr) Math.max.apply(null, arr) function findMax(arr){ let max=arr[0];
2018-12-01 00:06:04
原创 requestAnimationFrame和定時器的區別
舊式定時器的問題：執行時機不可控（js異步執行隊列機制、軟硬件實現方式區別） rAf：頁面重繪時立刻執行回調函數，不需要人爲設置執行間隔，避免了過度繪製的問題 參考： https://www.zhangxinxu.com/wordpr
2018-11-28 13:00:16
原创 重排與重繪
當dom的變化影響了元素的幾何屬性（寬高），瀏覽器需要計算頁面元素的佈局變化，對所有元素進行重新排序的的過程被稱爲重排，將重排後的元素渲染至頁面被稱爲重繪。 何時發生： 添加或刪除可見的dom元素 元素位置改變 元素尺寸改變（邊距、邊框寬
2018-11-28 13:00:16
原创 js事件三階段與事件委託
首先明確一個概念， js中事件包含三個階段： 捕獲 到達目標 冒泡 事件委託：將子元素上的事件委託給父元素監聽，從而無需對每一個子元素設置監聽事件。例如ul嵌套多個li，要點擊時alert每個li的innerText <ul id=
2018-11-28 13:00:16
原创 background-image樣式和img標籤如何選擇
background-image的優勢： 節省img標籤所佔用的空間 便於佈局（例如將文字佈局在圖片上，直接使用padding調整即可，使用margin會導致邊距衝突） 什麼情況下應該使用img標籤： 由於搜索引擎不搜索css，所以當圖片
2018-11-26 05:49:19
3
原创 css佈局、flex、響應式、grid
一、常見佈局類型 表格佈局：原始佈局方式，利用表格的特性展示佈局，沒有頁面邏輯且大量冗餘代碼，現在幾乎不用 固定寬：常用960px，移動端縮放表現差，不友好 流式：使用float實現動態浮動，各分辨率下樣式無法保證 flex彈性盒子：簡潔
2018-11-26 05:49:19
5
原创 使用flex實現一個固定在底部的footer
要求： 實現一個footer頁腳，內容不足一頁時在底部顯示，當內容超過一屏高度時依然在內容底部 實現要點： html要設置height爲100% body要設置min-height爲100% 必須直接將內容區包裹在body內，且disp
2018-11-26 05:49:19
原创 原生js實現添加刪除和查詢元素的class
<p id='p' class='dec'>hello</p> .active{ color:red; } .bigger{ font-size:30px; } .dec{ text-decoration:un
2018-11-26 05:49:19
原创 使用border畫正方形、三角形等
<div></div> div{ width:0; border-top:100px solid blue; border-right:100px solid red; border-bottom:10
2018-11-23 05:39:16
原创 性能優化（《建設高性能網站》總結）
1.減少http請求 圖片地圖（指定area） 合成雪碧圖（限定顯示區域，再依次移動圖片），現在常用svg或icon-font 內聯圖片（src屬性內寫入base64文件信息） 合併js和css文件 2.設置CDN（使用戶就近訪問服務器上
2018-11-23 05:39:16
原创 css隱藏元素的方法
仍在文檔流： div{ visibility: hidden; opacity: 0; clip-path: circle(0); } clip-path可以創建一個基於當前元素的剪切區域 不存在文檔流： d
2018-11-22 05:42:25
原创 行內元素和塊元素
塊元素： 前後有換行 可以設置margin和padding 行內元素： 前後無換行 無法設置上下margin，但可以設置padding img標籤是個例外，可以在行內擁有上下margin 若想使行內元素也可以設置上下margin，可使
2018-11-22 05:42:25
原创 margin重疊問題
相鄰垂直元素 <div class='a'>a</div> <div class='b'>b</div> .a{ width:100px; height:100px; background-color: #cc
2018-11-20 06:11:45