01 前后端的區(qū)別：

前端的復(fù)雜度主要在如何優(yōu)雅地處理。

  • 用戶交互體驗(yàn)好且簡潔；
  • 瀏覽器兼容；
  • 移動端自適應(yīng)適配；
  • 完美”像素級拷貝“設(shè)計(jì)師的原型；
  • 等其他看上去比較小的細(xì)節(jié)；

而對于高并發(fā)、存儲過程等并不十分在意。

打開網(wǎng)易新聞 查看精彩圖片

而后端的復(fù)雜度主要體現(xiàn)在如何完美應(yīng)對。

  • 高并發(fā)、load balancer；
  • CDN 緩存靜態(tài)文件（現(xiàn)在大多是 ops 負(fù)責(zé)）；
  • 文件同步、鎖；
  • 存儲過程；
  • 加密；
  • 等雖然表面看不到，但是實(shí)際處理起來非常費(fèi)勁的任務(wù)；

02 前后端標(biāo)準(zhǔn)不同：

由于對待”簡單“和”復(fù)雜“的標(biāo)準(zhǔn)不同，就有了截然不同的評價(jià)。

打開網(wǎng)易新聞 查看精彩圖片

前端和后端所使用的不同的技術(shù)棧。

當(dāng)一個(gè)后端不得不調(diào)試 CSS 的時(shí)候，可能會覺得 CSS 很簡單，因?yàn)樗坪踉趺磳懚伎梢赃_(dá)到目標(biāo)。但殊不知由于 CSS 不是正交（non-orthogonal）的特性，有時(shí)候很簡單的一個(gè)寫法卻會引起某種意想不到的效果，更不談瀏覽器兼容性問題等等。

03 前端基本功實(shí)現(xiàn)舉例：

一個(gè)著名的例子：外邊距折疊（margin collapsing）

HTML和CSS寫出來的實(shí)際效果：

打開網(wǎng)易新聞 查看精彩圖片

標(biāo)簽和標(biāo)簽之間發(fā)生了外邊距折疊，明明看上去很簡單的一個(gè)需求，若不了解其底層原理，可能會有修復(fù)不完的 bug。