前端年終總結(jié)

前端年終總結(jié)1

寫這個20xx的年終總結(jié)，沒什么經(jīng)驗之談，只是繼往開來，反省反??；繼續(xù)追逐大神們的腳步，偶爾站在巨人的肩膀上眺望下未來！

一、原諒我，Jquery：

工作之前，那時什么基礎(chǔ)都沒有，只是逼于即將畢業(yè)后的壓力，百度到了前端開發(fā)，就直接從原生JS開始學(xué)了；學(xué)不動了，問了下認識的計算機系的學(xué)長，知道了Jquery，OK，學(xué)吧。然而我并沒有太大興趣。因為我買了本‘高三’，jquery只是對‘高三’進行了整體的封裝，他把我要做的事都做了，那好吧，繼續(xù)原生JS嘍；不得不說那時做的最多的就是原生JS仿寫各種特效；還想了個主題，弄了一堆靜態(tài)頁面，拼了個網(wǎng)站的樣子作為找工作的‘作品’。

后來，我知道我錯了，寫那些只是屬于前端基礎(chǔ)的一小部分，工作畢竟是工作，Demo終難上臺面，團隊的配合以及開發(fā)的效率才是最重要的；現(xiàn)在工作以jquery為主，至于曾經(jīng)寫的各種效果，現(xiàn)在也都有對應(yīng)的現(xiàn)成組件，拿來用就是；之前無知時忽視了的jquery，工作后開始馬不停蹄的搜索各種資源補缺了，還好原生JS沒有丟，作為前端的根基，在jquery以外幫了我不少；現(xiàn)在，基礎(chǔ)組件一般都是以jquery插件的形式做的，但是業(yè)余有時間我都會用原生JS實現(xiàn)一些，因為我不想因為jquery而逐漸忽視原生JS；

二、必須追求的模塊化：

前端的模塊化是非常必要的，之前對模塊化一直是停留在概念階段，沒有太多實踐，只是感覺特別好，畢竟在追逐大神們的腳步嘛！忍不住選擇了玉伯老師的Seajs，試著把原來寫的jquery和幾個組件，劃分成模塊，用Seajs組織到一起；由于工作中的前端結(jié)構(gòu)已趨于穩(wěn)定，一下子不可能整體改，所以我只是在本地新建了個目錄，一有時間就考慮下，怎么以模塊化的搞法從新組織下；私下里，為了證實我在工作的本地前端結(jié)構(gòu)可用，還專門弄了個簡單的博客，按照自己對模塊化的想法，首先以自己的博客作為實驗場，來驗證可行性；不管結(jié)果怎么樣，不管這樣做好不好，就當(dāng)是一種鍛煉吧；愚論拙見，只當(dāng)逗大神們一笑吧；

三、弱小者的強大力量——CSS：

HTML、CSS作為前端開發(fā)最基礎(chǔ)的'一部分，可能在后端眼中不值一提吧（忽視這個小小的吐槽吧），確實我也這么認為；但是，我更認為，前提是你能夠把這些基礎(chǔ)亂熟于心，并且對各種瀏覽器的兼容性了然于胸，閉著眼睛也能寫出簡潔明了的HTML、CSS；好吧，其實這只是我對自己的一個長期的要求；因為模塊化，不只是JS，對應(yīng)的少不了HTML、CSS；為了與JS的模塊化遙相呼應(yīng)，那么CSS的模塊化是不可忽略的，只是就CSS來說，要想做到極致精簡、模塊化、可復(fù)用，不是想想就可以的；

是的，你必須還是得要把一些邏輯性的東西引入CSS才行；

恩，SASS是首選的CSS預(yù)編譯器之一；風(fēng)行于前后端的Bootstrap之前是基于Less的，后來全部開始轉(zhuǎn)向Sass了；所以，無論現(xiàn)在對于Bootstrap熟練度有多少，我想其對于前端樣式的構(gòu)建思想是非常值得學(xué)習(xí)的；以Sass作為前端樣式的構(gòu)建工具，來實現(xiàn)精簡、模塊化、可復(fù)用的樣式，我想那不是夢，當(dāng)然，一切都是需要歷練和積累的；

四、革命性的轉(zhuǎn)折點：Nodejs

