正所謂前端造框架,移動端造系統,后端造語言。隨著web前端和移動端的不斷融合,出現個新的端口,俗稱大前端。
我是安卓開發者,這兩年也因為業務需要接觸了web技術,自學了一點Vue,下面說說我對web前端的看法。
web前端的框架多是因為技術簡單而業務多樣化前端最初或者說最本質就是HTML+CSS+JavaScript,可以說后來的框架底層基本都是這三大金剛。
相對于造系統和語言來說,造框架是比較簡單的。其次是成本和門檻特別低,所以很多大公司都有推出各自的開源框架。
但是這些開源框架都是源自各大公司自己的業務來開發的,也就是說有其獨特性。
阿里巴巴weex框架
Weex框架是阿里巴巴在2016年推出的web開源框架,主要解決了頻繁發版和多端研發兩大痛點,同時解決了前端語言性能差和顯示效果受限的問題。
開發者只需要在自己的APP中嵌入Weex的SDK,就可以通過撰寫HTML/CSS/JavaScript來開發Native級別的Weex界面。Weex界面的生成碼其實就是一段很小的JS,但是可以像發布網頁一樣輕松部署在服務端,然后在APP中請求執行。
Weex的特點就是跨平臺,一次開發,多端運行,同時提高頁面渲染速度。
騰訊QMUI框架
QMUI Web 是一個專注 Web UI 開發,幫助開發者快速實現特定的一整套設計的框架。
通過 QMUI Web,我們可以很輕松地提高 Web UI 開發的效率,同時保持了項目的高可維護性與穩健。
QMUI是騰訊廣州研發團隊開發的,也就是張小龍的團隊。
QMUI框架的特點就是提供豐富的UI,方便你快速實現頁面需求,同時可以對項目的樣式進行整體控制。
以上都是國內大的科技公司的框架,舉這兩個例子是想說明,框架是根據業務開發的。
當然市場上主流的web框架就是
Vue.JS
了,這也是我目前學習和使用的框架,當然還有AngularJS、React框架。在面對框架時怎么辦,學還是不學?其實不只是前端,移動端也經常有一些框架出來,那我們開發者面對新框架時,到底要不要學習呢。
我的看法是要學習,但是不能學的太深,畢竟沒那么多精力和時間。
當有新框架出來時,我會去引入到demo項目里面玩一玩,搞清楚它是干嘛的,基本怎么就可以了。
也就是說,我只會關注它的功能是解決哪方面的問題,如果后面項目碰到了這類的需求問題,可以直接引入使用。
那這是我對待新框架的態度,當然如果你有更多的時間和精力,或者說學習能力比較強,完全可以將新框架學透。
總結對于編程行業來說,持續的學習是必要的,因為業務的發展會推動技術的革新,所以從入行就得做好心理準備。
我是非著名攻城獅,希望我的回答對您有用,感謝您的關注與支持!
培養目標和要求
本方向是基于軟件前端設計與開發技術培養符合企業需求的前端開發工程師。學生通過本方向課程的學習,掌握前端設計的主流技術,熟悉行業常見的標準規范,能根據客戶需求設計和實現具有美觀性、交互性和實用性的前端產品,能較好的與軟件后臺開發人員進行溝通,最終成為一名符合企業崗位需求的前端開發工程師。
想要成為一名合格的Web前端工程師,Web前端性能優化是一個必須要掌握的知識,那么應該怎么進行Web前端性能優化呢?
1、CSS精靈
CSS Sprites在國內很多人叫CSS精靈,是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去,這樣一來,當訪問該頁面時,載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。對于當前網絡流行的速度而言,不高于200KB的單張圖片的所需載入時間基本是差不多的,所以無需顧忌這個問題。
2、代碼壓縮
(1)將table改為div布局
盡量將table標簽布局HTML重構div布局,可以節約至少40%的代碼量。由于div代碼少于table布局的HTML網頁,所以搜索引擎索引權重也優于table布局的HTML網頁。
(2)縮減精簡div、span、ul、li等系列標簽
布局DIV+CSS網頁時候,有時候可以節約一些DIV布局代碼,減少代碼量。
(3)刪除多余空格
刪除多余空格換行,可以有效地壓縮HTML代碼占用字節,一般在開發完成后可以對HTML中代碼進行刪除換行和空格內容。
(4)表格類型布局時候適當使用table替代div布局
如果是本身是表格數據列表排版,我們最好選擇table,因為表格布局使用table優于div布局,使用table布局卻比div布局節約HTML標簽代碼和節約CSS樣式。
(5)網頁GZIP壓縮
自己的服務器推薦設置網頁Gzip壓縮功能。
3、高質量的JS代碼肯定能省很多事,封裝JS以及重復調用方法能夠減少很多操作。
4、減少對DOM的操作
(1)創建臨時父元素。
(2)創建子元素,并添加內容,設置屬性。
(3)把子元素加入到臨時父元素中。
(4)把臨時父元素添加到DOM樹。
或:(1)找到要添加位置的元素。
(2)改變該元素內容為需要的HTML。
5、使用JSON格式來進行數據交換
原理:JSON是一種輕量級的數據交換格式,采用完全獨立于語言的文本格式,是理想的數據交換格式。同時,JSON是JavaScript原生格式,這意味著在 JavaScript 中處理 JSON數據不需要任何特殊的 API 或工具包。
6、高效使用HTML標簽和CSS樣式
7、使用CDN加速(內容分發網絡)
CDN的全稱是Content Delivery Network,即內容分發網絡。CDN是構建在現有網絡基礎之上的智能虛擬網絡,依靠部署在各地的邊緣服務器,通過中心平臺的負載均衡、內容分發、調度等功能模塊,使用戶就近獲取所需內容,降低網絡擁塞,提高用戶訪問響應速度和命中率。CDN的關鍵技術主要有內容存儲和分發技術。
8、精簡CSS和JS文件
9、注意控制Cookie大小和污染