昨天去了躺華西渣锦，鄭光明大夫又給我開了700多的藥硝岗，加上上次1000多，都要突破2000大關(guān)了袋毙，沒手術(shù)辈讶，沒住院，就回家吃藥2個月就2000娄猫，這也是沒誰了贱除。使著勁的開藥，藥可以當(dāng)飯吃么媳溺？
這兩天看了關(guān)于響應(yīng)式設(shè)計和瀏覽器原理月幌，HTTP相關(guān)的知識，分享一下悬蔽。
響應(yīng)式設(shè)計
建議：大型的綜合網(wǎng)站還是根據(jù)PC扯躺、平板、手機的情況分開來做樣式；小型并且操作不復(fù)雜的網(wǎng)站录语，例如博客倍啥，還是用響應(yīng)式布局吧，以移動優(yōu)先澎埠，畢竟現(xiàn)在的人除了辦公虽缕，已經(jīng)很少有人像程序員一樣天天用PC了吧。
- 一般的網(wǎng)站就用用media query就行了蒲稳，沒必要用第三方框架氮趋，bootstrap這種玩具還是會影響性能滴，當(dāng)然如果圖方便或者敷衍上司江耀，用用也行剩胁，但用之前還是把不需要的剔除掉
- @media布局關(guān)鍵在兩點：流式布局/斷點設(shè)置
- 布局：一般采用flex、float祥国、百分比昵观、rem等
- 兼容：IE9以下需要引用respond
- 響應(yīng)式設(shè)計的難點：圖片，視頻舌稀，表格索昂，后面在看
- 斷點：bootstrap默認(rèn)斷點，可以借鑒
/ 默認(rèn)為手機端樣式
// 等于或大于 34*16 = 544px（手機橫屏）
@media (min-width: 34em) { ... }
// 等于或大于 48*16 = 768px(平板豎屏)
@media (min-width: 48em) { ... }
// 等于或大于 62*16 = 992px（pc窄屏）
@media (min-width: 62em) { ... }
// 等于或大于 75*16 = 1200px（ pc寬屏）
@media (min-width: 75em) { ... }
// pc超大屏 1380px
@media (min-width: 1380px) { ... }
web是如何工作的
web工作這個話題非常復(fù)雜扩借，涉及到瀏覽器椒惨，協(xié)議棧，系統(tǒng)網(wǎng)卡潮罪，路由器康谆，ISP等等。簡單的舉個例子吧嫉到，你可以把web工作的過程沃暗，簡單的想象成找代購幫你到日本買奶粉。
- HTTP請求包含了需要購買商品的所有信息何恶，包括購買的地址孽锥，回寄的信息，奶粉的品牌细层，質(zhì)量要求惜辑，數(shù)量，價格范圍等
- 客戶端TCP/IP就像本地做代購的疫赎，他將你的信息加上他們自己通訊和防偽標(biāo)志通過協(xié)議棧盛撑，網(wǎng)卡，路由器等傳送給日本的外貿(mào)商捧搞，當(dāng)然日本的外貿(mào)商就是服務(wù)器的TCP/IP,他們早已有了聯(lián)系
- 日本商店就像服務(wù)器應(yīng)用程序抵卫，收到了外貿(mào)商的訂單后就解析您的需求狮荔，拿出合適您的商品交給外貿(mào)商，再快遞回本地代購介粘，本地代購再給您
- 您通過快遞信息殖氏、商品條形碼等附加信息判斷商品的真?zhèn)危⑹褂蒙唐芬霾桑灰捉Y(jié)束
瀏覽器原理
用一個圖來解釋
- 根據(jù)來自服務(wù)器端的HTML代碼形成文檔對象模型（DOM）
- 加載并解析樣式雅采，形成CSS對象模型
- 在文檔對象模型和CSS對象模型之上，創(chuàng)建一棵由一組待生成渲染的對象組成的渲染樹
- 對渲染樹上的每個元素偎谁，計算它的坐標(biāo)，稱之為布局
- 渲染樹上的元素最終展示在瀏覽器里
這里重要要說兩個概念纲堵，一個是Reflow巡雨，另一個是Repaint。這兩個不是一回事席函。
Repaint——屏幕的一部分要重畫铐望，比如某個CSS的背景色變了。但是元素的幾何尺寸沒有變茂附。
Reflow——意味著元件的幾何尺寸變了正蛙，我們需要重新驗證并計算Render Tree。是Render Tree的一部分或全部發(fā)生了變化营曼。這就是Reflow乒验，或是Layout。
所以蒂阱，下面這些動作有很大可能會是成本比較高的锻全。
- 當(dāng)你增加、刪除录煤、修改DOM結(jié)點時鳄厌，會導(dǎo)致Reflow或Repaint
- 當(dāng)你移動DOM的位置，或是搞個動畫的時候妈踊。
- 當(dāng)你修改CSS樣式的時候了嚎。
- 當(dāng)你Resize窗口的時候（移動端沒有這個問題），或是滾動的時候廊营。
- 當(dāng)你修改網(wǎng)頁的默認(rèn)字體時歪泳。
如何避免，請參照以下建議：
- 不要一條一條地修改DOM的樣式露筒。與其這樣夹囚，還不如預(yù)先定義好css的class，然后修改DOM的className
- 把DOM離線后修改邀窃，先把DOM給display:none(有一次reflow)荸哟，然后你想怎么改就怎么改
- 不要把DOM結(jié)點的屬性值放在一個循環(huán)里當(dāng)成循環(huán)里的變量
- 盡可能的修改層級比較低的DOM
- 為動畫的HTML元件使用fixed或absoult的position
- 千萬不要使用table布局
- 盡量簡化和優(yōu)化CSS選擇器,將嵌套程度保持在最低水平
- 在使用滾動時禁用復(fù)雜的懸停動效
HTTP/2
HTTP/1.x的缺陷
- 連接無法復(fù)用：連接無法復(fù)用會導(dǎo)致每次請求都經(jīng)歷三次握手和慢啟動
- Head-Of-Line Blocking：導(dǎo)致帶寬無法被充分利用假哎，以及后續(xù)健康請求被阻塞
- 協(xié)議開銷大
- 安全因素：HTTP/1.x中傳輸?shù)膬?nèi)容都是明文，客戶端和服務(wù)端雙方無法驗證身份
HTTP/2的新特性
- 新的二進(jìn)制格式
- Header壓縮
- 流（stream）和多路復(fù)用（MultiPlexing）
- 優(yōu)先級
基于HTTP /2可以有哪些優(yōu)化規(guī)則鞍历，HTTP/1.x哪些優(yōu)化可以放棄了舵抹，請參照以下文章
HTTP2的Web優(yōu)化
HTTP2提升性能7個建議
