前端年終總結(jié)

一、工作回顧及成績：

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

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

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

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

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

二、存在問題和不足：

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

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

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

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

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

三、xx年的工作計劃：

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

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

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

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

以上就是自己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)邊距和邊框(元素默認(rèn)效果)。

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

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

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

6.HTML5 為什么只需要寫 ？

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

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

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引擎。

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

最開始渲染引擎和JS引擎并沒有區(qū)分的很明確，后來JS引擎越來越獨(dú)立，內(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(rèn)的樣式。當(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)站分塊，便于閱讀維護(hù)理解。

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ùn)行；

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

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

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

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

getElementsByName()//通過元素的Name屬性的值(IE容錯能力較強(qiáng)，會得到一個數(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ù)沒有返回值時，默認(rèn)返回undefined。null：

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

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í)例傳入的參數(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ù)端將返回此信息，表示確認(rèn)，之后發(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ù)器端暫時無法處理請求（可能是過載或維護(hù)）。

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)致的帶寬浪費(fèi)，前端用變量保存AJAX請求結(jié)果，每次操作本地變量，不用請求，減少請求次數(shù)

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

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

3.什么叫優(yōu)雅降級和漸進(jìn)增強(qiáng)？

優(yōu)雅降級：Web站點(diǎn)在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會檢查以確認(rèn)它們是否能正常工作。由于IE獨(dú)特的盒模型布局問題，針對不同版本的IE的hack實(shí)踐過優(yōu)雅降級了,為那些無法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗(yàn)卻不至于完全失效。漸進(jìn)增強(qiáng)：從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害于基礎(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.線程與進(jìn)程的區(qū)別

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

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

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