不管Nodejs屬于前端還是后端，我想其對于前端工作的變革性影響都是不言而喻的；在我心里，Nodejs將前端的模塊化思想做到了極致，包的數(shù)量多達十幾萬的NPM社區(qū)足以證明其偉大之處；Nodejs內(nèi)部實現(xiàn)了Commonjs規(guī)范，以require模塊的方式調(diào)用內(nèi)部模塊和外部模塊；所以NPM社區(qū)如此強大是必然的；由此各大類庫和框架都實現(xiàn)了基于Nodejs的模塊化實現(xiàn)；并且遠不止這些，基于Nodejs還帶來了前端的工程化；各種前端自動化工具推陳出新，不斷向前端工作注入新的活力；比如：Grunt、Gulp、Browserify、Webpack等等；

不好意思，Nodejs學(xué)的還不多，若有夸大其詞的地方，大神還是忽視我吧；花滿樓的博客只是對Nodejs小小的探索，諸多不足，有待改進，望大神路過指導(dǎo)；

五、話說，我想多了：

每次信誓旦旦做的規(guī)劃，都會隨著時間的腳步漸漸風(fēng)化；每次回顧過去，只留一聲嘆：時間都去哪了？呵呵，還是走好腳下的路吧，畢竟做該做的事總歸是好的；愿和我一樣的小前端們，夢想都不是白日夢！

六、遇見最好的你：Angularjs

目前工作的情況并沒有太大的變動，有些事還是得以團隊工作為重；只是業(yè)余會多些躁動，20xx年，想學(xué)好Angularjs；一方面作為工作內(nèi)的技術(shù)儲備，另一方面，我的實驗場還是需要多些內(nèi)含的，打算首先用Angularjs改造博客的后端程序；權(quán)當(dāng)鍛煉吧！風(fēng)靡前端的框架還有很多，大神們也是有各種論調(diào)，我想選Angularjs因為我胃口小，一口吃不下一個包子，還是細嚼慢咽的好；主要是：Angularjs的思想很吸引我，MVC、路由、雙向數(shù)據(jù)綁定、依賴注入、指令系統(tǒng)等；對我來說既陌生又無限的吊胃口；無論學(xué)的怎么樣，我想理解這些思想對現(xiàn)在的我來說恐怕才是最重要的。

前端年終總結(jié)2

一、工作回顧及成績：

一）在日常工作中，我主要負責(zé)協(xié)助前端程序員做好前端工作。

二）我主要負責(zé)做好前端工作的流程及相關(guān)資源的搜集、整理、匯編工作，并對前端工作流程作了詳細的記錄和計劃安排；

三）對前端程序員每天的工作做好進度及工作記錄，做好工作總結(jié)的匯編；

四）負責(zé)前端程序員每天上傳下載下載各部門程序員的工作匯總并對每天的工作作以及工作計劃、工作總結(jié)及時做好匯總，并對存在的問題做好統(tǒng)計匯報；

五）按時完成各部門交代的工作。

二、存在問題和不足：

我雖然能按時完成工作，但還是有很多不足的地方：

