Web全棧是目前比較流行的語言。因為前端較其他語言相比，簡單好學，而且現在的互聯網公司幾乎缺少不了Web前端開發，行業的需求致使大量的人轉型前端。對于剛學Web前端的人來講，他們缺乏開發經驗，在項目開發中容易出錯。為了使大家少走彎路，小千綜合一批前端程序員，收集了一些學Web前端最常見的錯誤，供大家學習避免掉坑。

一、JQuery選擇器

在一個HTML DOM 樹中，進行一個比較復雜的元素選擇，不包含某些文字的帶有某某類名的元素的鄰居的父元素的……然后怎么做？寫一個很復雜的jQuery選擇器？

jquery選擇器原理是用正則表達式去分解你的選擇器字符串(這一部分叫做Sizzle)，然后再用內置的一些遍歷函數如prev,next等(其實這些函數也是基于DOM提供的方法)，去找到你想要的元素。

小千建議不要盲目地進行Sizzle的語義歧義測試，而是自己根據自己的邏輯去用prev,next等去找到自己的元素;而且退一萬步來說，要盡量避免使用復雜的選擇器(之前的方案也有提及)，單位個元素用ID，多個元素用類，絕對高效準確。

二、基礎數據結構與算法

現在有兩個不同的JSON，比較復雜，可以參考這里的DEMO中返回的JSON。要比較它們的差異，除了用現成的工具如beyond compare以外，如果我們的機器上沒有安裝這個工具，能如何較快解決？

作為一個程序員，一個個對比是不可行的，對比完也不會有什么收獲。小千建議把之放進Excel中，先排序，再用二分法去快速定位找到有差異的JSON屬性，即使是1024個字段的大數據，也最多10次的定位即可找到。

其實算法這東西，并不是給你一道題目然后把死記下來的內容背出來，而是當你遇到相應的情景時，能想到用這個方法去解決。

三、HTTP協議

現在很多項目中都是用ajax去提交JSON到后臺了，原始的那種HTTP提交已經比較少見，但是我們也不能忘記設置form的method、action的原始提交方式。因為這個才是表單提交的原型，有助于我們理解HTTP協議，例如POST和GET的區別，理解數據是怎么樣從前端到達后端的，又是怎么樣從后端返回到前端。

當你理解了這個，就可以更好地跟后端進行溝通，遇到數據上的問題也能較快地定位解決。

四、javascript 作用域

學過好幾種的編程語言，作用域問題都是老生常談了。在javascript中更是有函數的作用域這一基礎知識。關于這個，小千推薦《javascript權威指南》。

五、HTML/CSS DOCTYPE

曾經項目中遇到這樣一個問題，用其他瀏覽器打開頁面是好的，唯獨是IE8打開時出奇地慢。小千注意到IE8打開時慢但CPU消耗并不高，只是網頁空白很久沒渲染出來，可以排除JS算法上的問題。

經過細心研讀代碼發現，有人把一部分script、 link等標簽放到了DOCTYPE的前面。
　　
DOCTYPE是用來告訴瀏覽器解釋整個文檔的一套法則的，一定要放在HTML部分的最前面，先有script標簽，那就意味著瀏覽器已經開始解釋了，后面再有DOCTYPE也是沒有意義的了。把DOCTYPE放到HTML部分的最前面，一開始提及的問題就解決了。

以上就是小千收集的一些Web前端學習時最常見的錯誤，希望各位初學者們盡量避免掉坑。從最簡單的HTML5基礎到Web前端高級技術，內容還是不少滴！要想精通這里的每一樣技術，都得下苦功夫才行，可以來系統全面的學習一下！

本文來自千鋒教育，轉載請注明出處。

總結

以上是生活随笔為你收集整理的一些学Web前端最常见的错误分享的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。