導航:首頁 > 網站優化 > 前端spaseo

前端spaseo

發布時間:2020-09-19 18:35:41

1、剛剛進入前端工作,很迷茫怎麼辦?

沒有人天生就會干工作,都要經歷從不會到會的一個過程。初入職場迷茫是因為進入一個陌生領域、環境,產生職場迷茫是暫時的,同時也是正常的。每個人在成長過程中都會或多或少感覺迷茫。要擺脫這種境況,建議你根據自己的能力、崗位的要求、公司的需求和市場未來的需求,為自己設置一個目標,也就是規劃.然後定一些階段目標,只要自己跳一跳就能實現的那種.等實現後,再定下一個努力就能實現的目標,這樣一步一步就達到最終目標了.目標切忌過大,要可望又可及,那樣不至於使你迷茫和氣餒,如此下去,你就能從實現目標的成功中獲得快樂,提高水平。

實現目標的過程中注意虛心請教(請教同事、請教上司、請教書本),不要太顧及面子,學到東西才是王道。要善於總結和歸納、提煉,把學到的變成自己的,融會貫通。

2、web前端開發都包括哪些技術

1、學會HTML

HTML是網頁內容的載體內容就是網頁製作者放在頁面上想要讓用戶瀏覽的信息,可以包含文字、圖片、視頻等。要熟練掌握div、table、ul li 、p、span等這些標簽,這些都是最常用的。

2、學習CSS(Cascading Style Sheets)—樣式。

一般看到web前端開發工程師的要求裡面,有一個會使用css+html 或者 css+div 來進行界面布局,所以css是用於輔助html來布局和展示的,

稱之為「css樣式」,CSS要熟練掌握float、position、width、height,以及對於的最大最小、會使用百分百、overflow、margin、padding,標題字體、顏色變化,或為標題加入背景圖片、邊框等等,這些都是跟布局有關系的樣式,必須要掌握的。

3、JS(java)—— 行為

java是用來實現網頁上的特效效果。如:滑鼠滑過彈出下拉菜單。或滑鼠滑過表格的背景顏色改變。還有焦點新聞(新聞圖片)的輪換。可以這么理解,有動畫的,有交互的一般都是用Java來實現的。

4、學習jquery

jquery是相當於把js封裝了一套的一個js插件,目的就是操作起來更方便,代碼寫的更少,jquery入門也很簡單,那些是入門需要學的和js一樣,只是換成了jq的代碼.其他的一樣百度就夠了。

5、最好會點後台語言,比如java、php,因為前台界面的數據都是從後台來的,如果會點後台代碼,就知道怎麼跟後台交互數據是最好的, 這樣節約時間,也可以讓前端代碼更規范.不然可能因為你的寫法和後端給來的數據不能結合上,那麼前端代碼又得重新寫,那就更麻煩了。

3、web前端開發需要用到哪些知識

應該熟練掌握的基礎技能:

HTML4,HTML5語法、標簽、語義

CSS2.1,CSS3規范,與HTML結合實現各種布局、效果

Ecma-262定義的javascript的語言核心,原生客戶端javascript,DOM操作,HTML5新增功能

一個成熟的客戶端javascript庫,推薦jquery

一門伺服器端語言:如果有伺服器端開發經驗,使用已經會的語言即可,如果沒有伺服器端開發經驗,熟悉Java可以選擇Servlet,不熟悉的可以選PHP,能實現簡單登陸注冊功能就足夠支持前端開發了,後續可能需要繼續學習,最基本要求是實現簡單的功能模擬,

HTTP

在掌握以上基礎技能之後,工作中遇到需要的技術也能快速學習。

基本開發工具

恰當的工具能有效提高學習效率,將重點放在知識本身,在出現問題時能快速定位並
解決問題,以下是個人覺得必備的前端開發工具:

文本編輯器:推薦Sublime Text,支持各種插件、主題、設置,使用方便

瀏覽器:推薦Google Chrome,更新快,對前端各種標准提供了非常好的支持

調試工具:推薦Chrome自帶的Chrome develop tools,可以輕松查看DOM結構、樣式,通過控制台輸出調試信息,調試javascript,查看網路等

輔助工具:PhotoShop編輯圖片、取色,fireworks量尺寸,AlloyDesigner對比尺寸,以及前面的到的Chrome develop tools,

FQ工具:lantern, 壁虎漫步

學習方法和學習目標

方法:

入門階段反復閱讀經典書籍的中文版,書籍中的每一個例子都動手實現並在瀏覽器中查看效果

