我的收錄,你不知道的,總會在這裏找到答案,本身的強大才是真的強大,但願我寫的也能夠幫到你。javascript
- 1.輸入域名地址
- 2.發送至DNS服務器並得到域名對應的WEB服務器IP地址;
- 3.與WEB服務器創建TCP鏈接;
- 4.服務器的永久重定向響應(從
http://example.com
到http://www.example.com
)- 5.瀏覽器跟蹤重定向地址
- 6.服務器處理請求
- 7.服務器返回一個HTTP響應
- 8.瀏覽器顯示 HTML
- 9.瀏覽器發送請求獲取的資源(如圖片、音頻、視頻、CSS、JS等等)
- 10.瀏覽器發送異步請求
這裏我貼一篇不久前寫的文章 在瀏覽器地址欄鍵入URL,按下回車以後會經歷了那些事html
1.用戶界面 、2.網絡 、3.UI後端 、4.數據存儲 、5.瀏覽器引擎 、6.渲染引擎 、7.js解釋器、前端
流程:解析 html
以構建 dom
樹 ->
構建 render
樹->
佈局 render
樹->
繪製 render
樹java
主要分紅兩部分:渲染引擎(layout engineer或Rendering Engine)
和JS引擎
。web
渲染引擎:負責取得網頁的內容(HTML、XML、圖像等等)、整理訊息(例如加入CSS等),以及計算網頁的顯示方式,而後會輸出至顯示器或打印機。瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣,因此渲染的效果也不相同。全部網頁瀏覽器、電子郵件客戶端以及其它須要編輯、顯示網絡內容的應用程序都須要內核。typescript
JS引擎則:解析和執行javascript來實現網頁的動態效果。最開始渲染引擎和JS引擎並無區分的很明確,後來JS引擎愈來愈獨立,內核就傾向於只指渲染引擎。數據庫
Trident內核
:IE,360,傲遊,搜狗,世界之窗,騰訊等。[又稱MSHTML]
Gecko內核
:Netscape6及以上版本,FF,MozillaSuite/SeaMonkey等Presto內核
:Opera7及以上。[Opera內核原爲:Presto,現爲:Blink;]
Webkit內核
:Safari,Chrome等。[ Chrome的:Blink(WebKit的分支)]
cookie
是網站爲了標示用戶身份而儲存在用戶本地終端(Client Side)
上的數據(一般通過加密),數據會在瀏覽器和服務器間來回傳遞。 sessionStorage
和localStorage
不會自動把數據發給服務器,僅在本地保存。編程
存儲大小:小程序
cookie
數據大小不能超過4k
。sessionStorage
和localStorage
雖然也有存儲大小的限制,但比cookie
大得多,能夠達到5M
或更大。
有期時間:後端
localStorage
存儲持久數據,瀏覽器關閉後數據不丟失除非主動刪除數據;sessionStorage
數據在當前瀏覽器窗口關閉後自動刪除.cookie
設置的cookie過時時間以前一直有效,即便窗口或瀏覽器關閉
跨域問題,設置了HttpOnly
。
調用localstorge
、cookies
等本地存儲方式
經過 visibilityState
的值檢測頁面當前是否可見,以及打開網頁的時間等; 在頁面被切換到其餘後臺進程的時候,自動暫停音樂或視頻的播放
區分用戶是計算機仍是人
的公共全自動程序。能夠防止惡意破解密碼、刷票、論壇灌水
; 有效防止黑客對某一個特定註冊用戶用特定程序暴力破解方式
進行不斷的登錄嘗試。
CDN
緩存更方便 ,突破瀏覽器併發限制 節約cookie
帶寬 ,節約主域名的鏈接數,優化頁面響應速度 防止沒必要要的安全問題
網頁標準
和標準制定機構
都是爲了能讓 web
發展的更‘健康’,開發者遵循統一的標準,下降開發難度,開發成本,SEO
也會更好作,也不會由於濫用代碼致使各類 BUG
、安全問題,最終提升網站易用性。
微格式(Microformats)
是一種讓機器可讀的語義化 XHTML
詞彙的集合,是結構化數據的開放標準。是爲特殊應用而制定的特殊格式
優勢
:將智能數據添加到網頁上,讓網站內容在搜索引擎結果界面能夠顯示額外的提示。
- (1)圖片懶加載,在頁面上的未可視區域能夠添加一個滾動條事件,判斷圖片位置與瀏覽器頂端的距離與頁面的距離,若是前者小於後者,優先加載。
- (2)若是爲幻燈片、相冊等,可使用圖片預加載技術,將當前展現圖片的前一張和後一張優先下載。
- (3)若是圖片過大,可使用特殊編碼的圖片,加載時會先加載一張壓縮的特別厲害的縮略圖,以提升用戶體驗。
- (4)若是圖片展現區域小於圖片的真實大小,則因在服務器端根據業務須要先行進行圖片壓縮,圖片壓縮後大小與展現一致。
能夠看看這篇文章 關於前端優化的一些方案
合理的標籤使用, 主要的互聯網目錄,連接交換和連接普遍度。
- 1.減小dom操做
- 2.部署前,圖片壓縮,代碼壓縮
- 3.優化js代碼結構,減小冗餘代碼
- 4.減小http請求,合理設置 HTTP緩存
- 5.使用內容分發cdn加速
- 6.靜態資源緩存
- 7.圖片延遲加載
能夠看看這篇文章 關於前端優化的一些方案
區別
:優雅降級
是從複雜的現狀開始,並試圖減小用戶體驗的供給,而漸進加強
則是從一個很是基礎的,可以起做用的版本開始,並不斷擴充,以適應將來環境的須要。降級(功能衰減)
意味着往回看;而漸進加強
則意味着朝前看,同時保證其根基處於安全地帶。
- Adobe Flash Socket
- ActiveX HTMLFile (IE)
- 基於 multipart 編碼發送 XHR
- 基於長輪詢的 XHR
- 1.cookie
- 2.session
- 3.url重寫
- 4.隱藏input
- 5.ip地址
- 1.一臺服務器要與
HTTP1.1
兼容,只要爲資源實現GET
和HEAD
方法便可。- 2.
GET
是最經常使用的方法,一般用於請求服務器
發送某個資源。- 3.
HEAD
與GET
相似,但服務器在響應中值返回首部,不返回實體的主體部分。- 4.
PUT
讓服務器用請求的主體部分來建立一個由所請求的URL
命名的新文檔,或者,若是那個URL
已經存在的話,就用幹這個主體替代它。- 5.
POST
起初是用來向服務器輸入數據的。實際上,一般會用它來支持HTML的表單。表單中填好的數據一般會被送給服務器,而後由服務器將其發送到要去的地方。- 6.
TRACE
會在目的服務器端發起一個環回診斷
,最後一站的服務器會彈回一個TRACE
響應並在響應主體中攜帶它收到的原始請求報文
。TRACE
方法主要用於診斷,用於驗證請求是否如願穿過了請求/響應鏈
。- 7.
OPTIONS
方法請求web
服務器告知其支持的各類功能。能夠查詢服務器支持哪些方法或者對某些特殊資源支持哪些方法。- 8.
DELETE
請求服務器刪除請求URL
指定的資源。
rfc2616中進行了定義:
- 1.首行是狀態行包括:HTTP版本,狀態碼,狀態描述,後面跟一個
CRLF
- 2.首行以後是若干行響應頭,包括:
通用頭部,響應頭部,實體頭部
- 3.響應頭部和響應實體之間用一個
CRLF
空行分隔
舉例狀態碼類型:
狀態碼 | 類別 | 緣由短語 |
---|---|---|
1XX | Information(信息性狀態碼) | 接收的請求正在處理 |
2XX | Success(成功狀態碼) | 請求正常處理完畢 |
3XX | Redirection(重定向狀態碼) | 須要進行附加的操做以完成請求 |
4XX | Client Error(客戶端錯誤狀態碼) | 服務器沒法處理請求 |
5XX | Server Error(服務端錯誤狀態碼) | 服務器處理請求出錯 |
204 | 服務器成功處理,但未返回內容。 | |
304 | Not Modified 未修改。 | 所請求的資源未修改,服務器返回此狀態碼時,不會返回任何資源。客戶端一般會緩存訪問過的資源,經過提供一個頭信息指出客戶端但願只返回在指定日期以後修改的資源 |
400 | Bad Request | 客戶端請求的語法錯誤,服務器沒法理解 |
403 | Forbidden | 服務器理解請求客戶端的請求,可是拒絕執行此請求 |
404 | Not Found | 服務器沒法根據客戶端的請求找到資源(網頁)。經過此代碼,網站設計人員可設置"您所請求的資源沒法找到"的個性頁面 |
同源政策的目的,是爲了保證用戶信息的安全,防止惡意的網站竊取數據。
若是非同源,共有三種行爲受到限制
- 1.
Cookie
、LocalStorage
和IndexDB
沒法讀取。- 2.
DOM
沒法得到。- 3.
AJAX
請求不能發送。
要作好防XSS、CSRF、SQL注入攻擊.DDOS攻擊。
XSS概念:
譯爲跨站腳本攻擊,具體是指攻擊者在Web頁面裏插入惡意Script腳本,當用戶瀏覽該網頁時,Script代碼會被執行,從而進行惡意攻擊。
XSS預防:
關鍵
cookie
字段設置httpOnly
輸入檢查,特殊字符 < > / &等,對其進行轉義後存儲
CSRF概念:
本質上講,是黑客將一個http接口中須要傳遞的全部參數都預測出來,而後無論以什麼方式,他均可以根據他的目的來任意調用你的接口,對服務器實現CURD。
CSRF 預防:
使用驗證碼,更高級用圖靈測試
SQL概念:
一般沒有任何過濾,直接把參數存放到了SQL語句當中
SQL預防:
根本上防止
SQL
注入的方法,就是參數化查詢或者作詞法分析。
DDOS概念:
利用
木桶原理
,尋找利用系統應用的瓶頸;阻塞和耗盡;當前問題:用戶的帶寬小於攻擊的規模,噪聲訪問帶寬成爲木桶的短板。DDOS預防:用軟硬件結合的方式來防護是最有效的
- 1.開發規範
- 2.模塊化開發
- 3.組件化開發
- 4.組件倉庫
- 5.性能優化
- 6.項目部署
- 7.開發流程
- 8.開發工具
AMD
和 CMD
是二種模塊定義規範。如今都使用模塊化編程,AMD,異步模塊定義
;CMD,通用模塊定義
。AMD依賴前置,CMD依賴就近。CMD的 API
職責單一,沒有全局require
,AMD的一個API
能夠多用。
mvc是模型(model)-視圖(view)-控制器(controller)
的縮寫,一種軟件設計典範使用MVC的目的是將M和V的實現代碼分離,從而使同一個程序可使用不一樣的表現形式。MVC對應Html,CSS,js。
BFC全稱」Block Formatting Context」
, 中文爲「塊級格式化上下文
」。流體特性:塊狀水平元素,如div元素(下同),在默認狀況下(非浮動、絕對定位等),水平方向會自動填滿外部的容器;BFC元素特性表現原則就是,內部子元素不會影響外部的元素
。
期待的解決方案包括:文件合併文件最小化/文件壓縮使用CDN託管緩存的使用(多個域名來提供緩存)其餘。
- 1.應用字符集的選擇,選擇UTF-8編碼
- 2.語言書寫習慣&導航結構
- 3.數據庫驅動型網站
所謂的標準字體是多數機器上都會有的,或者即便沒有也能夠由默認字體替代的字體。 方法:
- 用圖片代替
- web fonts在線字庫,如
Google Webfonts,Typekit
等等;www.chinaz.com/free/20...;@font-face
,Webfonts(字體服務例如:Google Webfonts,Typekit等等。)
- (1)瞭解背景知識:歷史、現狀、特色、應用領域、發展趨勢
- (2)搭建開發環境,編寫HelloWorld
- (3)聲明變量和常量
- (4)數據類型
- (5)運算符
- (6)邏輯結構
- (7)通用小程序
- (8)函數和對象
- (9)第三方庫、組件、框架
- (10)實用項目
散列表(也叫哈希表)
,是根據關鍵碼值直接進行訪問的數據結構。也就是說,它經過把關鍵碼值
映射到表中一個位置來訪問記錄,以加快查找的速度。這個映射函數叫作散列函數,存放記錄的數組叫作散列表
。
靜態:
網頁內容任何人在任什麼時候間訪問都是不變的
動態:
網頁內容不一樣人在不一樣時間訪問多是不一樣的
- DDL:數據定義語句
CREATE/DROP/ALTER…
- DCL:數據控制語句
GRANT…
- DML:操做操做語句
INSERT/UPDATE/DELETE
- DQL:查詢語句
SELECT
解決某元素中「子元素
」的佈局方式,爲佈局提供最大的靈活性。
設爲 flex
佈局之後,子元素的 float、clear
和vertical-align
屬性將失效!!!
display:flex
; 屬性align-self
定義子元素的位置。
- 1.聲明viewport元標籤
- 2.使用流式佈局
- 3.全部容器使用相對尺寸,不用絕對尺寸
- 4.(最重要原則)使用CSS3 Media Query技術
- 1.不一樣瀏覽器的標籤默認的內.外補丁不一樣。*{margin:0;padding:0;}
- 2.圖片默認有間距使用float屬性爲img佈局
- 3.居中問題(而FF默認爲左對齊)
margin: 0 auto;
- 4.CSS 兼容前綴
-ms- IE
、-moz- Firefox
、-o- Opera
、-webkit- Chrome
、- 5.使用CSS Hack 如:
+:IE6,7的前綴
、-:IE6的前綴
- (1)
Canvas繪圖
- (2)
SVG繪圖
- (3)
地理定位
- (4)
Web Worker
web worker
是運行在後臺的 JS,獨立於其餘腳本,不會影響頁面的性能。
- (5)
Web Storage
- (6)
Web Socket
- 1.複雜的選擇器
- 2.彈性佈局
- 3.動畫
- 1.它是JavaScript的一個超集,並且本質上向這個語言添加了可選的靜態類型和基於類的面向對象編程。
- 2.
TypeScript
擴展了JavaScript的語法,因此任何現有的JavaScript程序能夠不加改變的在TypeScript下工做。TypeScript
是爲大型應用之開發而設計,而編譯時它產生 JavaScript 以確保兼容性。
- Angular帶有比較強的排它性的
- React主張是函數式編程的理念,侵入性沒有Angular那麼強,主要由於它是軟性侵入。
- Vue 漸進式的
**優勢:**用戶體驗好 、良好的先後端分離。
缺點:
- 1.不利於SEO。
- 2.初次加載耗時相對增多。
- 3.導航不可用,若是必定要導航須要自行實現前進、後退。
每一個模塊內部,module
變量表明當前模塊。
這個變量是一個對象,它的exports
屬性(即module.exports
)是對外的接口。加載某個模塊,實際上是加載該模塊的module.exports
屬性。
- 1.使用 CDN
- 2.圖片懶加載
- 3.使用外部 JavaScript 和 CSS
- 4.壓縮 JavaScript 、 CSS 、字體、圖片等
- 5.優化 CSS Sprite
- 6.減小 HTTP 請求數
- 7.減小 DNS 查詢
- 8.減小 DOM 元素數量
- 9.減小 DOM 操做
- 10.把腳本放在頁面底部 能夠看看這篇文章 關於前端優化的一些方案
- HTTP是一個客戶端和服務器端請求和應答的標準
(TCP)
。HTTP1.1
和2.0
協議的區別:HTTP1.1
不支持header
數據的壓縮,而2.0
支持
若有不足的地方,歡迎指出來,請不要噴我,若是你是大佬,請添加更多的有關問題幫助菜鳥學習,做爲一個菜鳥我知道大佬不少,可是菜鳥更多,看到了,學到了就是本身的。歡迎留言,我回及時回覆。