整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
所周知，CSS( 中文名稱：層疊款式表，英文全稱：Cascading Style Sheets )是一種用來體現HTML（規范通用符號言語的一個應用）或XML（規范通用符號言語的一個子集）等文件款式的計算機言語。
CSS不只可以靜態地潤飾網頁，合作各種腳本言語動態地對網頁各元素進行格式化，咱們還可以利用CSS來制作各種各樣的圖形與形狀，包括正方形、長方形、圓形、橢圓等常見形狀，甚至陰陽八卦、太空人等圖形都能完成。下面，就讓咱們一起來看看這究竟是怎樣完成的吧。
上一篇文章跟大家介紹了十五種，這篇文章繼續跟大家介紹：
十六、五邊形
十七、六邊形
十八、八邊形
十九、心形
二十、無限符圖案
二十一、菱形
二十二、磚石盾牌
二十三、吃豆人
二十四、圓錐形
二十五、月亮
零基礎的想要學習HTML5技術，歡迎來重慶千鋒兩周免費試聽課程，100%面授讓你學習輕松。
SS能夠生成各種形狀。正方形和矩形很容易，因為它們是 web 的自然形狀。添加寬度和高度，就得到了所需的精確大小的矩形。添加邊框半徑，你就可以把這個形狀變成圓形，足夠多的邊框半徑，你就可以把這些矩形變成圓形和橢圓形。
我們還可以使用 CSS 偽元素中的 ::before 和 ::after，這為我們提供了向原始元素添加另外兩個形狀的可能性。通過巧妙地使用定位、轉換和許多其他技巧，我們可以只用一個 HTML 元素在 CSS 中創建許多形狀。
雖然我們現在大都使用字體圖標或者svg圖片，似乎使用 CSS 來做圖標意義不是很大，但怎么實現這些圖標用到的一些技巧及思路是很值得我們的學習。
1.正方形
#square {
width: 100px;
height: 100px;
background: red;
}
2.長方形
#rectangle {
width: 200px;
height: 100px;
background: red;
}
3.圓形
#circle {
width: 100px;
height: 100px;
background: red;
border-radius: 50%
}
4.橢圓形
#oval {
width: 200px;
height: 100px;
background: red;
border-radius: 100px / 50px;
}
5.上三角
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
6.下三角
#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
7.左三角
#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
8.右三角
#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
9.左上角
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
10.右上角
#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
11.左下角
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
12.右下角
#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
13.箭頭
#curvedarrow {
position: relative;
width: 0;
height: 0;
border-top: 9px solid transparent;
border-right: 9px solid red;
transform: rotate(10deg);
}
#curvedarrow:after {
content: "";
position: absolute;
border: 0 solid transparent;
border-top: 3px solid red;
border-radius: 20px 0 0 0;
top: -12px;
left: -9px;
width: 12px;
height: 12px;
transform: rotate(45deg);
}
14.梯形
#trapezoid {
border-bottom: 100px solid red;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
height: 0;
width: 100px;
}
15.平行四邊形
#parallelogram {
width: 150px;
height: 100px;
transform: skew(20deg);
background: red;
}
16.星星 (6角)
#star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
#star-six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}
17.星星 (5角)
#star-five {
margin: 50px 0;
position: relative;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
transform: rotate(35deg);
}
#star-five:before {
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
content: '';
transform: rotate(-35deg);
}
#star-five:after {
position: absolute;
display: block;
color: red;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
transform: rotate(-70deg);
content: '';
}
18.五邊形
#pentagon {
position: relative;
width: 54px;
box-sizing: content-box;
border-width: 50px 18px 0;
border-style: solid;
border-color: red transparent;
}
#pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -85px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent red;
}
19.六邊形
#hexagon {
width: 100px;
height: 55px;
background: red;
position: relative;
}
#hexagon:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid red;
}
#hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid red;
}
20.八邊形
#octagon {
width: 100px;
height: 100px;
background: red;
position: relative;
}
#octagon:before {
content: "";
width: 100px;
height: 0;
position: absolute;
top: 0;
left: 0;
border-bottom: 29px solid red;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
}
#octagon:after {
content: "";
width: 100px;
height: 0;
position: absolute;
bottom: 0;
left: 0;
border-top: 29px solid red;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
}
21.愛心
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
#heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
22.無窮大
#infinity {
position: relative;
width: 212px;
height: 100px;
box-sizing: content-box;
}
#infinity:before,
#infinity:after {
content: "";
box-sizing: content-box;
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
border: 20px solid red;
border-radius: 50px 50px 0 50px;
transform: rotate(-45deg);
}
#infinity:after {
left: auto;
right: 0;
border-radius: 50px 50px 50px 0;
transform: rotate(45deg);
}
23.菱形
#diamond {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: red;
position: relative;
top: -50px;
}
#diamond:after {
content: '';
position: absolute;
left: -50px;
top: 50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: red;
}
代碼部署后可能存在的BUG沒法實時知道，事后為了解決這些BUG，花了大量的時間進行log 調試，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。
24.鉆石1
#diamond-shield {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 20px solid red;
position: relative;
top: -50px;
}
#diamond-shield:after {
content: '';
position: absolute;
left: -50px;
top: 20px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid red;
}
25.鉆石2
#cut-diamond {
border-style: solid;
border-color: transparent transparent red transparent;
border-width: 0 25px 25px 25px;
height: 0;
width: 50px;
box-sizing: content-box;
position: relative;
margin: 20px 0 50px 0;
}
#cut-diamond:after {
content: "";
position: absolute;
top: 25px;
left: -25px;
width: 0;
height: 0;
border-style: solid;
border-color: red transparent transparent transparent;
border-width: 70px 50px 0 50px;
}
26.鉆戒
#diamond-narrow {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 70px solid red;
position: relative;
top: -50px;
}
#diamond-narrow:after {
content: '';
position: absolute;
left: -50px;
top: 70px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid red;
}
27. 雞蛋
#egg {
display: block;
width: 126px;
height: 180px;
background-color: red;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
28.吃豆人
#pacman {
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-top: 60px solid red;
border-left: 60px solid red;
border-bottom: 60px solid red;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border-bottom-left-radius: 60px;
border-bottom-right-radius: 60px;
}
29.對話泡泡
#talkbubble {
width: 120px;
height: 80px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content: "";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
30. 12點 爆發
#burst-12 {
background: red;
width: 80px;
height: 80px;
position: relative;
text-align: center;
}
#burst-12:before,
#burst-12:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: red;
}
#burst-12:before {
transform: rotate(30deg);
}
#burst-12:after {
transform: rotate(60deg);
}
31. 8點 爆發
#burst-8 {
background: red;
width: 80px;
height: 80px;
position: relative;
text-align: center;
transform: rotate(20deg);
}
#burst-8:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: red;
transform: rotate(135deg);
}
32.太極
#yin-yang {
width: 96px;
box-sizing: content-box;
height: 48px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
#yin-yang:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid red;
border-radius: 100%;
width: 12px;
height: 12px;
box-sizing: content-box;
}
#yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 18px solid #eee;
border-radius: 100%;
width: 12px;
height: 12px;
box-sizing: content-box;
}
33.徽章絲帶
#badge-ribbon {
position: relative;
background: red;
height: 100px;
width: 100px;
border-radius: 50px;
}
#badge-ribbon:before,
#badge-ribbon:after {
content: '';
position: absolute;
border-bottom: 70px solid red;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
top: 70px;
left: -10px;
transform: rotate(-140deg);
}
#badge-ribbon:after {
left: auto;
right: -10px;
transform: rotate(140deg);
}
34.太空入侵者（電腦游戲名）
#space-invader {
box-shadow: 0 0 0 1em red,
0 1em 0 1em red,
-2.5em 1.5em 0 .5em red,
2.5em 1.5em 0 .5em red,
-3em -3em 0 0 red,
3em -3em 0 0 red,
-2em -2em 0 0 red,
2em -2em 0 0 red,
-3em -1em 0 0 red,
-2em -1em 0 0 red,
2em -1em 0 0 red,
3em -1em 0 0 red,
-4em 0 0 0 red,
-3em 0 0 0 red,
3em 0 0 0 red,
4em 0 0 0 red,
-5em 1em 0 0 red,
-4em 1em 0 0 red,
4em 1em 0 0 red,
5em 1em 0 0 red,
-5em 2em 0 0 red,
5em 2em 0 0 red,
-5em 3em 0 0 red,
-3em 3em 0 0 red,
3em 3em 0 0 red,
5em 3em 0 0 red,
-2em 4em 0 0 red,
-1em 4em 0 0 red,
1em 4em 0 0 red,
2em 4em 0 0 red;
background: red;
width: 1em;
height: 1em;
overflow: hidden;
margin: 50px 0 70px 65px;
}
35.電視
#tv {
position: relative;
width: 200px;
height: 150px;
margin: 20px 0;
background: red;
border-radius: 50% / 10%;
color: white;
text-align: center;
text-indent: .1em;
}
#tv:before {
content: '';
position: absolute;
top: 10%;
bottom: 10%;
right: -5%;
left: -5%;
background: inherit;
border-radius: 5% / 50%;
}
36.雪佛龍
#chevron {
position: relative;
text-align: center;
padding: 12px;
margin-bottom: 6px;
height: 60px;
width: 200px;
}
#chevron:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 51%;
background: red;
transform: skew(0deg, 6deg);
}
#chevron:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
background: red;
transform: skew(0deg, -6deg);
}
37.放大鏡
#magnifying-glass {
font-size: 10em;
display: inline-block;
width: 0.4em;
box-sizing: content-box;
height: 0.4em
border: 0.1em solid red;
position: relative;
border-radius: 0.35em;
}
#magnifying-glass:before {
content: "";
display: inline-block;
position: absolute;
right: -0.25em;
bottom: -0.1em;
border-width: 0;
background: red;
width: 0.35em;
height: 0.08em;
transform: rotate(45deg);
}
38.Facebook圖標
#facebook-icon {
background: red;
text-indent: -999em;
width: 100px;
height: 110px;
box-sizing: content-box;
border-radius: 5px;
position: relative;
overflow: hidden;
border: 15px solid red;
border-bottom: 0;
}
#facebook-icon:before {
content: "/20";
position: absolute;
background: red;
width: 40px;
height: 90px;
bottom: -30px;
right: -37px;
border: 20px solid #eee;
border-radius: 25px;
box-sizing: content-box;
}
#facebook-icon:after {
content: "/20";
position: absolute;
width: 55px;
top: 50px;
height: 20px;
background: #eee;
right: 5px;
box-sizing: content-box;
}
39.月亮
#moon {
width: 80px;
height: 80px;
border-radius: 50%;
box-shadow: 15px 15px 0 0 red;
}
40.旗
#flag {
width: 110px;
height: 56px;
box-sizing: content-box;
padding-top: 15px;
position: relative;
background: red;
color: white;
font-size: 11px;
letter-spacing: 0.2em;
text-align: center;
text-transform: uppercase;
}
#flag:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-bottom: 13px solid #eee;
border-left: 55px solid transparent;
border-right: 55px solid transparent;
}
41.圓錐
#cone {
width: 0;
height: 0;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-top: 100px solid red;
border-radius: 50%;
}
42.十字架
#cross {
background: red;
height: 100px;
position: relative;
width: 20px;
}
#cross:after {
background: red;
content: "";
height: 20px;
left: -40px;
position: absolute;
top: 40px;
width: 100px;
}
43.根基
#base {
background: red;
display: inline-block;
height: 55px;
margin-left: 20px;
margin-top: 55px;
position: relative;
width: 100px;
}
#base:before {
border-bottom: 35px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
content: "";
height: 0;
left: 0;
position: absolute;
top: -35px;
width: 0;
}
44.指示器
#pointer {
width: 200px;
height: 40px;
position: relative;
background: red;
}
#pointer:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid white;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
#pointer:before {
content: "";
position: absolute;
right: -20px;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid red;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
45.鎖
篇
前端開發是一個非常特殊的行業，它的歷史實際上不是很長，但是知識之繁雜，技術迭代速度之快是其他技術所不能比擬的。
winter在他的《重學前端》課程中提到：
到現在為止，前端工程師已經成為研發體系中的重要崗位之一。可是，與此相對的是，我發現極少或者幾乎沒有大學的計算機專業愿意開設前端課程，更沒有系統性的教學方案出現。大部分前端工程師的知識，其實都是來自于實踐和工作中零散的學習。
這樣是一個非常真實的現狀，實際上很多前端開發者都是自學甚至轉行過來的，前端入門簡單，學習了幾個API以后上手做項目也很簡單，但是這往往成為了限制自身發展的瓶頸。
只是停留在會用階段是遠遠不夠的，我們還需要不斷探索和深入。現在市面上并不缺少學習教程，技術文章，如果盲目的學習你會發現看過以后的知識留存率會很低，而且發現沒有了解到的知識越來越多，這會讓人產生焦慮。
實際上，除了堅持學習的強大的自驅力，你還需要一個很簡單的學習方法。那就是：建立自己的知識體系。它能幫助你更系統性的學習，同時你也時刻能知道自己哪些地方是不足的。
我會把我工作和學習中接觸到的知識全部歸納到我的知識體系中，其中不僅僅包括我已經學過的，還有很多我沒有來得及學習的。
這不僅僅是我的知識體系，更是我時刻提醒自己的自檢清單。
下面我會把我的自檢清單分享給大家，你可以按照清單上的知識檢測自己還有哪些不足和提升，我也建議大家建自己的知識體系，這樣工作或者學習甚至面試時，你能快速定位到知識清單中的點，如果你有哪些我沒歸納到的點，歡迎在評論區告訴我。
一、JavaScript基礎
前端工程師吃飯的家伙，深度、廣度一樣都不能差。
變量和類型
1.JavaScript規定了幾種語言類型
2.JavaScript對象的底層數據結構是什么
3.Symbol類型在實際開發中的應用、可手動實現一個簡單的Symbol
4.JavaScript中的變量在內存中的具體存儲形式
5.基本類型對應的內置對象，以及他們之間的裝箱拆箱操作
6.理解值類型和引用類型
7.null和undefined的區別
8.至少可以說出三種判斷JavaScript數據類型的方式，以及他們的優缺點，如何準確的 判斷數組類型
9.可能發生隱式類型轉換的場景以及轉換原則，應如何避免或巧妙應用
10.出現小數精度丟失的原因，JavaScript可以存儲的最大數字、最大安全數字。JavaScript處理大數字的方法、避免精度丟失的方法
原型和原型鏈
1.理解原型設計模式以及JavaScript中的原型規則
2.instanceof的底層實現原理，手動實現一個instanceof
4.實現繼承的幾種方式以及他們的優缺點
5.至少說出一種開源項目(如Node)中應用原型繼承的案例
6.可以描述new一個對象的詳細過程，手動實現一個new操作符
7.理解es6 class構造以及繼承的底層實現原理
作用域和閉包
1.理解詞法作用域和動態作用域
2.理解JavaScript的作用域和作用域鏈
3.理解JavaScript的執行上下文棧，可以應用堆棧信息快速定位問題
4.this的原理以及幾種不同使用場景的取值
5.閉包的實現原理和作用，可以列舉幾個開發中閉包的實際應用
6.理解堆棧溢出和內存泄漏的原理，如何防止
7.如何處理循環的異步操作
8.理解模塊化解決的實際問題，可列舉幾個模塊化方案并理解其中原理
執行機制
1.為何try里面放return，finally還會執行，理解其內部機制
2.JavaScript如何實現異步編程，可以詳細描述EventLoop機制
3.宏任務和微任務分別有哪些
4.可以快速分析一個復雜的異步嵌套邏輯，并掌握分析方法
5.使用Promise實現串行
6.Node與瀏覽器EventLoop的差異
7.如何在保證頁面運行流暢的情況下處理海量數據
語法和API
1.理解ECMAScript和JavaScript的關系
2.熟練運用es5、es6提供的語法規范，
3.熟練掌握JavaScript提供的全局對象（例如Date、Math）、全局函數（例如decodeURI、isNaN）、全局屬性（例如Infinity、undefined）
4.熟練應用map、reduce、filter 等高階函數解決問題
5.setInterval需要注意的點，使用settimeout實現setInterval
6.JavaScript提供的正則表達式API、可以使用正則表達式（郵箱校驗、URL解析、去重等）解決常見問題
7.JavaScript異常處理的方式，統一的異常處理方案
二、HTML和CSS
HTML
1.從規范的角度理解HTML，從分類和語義的角度使用標簽
2.常用頁面標簽的默認樣式、自帶屬性、不同瀏覽器的差異、處理瀏覽器兼容問題的方式
3.元信息類標簽(head、title、meta)的使用目的和配置方法
4.HTML5離線緩存原理
5.可以使用Canvas API、SVG等繪制高性能的動畫
CSS
1.CSS盒模型，在不同瀏覽器的差異
2.CSS所有選擇器及其優先級、使用場景，哪些可以繼承，如何運用at規則
3.CSS偽類和偽元素有哪些，它們的區別和實際應用
4.HTML文檔流的排版規則，CSS幾種定位的規則、定位參照物、對文檔流的影響，如何選擇最好的定位方式，雪碧圖實現原理
5.水平垂直居中的方案、可以實現6種以上并對比它們的優缺點
6.BFC實現原理，可以解決的問題，如何創建BFC
7.可使用CSS函數復用代碼，實現特殊效果
8.PostCSS、Sass、Less的異同，以及使用配置，至少掌握一種
9.CSS模塊化方案、如何配置按需加載、如何防止CSS阻塞渲染
10.熟練使用CSS實現常見動畫，如漸變、移動、旋轉、縮放等等
11.CSS瀏覽器兼容性寫法，了解不同API在不同瀏覽器下的兼容性情況
12.掌握一套完整的響應式布局方案
手寫
1.手寫圖片瀑布流效果
2.使用CSS繪制幾何圖形（圓形、三角形、扇形、菱形等）
3.使用純CSS實現曲線運動（貝塞爾曲線）
4.實現常用布局（三欄、圣杯、雙飛翼、吸頂），可是說出多種方式并理解其優缺點
三、計算機基礎
關于編譯原理，不需要理解非常深入，但是最基本的原理和概念一定要懂，這對于學習一門編程語言非常重要
編譯原理
1.理解代碼到底是什么，計算機如何將代碼轉換為可以運行的目標程序
2.正則表達式的匹配原理和性能優化
3.如何將JavaScript代碼解析成抽象語法樹(AST)
4.base64的編碼原理
5.幾種進制的相互轉換計算方法，在JavaScript中如何表示和轉換
網絡協議
1.理解什么是協議，了解TCP/IP網絡協議族的構成，每層協議在應用程序中發揮的作用
2.三次握手和四次揮手詳細原理，為什么要使用這種機制
3.有哪些協議是可靠，TCP有哪些手段保證可靠交付
4.DNS的作用、DNS解析的詳細過程，DNS優化原理
5.CDN的作用和原理
6.HTTP請求報文和響應報文的具體組成，能理解常見請求頭的含義，有幾種請求方式，區別是什么
7.HTTP所有狀態碼的具體含義，看到異常狀態碼能快速定位問題
8.HTTP1.1、HTTP2.0帶來的改變
9.HTTPS的加密原理，如何開啟HTTPS，如何劫持HTTPS請求
10.理解WebSocket協議的底層原理、與HTTP的區別
設計模式
1.熟練使用前端常用的設計模式編寫代碼，如單例模式、裝飾器模式、代理模式等
2.發布訂閱模式和觀察者模式的異同以及實際應用
3.可以說出幾種設計模式在開發中的實際應用，理解框架源碼中對設計模式的應用
四、數據結構和算法
據我了解的大部分前端對這部分知識有些欠缺，甚至抵觸，但是，如果突破更高的天花板，這部分知識是必不可少的，而且我親身經歷——非常有用！
JavaScript編碼能力
1.多種方式實現數組去重、扁平化、對比優缺點
2.多種方式實現深拷貝、對比優缺點
3.手寫函數柯里化工具函數、并理解其應用場景和優勢
4.手寫防抖和節流工具函數、并理解其內部原理和應用場景
5.實現一個sleep函數
手動實現前端輪子
1.手動實現call、apply、bind
2.手動實現符合Promise/A+規范的Promise、手動實現async await
3.手寫一個EventEmitter實現事件發布、訂閱
4.可以說出兩種實現雙向綁定的方案、可以手動實現
5.手寫JSON.stringify、JSON.parse
6.手寫一個模版引擎，并能解釋其中原理
7.手寫懶加載、下拉刷新、上拉加載、預加載等效果
數據結構
1.理解常見數據結構的特點，以及他們在不同場景下使用的優缺點
2.理解數組、字符串的存儲原理，并熟練應用他們解決問題
3.理解二叉樹、棧、隊列、哈希表的基本結構和特點，并可以應用它解決問題
4.了解圖、堆的基本結構和使用場景
算法
1.可計算一個算法的時間復雜度和空間復雜度，可估計業務邏輯代碼的耗時和內存消耗
2.至少理解五種排序算法的實現原理、應用場景、優缺點，可快速說出時間、空間復雜度
3.了解遞歸和循環的優缺點、應用場景、并可在開發中熟練應用
4.可應用回溯算法、貪心算法、分治算法、動態規劃等解決復雜問題
5.前端處理海量數據的算法方案
五、運行環境
我們需要理清語言和環境的關系：
ECMAScript描述了JavaScript語言的語法和基本對象規范
瀏覽器作為JavaScript的一種運行環境，為它提供了：文檔對象模型（DOM），描述處理網頁內容的方法和接口、瀏覽器對象模型（BOM），描述與瀏覽器進行交互的方法和接口
Node也是JavaScript的一種運行環境，為它提供了操作I/O、網絡等API
瀏覽器API
1.瀏覽器提供的符合W3C標準的DOM操作API、瀏覽器差異、兼容性
2.瀏覽器提供的瀏覽器對象模型 (BOM)提供的所有全局API、瀏覽器差異、兼容性
3.大量DOM操作、海量數據的性能優化(合并操作、Diff、requestAnimationFrame等)
4.瀏覽器海量數據存儲、操作性能優化
5.DOM事件流的具體實現機制、不同瀏覽器的差異、事件代理
6.前端發起網絡請求的幾種方式及其底層實現、可以手寫原生ajax、fetch、可以熟練使用第三方庫
7.瀏覽器的同源策略，如何避免同源策略，幾種方式的異同點以及如何選型
8.瀏覽器提供的幾種存儲機制、優缺點、開發中正確的選擇
9.瀏覽器跨標簽通信
瀏覽器原理
1.各瀏覽器使用的JavaScript引擎以及它們的異同點、如何在代碼中進行區分
2.請求數據到請求結束與服務器進行了幾次交互
3.可詳細描述瀏覽器從輸入URL到頁面展現的詳細過程
4.瀏覽器解析HTML代碼的原理，以及構建DOM樹的流程
5.瀏覽器如何解析CSS規則，并將其應用到DOM樹上
6.瀏覽器如何將解析好的帶有樣式的DOM樹進行繪制
7.瀏覽器的運行機制，如何配置資源異步同步加載
8.瀏覽器回流與重繪的底層原理，引發原因，如何有效避免
9.瀏覽器的垃圾回收機制，如何避免內存泄漏
10.瀏覽器采用的緩存方案，如何選擇和控制合適的緩存方案
Node
1.理解Node在應用程序中的作用，可以使用Node搭建前端運行環境、使用Node操作文件、操作數據庫等等
2.掌握一種Node開發框架，如Express，Express和Koa的區別
3.熟練使用Node提供的API如Path、Http、Child Process等并理解其實現原理
4.Node的底層運行原理、和瀏覽器的異同
5.Node事件驅動、非阻塞機制的實現原理
六、框架和類庫
輪子層出不窮，從原理上理解才是正道
TypeScript
1.理解泛型、接口等面向對象的相關概念，TypeScript對面向對象理念的實現
2.理解使用TypeScript的好處，掌握TypeScript基礎語法
3.TypeScript的規則檢測原理
4.可以在React、Vue等框架中使用TypeScript進行開發
React
1.React和vue選型和優缺點、核心架構的區別
2.React中setState的執行機制，如何有效的管理狀態
3.React的事件底層實現機制
4.React的虛擬DOM和Diff算法的內部實現
5.React的Fiber工作原理，解決了什么問題
6.React Router和Vue Router的底層實現原理、動態加載實現原理
7.可熟練應用React API、生命周期等，可應用HOC、render props、Hooks等高階用法解決問題
8.基于React的特性和原理，可以手動實現一個簡單的React
Vue
1.熟練使用Vue的API、生命周期、鉤子函數
2.MVVM框架設計理念
3.Vue雙向綁定實現原理、Diff算法的內部實現
4.Vue的事件機制
5.從template轉換成真實DOM的實現機制
多端開發
2.單頁面應用（SPA）的原理和優缺點，掌握一種快速開發SPA的方案
3.理解Viewport、em、rem的原理和用法，分辨率、px、ppi、dpi、dp的區別和實際應用
3.移動端頁面適配解決方案、不同機型適配方案
4.掌握一種JavaScript移動客戶端開發技術，如React Native：可以搭建React Native開發環境，熟練進行開發，可理解React Native的運作原理，不同端適配
5.掌握一種JavaScript PC客戶端開發技術，如Electron：可搭建Electron開發環境，熟練進行開發，可理解Electron的運作原理
6.掌握一種小程序開發框架或原生小程序開發
7.理解多端框架的內部實現原理，至少了解一個多端框架的使用
數據流管理
1.掌握React和Vue傳統的跨組件通信方案，對比采用數據流管理框架的異同
2.熟練使用Redux管理數據流，并理解其實現原理，中間件實現原理
3.熟練使用Mobx管理數據流，并理解其實現原理，相比Redux有什么優勢
4.熟練使用Vuex管理數據流，并理解其實現原理
5.以上數據流方案的異同和優缺點，不情況下的技術選型
實用庫
1.至少掌握一種UI組件框架，如antd design，理解其設計理念、底層實現
2.掌握一種圖表繪制框架，如Echart，理解其設計理念、底層實現，可以自己實現圖表
3.掌握一種GIS開發框架，如百度地圖API
4.掌握一種可視化開發框架，如Three.js、D3
5.工具函數庫，如lodash、underscore、moment等，理解使用的工具類或工具函數的具體實現原理
開發和調試
1.熟練使用各瀏覽器提供的調試工具
2.熟練使用一種代理工具實現請求代理、抓包，如charls
3.可以使用Android、IOS模擬器進行調試，并掌握一種真機調試方案
4.了解Vue、React等框架調試工具的使用
七、前端工程
前端工程化：以工程化方法和工具提高開發生產效率、降低維護難度
項目構建
1.理解npm、yarn依賴包管理的原理，兩者的區別
2.可以使用npm運行自定義腳本
3.理解Babel、ESLint、webpack等工具在項目中承擔的作用
4.ESLint規則檢測原理，常用的ESLint配置
5.Babel的核心原理，可以自己編寫一個Babel插件
6.可以配置一種前端代碼兼容方案，如Polyfill
7.Webpack的編譯原理、構建流程、熱更新原理，chunk、bundle和module的區別和應用
8.可熟練配置已有的loaders和plugins解決問題，可以自己編寫loaders和plugins
nginx
1.正向代理與反向代理的特點和實例
2.可手動搭建一個簡單的nginx服務器、
3.熟練應用常用的nginx內置變量，掌握常用的匹配規則寫法
4.可以用nginx實現請求過濾、配置gzip、負載均衡等，并能解釋其內部原理
開發提速
1.熟練掌握一種接口管理、接口mock工具的使用，如yapi
2.掌握一種高效的日志埋點方案，可快速使用日志查詢工具定位線上問題
3.理解TDD與BDD模式，至少會使用一種前端單元測試框架
版本控制
1.理解Git的核心原理、工作流程、和SVN的區別
2.熟練使用常規的Git命令、git rebase、git stash等進階命令
3.可以快速解決線上分支回滾、線上分支錯誤合并等復雜問題
持續集成
1.理解CI/CD技術的意義，至少熟練掌握一種CI/CD工具的使用，如Jenkins
2.可以獨自完成架構設計、技術選型、環境搭建、全流程開發、部署上線等一套完整的開發流程（包括Web應用、移動客戶端應用、PC客戶端應用、小程序、H5等等）
八、項目和業務
后端技能
1.了解后端的開發方式，在應用程序中的作用，至少會使用一種后端語言
2.掌握數據最終在數據庫中是如何落地存儲的，能看懂表結構設計、表之間的關聯，至少會使用一種數據庫
性能優化
1.了解前端性能衡量指標、性能監控要點，掌握一種前端性能監控方案
2.了解常見的Web、App性能優化方案
3.SEO排名規則、SEO優化方案、前后端分離的SEO
4.SSR實現方案、優缺點、及其性能優化
5.Webpack的性能優化方案
6.Canvas性能優化方案
7.React、Vue等框架使用性能優化方案
前端安全
1.XSS攻擊的原理、分類、具體案例，前端如何防御
2.CSRF攻擊的原理、具體案例，前端如何防御
3.HTTP劫持、頁面劫持的原理、防御措施
業務相關
1.能理解所開發項目的整體業務形態、業務目標、業務架構，可以快速定位線上業務問題
2.能理解所開發項目整體的技術架構、能快讀的根據新需求進行開發規劃、能快速根據業務報警、線上日志等定位并解決線上技術問題
3.可以將自己的想法或新技術在業務中落地實踐，盡量在團隊中擁有一定的不可替代性
九、學習提升
vczh大神在知乎問題【如何能以后達到溫趙輪三位大神的水平？】下的回答：
這十幾年我一共做了三件事：
1、不以賺錢為目的選擇學習的內容；
2、以自己是否能造出輪子來衡量學習的效果；
3、堅持每天寫自己的代碼，前10年每天至少6個小時，不包含學習和工作的時間。
上面幾點可能有點難，第一點我就做不到，但是做到下面績點還是比較容易的。
關于寫博客說明下，能給別人講明白的知識會比自己學習掌握的要深刻許多
1.擁有自己的技術博客，或者在一些博客平臺上擁有自己的專欄
2.定期的將知識進行總結，不斷完善自己的知識體系
3.盡量將自己的知識轉換成真實的產出，不要僅僅停留在書面理解層面，更重要的是實際應用
4.堅持輸出自己的代碼，不要盲目的扎進公司業
十、技術之外
這部分可能比上面九條加起來重要！
1.了解互聯網人員術語：CEO、CTO、COO、CFO、PM、QA、UI、FE、DEV、DBA、OPS等
2.了解互聯網行業術語：B2B、B2C、C2C、O2O等
3.掌握互聯網行業溝通、問答、學習的
4.有一定的"PPT"能力
5.有一定的理財意識，至少了解儲蓄、貨幣基金、保險、指數基金、股票等基本的理財知識
6.掌握在繁重的工作和長期的電腦輻射的情況下保持健康的方法，建立正確的養生知識體系
其實在這個信息發達的時代最不缺的就是資源，如何從眾多的資源中獲取到真正精華的部分，是非常重要的，資源在于精不在于多，強烈建議在保證深度的情況下再保證廣度。
小結
希望你閱讀本篇文章后可以達到以下幾點：
從知識清單中找到自己的知識盲點與欠缺
具有知識體系化的思想，開始建立自己的知識體系
閱讀文章時將知識歸類到知識體系中，并不斷完善自己的知識體系
從文章中獲取到了有用的資源
文中如有錯誤，歡迎在評論區指正，如果這篇文章幫助到了你，歡迎點贊和關注。
如果你有什么好的知識、資源推薦，歡迎在評論區留言。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