在具備一定基礎之後可以上網搜各種教程、demo,了解各種功能的實際用法和常見功能的實現方法

閱讀HTML,CSS,Javascript標准全面完善知識點

閱讀前端牛人的博客、文章提升對知識的理解

善用搜索引擎

目標:

熟記前面知識點部分的重要概念,結合學習經歷得到自己的理解

熟悉常見功能的實現方法,如常見CSS布局,Tab控制項等。

入門之路

以下是入門階段不錯的書籍和資料

HTML先看《HTML & CSS: Design and Build Websites》1-9章,然後《HTML5: The Missing Manual》1-4章。

CSS先看《CSS: The Missing Manual》,然後《CSS權威指南》

javascript先看《javascript高級程序設計》,然後《javascript權威指南》

HTTP看HTTP權威指南

在整個學習過程中HTML CSS JavaScript會有很多地方需要互相結合,實際工作中也是這樣,一個簡單的功能模塊都需要三者結合才能實現。

動手是學習的重要組成部分,書籍重點講解知識點,例子可能不是很充足,這就需要利用搜索引擎尋找一些簡單教程,照著教程實現功能。以下是一些比較好的教程網址

可以搜索各大公司前端校招筆試面試題作為練習題或者他人總結的前端面試題還有個人總結的面試題(帶參考答案)

http://code.tutsplus.com有各種各樣的教程

MDN也有很多教程,更重要的是裡面有詳細的文檔,需要查找某個功能時在Google搜索:xxx site:https://developer.mozilla.org

http://www.html5rocks.com/zh/也有很多優質教程

http://www.sitepoint.com/

http://alistapart.com/

原生javascript是需要重點掌握的技能,在掌握原生javascript的基礎上推薦熟練掌握jQuery,在實際工作中用處很大,這方面的書籍有《Learning jQuery》或者去jQuery官網

建一個https://github.com/賬號,保存平時學習中的各種代碼和項目。

有了一定基礎之後可以搭建一個個人博客,記錄學習過程中遇到的問題和解決方法,方便自己查閱也為其他人提供了幫助。也可以去http://www.cnblogs.com/或者http://www.csdn.net/這樣的網站注冊賬號,方便實用

經常實用Google搜索英文資料應該經常找到來自http://stackoverflow.com/的高質量答案,與到問題可以直接在這里搜索,如果有精力,注冊一個賬號為別人解答問題也能極大提高個人能力。

經典書籍熟讀之後,可以打開前面必備基礎技能部分的鏈接。認真讀對應標准,全面掌握知識

繼續提高

有了前面的基礎之後,前端基本算是入門了,這時候可能每個人心中都有了一些學習方向,如果還是沒有。
可以參考前面必備技能部分提到的那兩個項目,從裡面選一些進行發展學習。以下是一些不錯的方面:

Grunt:前端自動化工具,提高工作效率

less css:優秀的CSS預處理器

bootstrap:優秀的CSS框架,對沒有設計師的團隊很不錯,與less結合使用效果完美

requirejs:AMD規范的模塊載入器,前端模塊化趨勢的必備工具

Node.js:JavaScript也可以做後台,前端工程師地位更上一步

AngularJS:做Single Page Application的好工具

移動端web開發:智能手機的普及讓移動端的流量正在逐步趕超PC端

Javascript內存管理:SPA長期運行需要注意內存泄露的問題

High Performance JavaScript(Build Faster Web Application Interfaces)

Best Practices for Speeding Up Your Web Site:重要技能

####工具

chrome dev tools:前端開發調試利器,著重注意幾個功能:

liveload: 修改頁面後自動刷新,不用按F5

dimensions:直接在頁面上測量的利器

livestyle:css樣式修改後自動起效果,不需要刷新,elements修改後也能同步到代碼中

image tool:測量,取色

UC二維碼:移動端調試掃碼必備

pagespeed,YSlow:頁面性能分析和優化插件

馬克飛象:優秀的在線markdown編輯器,快速寫周報,做記錄

watch expression:通過表達式查看當前內存中的值

call stack:查看調用棧,開啟async,可以看非同步調用棧(這個非常有用,尤其是ajax調試的時候)

scope variables:作用域鏈上的變數,非常有用

console(廢話)

elements:元素樣式調整,很常用

sources:代碼中添加斷點,單步調試,以及單步調試過程中查看內存中的對象

network:抓包查看每個請求,非常重要,前後端聯調必備

timeline:分析渲染、js執行等等各個階段,性能優化利器

