⑴ java 後台返回response entity(byte[]) 做文件下載時,前端頁面需要等待很長世間,
如果你要做下載完成後頁面跳轉那麼你前台頁面就必須得等待後台的返回結果,等很長時間是正常的,做個同步ajax就可以解決,當然了 頁面你要做蒙層,否則誤操作你還得重來。
⑵ 前端頁面有哪三層構成,分別是什麼作用是什麼
最准確的網頁設計思路是把網頁分成三個層次,即:結構層、樣式層、行為層。
HTML:結構層
網頁的結構或內容層是該頁面的基礎HTML代碼。正如房屋的框架為房屋的其他部分構建了一個堅實
的基礎,HTML的堅實基礎創建了一個可以在其上創建網站的平台。
結構層用於存儲客戶想要閱讀或查看的所有內容。HTML結構可以包含文本和圖像,它包括訪問者用
於瀏覽網站的超鏈接。這是在符合標準的HTML5中編碼的,可以包括文本,圖像和多媒體(視頻,音頻等)。
網站內容的每個方面都應該在結構層中表示。這允許關閉JavaScript的客戶或無法查看整個網站的
CSS訪問許可權的客戶(如果不是所有功能)。
CSS:樣式層
該層指示結構化HTML文檔如何看待網站的訪問者,並由CSS(層疊樣式表)定義。這些文件包含有
關如何在Web瀏覽器中顯示文檔的樣式說明。樣式層通常包括基於屏幕大小和設備更改站點顯示的
媒體查詢。
網站的所有視覺樣式都應位於外部樣式表中。您可以使用多個樣式表,但請記住,每個CSS文件都需
要HTTP請求才能獲取它,從而影響站點性能。
JavaScript:行為層
行為層使網站具有交互性,允許頁面響應用戶操作或基於一組條件進行更改。JavaScript是行為層最
常用的語言,但CGI和PHP也經常被使用。
當開發人員引用行為層時,大多數都是指在Web瀏覽器中直接激活的層。您可以使用此圖層直接與
DOM(文檔對象模型)進行交互。在內容層中編寫有效的HTML對於行為層中的DOM交互非常重
要。在構建行為層時,應該像使用CSS一樣使用外部腳本文件來優化速度和性能。
(2)前端下載文件等待層擴展閱讀:
分層的一些好處是:
共享資源:當您編寫外部CSS或JavaScript文件時,站點上的任何頁面都可以使用該文件。如果
您需要對該文件進行更改,也許更新網站上的某些排版樣式,則使用該樣式表的每個頁面都會得到
更改。沒有必要單獨編輯網站的每個頁面,這對於大型網站來說可能是一項艱苦的任務。
下載速度更快:首次由客戶下載腳本或樣式表後,Web瀏覽器會對其進行緩存。由於這些共享
資源現在包含在瀏覽器的緩存中,因此瀏覽器中請求的其他頁面載入速度更快,從而提高了整體頁
面速度和性能。
多人團隊:如果您有多個人同時在網站上工作,您可以使用允許文件簽入和簽出的系統,以確
保每個人都使用最新版本。如果樣式和行為與結構文檔交織在一起,那就更難了。
搜索引擎優化:一個明確分離風格和結構的網站可能會對搜索引擎有更好的表現,因為它們可以更有效地抓取內容並理解頁面而不會陷入視覺風格和行為信息。
輔助功能:外部樣式表和腳本文件更易於人們和瀏覽器訪問。屏幕閱讀器等軟體可以更輕松地
處理結構層中的內容,而無需處理無論如何都無法使用的樣式。
向後兼容性:使用單獨的開發層設計的站點更可能向後兼容,因為無法使用某些CSS樣式或禁
用了JavaScript的瀏覽器和設備仍然可以查看HTML。然後,您可以使用支持它們的瀏覽器的功能逐
步增強您的網站。
⑶ 前端用iframe要等待很長一段時間有什麼解決方案嗎
可以考慮後端獲取內容後再在前端顯示。
iframe為內聯框架,相當於內嵌一個網頁,所以需要像打開網頁一樣,等待網頁正常打開。
⑷ 前端js 後端python 如何用ajax下載文件
前端js改成這樣試試:
var form = $("<form></form>").attr("action", "/cgi-bin/rpt_data_toExcel.py").attr("method", "post");
form.append($("<input></input>").attr("type", "hidden").attr("name", "fileName").attr("value", "results.xls"));
form.appendTo('body').submit().remove();
⑸ java response.getOutputStream()實現多個文件下載,已經拿到兩個位元組數組的list,下載的時候如何同時下載
可以一個介面傳多個文件,每個文件中間用特定符號拆分,也可以寫一個介面前端多次調用,將請求頭的文件格式改為blob,前端獲取文件流後調用下載
⑹ Web前端工程師要掌握的Web前端性能優化方法
今天小編要跟大家分享的文章是關於Web前端工程師要掌握的Web前端性能優化方法。正在從事Web前端工作的小夥伴們來和小編一起看一看吧,希望本篇文章能夠對正在從事Web前端工作的小夥伴們有所幫助。
Web前端需要性能優化么?
性能優化一直以來都是前端工程領域中的一個重要部分。很多資料表明,網站應用的性能優化對於提高用戶留存、轉化率等都有積極影響。可以理解為,提升你的網站性能,就是提升你的業務數據(甚至是業務收入)。
性能優化廣義上包含前端優化和後端優化。後端優化的關注點更多的時候是在增加資源利用率、降低資源成本以及提高穩定性上。相較於後端,前端的性能優化會更直接與用戶的體驗掛鉤。從用戶體驗側來說,前端服務
5s的載入時間優化縮減80%(1s)與後端服務50ms的響應優化縮減80%(10ms)
相比,用戶的體驗提升會更大。因此很多時候,與體驗相關的性能的瓶頸會出現在前端。
我和一些同學接觸的過程中,發現作為前端工程師,大家其實都具備一定的性能優化意識,同時也有自己的優化「武器庫」,例如懶載入、資源合並、避免reflow
等等。雖然大家對性能優化都有自己的思路,不過大多是分散在某幾個點,較難形成一個完整的體系。
一、html文檔結構標簽語義化
1、首先什麼是語義化呢?
語義化是指用合理HTML標記以及其特有的屬性去格式化文檔內容。機器在需要更少的人類干預的情況下能夠研究和收集信息,讓網頁能夠被機器理解,最終讓人類受益。即用正確的標簽做正確的事。
2、語義化的好處或者說存在的意義
①有利於搜索引擎抓取
②結構清晰的HTML在團隊合作中的作用:代碼可讀、便於維護、提高開發效率、快速達成共識、利於二次開發。
③有利於盲人屏幕閱讀器
二、css、js文件數量及大小
優化一般對於css、js是建議使用外聯式來進行導入。我們可以對css、js做相應的規劃也可以減少css、js的個數以減少http請求。同時也要注重減少重復代碼,注重代碼重復利用,以達到用最少的代碼干最多的事。同時當項目要投入上線使用的時候,可以對css、js文件進行壓縮,文件的減小可以加速文件的鏈接導入,以便加速網頁的載入渲染。
可通過使用Webpack,gulp等工具對Js文件進行合並。
三、圖片的數量和大小
多個伺服器請求會對站點的性能產生顯著的影響。對一張圖片進行導入又是一個http請求,因此我們應該減少圖片的導入數量以便減少http請求。此處,我們必須提到一個名詞「css精靈spirit」。css精靈是指包含多個不同的圖標、按鈕或圖形的單個圖像。因此我們可以把多張背景圖片合並為一張然後對背景圖片進行相應的定位。同時使用PNG8格式的圖片相對於GIF來說比較少。而對於內容圖片,可以對其進行適當的壓縮,可以加快文檔內容載入,或者如果是需要用戶下載的圖片,小的圖片可以加快用戶下載的速度。
使用較為廣泛的Web圖片格式有:JPEG/JPG、PNG、WEBP、Base64、SVG。
1.JPEG/JPG
特點是有損壓縮,體積小,載入快,不支持透明。
使用場景:JPG適合用於呈現熱菜豐富的圖片,在日常的開發中,JPG圖片經常作為大的背景圖、輪播圖或是Banner圖。比如兩大電商網站對大圖片的處理,就是對JPG圖片應用場景的最佳寫照。用JPG來呈現大圖片,既可以保留圖片的質量,又不會擔心圖片的體積,是一種比較廣泛使用的方案。
缺點:在處理一些矢量圖形和logo等這些線條感很強、顏色對比強烈的圖片時,認為壓縮就導致圖片模糊非常明顯。另外,JPG圖像不支持透明度處理,透明圖片只能用PNG來呈現了。
2.PNG-8和PNG-24
特點是無損壓縮、質量高、體積大、支持透明
優點:無損壓縮的高保真圖片格式。8和24都是二進制數的位數,8位的PNG支持256中顏色,24位的PNG可以支持1600萬種顏色。在不考慮文件大小隻在乎最佳的顯示效果時,推薦使用PNG-24。但是在適合使用PNG時會優先選擇PNG-8
應用場景:主要用PNG來呈現小的LOGO、顏色簡單對比強烈的圖片或是背景。
3.SVG
特點是文本文件,體積小,不失真,兼容性好
優點:SVG是一種基於XML語法的圖像格式。SVG對圖像的處理不是基於像素,而是基於對圖像的形狀描述。
和JPG、PNG相比較,SVG文件體積更小,可壓縮性更強。SVG作為矢量圖最大的優點在於圖片可以無限放大還不失真,一張SVG圖片可以適配多種解析度。另外SVG是文本文件,可以像寫代碼一樣定義SVG,放在HTML中稱為DOM的一部分。也可以把對圖像的描述寫入以.svg為後綴的文件中,在img標簽中引入即可。
4.WebP
優點:WebP是一款比JPG、PNG等在壓縮方面更加優越的圖片格式,同時也不會影響其圖片質量,使用該格式時最好將同名文件格式化,當檢測瀏覽器不兼容時自動切換jpg格式
缺點:是一個相對較新的技術,所以對於目前市面上的瀏覽器能否完美的兼容,其可用和實用性就變得很現實了,再好的東西如果沒有好的兼容性,也是非常難以普及和被廣泛使用的
5.Base64
優點:減少請求,加快首屏數據顯示。對於jpg格式的圖片,每一個圖片相當於一次http請求,圖片多了的話,伺服器耗性能比較嚴重。而將jpg轉化成base64格式的圖片,則極大地減少了請求數,因為Base是文本格式。
缺點:base64格式圖片比原圖大,佔用更多存儲空間,同時,瀏覽器不會對該資源緩存。
使用方法:background:url(data:image/png;base64,{img_data})
應用場景:一般對於小於10KB大小的圖片進行base64轉碼。
至於動態圖有GIF與APNG:後者APNG這東西是mozilla搞出來的,
它是24位的,而且也是動圖,可以容納1680萬種顏色,也是為了取代GIF,但是....也就火狐支持,IE10和chrome,safari全部不行,
如果說gif圖片是卡片機的話,APNG就是單反
四、有效性驗證
除了根據語義加標記之外,HTML文檔還需要用有效的代碼來編寫,如果代碼是無效的,瀏覽器會嘗試解釋標記本身,有時候會產生錯誤的結果。更糟的是,如果發送具有正確的MIME類型的XHTML文檔,理解XML的瀏覽器將不顯示無效的頁面。因為瀏覽器需要知道要使用什麼DTD(文檔類型定義)才能正確地處理頁面,所以對頁面進行有效性驗證要求有DOCTYPE聲明。
有效性驗證工具徑:
①
W3C驗證器(bookmarklet),這是一小段可以存儲在瀏覽器的書簽或收藏夾中的Javascript。單擊這個書簽就會觸發Javascript動作。
②可以訪問http://validator.w3.org/,通過輸入自己的URL來對自己的站點來進行在線驗證。
③使用firefox瀏覽器的可以下載插件FirefoxWebDeveloperExtension
五、雅虎的Web優化最佳實踐
1、內容優化
①盡量減少HTTP請求:常見方法包括合並多個CSS文件和JavaScript文件,利用CSSSprites整合圖像,Image
map(圖像中不同的區域設置不同的鏈接),內聯圖象(使用data:URLscheme在實際的頁面嵌入圖像數據)等。
②減少DNS查找,一般dns查找需要花費20-120ms,Windows的DNS緩存,可以通過ipconfig/displaydns
這個命令來查看。
③避免重定向
④使Ajax可緩存
⑤延遲載入組件:考慮哪些內容是頁面呈現時所必需首先載入的、哪些內容和結構可以稍後再載入,根據這個優先順序進行設定。
⑥
預載入組件:預載入是在瀏覽器空閑時請求將來可能會用到的頁面內容(如圖像、樣式表和腳本)。當用戶要訪問下一個頁面時,頁面中的內容大部分已經載入到緩存中了,因此可以大大改善訪問速度。
⑦減少DOM元素數量:頁面中存在大量DOM元素,會導致JavaScript遍歷DOM的效率變慢。
⑧根據域名劃分頁面內容:把頁面內容劃分成若幹部分可以使你最大限度地實現平行下載。但要確保你使用的域名數量在2個到4個之間(否則與第2條沖突)。
⑨最小化iframe的數量:iframes
提供了一個簡單的方式把一個網站的內容嵌入到另一個網站中。但其創建速度比其他包括JavaScript和CSS的DOM元素的創建慢了1-2個數量級。
⑩
避免404:HTTP請求時間消耗是很大的,因此使用HTTP請求來獲得一個沒有用處的響應(例如404沒有找到頁面)是完全沒有必要的,它只會降低用戶體驗而不會有一點好處。
2、伺服器優化
①使用內容分發網路(CDN):把你的網站內容分散到多個、處於不同地域位置的伺服器上可以加快下載速度。
添加Expires或Cache-Control信息頭:對於靜態內容,可設置文件頭過期時間Expires的值為「Never
expire(永不過期)」;對於動態內容,可使用恰當的Cache-Control文件頭來幫助瀏覽器進行有條件的請求。
②Gzip壓縮
③設置ETag:ETags(Entity
tags,實體標簽)是Web伺服器和瀏覽器用於判斷瀏覽器緩存中的內容和伺服器中的原始內容是否匹配的一種機制。
④
提前刷新緩沖區:當用戶請求一個頁面時,伺服器會花費200到500毫秒用於後台組織HTML文件。在這期間,瀏覽器會一直空閑等待數據返回。在PHP中,可以使用flush()方法,它允許你把已經編譯的好的部分HTML響應文件先發送給瀏覽器,這時瀏覽器就會可以下載文件中的內容(腳本等)而後台同⑤時處理剩餘的HTML頁面。
⑥
對Ajax請求使用GET方法:當使用XMLHttpRequest時,瀏覽器中的POST方法會首先發送文件頭,然後才發送數據。因此使用GET最為恰當。
⑦避免空的圖像src
3、Cookie優化
①減小cookie大小:去除不必要的coockie,並使coockie體積盡量小以減少對用戶響應的影響
②
針對Web組件使用域名無關的Cookie:對靜態組件的Cookie讀取是一種浪費,使用另一個無Cookie的域名來存放靜態組件是一個好方法,或者也可以在Cookie中只存放帶www的域名。
4、CSS優化
①將CSS代碼放在HTML頁面的頂部
②避免使用CSS表達式:CSS表達式在執行時候的運算量非常大,會對頁面性能產生大的影響
③使用來代替@import
④避免使用Filters:IE獨有屬性AlphaImageLoader用於修正IE
7以下版本中PNG圖片的半透明效果,但它的問題在於瀏覽器載入圖片時它會終止內容的呈現並且凍結瀏覽器。
5、JavaScript優化
①將JavaScript腳本放在頁面的底部
②
將JavaScript和CSS作為外部文件來引用:在實際應用中使用外部文件可以提高頁面速度,因為JavaScript和CSS文件都能在瀏覽器中產生緩存。
③縮小JavaScript和CSS
④刪除重復的腳本
⑤最小化DOM的訪問:使用JavaScript訪問DOM元素比較慢
⑥開發智能的事件處理程序
6、圖像優化
①優化圖片大小
②通過CSSSprites優化圖片
③不要在HTML中使用縮放圖片
④favicon.ico要小而且可緩存
7、針對移動優化
①保持組件大小在25KB以下:主要是因為iPhone不能緩存大於25K的文件(注意這里指的是解壓縮後的大小)。
②將組件打包成為一個復合文檔:把頁面內容打包成復合文本就如同帶有多附件的Email,它能夠使你在一個HTTP請求中獲取多個組件。
以上就是小編今天為大家分享的關於Web前端工程師要掌握的Web前端性能優化方法的文章,希望本篇文章能夠對正在從事Web前端工作的小夥伴們有所幫,想要了解更多Web前端工作的小夥伴們記得關注北大青鳥Web培訓官網最後祝願小夥伴們工作順利!
⑺ Web前端初學者的常見問題匯總
今天小編要跟大家分享的文章是關於Web前端初學者的常見問題匯總。正在學習web前端知識的小夥伴們來和小編一起看一看本篇文章,希望本篇文章能夠對大家有所幫助。
1、Vue.js是什麼?
漸進式框架
自底向上增量開發的設計
易學習
易整合
Vue.js(讀音/vju_/,類似於view)是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是,Vue
採用自底向上增量開發的設計。Vue的核心庫只關注視圖層,並且非常容易學習,非常容易與其它庫或已有項目整合。另一方面,Vue完全有能力驅動採用單文件組件和
Vue生態系統支持的庫開發的復雜單頁應用。
2、vue.js到底適合做哪種類型的界面?
a、表單項繁多
b、內容需要根據用戶的操作進行修改
Vue.js就是一個用於搭建類似於網頁版知乎這種表單項繁多,且內容需要根據用戶的操作進行修改的網頁版應用。
3、單頁應用程序(SPA)是什麼?
一個頁面就是應用(子應用)
顧名思義,單頁應用一般指的就是一個頁面就是應用,當然也可以是一個子應用,比如說知乎的一個頁面就可以視為一個子應用。單頁應用程序中一般交互處理非常多,而且頁面中的內容需要根據用戶的操作動態變化。
4、前面說的網頁版知乎我也可以用JQuery寫啊,為什麼要用Vue.js呢?
a、產品是絕對需要反復修改的
b、修改可能會導致DOM的關聯與嵌套層次要發生改變從而使jquery結構相關代碼變的異常復雜
c、vue.js可以解決這個問題
你是否還記得你當初寫JQuery的時候,有寫過('#xxx').parent().parent().parent()這種代碼呢?當你第一次寫的時候,你覺得頁面元素不多,不就是找這個元素的爸爸的爸爸的爸爸嗎,我大不了在注釋裡面寫清楚這個元素的爸爸的爸爸的爸爸不就好了。但是萬一過幾天之後你的項目組長或者你的產品經理突然對你做的網頁提出修改要求,這個修改要求將會影響頁面的結構,也就是DOM的關聯與嵌套層次要發生改變,那麼(『#xxx』).parent().parent().parent()可能就會變成$(『#xxx』).parent().parent().parent().parent().parent()了。
這還不算什麼,等以後產品迭代越來越快,修改越來越多,而且頁面中類似的關聯和嵌套DOM元素不止一個,那麼修改起來將非常費勁。而且JQuery選擇器查找頁面元素以及DOM操作本身也是有性能損失的,可能到時候打開這個頁面,會變得越來越卡,而你卻無從下手。
這個時候如果你學過Vue.js,那麼這些抱怨將不復存在。
5、前端裡面常說的視圖層是什麼?
我們把HTML中的DOM就可以與其他的部分獨立開來劃分出一個層次,這個層次就叫做視圖層。
Vue的核心庫只關注視圖層
6、使用jquery開發完整頁面的流程?
a、html寫構架
b、css裝飾
c、js交互
講到JQuery,就不得不說到JavaScript的DOM操作了。如果你用JQuery來開發一個知乎,那麼你就需要用JQuery中的各種DOM操作方法去操作HTML的DOM結構了。
現在我們把一個網頁應用抽象一下,那麼HTML中的DOM其實就是視圖,一個網頁就是通過DOM的組合與嵌套,形成了最基本的視圖結構,再通過CSS的修飾,在基本的視圖結構上「化妝」讓他們看起來更加美觀。最後涉及到交互部分,就需要用到JavaScript來接受用戶的交互請求,並且通過事件機制來響應用戶的交互操作,並且在事件的處理函數中進行各種數據的修改,比如說修改某個DOM中的innerHTML或者innerText部分。
7、Vue.js為什麼能讓基於網頁的前端應用程序開發起來這么方便?
a、有聲明式
b、響應式的數據綁定
c、組件化的開發
d、VirtualDOM
因為Vue.js有聲明式,響應式的數據綁定,與組件化的開發,並且還使用了VirtualDOM這個看名字就覺得高大上的技術。
8、vue.js中常說的數據動態綁定是什麼?
就是vue.js會自動響應數據的變化情況,並且根據用戶在代碼中預先寫好的綁定關系,對所有綁定在一起的數據和視圖內容都進行修改。而這種綁定關系,在圖上是以input
標簽的v-model屬性來聲明的,因此你在別的地方可能也會看到有人粗略的稱vue.js為聲明式渲染的模版引擎。
9、前端中為什麼要組件化開發?
a、非組件化開發代碼和工作量都非常大
b、修改起來生不如死
但是現在我們做單頁應用,頁面交互和結構十分復雜,一個頁面上就有許許多多的模塊需要編寫,而且往往一個模塊的代碼量和工作量就非常龐大,如果還按照原先的方法來開發,那麼會累死人。而且遇到以後的產品需求變更,修改起來也非常麻煩,生怕動了其中一個div之後,其他div跟著雪崩,整個頁面全部亂套,或者由於JavaScript的事件冒泡機制,導致修改一些內層的DOM事件處理函數之後,出現各種莫名其妙的詭異BUG。
10、前端中如何進行組件化開發?
a、借用的後端的面向對象中的模塊化思想(把一些大功能拆分成許多函數,然後分配給不同的人來開發)
b、把一個單頁應用中的各種模塊拆分到一個一個單獨的組件(component)中,我們只要先在父級應用中寫好各種組件標簽(占坑),並且在組件標簽中寫好要傳入組件的參數(就像給函數傳入參數一樣,這個參數叫做組件的屬性),然後再分別寫好各種組件的實現(填坑)
在面向對象編程中,我們可以使用面向對象的思想將各種模塊打包成類或者把一個大的業務模塊拆分成更多更小的幾個類。在面向過程編程中,我們也可以把一些大功能拆分成許多函數,然後分配給不同的人來開發。
在前端應用,我們是否也可以像編程一樣把模塊封裝呢?這就引入了組件化開發的思想。
Vue.js通過組件,把一個單頁應用中的各種模塊拆分到一個一個單獨的組件(component)中,我們只要先在父級應用中寫好各種組件標簽(占坑),並且在組件標簽中寫好要傳入組件的參數(就像給函數傳入參數一樣,這個參數叫做組件的屬性),然後再分別寫好各種組件的實現(填坑),然後整個應用就算做完了。
11、為什麼有VirtualDOM技術?
a、問題
現在的網速越來越快了,很多人家裡都是幾十甚至上百M的光纖,手機也是4G起步了,按道理一個網頁才幾百K,而且瀏覽器本身還會緩存很多資源文件,那麼幾十M的光纖為什麼打開一個之前已經打開過,已經有緩存的頁面還是感覺很慢呢?
b、原因
(1)、瀏覽器本身處理DOM也是有性能瓶頸的
(2)、用JQuery或者原生的JavaScriptDOM操作函數對DOM進行頻繁操作的時候,瀏覽器要不停的渲染新的DOM樹
這就是因為瀏覽器本身處理DOM也是有性能瓶頸的,尤其是在傳統開發中,用JQuery或者原生的JavaScript
DOM操作函數對DOM進行頻繁操作的時候,瀏覽器要不停的渲染新的DOM樹,導致頁面看起來非常卡頓。
12、VirtualDOM如何實現?
a、預計算dom的各種操作,把最後一次的結果渲染出來(減少dom的渲染次數)
而Virtual
DOM則是虛擬DOM的英文,簡單來說,他就是一種可以預先通過JavaScript進行各種計算,把最終的DOM操作計算出來並優化,由於這個DOM操作屬於預處理操作,並沒有真實的操作DOM,所以叫做虛擬DOM。最後在計算完畢才真正將DOM操作提交,將DOM操作變化反映到DOM樹上。
13、到底該怎麼用Vue.js做單頁應用開發?
其實可以直接看學習視頻開始干,應該是最好的
a、介紹-vue.js官方文檔的基礎部分硬著頭皮看一遍
我的建議是,先把介紹-
vue.js官方文檔的基礎部分硬著頭皮看一遍。除了組件這個小節涉及到了很多晦澀難懂的名詞以外,前面幾章完全就是把Vue.js當作一個模版引擎來用。
b、ECMAScript6,Webpack,NPM以及Vue-Cli的基本用法,最好對Node.js也要有所了解
然後開始學習ECMAScript6,Webpack,NPM以及Vue-Cli的基本用法,最好對Node.js也要有所了解。
c、看網上各種實戰視頻以及文章還有別人開源的源代碼
最後組件部分先大致看一遍,了解組件裡面都有哪些概念之後,開始看網上各種實戰視頻以及文章還有別人開源的源代碼。
14、ECMAScript是啥?
ECMAScript和JavaScript的關系是,前者是後者的規格,後者是前者的一種實現(另外的ECMAScript方言還有
Jscript和ActionScript)。日常場合,這兩個詞是可以互換的。
而ECMAScript6就是新一代的JavaScript語言。
15、Webpack是啥?
a、前端打包工具
Webpack是一個前端打包和構建工具。如果你之前一直是手寫HTML,CSS,JavaScript,並且通過link標簽將CSS引入你的HTML文件,以及通過Script標簽的src屬性引入外部的JS腳本,那麼你肯定會對這個工具感到陌生。不要緊,我們先來了解一下為什麼要用Webpack,然後帶著原因去學習就好了。
16、為什麼要用Webpack?
a、方便管理各種素材
b、打包以便減少瀏覽器的訪問次數
前面說了,做一個單頁應用程序本身就相當復雜,而且在做的時候肯定會使用到很多素材和別的第三方庫,我們該如何去管理這些東西呢?
還有前面講到了Webpack是一個前端打包工具,前端代碼為什麼要打包呢?因為單頁應用程序中用到很多素材,如果每一個素材都通過在HTML中以src屬性或者link來引入,那麼請求一個頁面的時候,可能瀏覽器就要發起十多次請求,往往請求的這些資源都是一些腳本代碼或者很小的圖片,這些資源本身才幾k,下載連1秒都不需要,但是由於HTTP是應用層協議,它的下層是TCP這個運輸層協議,TCP的握手和揮手過程消耗的時間可能比下載資源本身還要長,所以需要把這些小文件全部打包成一個文件,這樣只要一次TCP握手和揮手的過程,就把多個資源給下載下來了,並且多個資源由於都是共享一個HTTP請求,所以head等部分也是共享的,相當於形成了規模效應,讓網頁展現更快,用戶體驗更好。
17、NPM和Node.js又是什麼?它們是什麼關系?
a、Node.js是一個服務端的JavaScript運行環境
Node.js是一個服務端的JavaScript運行環境,通過Node.js可以實現用JavaScript寫獨立程序。
b、Node.js可以寫獨立程序(Webpack就是Node.js寫的)
像我們之前提到的Webpack就是Node.js寫的,所以作為一個前端開發,即使你不用Node.js寫獨立程序,也得配一個Node.js運行環境,畢竟很多前端工具都是使用它寫的。
c、NPM是一個node.js的包管理器(類似java的maven(包的依賴管理),php也有一個類似的)。
NPM是一個node.js的包管理器。我們在傳統開發的時候,JQuery.js大多都是網路搜索,然後去官網下載,或者直接引入CDN資源,這種方法太過於麻煩。如果以後遇到其他的包,這個包的代碼本身可能還調用了其他的包(也稱這個包和其他的那幾個包存在依賴關系),那麼我們要在自己的項目中引入一個包將變得十分困難。現在我們有了NPM這個包管理器,直接可以通過
npminstallxxx包名稱
的方式引入它,比如說
npminstallvue
18、Vue-CLi是啥?
它是一個vue.js的腳手架工具。說白了就是一個自動幫你生成好項目目錄,配置好Webpack,以及各種依賴包的工具,它可以通過
npminstallvue-cli-g
的方式安裝,後面的-g表示全局安裝的意思,意味著你可以打開命令行之後直接通過vue命令調用它。
19、Vuex和Vue-route是什麼(暫時了解即可)?
Vuex是vue的一個狀態管理器。用於集中管理一個單頁應用程序中的各種狀態。
Vue-route是vue的一個前端路由器,這個路由器不是我們上網用的路由器,而是一個管理請求入口和頁面映射關系的東西。它可以實現對頁面局部進行無刷新的替換,讓用戶感覺就像切換到了網頁一樣。
要講清楚這兩個東西,又得花費大量篇幅,所以這里只是簡單提一下,先學好vue.js本身才是最重要的。
以上就是小編今天為大家分享的關於Web前端初學者的常見問題匯總的文章,希望本篇文章能夠對正在學習web前端知識的小夥伴們有所幫助,想要了解更多web前端知識記得關注北大青鳥web培訓官網,最後祝願小夥伴們學習成功,成為一名優秀的web前端工程師。
原創小才君軟體編程網站開發
⑻ 文件下載失敗了,vue前端提示這段話是啥意思
瀏覽器沒開啟javascript
⑼ easyexcel前端下載生成不了文件
原因可能是導出數據可能是空的,或者linux 下可能沒有許可權創建臨時文件,賦許可權chmod 777 就可以了。
Java解析、生成Excel比較有名的框架有Apache poi、jxl。但他們都存在一個嚴重的問題就是非常的耗內存,poi有一套SAX模式的API可以一定程度的解決一些內存溢出的問題,但POI還是有一些缺陷,比如07版Excel解壓縮以及解壓後存儲都是在內存中完成的,內存消耗依然很大。easyexcel重寫了poi對07版Excel的解析,能夠原本一個3M的excel用POI sax依然需要100M左右內存降低到幾M,並且再大的excel不會出現內存溢出,03版依賴POI的sax模式。在上層做了模型轉換的封裝,讓使用者更加簡單方便。