一）是自己對工作的`認識還很不足?？偸橇?xí)慣按著一定的計劃去做事，總是習(xí)慣按著一定的目的去做事，也總不能發(fā)揮出自己最好的方法，不能做到自己想要做好的事?？傆X得沒什么好的事，總是不能發(fā)揮自己專長，總是習(xí)慣于按著自己的想法去做事。這些都是導(dǎo)致自己總是處于一種被動狀態(tài)，總是希望一些工作做得不夠到位。

二）是工作的條理性不夠清晰。不能在工作時間很好地分配工作，工作局面混亂，工作效率不高，不能按時完成工作任務(wù)。

三）專業(yè)知識還不夠全面。專業(yè)知識不夠扎實，有待進一步的深入學(xué)習(xí)和領(lǐng)悟。

四）做事還不夠果斷，有很多需要完成，但缺少一定積極認真的態(tài)度。在日常工作中缺乏認真負責(zé)的態(tài)度，不能積極主動地完成工作。

三、xx年的工作計劃：

一）做到按時上下班，不遲到不早退。能準時參加公司的培訓(xùn)，認真學(xué)習(xí)相關(guān)文件規(guī)定，自覺遵守該項規(guī)定。

二）能夠及時的完成領(lǐng)導(dǎo)交代的工作，積極主動的做好自己的本職工作。

三）能夠虛心的配合同事和其他部門的工作。

四）工作態(tài)度和勤奮敬業(yè)方面。認真負責(zé)的做好本職工作，能夠正確認真的對待每一項工作，工作投入，熱心為大家服務(wù)，認真遵守勞動紀律，保證按時出勤，出勤率高，有效利用工作時間，堅守崗位，需要加班完成工作按時加班加點，保證工作能按時完成。

以上就是自己xx年的工作總結(jié)，工作中總會有各種各樣的困難，我決心和各位同事一起克服，積極應(yīng)對，盡自己最大的努力去解決，不斷提高自己，爭取做一名公司優(yōu)秀的員工，為公司創(chuàng)造價值，同公司一起展望美好的未來！

1.常用那幾種瀏覽器測試？有哪些內(nèi)核(Layout Engine)?(Q1)瀏覽器：IE，Chrome，F(xiàn)ireFox，Safari，Opera。(Q2)內(nèi)核：Trident，Gecko，Presto，Webkit。

2.說下行內(nèi)元素和塊級元素的區(qū)別？行內(nèi)塊元素的兼容性使用？（IE8 以下）

(Q1)行內(nèi)元素：會在水平方向排列，不能包含塊級元素，設(shè)置width無效，height無效(可以設(shè)置line-height)，margin上下無效，padding上下無效。

塊級元素：各占據(jù)一行，垂直方向排列。從新行開始結(jié)束接著一個斷行。(Q2)兼容性：display:inline-block;*display:inline;*zoom:1;

3.清除浮動有哪些方式？比較好的方式是哪一種？(Q1)（1）父級div定義height。

（2）結(jié)尾處加空div標(biāo)簽clear:both。（3）父級div定義偽類:after和zoom。（4）父級div定義overflow:hidden。（5）父級div定義overflow:auto。（6）父級div也浮動，需要定義寬度。（7）父級div定義display:table。（8）結(jié)尾處加br標(biāo)簽clear:both。

(Q2)比較好的是第3種方式，好多網(wǎng)站都這么用。

4.box-sizing常用的屬性有哪些？分別有什么作用？(Q1)box-sizing: content-box|border-box|inherit;(Q2)content-box:寬度和高度分別應(yīng)用到元素的內(nèi)容框。在寬度和高度之外繪制元素的內(nèi)邊距和邊框(元素默認效果)。

border-box:元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進行繪制。通過從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。

5.Doctype作用？標(biāo)準模式與兼容模式各有什么區(qū)別?(Q1)告知瀏覽器的解析器用什么文檔標(biāo)準解析這個文檔。DOCTYPE不存在或格式不正確會導(dǎo)致文檔以兼容模式呈現(xiàn)。

(Q2)標(biāo)準模式的排版和JS運作模式都是以該瀏覽器支持的最高標(biāo)準運行。在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。

6.HTML5 為什么只需要寫 ？

HTML5不基于 SGML，因此不需要對DTD進行引用，但是需要doctype來規(guī)范瀏覽器的行為（讓瀏覽器按照它們應(yīng)該的方式來運行）。

而HTML4.01基于SGML,所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。

7.頁面導(dǎo)入樣式時，使用link和@import有什么區(qū)別？

（1）link屬于XHTML標(biāo)簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用于加載CSS;（2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;（3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標(biāo)簽，無兼容問題。

8.介紹一下你對瀏覽器內(nèi)核的理解？

主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。

渲染引擎：負責(zé)取得網(wǎng)頁的內(nèi)容（HTML、XML、圖像等等）、我們組建一大牛裙前面是4七一，整理訊息（例如加入CSS等），中間是零2七，以及計算網(wǎng)頁的顯示方式，后面是壹武四，是學(xué)習(xí)的就加，不是學(xué)習(xí)的請勿打擾。然后會輸出至顯示器或打印機。瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同，所以渲染的效果也不相同。所有網(wǎng)頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核。JS引擎則：解析和執(zhí)行javascript來實現(xiàn)網(wǎng)頁的動態(tài)效果。

最開始渲染引擎和JS引擎并沒有區(qū)分的很明確，后來JS引擎越來越獨立，內(nèi)核就傾向于只指渲染引擎。

9.html5有哪些新特性？如何處理HTML5新標(biāo)簽的瀏覽器兼容問題？如何區(qū)分 HTML 和 HTML5？(Q1)HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲，多任務(wù)等功能的增加。

(1)繪畫 canvas;(2)用于媒介回放的 video 和 audio 元素;(3)本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失;(4)sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除;(5)語意化更好的內(nèi)容元素，比如 article、footer、header、nav、section;(6)表單控件，calendar、date、time、email、url、search;(7)新的技術(shù)webworker, websocket, Geolocation;(Q2)IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標(biāo)簽，可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽，瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J的樣式。當(dāng)然也可以直接使用成熟的框架、比如html5shim，

10.簡述一下你對HTML語義化的理解？ 用正確的標(biāo)簽做正確的事情。

html語義化讓頁面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于對瀏覽器、搜索引擎解析;即使在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的;搜索引擎的爬蟲也依賴于HTML標(biāo)記來確定上下文和各個關(guān)鍵字的權(quán)重，利于SEO;使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護理解。

JavaScript----------------------------

1.介紹js的基本數(shù)據(jù)類型

Undefined、Null、Boolean、Number、String

2.js有哪些內(nèi)置對象？

數(shù)據(jù)封裝類對象：Object、Array、Boolean、Number 和 String 其他對象：Function、Arguments、Math、Date、RegExp、Error

3.this對象的理解

this總是指向函數(shù)的直接調(diào)用者（而非間接調(diào)用者）； 如果有new關(guān)鍵字，this指向new出來的那個對象；

在事件中，this指向觸發(fā)這個事件的對象，特殊的是，IE中的attachEvent中的this總是指向全局對象Window。

4.eval是做什么的？

它的功能是把對應(yīng)的字符串解析成JS代碼并運行；

應(yīng)該避免使用eval，不安全，非常耗性能（2次，一次解析成js語句，一次執(zhí)行）。由JSON字符串轉(zhuǎn)換為JSON對象的時候可以用eval，var obj =eval('('+ str +')')。

5.DOM怎樣添加、移除、移動、復(fù)制、創(chuàng)建和查找節(jié)點 // 創(chuàng)建新節(jié)點

createDocumentFragment()//創(chuàng)建一個DOM片段 createElement()//創(chuàng)建一個具體的元素 createTextNode()//創(chuàng)建一個文本節(jié)點 // 添加、移除、替換、插入 appendChild()removeChild()replaceChild()insertBefore()//在已有的子節(jié)點前插入一個新的子節(jié)點 // 查找

getElementsByTagName()//通過標(biāo)簽名稱

getElementsByName()//通過元素的Name屬性的值(IE容錯能力較強，會得到一個數(shù)組，其中包括id等于name值的)getElementById()//通過元素Id，唯一性

6.null和undefined的區(qū)別？

null是一個表示“無”的對象，轉(zhuǎn)為數(shù)值時為0；undefined是一個表示“無”的原始值，轉(zhuǎn)為數(shù)值時為NaN。undefined：

（1）變量被聲明了，但沒有賦值時，就等于undefined。

（2)調(diào)用函數(shù)時，應(yīng)該提供的參數(shù)沒有提供，該參數(shù)等于undefined。（3）對象沒有賦值的屬性，該屬性的值為undefined。（4）函數(shù)沒有返回值時，默認返回undefined。null：

（1）作為函數(shù)的參數(shù)，表示該函數(shù)的參數(shù)不是對象。（2）作為對象原型鏈的終點。

7.new操作符具體干了什么呢?（1）創(chuàng)建一個空對象，并且 this 變量引用該對象，同時還繼承了該函數(shù)的原型。（2）屬性和方法被加入到 this 引用的對象中。

（3）新創(chuàng)建的對象由 this 所引用，并且最后隱式的返回 this。

8.JSON 的了解？

JSON(JavaScript Object Notation)是一種輕量級的數(shù)據(jù)交換格式。它是基于JavaScript的一個子集。數(shù)據(jù)格式簡單, 易于讀寫, 占用帶寬小。格式：采用鍵值對，例如：{'age':'12', 'name':'back'}

9.call()和 apply()的區(qū)別和作用？

apply()函數(shù)有兩個參數(shù)：第一個參數(shù)是上下文，第二個參數(shù)是參數(shù)組成的數(shù)組。如果上下文是null，則使用全局對象代替。如：function.apply(this,[1,2,3]);call()的第一個參數(shù)是上下文，后續(xù)是實例傳入的參數(shù)序列。如：function.call(this,1,2,3);

10.如何獲取UA？

function whatBrowser(){

document.Browser.Name.value=navigator.appName;

document.Browser.Version.value=navigator.appVersion;

document.Browser.Code.value=navigator.appCodeName;

document.Browser.Agent.value=navigator.userAgent;

} 其他

----------------------------

1.HTTP狀態(tài)碼知道哪些？

Continue 繼續(xù)，一般在發(fā)送post請求時，已發(fā)送了http header之后服務(wù)端將返回此信息，表示確認，之后發(fā)送具體參數(shù)信息 200 OK 正常返回信息

201 Created 請求成功并且服務(wù)器創(chuàng)建了新的資源 202 Accepted 服務(wù)器已接受請求，但尚未處理

301 Moved Permanently 請求的網(wǎng)頁已永久移動到新位置。302 Found 臨時性重定向。

303 See Other 臨時性重定向，且總是使用 GET 請求新的 URI。304 Not Modified 自從上次請求后，請求的網(wǎng)頁未修改過。400 Bad Request 服務(wù)器無法理解請求的格式，客戶端不應(yīng)當(dāng)嘗試再次使用相同的內(nèi)容發(fā)起請求。

401 Unauthorized 請求未授權(quán)。403 Forbidden 禁止訪問。

404 Not Found 找不到如何與 URI 相匹配的資源。500 Internal Server Error 最常見的服務(wù)器端錯誤。

503 Service Unavailable 服務(wù)器端暫時無法處理請求（可能是過載或維護）。

2.你有哪些性能優(yōu)化的方法？

（1）減少http請求次數(shù)：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網(wǎng)頁Gzip，CDN托管，data緩存，圖片服務(wù)器。

（2）前端模板 JS+數(shù)據(jù)，減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費，前端用變量保存AJAX請求結(jié)果，每次操作本地變量，不用請求，減少請求次數(shù)

（3）用innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化javascript性能。（4）當(dāng)需要設(shè)置的樣式很多時設(shè)置className而不是直接操作style。（5）少用全局變量、緩存DOM節(jié)點查找的結(jié)果。減少IO讀取操作。

（6）避免使用CSS Expression（css表達式)又稱Dynamic properties(動態(tài)屬性)。（7）圖片預(yù)加載，將樣式表放在頂部，將腳本放在底部 加上時間戳。

3.什么叫優(yōu)雅降級和漸進增強？

優(yōu)雅降級：Web站點在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會檢查以確認它們是否能正常工作。由于IE獨特的盒模型布局問題，針對不同版本的IE的hack實踐過優(yōu)雅降級了,為那些無法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至于完全失效。漸進增強：從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害于基礎(chǔ)瀏覽器的額外樣式和功能的。當(dāng)瀏覽器支持時，它們會自動地呈現(xiàn)出來并發(fā)揮作用。

4.哪些常見操作會造成內(nèi)存泄漏？

內(nèi)存泄漏指任何對象在您不再擁有或需要它之后仍然存在。垃圾回收器定期掃描對象，并計算引用了每個對象的其他對象的數(shù)量。如果一個對象的引用數(shù)量為 0（沒有其他對象引用過該對象），或?qū)υ搶ο蟮奈┮灰檬茄h(huán)的，那么該對象的內(nèi)存即可回收。

setTimeout 的第一個參數(shù)使用字符串而非函數(shù)的話，會引發(fā)內(nèi)存泄漏。

閉包、控制臺日志、循環(huán)（在兩個對象彼此引用且彼此保留時，就會產(chǎn)生一個循環(huán)）。

5.線程與進程的區(qū)別

一個程序至少有一個進程,一個進程至少有一個線程。線程的劃分尺度小于進程，使得多線程程序的并發(fā)性高。

另外，進程在執(zhí)行過程中擁有獨立的內(nèi)存單元，而多個線程共享內(nèi)存，從而極大地提高了程序的運行效率。

線程在執(zhí)行過程中與進程還是有區(qū)別的。每個獨立的線程有一個程序運行的入口、順序執(zhí)行序列和程序的出口。但是線程不能夠獨立執(zhí)行，必須依存在應(yīng)用程序中，由應(yīng)用程序提供多個線程執(zhí)行控制。從邏輯角度來看，多線程的意義在于一個應(yīng)用程序中，有多個執(zhí)行部分可以同時執(zhí)行。但操作系統(tǒng)并沒有將多個線程看做多個獨立的應(yīng)用，來實現(xiàn)進程的調(diào)度和管理以及資源分配。這就是進程和線程的重要區(qū)別。