emulation:模擬移動端環境,mobile頁面開發必備

一些插件:

sublime text2:編碼方便,插件多,速度快,性能好

emmet:提升html編碼速度必備

sublimelinter + 各種語言的lint和hint:代碼糾錯

一些snippets:自動補全,提升開發效率

Intellij IDEA和WebStorm:集成開發環境,集成了各種功能,開發比sublime要方便,但會比較吃性能

Mark Men:測量、取色、標注利器,拿到視覺稿之後第一個打開的軟體

GFW Fucker:我用紅杏,可以的話買個虛擬伺服器當梯子

iHosts:非常優秀的hosts管理軟體,輕松修改hosts,開發調試必備

Charles:Mac 平台最好用的抓包分析工具

Rythem:AlloyTeam出品的代理抓包軟體,非常輕量,安裝簡單,移動端(真機)開發調試很好用

Wunderlist:一個非常不錯的Todo List,任務、需求多的時候管理起來很方便

####技能
前端的技能其實除了JavaScript(包括NodeJS)、HTML、CSS以外,還有很多。其實前端的技能樹很大,這里只能列一些我開發中見到的說一說
#####語言基礎
JavaScript:

作用域鏈、閉包、運行時上下文、this

原型鏈、繼承

NodeJS基礎和常用API

CSS:

選擇器

瀏覽器兼容性及常見的hack處理

CSS布局的方式和原理(盒子模型、BFC、IFC等等)

CSS 3,如animation、gradient、等等

HTML:

語義化標簽

#####進階
JavaScript:

非同步控制(Promise、ES6 generator、Async)

模塊化的開發方式(AMD、CMD、KMD等等)

JavaScript解釋器的一些相關知識

非同步IO實現

垃圾回收

事件隊列

常用框架使用及其原理

jQuery:基於選擇器的框架,但個人認為不能叫框架,應該算工具庫,因為不具備模塊載入機制,其中源碼很適合閱讀鑽研

AngularJS/Avalon等MVVM框架:著重理解MVVM模式本身的理念和雙向綁定的實現,如何解耦

underscore:優秀的工具庫,方便的理解常用工具代碼片段的實現

polymer/React: 組件化開發,面向未來,理解組件化開發的原理

CSS和HTML:主要是CSS3的特性和HTML5的特性,以及瀏覽器處理的流程和繪制原理

DOM樹、CSSOM樹、渲染樹的構建流程及頁面渲染的過程

解析HTML、CSS、JavaScript時造成的阻塞

HTML5相關

SVG及矢量圖原理

Canvas開發及動畫原理(幀動畫)

Video和Audio

flex box布局方式

icon fonts的使用

常用NodeJs的package:

koa

express

underscore

async

gulp

grunt

connect

request

一些理念:

響應式Web

優雅降級、漸進增強

dont make me think

網頁可用性、可訪問性、其中的意義

SEO搜索引擎優化,了解搜索引擎的原理

SPA的好處和問題

性能優化:

減少請求數量(sprite、combo)

善用緩存(application cache、http緩存、CDN、localstorage、sessionstorage,備忘錄模式)

減少選擇器消耗(從右到左),減少DOM操作(DOM和JavaScript解釋器的分離)

CSS的迴流與重繪

生態系統

npm

bower

spm

搭建一個屬於自己的博客

git pages

hexo

jekyll

#####未來

Web Componets:面向未來的組件化開發方式

HTML模板

Shadow DOM

Custom Elements

HTML Import

移動端Native開發:這也是需要了解的,以後前端工程師會經常地和webview打交道,也要了解native開發

4、前端開發好找工作嗎?

能找到工作的必定是有多方面受到企業認可的,所以不管好找還是不好找,先要看自己對這個有沒有用興趣,適不適合,再做學的打算,百讀易萊勝就是專門培養web前端開發的,認真學都能學到知識技能的。

5、微服務架構下,進行前後端分離,前端怎麼寫

分離後的前端,不再是一個簡單的HTML文件,已經是一個獨立的應用系統。除了要考慮頁面的數據渲染展示,還要用工程化的思想來考慮前端的架構,前後端的交互和數據安全等事情。

RESTful介面交互
前後端分離之後,更多的是採用RESTful風格的介面與後端進行數據交互。

REST是「呈現狀態轉移(REpresentational State Transfer)」的縮寫,一種API的架構風格,在客戶端和服務端之間通過呈現狀態的轉移來驅動應用狀態的演進。

