⑴ 前端開發中技術支持能幫助什麼東西
網站
網站是前端最基本的形態了，最基本的是PC端網站、移動端網站。可以在瀏覽器上打開，也可以在微信或各種APP內打開（這也是一直APP內webview打開的方式）
H5游戲
H5游戲已經見怪不怪了，當年微信退出打飛機游戲的時候，推動了H5游戲的大發展。它無需安裝，通過手機瀏覽器即可訪問，最大的特點就是：輕量、簡單。
H5游戲的開發採用HTML5的canvas等製作，或者也可以使用webgl來做3D的H5游戲。
移動APP
原生的移動APP，是用Native的開發語言做的，比如要開發IOS APP，你可以用Object-c，swift等，要開發Android APP，你可以用JAVA或Kotlin等。
我們這里說的移動APP，是指使用前端技術來做的。前幾年，比較火的Hybird APP框架是ionic，也有國內開發者做的mui和HTML5+框架，這些框架的技術是將html、css和JavaScript打包成一個文件，將文件放到webview中訪問，最後再在外層套上原生應用的殼，生成IOS和Android的安裝文件。這種APP可以做很多簡單的APP，不適合交互比較復雜的APP，因為webview的性能還是存在一定的問題，在Android設備上的卡頓變現比較明顯。
這兩年，以React為語法基礎的React Native和以Vue為語法基礎的Weex框架，成為新一代使用前端技術開發移動APP的框架，它們拋棄webview使用新的渲染機制，極大的提升了APP的性能和體驗。目前這兩者都處在完善階段，在未來很被看好。
桌面應用
以Nodejs和Chromium為基礎的框架Electron，使得使用HTML、CSS、JavaScript開發跨操作系統的桌面應用成為可能，應用可以運行在windows、maxOS和linux系統上。
Chrome APP
Chrome瀏覽器上運行的插件，是運行在Chrome上的HTML應用，完全使用前端技術開發製作。
2010年Google推出了基於Chrome開發的PC端操作系統Chrome OS，特點就是速度快，設計簡潔等，相對應的市場上也推出了很多基於Chrome OS的筆記本電腦，廠商有三星和戴爾等。
微信小程序
2017年1月，微信退出小程序，曾一度引爆前端行業。
小程序按照前端技術來設計開發，也做好了系統的兼容和不同設備的適配的設計，開發者只需要專注於實現業務代碼即可。所以，只要熟悉前端技術就可以很快的做出一個小程序。
Web VR、Web AR
這兩年，新興並大火的技術是人工智慧和機器學習，緊接著的應該就是VR、AR了吧，去年年底QQ和支付寶都在AR和VR方面做出嘗試，在搶紅包上進行實踐。
前端技術webgl，可以在瀏覽器上很好的實現3D場景，Three.js是這方便很好的JavaScript框架。Chrome瀏覽器已經兼容Web VR，配合Daydream View，可以瀏覽Web VR頁面。
⑵ 前端瀏覽器緩存機制
在前端開發中，性能是一個永恆的話題，沒有最好，只有更好。判斷一個網站性能好壞，一個直入眼觀的即是網頁的反應速度，有一個方式就是使用緩存，一個優秀的緩存策略可以縮短網頁請求的時間，減少延遲，並且網頁可以重復利用，還可以減少帶寬，降低網路負荷。
1： 為什麼需要緩存？
a：緩存可以減少用戶等待時間，提升用戶體驗
b：減少網路帶寬消耗
c：降低伺服器壓力
Note：緩存使用不當，也會造成『臟數據』問題
2：常見的緩存類型
強緩存 -
Expires伺服器端設置，表示該資源的過期時間，會有弊端，客戶端時間和伺服器時間不一致的問題。
Cache-Control：max-age表示緩存資源的最大生命周期，單位是秒
所以Expires 結合 Cache-Control 一起使用，大型網站中一般比較適用
協商緩存-
Last-Modified：值為資源的最後更新時間，隨伺服器response返回
If-Modified-Since：通過比較兩個時間來判斷資源在兩次請求期間是否有過修改，如果沒有，則命中協商緩存
Etag：表示資源內容的唯一標識，即資源的消息摘要
If-None-Match：伺服器通過比較請求頭中的If-None-Match與當前資源的Etag是否一致來判斷資源是否在兩次請求期間有過修改
3：緩存流程圖示：
a：瀏覽器會先檢測強緩存類型（Cache-Control 或者 Expires）是否有效；命中直接瀏覽器本地獲取緩存資源
b：未命中。伺服器會根據請求頭Request Header驗證這個資源是否命中協商緩存，稱之為HTTP二次驗證，命中，伺服器返回請求，但返回資源，而是告訴客戶端直接中直接從瀏覽器緩存中獲取
Note：
1.強緩存不會發生請求，協商緩存存在伺服器請求
2.當協商緩存也未命中時，則伺服器會將資源發送到客戶端
3.F5刷新頁面，會跳過強緩存
4.Ctrl+F5刷新頁面，跳過強緩存和協商緩存
5.不會緩存的情況
HTTPS POST請求 根據Cookie獲取認證信息 Request Header Cache-Control：no-cache， max-age=0
6.小故事大道理
上文對整個概念做了闡述，還是不夠形象，我們來通過幾個小故事生動理解一下：
故事一：Last-Modified
瀏覽器：Hi，我需要 jartto.min.js 這個文件，如果是在 Last-Modified: Fri Feb 15 2019 19:57:31 GMT 之後修改過的，請發給我。
伺服器：（檢查文件的修改時間）
伺服器：Oh，這個文件在那個時間之後沒有被修改過，你已經有最新的版本了。
瀏覽器：太好了，那我就顯示給用戶了。
故事二：ETag
瀏覽器：Hi，我需要 jartto.css 這個文件，有沒有不匹配 3c61f-1c1-2aecb436 這個串的
伺服器：（檢查 ETag…）
伺服器：Hey，我這里的版本也是 3c61f-1c1-2aecb436，你已經是最新的版本了
瀏覽器：好，那就可以使用本地緩存了
⑶ router(History,hash)前端路由機制
前端路由機制
前端路由，顧名思義就是一個前端不同頁面的狀態管理器,可以不向後台發送請求而直接通過前端技術實現多個頁面的效果。
前端路由機制原理及兩種實現方式
一、History
History 介面允許操作瀏覽器的曾經在標簽頁或者框架里訪問的會話歷史記錄。
用戶訪問網頁的歷史記錄通常會被保存在一個類似於棧對象中，即history對象：
history 對象包含用戶（在瀏覽器窗口）訪問過的url
history對象是window對象的一部分，可以通過window.history屬性進行訪問。
基本的API用法如back、forward、go不做多解釋，可以參考MDN
重點解釋html5新增的API：
1、history.pushState（） //在history對象中添加一條新的瀏覽記錄
2、History.replaceState() // 是替換history中的當前記錄
3、history.state //是一個屬性，可以得到當前頁的state信息。
4、window.onpopstate //是一個事件，在點擊瀏覽器後退按鈕或js調用forward()、back()、go()時觸發。
(和它相似的一個方法叫做onhashchange，onhashchange是老API, 瀏覽器支持度高, 本來是用來監
聽hash變化的, 但可以被利用來做客戶端前進和後退事件的監聽，onpopstate是專門用來監聽瀏覽器
前進後退的, 不僅可以支持hash, 非hash的同源url也支持。)
history.pushState與History.replaceState的區別
history.pushState和History.replaceState都接收三個參數：即（data[,title][,url]）
狀態對象（state Object）：一個object，與pushState方法創建的新歷史記錄條目關聯。
標題：一般傳null
地址（url）：新的歷史記錄條目的地址。
pushState和replaceState都會操作瀏覽器的歷史記錄，並且不會引起頁面的刷新。
不同之處在與：一個新增，一個替換。
History 模式是 HTML5 新推出的功能，比之 Hash URL 更加美觀
一、hash
我們經常看到在url中出現#符號，這個在路由中出現的#，叫做hash，很多大型框架的路由系統都是由hash實現的。
上面提到一個方法onhashchange事件，用來監聽hash變化，也可以被利用來做客戶端前進和後退事件的監聽。
⑷ 前端開發需要掌握什麼技術
一名合格的前端開發工程師，不單單需要掌握前端必須的各種技術，同時還要掌握其它技術，需要掌握一點後台的知識，同時也要對網站構架有一定的了解，這樣才可以稱之為一個合格的Web前端開發工程師。至於Web前端的薪資情況，需要根據個人能力而定。下面分享一份Web前端的學習路線。
1、PC端頁面製作與動畫特效
學習HTML+CSS搭建網頁、CSS動畫特效、PhotoShop切圖等基礎知識，獲得初級Web前端工程師技能，主要進行PC端網頁製作與樣式設計實現，能夠配合UI設計師進行項目開發。
2、移動端頁面製作與響應式實現
講解移動端布局與設備適配、響應式設計與實現等，獲得移動端頁面適配工程師技能，主要進行移動端網頁的布局製作與樣式設計實現。可以適配各種手機尺寸，並能利用響應式進行移動端與PC端適配。
3、JavaScript與jQuery開發
同HTML5基礎知識一樣，JavaScript開發與jQuery開發是職業晉升必備的技能包，獲得中級Web開發工程師技能，主要進行頁面行為交互，實現網站常見特效，加輪播圖，選項卡，拖拽效果等，並能配合UI和後端進行項目開發。
4、HTML5高級框架技術開發
常用的Vue框架開發，React框架開發，Angular框架開發，數據可視化技術。可獲得中級Web前端工程師技能，主要適用框架開發企業項目，實現單頁面應用開發。可以完成復雜的數據交互應用場景，具備獨立開發項目能力。
5、全棧前後端技術開發
Node.JS技術，其他後端技術，如Java或PHP。可獲得高級Web前端工程師技能，主要進行前後端全棧樣式開發，能獨立完成一個中小型項目的前後台，對於網站開發有著非常熟練的編程能力。
可以從零開始，一步步的掌握前端開發的各項相關技能，最終達到企業對初級前端開發工程師、中級前端開發工程師、高級開發工程師等職位的要求。
學web前端一般在2萬左右，4-6個月左右的時間。應該根據自己的實際需求去實地看一下，先好好試聽之後，再選擇適合自己的。只要努力學到真東西，前途自然不會差。
⑸ 什麼是前端架構
架構設計的最重要目的是為了進行整體系統概覽，以及開發方向指導。
而架構要包含的內容，簡單說就是下面四個
1、系統間關系
2、系統內關系
3、應用內架構
4、系統規范與原則
而架構的原則主要是三個方面
1、架構的合適：架構就像衣服，不能太長，也不能太短
2、可擴展的：架構需要充分考慮擴展性
3、持續不斷的：架構不是一次性物品，是一個跟著軟體生命周期的長期過程
⑹ 前端http請求細節——Cache-Control（緩存機制）
請求和響應中的 Cache-Control 指令並不完全相同，具體可以查看 這里 ，包括指令的具體意思，這里不過多贅述。（默認值：private）
瀏覽器的緩存機制是根據 HTTP 報文的緩存標識進行的，瀏覽器第一次向伺服器發起該請求後拿到請求結果，會根據響應報文中 HTTP 頭的緩存標識，決定是否緩存結果。
瀏覽器緩存策略分為兩種：強制緩存和協商緩存。
強制緩存不會向伺服器發送請求，直接從緩存中讀取資源，可以看到請求返回的狀態碼都是200，並且 Size 代表該緩存的位置。
瀏覽器讀取緩存的順序為memory –> disk。
三級緩存原理 (訪問緩存優先順序)：
在瀏覽器中，瀏覽器會在js，字體，圖片等文件解析執行後直接存入內存緩存中，那麼當刷新頁面時只需直接從內存緩存中讀取(from memory cache)；而css文件則會存入硬碟文件中，所以每次渲染頁面都需要從硬碟讀取緩存(from disk cache)。
為什麼CSS會放在硬碟緩存中？
因為CSS文件載入一次就可渲染出來,我們不會頻繁讀取它,所以它不適合緩存到內存中,但是js之類的腳本卻隨時可能會執行,如果腳本在磁碟當中,我們在執行腳本的時候需要從磁碟取到內存中來,這樣IO開銷就很大了,有可能導致瀏覽器失去響應。
若伺服器的資源最後被修改時間 > If-Modified-Since的欄位值
則重新返回資源，狀態碼為200；否則則返回304，代表資源無更新，可繼續使用緩存文件
If-None-Match 的欄位值 = 該資源在伺服器的Etag值
一致則返回304，代表資源無更新，繼續使用緩存文件；不一致則重新返回資源文件，狀態碼為200。
ETag 和 Last-Modified 區別
參考鏈接：
https://juejin.im/entry/5ad86c16f265da505a77dca4
https://www.cnblogs.com/suihang/p/12855345.html
https://www.jianshu.com/p/54cc04190252
⑺ 前端是什麼意思
移動前端開發和web前端開發都屬於前端開發，具體有以下區別。 1、業務的應用場景 web前端開發主要指傳統的PC端網頁開發，頁面主要是運行在PC端瀏覽器中，移動前端開發出來的頁面主要是運行在手機上。直觀上會感覺，PC端頁面大一些，移動端頁面小一些，但是根據開發經驗，頁面大可並不代表書寫的代碼復雜，頁面小也並不意味著開發簡單，難與易主要還是取決於具體的業務需求。 2、新技術的使用由於在移動端主要以webkit內核為主，對於HTML5等新技術支持的更好，所以可以更大范圍的使用新技術，而PC端開發由於很多場景下要求兼容IE等老版本瀏覽器，出於瀏覽器兼容性的考慮，有些情況下限制了新技術的使用。 3、頁面的適配性傳統PC端的頁面開發一般都會選擇給頁面設定一個固定寬度，兩側有留白，但是移動端的頁面由於其載體手機屏幕比PC要小很多，一般都會選擇盡可能多的在手機屏幕上顯示內容，這就要求移動端頁面要能夠充分適應各種屏幕尺寸的手機並進行最大程度的利用。從這一點上來說移動端頁面的適配難度更高一些。 4、頁面的性能 PC端的網路情況一般比較穩定，都是通過網線或者Wi-Fi連接網路，但是移動端就比較復雜，除了Wi-Fi，還有2G、3G、4G甚至是在幾種不同的網路連接中交替切換也經常發生。不穩定的網路連接對頁面性能帶來的挑戰是移動端的頁面資源不能太大，否則在惡劣網路情況下時，頁面將會無法訪問 ，嚴重影響用戶體驗。 5、框架選型由於移動端網路情況的不穩定，導致我們在移動端頁面框架選型時，一般只考慮小而美的框架，例如像zepto.js這樣的壓縮之後只有9.6K，就能滿足一般業務的需要，如果是想要構建更復雜的單頁面應用，可以選擇像vue.js這樣的框架，功能強大，但體積壓縮後卻只有20多K。而web端相對選擇的范圍就比較大，一些比較重型的框架也可以根據項目需求加以考慮，例如古老但龐大的ext.js，依然憑借著眾多UI組件活躍在一些企業的後台管理系統項目中。(7)前端治本機制擴展閱讀 Web前端開發需要掌握的技術： 1、熟練掌握前端開發技術(HTML5、JS、JSON、XHTML、CSS3)，了解各項技術的相關標准。 2、掌握Ajax非同步編程，能夠寫出高性能、可復用的前端組件。 3、對OO、MVC、MVVM等編程思想、前端框架有深刻理解，熟練掌握一個前端框架（常用前端框架 Vuejs，AngularJS，React，Bootstrap，QUICK UI，移動端有：Frozen UI，weUI ，SUI，MUI，AUI）了解其原理（框架有很多，選擇兩三個主流的框架，熟練，深度了解才可以）。 4、善於Web性能優化，可訪問性、對SEO等有良好的體驗；理解表現層與數據層分離的概念、 Web語義化（這些也是在找工作中，很有用的加分項）。 5、了解前端安全機制，熟悉HTTP協議以及瀏覽器緩存策略。 6、熟悉常見JS開發框架源碼實現，（如：prototype、jQuery、Mootools，Ext， Dojo，underscore、YUI、Kissy），至少熟練一種（當然也不要去選一些用的人很少的框架，要明白大項目都是團隊做，不能自己搞一套）。 7、擁有良好的代碼編寫，設計文檔撰寫的經驗，熟練使用Git等版本控制工具。 8、對常見的瀏覽器兼容問題有清晰的理解，並有可靠的解決方案，如IE6/7/8/9、 Firefox、Safari、Chrome。 9、具有較高的審美（這個很重要，多去見識一些模板，高端的項目，就能感覺到有多大的差距）。
⑻ 前端性能優化總結(一)-js、css優化
移動互聯網時代，用戶對於網頁的打開速度要求越來越高。首屏作為直面用戶的第一屏，其重要性不言而喻。優化用戶體驗更是我們前端開發非常需要 focus 的東西之一。
從用戶的角度而言，當打開一個網頁，往往關心的是從輸入完網頁地址後到最後展現完整頁面這個過程需要的時間，這個時間越短，用戶體驗越好。所以作為網頁的開發者，就從輸入url到頁面渲染呈現這個過程中去提升網頁的性能。
所以輸入URL後發生了什麼呢？在瀏覽器中輸入url會經歷域名解析、建立TCP連接、發送http請求、資源解析等步驟。
http緩存優化是網頁性能優化的重要一環，這一部分我會在後續筆記中做一個詳細總結，所以本文暫不多做詳細整理。本文主要從網頁渲染過程、網頁交互以及Vue應用優化三個角度對性能優化做一個小結。
首先談談拿到服務端資源後瀏覽器渲染的流程：
關鍵渲染路徑是瀏覽器將 HTML、CSS、JavaScript 轉換為在屏幕上呈現的像素內容所經歷的一系列步驟。也就是我們剛剛提到的的的瀏覽器渲染流程。
為盡快完成首次渲染，我們需要最大限度減小以下三種可變因素:
首先，DOM 和 CSSOM 通常是並行構建的，所以 CSS 載入不會阻塞 DOM 的解析。
然而，由於 Render Tree 是依賴於 DOM Tree 和 CSSOM Tree 的，
所以他必須等待到 CSSOM Tree 構建完成，也就是 CSS 資源載入完成(或者 CSS 資源載入失敗)後，才能開始渲染。因此，CSS 載入會阻塞 Dom 的渲染。
由此可見，對於 CSSOM 縮小、壓縮以及緩存同樣重要，我們可以從這方面考慮去優化。
當瀏覽器遇到 script 標記時，會阻止解析器繼續操作，直到 CSSOM 構建完畢，JavaScript 才會運行並繼續完成 DOM 構建過程。
當頁面中元素樣式的改變並不影響它在文檔流中的位置時（例如：color、background-color、visibility 等），瀏覽器會將新樣式賦予給元素並重新繪制它，這個過程稱為重繪。
迴流（Reflow）
當 Render Tree 中部分或全部元素的尺寸、結構、或某些屬性發生改變時，瀏覽器重新渲染部分或全部文檔的過程稱為迴流。
有時即使僅僅迴流一個單一的元素，它的父元素以及任何跟隨它的元素也會產生迴流。現代瀏覽器會對頻繁的迴流或重繪操作進行優化：瀏覽器會維護一個隊列，把所有引起迴流和重繪的操作放入隊列中，如果隊列中的任務數量或者時間間隔達到一個閾值的，瀏覽器就會將隊列清空，進行一次批處理，這樣可以把多次迴流和重繪變成一次。
當你訪問以下屬性或方法時，瀏覽器會立刻清空隊列:
因為隊列中可能會有影響到這些屬性或方法返回值的操作，即使你希望獲取的信息與隊列中操作引發的改變無關，瀏覽器也會強行清空隊列，確保你拿到的值是最精確的。
避免頻繁操作樣式，最好一次性重寫 style 屬性，或者將樣式列表定義為 class 並一次性更改 class 屬性。
避免頻繁操作 DOM，創建一個 documentFragment，在它上面應用所有 DOM 操作，最後再把它添加到文檔中。
也可以先為元素設置 display: none，操作結束後再把它顯示出來。因為在 display 屬性為 none 的元素上進行的 DOM 操作不會引發迴流和重繪。
避免頻繁讀取會引發迴流/重繪的屬性，如果確實需要多次使用，就用一個變數緩存起來。
對具有復雜動畫的元素使用絕對定位，使它脫離文檔流，否則會引起父元素及後續元素頻繁迴流。
圖片懶載入在一些圖片密集型的網站中運用比較多，通過圖片懶載入可以讓一些不可視的圖片不去載入，避免一次性載入過多的圖片導致請求阻塞（瀏覽器一般對同一域名下的並發請求的連接數有限制），這樣就可以提高網站的載入速度，提高用戶體驗。
將頁面中的img標簽src指向一張小圖片或者src為空，然後定義data-src（這個屬性可以自定義命名，我才用data-src）屬性指向真實的圖片。src指向一張默認的圖片，否則當src為空時也會向伺服器發送一次請求。可以指向loading的地址。注意，圖片要指定寬高。
當載入頁面時，先把可視區域內的img標簽的data-src屬性值負給src，然後監聽滾動事件，把用戶即將看到的圖片載入。這樣便實現了懶載入。
事件委託其實就是利用JS事件冒泡機制把原本需要綁定在子元素的響應事件（click、keydown……）委託給父元素，讓父元素擔當事件監聽的職務。事件代理的原理是DOM元素的事件冒泡。
優點：
例如有一個列表需要綁定點擊事件，每一個列表項的點擊都需要返回不同的結果。
傳統寫法：
傳統方法會利用for循環遍歷列表為每一個列表元素綁定點擊事件，當列表中元素數量非常龐大時，需要綁定大量的點擊事件，這種方式就會產生性能問題。這種情況下利用事件委託就能很好的解決這個問題。
改用事件委託：
輸入搜索時，可以用防抖debounce等優化方式，減少http請求；
這里以滾動條事件舉例：防抖函數 onscroll 結束時觸發一次，延遲執行
節流函數：只允許一個函數在N秒內執行一次。滾動條調用介面時，可以用節流throttle等優化方式，減少http請求；
下面還是一個簡單的滾動條事件節流函數：節流函數 onscroll 時，每隔一段時間觸發一次，像水滴一樣
參考鏈接： https://zhuanlan.hu.com/p/113864878?from_voters_page=true
⑼ web前端緩存機制
前端緩存機制有多種，如瀏覽器緩存、CDN緩存、DNS緩存、代理伺服器緩存等。
CDN全稱是Content Delivery Network，即內容分發網路。CDN的原理是將資源存放在各地的緩存伺服器上，當用戶請求資源時，從就近的伺服器上返回緩存的資源，而不需要每次都從源伺服器獲取，減輕源伺服器的壓力，又能提升用戶的訪問速度。
瀏覽器可以將用戶請求的資源進行緩存，存放在本地。瀏覽器緩存一般通過請求頭來設置。
與瀏覽器緩存有關的頭部有：
瀏覽器會將伺服器的域名與IP地址的映射緩存在本地，這樣用戶在訪問網站時，不用每次都去查詢DNS映射表。
在瀏覽器和伺服器之間架設的一個伺服器 ，這個代理伺服器會幫助瀏覽器去請求頁面，然後將頁面進行處理和壓縮(例如壓縮圖片和文件)，使頁面變小，再傳輸給瀏覽器。大部分代理伺服器都有緩存的功能，如果瀏覽器所請求的文件在它本機中存在且是最新的，就不需要再從源伺服器請求數據，提高了瀏覽速度。
在瀏覽某個頁面時，瀏覽器會判斷頁面的關聯內容，進行預載入。用戶在瀏覽A頁面時，就載入好B頁面，這樣當用戶去訪問B頁面時，B頁面很快就出來，提升了用戶體驗。但這個機制有一定的缺陷，就是預判不一定準確，可能會造成流量和資源的浪費。