在 REST 樣式的 Web 服務中,每個資源都有一個地址。資源本身都是方法調用的目標,方法列表對所有資源都是一樣的。這些方法都是標准方法,包括 HTTP GET、POST、PUT、DELETE,還可能包括 HEADER 和 OPTIONS。
RESTful的API設計,使得後端通過介面向前端傳遞數據,數據的格式通常是JSON這種通用的格式。對前端來說,只要後端返回過來的是RESTful的數據就行,不管後端是用Java寫,還是用python或PHP,拜託對後端的依賴,做到前端系統的獨立。

工程化構建

Nodejs不止可以用來做前端伺服器,在開發階段,它也能發揮很大的作用。

前端生態的發展,是圍繞著Nodejs進行的。用npm來管理項目依賴,可以很好的維護和運行在Nodejs環境上。

打包工具grunt、gulp、webpack和rollup等,都是運行在nodejs上,再結合語法編譯、打包部署等插件,將應用輸入成一個完整的應用。

如果你使用了Angular、React或Vue框架,或者你使用瀏覽器暫時還不兼容的ES6語法,還需要在應用打包前用babel將語法編譯成瀏覽器可識別的ES5的語法。

SPA
SPA是單頁Web應用(single page web application,SPA)的簡寫,就是只有一張Web頁面的應用,是載入單個HTML 頁面並在用戶與應用程序交互時動態更新該頁面的Web應用程序。

像Angular、React或Vue就是為了SPA而設計的,結合前端路由庫(react-router、vue-router)和狀態熱存儲(rex、vuex)等,可以開發出一個媲美Native APP的Web APP,用戶體驗得到了很大的提升。

當然,SPA也不是完美的,也不是適合所有的web應用,需要結合項目和場景來選擇。

SPA有如下缺點:

初次載入耗時增加。可以通過代碼拆分、懶載入來提升性能,減少初次載入耗時。

SEO不友好,現在可以通過Prerender或Server render來解決一部分。

頁面的前進和後端需要開發者自己寫,不過現在一些路由庫已經幫助我們基本解決了。

對開發者要求高,由於做SPA需要了解一整套技術棧,所以,要考慮後期是否有合適的人選進行維護。

6、Vue單頁面如何做seo頁面優化

1、服務端渲染
服務端渲染對於剛接觸 vue 的新手來說,並不是那麼友好,雖然已有官方 SSR 中文文檔。但是對於一個已經開發完畢的 vue 項目去接 SSR 無論是從工作量還是技術角度來說,都是一種挑戰。
2、預渲染方式
在構建時 (build time) 簡單地生成針對特定路由的靜態 HTML 文件。優點是設置預渲染更簡單,並可以將您的前端作為一個完全靜態的站點。如果您使用 webpack,您可以使用 prerender-spa-plugin 輕松地添加預渲染。它已經被 Vue 應用程序廣泛測試。

7、作為前端,我為什麼選擇 Angular 2

ALL-IN-ONE
不管是1還是2,Angular最顯著的特徵就是其整合性。它是由單一項目組常年開發維護的一體化框架,涵蓋了M、V、C/VM等各個層面,不需要組合、評估其它技術就能完成大部分前端開發任務。這樣可以有效降低決策成本,提高決策速度,對需要快速起步的團隊是非常有幫助的。
讓我們換一種問法吧:你想用樂高搭一個客廳,還是買宜家套裝?
Angular 2就是前端開發領域的「宜家套裝」,它經過精心的前期設計,涵蓋了開發中的各個層面,層與層之間都經過了精心調適,是一個「開箱即用」的框架。
當然,你可能還記著Angular 1帶給你的那些快樂以及……痛苦。這是有歷史原因的。由於它是從一個用來做原型的框架演化而來的,加上誕生時間很早(2009年,作為對比,jQuery誕生於2006年),當時生態不完善,連模塊化機制都得自己實現(這就是angular.mole的由來,也是Angular 2中拋棄它的理由)。在長達七年的演化過程中,各種進化的遺跡非常明顯,留下了不少「闌尾」。
但Angular 2就不同了,它的起點更高,整合了現代前端的各種先進理念,在框架、文檔、工具等各個層面提供了全方位的支持。比如它的「組件樣式」能讓你在無需了解CSS Mole的前提下獲得CSS Mole的好處,它的Starter工程能讓你在無需了解Webpack的前提下獲得Hot Mole Replacement等先進特性,它能讓你從Web Worker(你知道這是什麼嗎?)中獲得顯著的性能提升。
你只管在前台秀肌肉吧!剩下的,讓Angular在幕後幫你搞定!
模塊化的技術
雖然Angular是一個ALL-IN-ONE的框架,但這並不妨礙它同時是一個靈活的框架。還記得OCP(開閉原則)嗎?一個好的設計,對擴展應該是開放的,對修改應該是關閉的。
Angular 2很好的踐行了OCP原則以及SoC(關注點分離)原則。
它非常有效的分離了渲染與交互邏輯,這就讓它可以很好的跟包括React在內的渲染引擎搭配使用,除此之外,它還可以使用內存渲染引擎,以實現服務端渲染;還可以使用Native渲染引擎,以編譯出真正的原生程序(NativeScript)。
它還分離了數據供應與變更檢測邏輯,從而讓它可以自由使用包括RxJS以及ImmutableJS在內的第三方數據框架/工具。
不僅如此。
在Angular 1和Angular 2中最具特色的應該算是依賴注入(DI)系統了,它把後端開發中用來解決復雜問題、實現高彈性設計的DI技術引入了前端。Angular 2中更是通過引入TypeScript賦予它更高的靈活性和便利性。
不過,Angular 2並沒有敝帚自珍,把它跟框架本身緊緊黏結在一起,而是把它設計成了一個獨立可用的模塊。這就意味著,無論你正在使用什麼前端框架,甚至NodeJS後端框架,都可以自由使用它,並從中獲益。
全生命周期支持
除非你打算寫一個一次性應用,否則軟體的生命周期會很長。宏觀來看,真正的挑戰來自多個方面,而且在不斷變化。
開始的階段,我們需要非常快速的建立原型,讓它跑起來,引入最終用戶來試用,這個時候,挑戰來自開發速度以及可復用資產。
之後,會建立一個逐漸擴大的項目組,來完善這個原型的功能。主要的挑戰是讓這個原型通過重構不斷進行演化,特別是在演化的後半個階段,產品需要保持隨時可以上線的狀態。但技術上的挑戰那都不是事兒!關鍵是人。
如何讓新人快速融入項目組,貢獻生產力?這可沒那麼簡單。「你先去學xxx 0.5、yyy 0.9、zzz 5.3...還要了解它們前後版本之間的差異,我再給你講代碼」,這種話,我可說不出口。一個優秀的框架需要對分工提供良好的支持,每個人都可以先從一些簡單任務開始,逐步的從修改一個文件擴大到修改一個目錄再到獨立實現一個特性。
有了這種分工,每個團隊成員就可以從一個成功走向一個更大的成功。這就需要框架在設計上具有良好的局部性:你可以放心大膽的修改一部分,而不用擔心影響另一部分。你可以只修改CSS,可以只修改HTML,可以只修改TS/js,而不用擔心自己的修改破壞了其他部分。而Angular 2通過聲明式界面、組件樣式以及獨立模板文件等對這種安全感提供了有力的保障。
再然後,如果你的軟體順利的進入了線上維護階段,那麼恭喜你,你終於迎來真正的大Boss了!這個大Boss就是可維護性。Angular開發組有很多程序員來自Google,如果要問誰的軟體維護經驗最豐富,Google和微軟必然名列前茅。微軟通過TypeScript的強類型機制體現了自己的經驗,而Google則通過將OCP、SoC、SRP等一系列軟體設計原則融入Angular體現了自己的經驗。具體技術上則體現為:DI、生命周期鉤子、組件等等。
最後,如果你的軟體完成了歷史使命需要逐步退出,是不是就能鬆口氣了?不行,你還得繼續留人維護它。如果你選擇的是一個閉源的或某個社區很羸弱的開源技術,你就把以前的主力架構師、資深程序員留下來繼續維護它吧。或者你就得鼓起勇氣跟用戶說:你們玩兒,我先走了。而Angular是一個大型開源項目,並得到了Google的鼎力支持。即使經歷過Angular 2項目組初期的公關失敗,它仍然有著其它競品無法企及的繁榮社區 —— 無論在全球還是在中國。顯然,無論是對傳統社區資源的繼承,還是對新社區資源的開拓,我們都有理由相信,Angular社區仍將一如既往地繁榮。至少,如果你不想讓自己的軟體建立在一大堆由個人維護的核心庫上,那麼Angular毫無疑問是最好的選擇。
逃離「版本地獄」
如果是一兩個人開發一個預期壽命不到一年的系統,那麼任何框架都可以勝任。但,現實中我們都把這種系統稱之為「坑」。作為一個高度專業、高度工程化的開發組,我們不能把「坑」留給友軍。這些坑中,最明顯的就是「版本地獄」。
想像一下,你僅僅升級了庫的次版本號,原來的軟體就不能用了,損壞了N處單元測試以及M個E2E場景。這種情況對於開發組來說簡直是一個噩夢 —— 畢竟,誰也不想做無用功,更何況是一而再、再而三的。或者,它每次小的改動都會修改主版本號 —— 對,我就是不向後兼容,你能咋地?你所能做的就是每一次決定升級都如臨大敵,不但要小心翼翼的升級這個庫本身還要升級與它協作的幾乎所有庫。
可見,亂標版本號可能會讓使用者付出巨大的代價。這不但體現在工作量上,還會體現在研發團隊的招募與培養上,想像一下,對小版本之間都不兼容的框架,研發團隊都需要記住多少東西?那簡直是噩夢!
但是,版本號的問題在業內早就有了事實性標准,那就是SemVer語義化版本標准。唯一的問題是,作為框架/庫的作者,遵循SemVer標准需要付出的努力是巨大的。是否願意付出這些代價,是一個框架(及其開發組)是否成熟的重要標志。
Angular就是這樣一個框架,其開發組曾作出的努力是有目共睹的。如果你是從Angular 1.2開始使用的,那麼你為1.2所寫的代碼都可以毫無障礙的遷移到最新的1.5版,新的版本只是引入了新特性,而沒有破壞老特性。這是因為Angular開發組寫了大量單元測試和E2E測試,藉助CI來保障這種平滑過渡。只有在從1.0到1.2的遷移過程中(1.1一直是beta,忽略不計),出現了一系列破壞性變更,這些變更被明確的記錄在文檔中,並且解釋了做出這些變更的理由 —— 大多數是因為提升前端代碼安全性。即使你恰好遇到了這些破壞性變更,它也會給出明確的錯誤提示。
這些必要而無聊的工作,正是幫助我們逃離「版本地獄」的關鍵。是否願意做這些無聊而瑣碎的工作,是一個框架的開發組是否成熟、專業的關鍵特徵。而Angular的開發組已經證明了它值得你信任!
遇見未來的標准
編程領域,創新無處不在。但對一個工程團隊來說,最難得的是標准。標准意味著:
招人容易。因為標準的東西會的人最多,而且人們願意學它 —— 因為知道學了就不會浪費。
養人容易。因為網上有很多教程可用,即使不得已自己做教程,性價比也是最高的。
換人容易。標准就意味著不是私有技術,一個人離開了,就能用另一個人補上,而不會出現長期空缺,影響業務。
但是,標准永遠會比創新慢一拍或N拍。這就意味著如果你追新,那麼在獲得技術上的收益的同時,也要付出工程上的代價。固然,兩者不可兼得,但是還是有一些策略能夠調和兩者的。最簡單的策略就是:遇見未來的標准。
所謂未來的標准,就是某個標準的草案,它很有希望成為未來的標准,這代表了業界對某項技術的認可,於是,即使它還不成熟,人們也願意為之投資。比如雖然Google曾經提出過N種自有技術,包括SPDY、Gears、OGG等,但卻並沒有把它們變成私有技術,而是對社區開放以及並入W3C的標准草案。
Angular 2採用的就是這種策略。它所參照的標准草案比較多,一個是WebWorker,它藉助WebWorker來把繁重的計算工作移入輔助線程,讓界面線程不受影響;另一個是WebComponents,Angular 2的組件化體系就是對WebComponents的一種實現;最後是CSS scoping,現在雖然市面上有了很多CSS模塊化技術,但事實上最終還是會被統一到CSS Scoping標准上,屆時,如果:local等關鍵字無法進入標准,就會成為私有技術。而Angular 2選擇的方式是直接實現CSS scoping標准草案,比如:host、:host-context等。顯然,採用這種策略,「遇見未來的標准」的成功率會高得多。
可以看到,Angular 2的設計哲學中貫穿著對標准化的熱烈擁抱,這是我判斷它將贏得未來的另一個信心來源。
速度與激情
Angular 2終於擺脫了舊的技術框架束縛,開始了對速度的極致追求。在Angular 1中,雖然絕大多數場景下性能都不是問題,不過還是因為其代碼中存在的一個用來實現臟檢查的三重循環而飽受抨擊 —— 似乎真有人能感受到30毫秒和100毫秒的差異似的。
不過,有軟肋總是不太好。於是,在Angular 2中,通過重新設計和引入新技術,從原理上對速度進行了提升,據官方以前提供的一個數據說是把「變更檢測」的效率提升了500%。
它在「變更檢測」演算法上做了兩項主要的改進:
在設計上,把以前的「多輪檢查、直到穩定」策略改成了「一輪檢查、直接穩定」策略。
當然,這會對自己的代碼產生一定的限制,但實際上只在有限的少數幾個場景下才會遇到這個限制,而且官方文檔中也給出了明確的提示。
在實現上,把「變更檢測」演算法移入了由WebWorker創建的輔助線程中執行。
現代的家用電腦很多都已經是多核超線程的,但是瀏覽網頁時實際上無法充分利用全部線程,而WebWorker提供了一個新的機制,
讓一些相對繁重的計算工作運行在輔助線程中,等執行完了再通知主線程。即使你不明白WebWorker的工作原理,
至少也能知道Ajax請求是不會阻塞界面響應的,WebWorker也一樣。
除此之外,Angular還對數據源進行了抽象,你完全可以用ImmutableJS來作為Angular的數據源,獲得其在提升「變更檢測」速度方面的所有優勢。
除了「變更檢測」外,Angular以及所有前端SPA程序,都有一個通病:首次載入太慢,要下載完所有js和css才能渲染出完整的界面來。react通過虛擬DOM解決了此問題,而Angular 2則通過獨立的服務端渲染引擎解決了這個問題。我們前面說過,Angular 2把渲染引擎獨立了出來,因此可以在NodeJS中實現服務端的內存渲染。所謂內存渲染就是在內存中把DOM結構渲染出來並發回給瀏覽器,這樣,客戶端不需要等JS代碼下載完就可以顯示出完整的界面了。這種分離還帶來了另一個好處,那就是SEO。SEO同樣是傳統SPA的一個難點,它和服務端渲染是同一個問題的兩個方面,因此隨著服務端渲染的完成,SEO問題也被順便解決了。
讓你無縫升級
Angular 2開發組在早期階段曾犯下一個嚴重的公關錯誤:過早宣布不兼容Angular 1,也不提供從Angular 1到2的升級方案。
這讓Angular 2開發組付出了沉重的代價,可謂傷透了粉絲的心。作為技術人員,這種失誤固然是可以理解的,但卻需要付出更多的努力來彌補它。而Angular 2確實這么做了。
在Angular 2中,開發組提供了一個UpgradeAdapter類,這個升級適配器讓Angular 1.x的所有部件都能和Angular 2.x中的所有部件協同工作。
而最牛的地方在於,它讓你可以一個文件一個文件的逐步升級到Angular 2,而在整個升級過程中,應用可以繼續在線上跑!看著神奇嗎?其實也算不了啥,Google做這種事早就是輕車熟路了。這只不過是對Angular開發組出色的工程化開發能力的一點小小證明而已。
不過,既然如此,當初又何必急匆匆宣布不兼容呢?可見,再出色的工程團隊,如果缺少了和社區溝通的產品運營技巧,也會付出巨大代價。希望Angular開發組以後能謹言慎行,多用行動來平息質疑。
幕後 —— 當Google牽手微軟
當年的瀏覽器大戰,讓人記憶猶新,Chrome的出品商Google和IE的出品商微軟正是瀏覽器大戰的兩大主角。
俗話說:沒有永遠的朋友,也沒有永遠的敵人,只有永遠的…… 精益求精。
正是在這樣的「俗話」指導下,Google與微軟相逢一笑泯恩仇,撤銷了很多針對彼此的訴訟,甚至在一些領域開始合作。而實際上,在他們公開和解之前,就已經開始公開合作了,其契機就是Angular 2。
這就要扯出一點小八卦了。
在Angular 2開發的早期階段,由於傳統JS(ES5)以及當時的ES6草案無法滿足項目組的開發需求,項目組有點煩。後來有人靈機一動開發了一種叫做AtScript的新語言,它是什麼呢?一個帶類型支持和Annotation支持的升級版JS。其實在類型支持方面,TypeScript早就已經做了,而且那時候已經比較成熟,唯一的遺憾是不支持Annotation,也就是像Java中那樣通過@符號定義元數據的方式。
Angular開發組就這樣孤獨的走過了一小段兒時間,後來也不知道怎麼這兩個歡喜冤家就公然牽手了。總之,最後的結果是:TypeScript中加入了與Annotation相似的Decorator特性,而Angular放棄了AtScript改用TypeScript。
這次結合無論對兩大廠商還是對各自的粉絲,都是一個皆大歡喜的結局,稱其為世紀聯手也不為過。此後,Google與微軟不再止於暗送秋波,而是開始了一系列秀恩愛的動作。無論如何,對於開發者來說,這都是一個好消息。
軟粉們可能還記得在6.1的微軟開發者大會上,微軟曾公開提及Angular 2。事實上,TypeScript目前雖然已經相當完備,但應用度仍然不高。就個人感覺來說,Angular 2將是TypeScript的一個殺手級應用。TypeScript如果當選TIOBE年度語言,Angular 2的推出功不可沒。
為什麼我要特意插播這段兒故事呢?那是因為我認為一個產品的未來最終取決於開發組的未來,而不是相反。軟體的本質是人!一個心態開放、講究合作、勇於打破陳規陋習的開發組,才是框架給人信心的根本保障。
後端程序員的終南捷徑
前端程序員自不必說,因為有很多人就是靠Angular進入專業前端領域的。下面這段話主要寫給後端程序員。
不管是想學習新技術還是出於工作需要,都有很多後端程序員對前端技術躍躍欲試。但面對前端讓人眼花繚亂的大量候選技術以及未知的概念,他們往往感覺感覺無所適從。如果你是其中的一員,那麼Angular可以「治癒」你的選擇恐懼症。
正如前面所說,Angular是一個「ALL-IN-ONE」的框架,這就意味著你只要掌握了Angular就可以完成大量的前端工作了。
這首先得益於它對各種技術的封裝,讓你不用關心它的實現細節。Angular隔離了瀏覽器的細節,大多數工作你甚至都不需要知道DOM等前端知識就可以完成。
其次,Angular選擇了TypeScript作為主語言。如果你是個C#程序員,一定會對它的語法感覺似曾相識。沒錯,TypeScript和C#、Delphi有同一個「爹」 —— 傳奇人物Anders Hejlsberg。即使是Java程序員,也不會覺得陌生:強類型、類、介面、註解等等,無一不是後端程序員們耳熟能詳的概念。說到底,並沒有什麼前端語言和後端語言,在語言領域耕耘多年的Anders太熟悉優秀語言的共性了,他所做的取捨值得你信賴。
再次,Angular在前端實現了服務與依賴注入的概念。隨著前端需求的進一步膨脹,即使只算邏輯代碼,其需求復雜度也即將甚至已經趕上了大部分後端程序。所以,後端遇到過的挑戰前端也遲早會遇到,這正是後端程序員彎道超車的好機會,而依賴注入正是後端程序員的看家本領。
最後,Angular對團隊作戰提供了良好的支持,比如模板與代碼的分離、樣式表的局部化、組件化的設計、服務與依賴注入體系等。這些特性讓後端程序員可以先專注於跟後端代碼最像的模型和交互邏輯部分,而把諸如樣式、模板等自己不擅長的部分交給隊友。

8、前端需要學到什麼程度能去找工作。。

先找個工作干著,干一段時間就會了,大城市的公司一般都會培養的,學一段時間就會了

9、現在前端開發工作好找嗎?

如果是技術合格的前端開發工程師,工作還是很好找的。而且最近前端又出現新的開發體系Webassembly.如果是掌握新技術的前端工程師會很吃香的。

10、web前端學到什麼程度可以找工作

關於學到什麼程度找工作,還是要看你想要找什麼樣的工作。如果你只是想做些網頁,成為一個網頁「切圖師」。那的確,學一下h5,足夠對付。但我相信,這樣顯然你是不會滿意的。一個專業的前端開發工程師是必須掌握前端開發三大基本基石HTML、CSS,JavaScript的。而且,光會這些還不夠,必須有了這些語言還需要各種工具的支撐,比較常見的有Dreamweaver,Sublime,HBuilder。還有FontelloFontello 、Secureheaders、Visual Studio CodeVisual Studio Code。

工具只能解決一些特定問題,要解決更加全面的問題就要接觸到框架,三大基本框架有Angular、React、Vue,當然,以後還會接觸到更多Bootstrap、 Fbootstrapp、BootMetro、Gumby、IVORY、Kube這樣的框架。另外,一個優秀的前端開發工程師可能還要掌握SEO、DOM、BOM、Ajax等技能,甚至,網站性能優化和伺服器端的相關基礎知識也是需要了解的。

這樣看來,要想學好前端可不容易,你想找怎樣的工作,完全取決於你掌握的能力水平。

與前端spaseo相關的知識