IV+CSS標(biāo)準(zhǔn)化布局的優(yōu)勢(shì)

使用“DIV+CSS”對(duì)網(wǎng)站進(jìn)行布局符合W3C標(biāo)準(zhǔn)，采用這種方式布局通常是為了說明與HTML表格定位方式的區(qū)別。因?yàn)楝F(xiàn)在的網(wǎng)站設(shè)計(jì)標(biāo)準(zhǔn)中，已經(jīng)不再使用表格定位技術(shù)，而是采用DIV+CSS的方式實(shí)現(xiàn)各種定位。通過使用div盒子模型結(jié)構(gòu)將各部分內(nèi)容劃分到不同的區(qū)塊，然后用css來定義盒子模型的位置、大小、邊框、內(nèi)外邊距、排列方式等。簡(jiǎn)單地說，div用于搭建網(wǎng)站結(jié)構(gòu)（框架）、css用于創(chuàng)建網(wǎng)站表現(xiàn)（樣式/美化）。該標(biāo)準(zhǔn)簡(jiǎn)化了HTML頁(yè)面代碼，獲得一個(gè)較優(yōu)秀的網(wǎng)站結(jié)構(gòu)，有利于日后網(wǎng)站維護(hù)、協(xié)同工作和便于搜索引擎抓取。當(dāng)然并不是所有的網(wǎng)頁(yè)都需要用div布局，例如數(shù)據(jù)頁(yè)面、報(bào)表之類的頁(yè)面，還是使用HTML的表格會(huì)比較方便，web標(biāo)準(zhǔn)里并沒有說要拋棄table。

DIV+CSS標(biāo)準(zhǔn)的優(yōu)點(diǎn)

• 表現(xiàn)和內(nèi)容相分離
• 代碼簡(jiǎn)潔，提高頁(yè)面瀏覽速度
• 易于維護(hù)和改版
• 提高搜索引擎對(duì)網(wǎng)頁(yè)的索引效率

各個(gè)瀏覽器之間的差異

• 安裝多種瀏覽器,對(duì)比差異進(jìn)行調(diào)試
• 在FF瀏覽器中安裝firebug

Firebug 為你的 Firefox 集成了瀏覽網(wǎng)頁(yè)的同時(shí)隨手可得的豐富開發(fā)工具。你可以對(duì)任何網(wǎng)頁(yè)的 CSS、HTML 和 JavaScript 進(jìn)行實(shí)時(shí)編輯、調(diào)試和監(jiān)控

就算在不同的瀏覽器中效果不完全一致，也要做到大概一至

“無意義”的元素div和span

• HTML只是賦予內(nèi)容的手段，大部分HTML標(biāo)簽都有其意義（例如，標(biāo)簽p創(chuàng)建段落，h1標(biāo)簽創(chuàng)建標(biāo)題等等）的，然而div和span標(biāo)簽似乎沒有任何內(nèi)容上的意義，聽起來就像一個(gè)泡沫做成的錘子一樣無用。但實(shí)際上，與CSS結(jié)合起來后，它們被用得十分廣泛。你所需要記住的是span和div是“無意義”的標(biāo)簽。它們的存在純粹是應(yīng)用樣式，所以當(dāng)樣式表失效時(shí)它就沒有任何的作用

• 它們被用來組合成一大塊的HTML代碼并賦予一定的信息，大部分用類屬性class和標(biāo)識(shí)屬性id與元素聯(lián)系起來。span和div的不同之處在于span是內(nèi)聯(lián)的，用在一小塊的內(nèi)聯(lián)HTML中。而div（division）元素是塊級(jí)的（簡(jiǎn)單地說，它等同于其前后有斷行），用于組合一大塊的代碼，為HTML 文檔內(nèi)大塊的內(nèi)容提供結(jié)構(gòu)和背景的元素，可以包含段落、標(biāo)題、表格甚至其他部分，這使div便于建立不同集成的類。

• div的起始標(biāo)簽和結(jié)束標(biāo)簽之間的所有內(nèi)容都是用來構(gòu)成這個(gè)塊的，其中所包含元素的特性由div標(biāo)簽的屬性來控制，或者是通過使用樣式表格式化這個(gè)塊來進(jìn)行控制。

盒子模型

每個(gè)HTML元素都可以看作一個(gè)裝了東西的盒子，盒子具有寬度（width）和高度（height），盒子里面的內(nèi)容到盒子的邊框之間的距離即填充（padding），盒子本身有邊框（border），而盒子邊框外和其他盒子之間，還有邊界（margin）。

布局中的主要樣式

• font
• line-height
• color
• margin
• padding
• border
• text-align
• background

定位屬性

區(qū)塊屬性(區(qū)塊模型)

區(qū)塊框浮動(dòng)

雖然使用絕對(duì)定位可以實(shí)現(xiàn)頁(yè)面布局，但由于調(diào)整某個(gè)區(qū)塊框時(shí)其它區(qū)塊的位置并不會(huì)跟隨著改變，所以并不是布局的首選方式。而使用浮動(dòng)的區(qū)塊框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含它區(qū)塊的邊框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂２⑶矣捎诟?dòng)框不在文檔的普通流中，所以文檔的普通流中的區(qū)塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。

設(shè)置浮動(dòng)

行框和清理

在進(jìn)行頁(yè)面布局時(shí)，經(jīng)常需要設(shè)置多個(gè)區(qū)塊框并列在一行中排列。最常見的方式就是使用float屬性，再通過left或right值移動(dòng)區(qū)塊框向左或向右浮動(dòng)。但當(dāng)前面并列的多個(gè)區(qū)塊框總寬度不足包含框的100%時(shí)，就會(huì)在行框中留出一定的寬度，而下面的某個(gè)區(qū)塊框又恰好滿足這個(gè)寬度，則很可能會(huì)向上提，和上一行并列的區(qū)塊框在同一行排列。而這不并是我們想要的結(jié)果，所以可以使用clear屬性解決這一問題，該屬性的值可以是 left、right、both 或 none，它表示框的哪些邊不應(yīng)該挨著浮動(dòng)框。

使用區(qū)塊框設(shè)計(jì)頁(yè)面布局

• 區(qū)塊居中設(shè)計(jì)

高度和寬度固定的區(qū)塊居中（position）

高度和寬度可變的區(qū)塊居中(margin)

• 布局頁(yè)面居中
• 設(shè)置兩列浮動(dòng)的布局
• 設(shè)置三列浮動(dòng)的布局
• 設(shè)置多列浮動(dòng)的布局

端發(fā)展越來越快，每天都有數(shù)不勝數(shù)的技術(shù)發(fā)布。

想要入門前端卻沒有一條較為理想的路徑？

在這個(gè)世界里兜兜轉(zhuǎn)轉(zhuǎn)了很久還是感覺在外圍搬磚？

那么你可能需要這份技術(shù)學(xué)習(xí)路線圖！

我們把學(xué)習(xí)前端分為三重境界：

• 單機(jī)寫基礎(chǔ)網(wǎng)頁(yè)

• 聯(lián)機(jī)高效寫網(wǎng)頁(yè)

• 讓網(wǎng)頁(yè)能夠被更多人使用

接下來我們就通過介紹這三重境界來為你呈現(xiàn)詳細(xì)的學(xué)習(xí)路線圖。

單機(jī)寫基礎(chǔ)網(wǎng)頁(yè)

何為單機(jī)呢？其實(shí)就是一個(gè)人

你一個(gè)人使用 Web 基礎(chǔ)技術(shù)開發(fā)網(wǎng)站，沒有將代碼分享給別人（你可能不知道程序世界的代碼分享規(guī)則），同時(shí)只是在本地環(huán)境運(yùn)行你的網(wǎng)站，你甚至對(duì)網(wǎng)站如何能把其他人訪問到毫無頭緒。

這個(gè)階段也是成為一名前端工程師最最基礎(chǔ)的一環(huán)，大部分初學(xué)者還停留在這個(gè)階段，那么我們來看一下這個(gè)階段需要什么樣的技能。

HTML + CSS + JavaScript

沒錯(cuò)，其實(shí)就是我們耳熟能詳?shù)那岸巳齽停m然看起來是最最入門的內(nèi)容，但是需要了解的內(nèi)容也不少，就類似我們需要先學(xué) 26 個(gè)字母，學(xué)各種漢字基礎(chǔ)，才能寫作或者創(chuàng)作詩(shī)歌一樣。了解這三門技術(shù)大致需要了解那些內(nèi)容以及有哪些學(xué)習(xí)資源推薦呢？

HTML

HTML 代表超文本標(biāo)記語言。 它用于前端，為網(wǎng)頁(yè)提供結(jié)構(gòu)，您可以使用 CSS 設(shè)置樣式并使用 JavaScript 進(jìn)行交互。

HTML 的學(xué)習(xí)大致需要 6 個(gè)階段：

• 學(xué)習(xí)基礎(chǔ)知識(shí)：https://www.w3schools.com/html/html_intro.asp

• 編寫語義化的 HTML：https://www.w3schools.com/html/html5_semantic_elements.asp

• 了解表單與校驗(yàn)：https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation

• 遵守一些約定與最佳實(shí)踐：https://github.com/hail2u/html-best-practices

• 了解可訪問性：https://www.w3schools.com/accessibility/index.php

• 了解 SEO 基礎(chǔ)：https://developers.google.com/search/docs

CSS

CSS 或級(jí)聯(lián)樣式表是用于設(shè)置任何網(wǎng)站前端樣式的語言。 CSS 是萬維網(wǎng)的基礎(chǔ)技術(shù)，與 HTML 和 JavaScript 并列。

學(xué)習(xí)基礎(chǔ)的 CSS 大致需要 3 個(gè)階段：

• 學(xué)習(xí)基礎(chǔ)知識(shí)：https://www.w3schools.com/css/

• 學(xué)會(huì)如何布局，其中布局又包括以下知識(shí)：
• Floats 浮動(dòng)：https://css-tricks.com/all-about-floats/
• Positioning 定位：https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
• Display 展示：https://www.freecodecamp.org/news/the-css-display-property-display-none-display-table-inline-block-and-more/
• 盒子模型：https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model
• CSS 網(wǎng)格：https://cssgridgarden.com/
• Flex 彈性盒布局：https://flexboxfroggy.com/
• 學(xué)習(xí)媒體查詢知識(shí)與 Web 響應(yīng)式設(shè)計(jì)：https://www.freecodecamp.org/learn/responsive-web-design/

JavaScript

JavaScript 允許您向頁(yè)面添加交互性。 您可能在網(wǎng)站上看到的常見示例是滑塊、點(diǎn)擊交互、彈出窗口等。

學(xué)習(xí)基礎(chǔ)的 JavaScript 大致需要 5 個(gè)階段：

• 基礎(chǔ)的語法：https://javascript.info/

• 學(xué)習(xí) DOM 操作：https://www.freecodecamp.org/news/what-is-the-dom-document-object-model-meaning-in-javascript/

• 學(xué)習(xí) Fecth API 與 Ajax（XHR）：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

• 學(xué)習(xí) ES6 與模塊化 JavaScript：https://www.javascripttutorial.net/es6/

• 理解進(jìn)階知識(shí) Hositing：https://developer.mozilla.org/en-US/docs/Glossary/Hoisting 事件模型：https://javascript.info/bubbling-and-capturing 作用域： https://developer.mozilla.org/en-US/docs/Glossary/Scopehttps://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/ 原型：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain Shadow DOM：https://www.youtube.com/watch?v=7Tok22qxPzQ 嚴(yán)格模式等：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode

了解了上面的這些內(nèi)容，你基本上算是一名基礎(chǔ)的前端工程師了，你可以編寫各種各樣的基礎(chǔ)界面，也應(yīng)該在學(xué)習(xí)的過程中產(chǎn)出了很多個(gè) DEMO 了。

聯(lián)機(jī)高效寫網(wǎng)頁(yè)

請(qǐng)注意我們這一小節(jié)的關(guān)鍵詞：聯(lián)機(jī)、高效。

在這個(gè)階段，你將學(xué)會(huì)如下知識(shí)：

• 如何以程序員的方式將代碼與人分享并能夠嘗試參與別人代碼的改進(jìn)

• 高效的編寫網(wǎng)站

• 理解網(wǎng)站是如何互通的，你是如何訪問的網(wǎng)頁(yè)的

基于上述的目標(biāo)，這一階段的關(guān)鍵技術(shù)如下：

• Git、Github

• Internet、Network 原理

• 開發(fā)框架： JS/HTML：Reatc/Redux、Vue/Vuex 等CSS：Sass、Styled Components、TailwindCSS 等構(gòu)建：Webpack、Babel、Npm Scripts 等包管理：Yarn、Npm 等

• 開發(fā)規(guī)范 CSS：BEM 等JavaScript：Airbnb JavaScript Style Guide 等

Git

Git 是一種版本控制系統(tǒng)。

版本控制系統(tǒng)允許您跟蹤代碼庫(kù)/文件隨時(shí)間的變化。 它們?cè)试S您毫無問題地返回到代碼庫(kù)的某個(gè)先前版本。 此外，它們還有助于與處理相同代碼的人協(xié)作——如果您曾經(jīng)與其他人合作過一個(gè)項(xiàng)目，您可能已經(jīng)知道將其他人的更改復(fù)制和合并到您的代碼庫(kù)中的挫敗感； 版本控制系統(tǒng)可以讓你擺脫這個(gè)問題。

你可以通過下面的鏈接學(xué)習(xí)它：

• https://www.youtube.com/watch?v=zbKdDsNNOhg

• https://www.youtube.com/watch?v=SWYqp7iY_Tc

• https://youtu.be/Y9XZQO1n_7c?t=21

Github

GitHub 是使用 Git 進(jìn)行軟件開發(fā)和版本控制的互聯(lián)網(wǎng)托管提供商。 它提供了 Git 的分布式版本控制和源代碼管理功能，以及它自己的特性。

你可以通過下面的鏈接學(xué)習(xí)它：

• https://github.com/

• https://docs.github.com/en/get-started/quickstart/hello-world

Internet

互聯(lián)網(wǎng)是一個(gè)全球性的計(jì)算機(jī)網(wǎng)絡(luò)，它們相互連接，通過一組標(biāo)準(zhǔn)化的協(xié)議進(jìn)行通信。

• 了解互聯(lián)網(wǎng)是如何工作的？ https://www.vox.com/2014/6/16/18076282/the-internethttp://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm

• 什么是 HTTP？ https://www.cloudflare.com/en-gb/learning/ddos/glossary/hypertext-transfer-protocol-http/https://developer.mozilla.org/en-US/docs/Web/HTTP/Overviewhttps://kamranahmed.info/blog/2016/08/13/http-in-depth/

HTTP 是基于 TCP/IP 的應(yīng)用層通信協(xié)議，它標(biāo)準(zhǔn)化了客戶端和服務(wù)器之間的通信方式。 它定義了如何通過 Internet 請(qǐng)求和傳輸內(nèi)容。

• 什么是瀏覽器？它們是如何工作的？ https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/https://www.browserstack.com/guide/browser-rendering-enginehttps://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work

Web 瀏覽器是一種軟件應(yīng)用程序，它使用戶能夠通過其圖形用戶界面訪問和顯示網(wǎng)頁(yè)或其他在線內(nèi)容。

• 什么是 DNS？它們是如何工作的？ https://www.cloudflare.com/en-gb/learning/dns/what-is-dns/

域名系統(tǒng) (DNS) 是 Internet 的電話簿。 人類通過域名（如 nytimes.com 或 espn.com）在線訪問信息。 Web 瀏覽器通過 Internet 協(xié)議 (IP) 地址進(jìn)行交互。 DNS 將域名轉(zhuǎn)換為 IP 地址，因此瀏覽器可以加載 Internet 資源

• 什么是域名？ https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_domain_name

名是用于訪問網(wǎng)站的唯一且易于記憶的地址，例如“google.com”和“facebook.com”。 借助 DNS 系統(tǒng)，用戶可以使用域名連接到網(wǎng)站。

• 什么是主機(jī)？ https://www.youtube.com/watch?v=htbY9-yggB0

虛擬主機(jī)是一種在線服務(wù)，可讓您將網(wǎng)站文件發(fā)布到互聯(lián)網(wǎng)上。 因此，任何可以訪問互聯(lián)網(wǎng)的人都可以訪問您的網(wǎng)站。

JavaScript 框架

React

• https://reactjs.org/

• https://reactjs.org/tutorial/tutorial.html

React 是最流行的用于構(gòu)建用戶界面的前端 JavaScript 庫(kù)。 React 還可以使用 Node 在服務(wù)器上渲染，并使用 React Native 為移動(dòng)應(yīng)用程序提供動(dòng)力。

Redux

• https://redux.js.org/

• https://redux.js.org/introduction/getting-started

Redux 是 JavaScript 應(yīng)用程序的可預(yù)測(cè)狀態(tài)容器。 它可以幫助您編寫行為一致、在不同環(huán)境（客戶端、服務(wù)器和本機(jī)）中運(yùn)行并且易于測(cè)試的應(yīng)用程序。 最重要的是，它提供了出色的開發(fā)人員體驗(yàn)，例如實(shí)時(shí)代碼編輯與時(shí)間旅行調(diào)試器相結(jié)合。

當(dāng)然狀態(tài)管理方面目前也有 Mobx 與 Recoil 等有力的競(jìng)爭(zhēng)者。

上述的是 React 生態(tài)，此外 JavaScript 社區(qū)還有 Vue 與 Angular 等其他非常有競(jìng)爭(zhēng)力的框架。

CSS 框架

Styled Components

• https://github.com/styled-components/styled-components

利用標(biāo)記的模板文字（最近添加到 JavaScript）和 CSS 的強(qiáng)大功能，styled-components 允許您編寫實(shí)際的 CSS 代碼來設(shè)置組件的樣式。 它還刪除了組件和樣式之間的映射——將組件用作低級(jí)樣式構(gòu)造！

CSS Modules

• http://www.ruanyifeng.com/blog/2016/06/css_modules.html

給 CSS 加入了局部作用域與模塊依賴

Sass

• http://www.ruanyifeng.com/blog/2012/06/sass.html

為 CSS 加入編程元素，被稱為 CSS 預(yù)處理器

TailwindCSS

• https://tailwindcss.com/

供一系列輔助類，直接為 HTML 標(biāo)記添加這些預(yù)設(shè)的輔助類就可以快速完成一組專業(yè)的網(wǎng)站。

構(gòu)建相關(guān)

Webpack

• https://webpack.js.org/

Webpack 是一個(gè)模塊打包器。 它的主要目的是捆綁 JavaScript 文件以在瀏覽器中使用，但它也能夠轉(zhuǎn)換、捆綁或打包幾乎任何資源或資產(chǎn)。

除了 Webpack，目前前端圈比較火的還有：

• 為庫(kù)打包的更佳選擇：Rollup

• 基于瀏覽器 ESM 的 Bundless 解決方案：Vite

Npm scripts

• http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html

組合 Yarn、Npm、Pnpm 等包管理一起使用，來便捷的執(zhí)行一系列腳本

Babel

• http://www.ruanyifeng.com/blog/2016/01/babel.html

Babel是一個(gè)廣泛使用的轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行

開發(fā)規(guī)范

BEM

• https://en.bem.info/

• https://juejin.cn/post/6844903672162304013

塊、元素、修飾符方法（通常稱為 BEM）是 HTML 和 CSS 中類的流行命名約定。 由 Yandex 團(tuán)隊(duì)開發(fā)，其目標(biāo)是幫助開發(fā)人員更好地理解給定項(xiàng)目中 HTML 和 CSS 之間的關(guān)系。

JavaScript Style Guide

• https://github.com/airbnb/javascript

編寫 JavaScript 最合理的方法之一

經(jīng)歷上面的一陣狂風(fēng)亂炸的洗禮之后，你現(xiàn)在已經(jīng)能夠理解如下知識(shí)了：

• 網(wǎng)頁(yè)是如何運(yùn)行的

• 如何使用框架（JS、CSS 框架）、現(xiàn)代的前端工程化集合工具輔助你高效的編寫界面

• 在編寫代碼的時(shí)候，遵守相關(guān)的規(guī)范，寫出更容易讓其他人讀懂的代碼

• 將你的代碼使用版本控制系統(tǒng) Git 來追蹤，并通過 Github 將你的代碼分析給其他程序員學(xué)習(xí)

讓網(wǎng)頁(yè)被更多人使用

如果你想讓你的網(wǎng)站被更多人使用，甚至是你要開發(fā)一款產(chǎn)品，完成你的創(chuàng)業(yè)目標(biāo)，那么你可能還需要一些額外的知識(shí)輔助你。

在這個(gè)階段你需要了解的知識(shí)點(diǎn)如下：

• 確保你的網(wǎng)站安全：HTTPS、Cors、內(nèi)容安全策略等

• 確保的應(yīng)用盡可能少 BUG：TypeScript、Jest、Cypress、Enzyme、React Testing Library

• 讓用戶在沒有網(wǎng)的情況下也能使用：PWA、Storage、Web Socket、Service Workers 等

• 讓你的網(wǎng)站被更快的訪問：Lighthouse、Devtools、Performance Metrics、RAIL Model、PRPL Pattern

• 讓你的網(wǎng)站能更好的被索引：SSR

• 讓你的應(yīng)用分散在各個(gè)平臺(tái)：React Native、Flutter、Electron

• 讓你的網(wǎng)站也能夠處理更復(fù)雜的動(dòng)效：WebAssembly 等

Web 安全

HTTPS

• https://www.cloudflare.com/en-gb/learning/ssl/what-is-https/

• https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https

• https://developers.google.com/web/fundamentals/security/encrypt-in-transit/enable-https

HTTPS 是一種在 Web 服務(wù)器和瀏覽器之間發(fā)送數(shù)據(jù)的安全方式。

CORS

• https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

跨域資源共享 (CORS) 是一種基于 HTTP 標(biāo)頭的機(jī)制，它允許服務(wù)器指示除其自身之外的任何來源（域、方案或端口），瀏覽器應(yīng)允許從中加載資源。

CSP（內(nèi)容安全策略）

• https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP

• https://developers.google.com/web/fundamentals/security/csp

內(nèi)容安全策略是一種計(jì)算機(jī)安全標(biāo)準(zhǔn)，用于防止在受信任的網(wǎng)頁(yè)上下文中執(zhí)行惡意內(nèi)容而導(dǎo)致的跨站點(diǎn)腳本、點(diǎn)擊劫持和其他代碼注入攻擊。

測(cè)試工具

Jest

• https://jestjs.io/

Jest 是一個(gè)令人愉快的 JavaScript 測(cè)試框架，專注于簡(jiǎn)單性。 它適用于使用以下項(xiàng)目的項(xiàng)目：Babel、TypeScript、Node、React、Angular、Vue 等等！

React Testing Library

• https://github.com/testing-library/react-testing-library

完備的 React DOM 的測(cè)試輔助庫(kù)

Cypress

• https://www.cypress.io/

對(duì)應(yīng)用進(jìn)行端到端測(cè)試

Enzyme

• https://github.com/enzymejs/enzyme

測(cè)試 React 的輔助庫(kù)

類型檢查工具

TypeScript

• https://www.typescriptlang.org/

• https://www.typescriptlang.org/docs/

• https://www.typescriptlang.org/docs/handbook/intro.html

TypeScript 是一種基于 JavaScript 的強(qiáng)類型編程語言，可為您提供任何規(guī)模的更好的工具。

離線使用

Web 最新的 Progressive Web Apps （PWA）技術(shù)，使得 Web 網(wǎng)站可以像 App 一樣，擁有離線使用、推送通知等功能。

PWA 主要包含下面幾個(gè)部分：

• Storage

• WebSockets

• Service Workers

• Location

• Notifications

• Device Orientation

• Payments

• Credentials

主要的參考學(xué)習(xí)資源如下：

• https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps

• https://github.com/GoogleChrome/workbox

性能相關(guān)

Web 性能是加載時(shí)間和運(yùn)行時(shí)的客觀測(cè)量和感知用戶體驗(yàn)。 Web 性能是指網(wǎng)站加載、變得交互和響應(yīng)所需的時(shí)間，以及在用戶交互期間內(nèi)容的流暢程度。

性能涉及到計(jì)算、衡量與改進(jìn)性能，主要涉及下面這些知識(shí)點(diǎn)：

• PRPL Pattern

• RAIL Model

• Performance Metrics

• Lighthouse

• Devtools

主要的參考學(xué)習(xí)資源如下：

• https://developer.mozilla.org/zh-CN/docs/Web/Performance

• https://web.dev/

SEO 相關(guān)

SEO（Search Engine Optimization）—— 搜索引擎優(yōu)化，目的是幫助我們的網(wǎng)站在Google或者Baidu搜索的時(shí)候排名會(huì)提升靠前。

Next.js

• https://nextjs.org/

• https://nextjs.org/docs/getting-started

• https://www.freecodecamp.org/news/the-next-js-handbook/

Next.js 是一個(gè)構(gòu)建在 Node.js 之上的開源開發(fā)框架，支持基于 React 的 Web 應(yīng)用程序功能，例如服務(wù)器端渲染和生成靜態(tài)網(wǎng)站。

多平臺(tái)

React Native

• https://reactnative.cn/

• https://github.com/facebook/react-native

使用 React 來開發(fā)移動(dòng)端應(yīng)用，如 Android 或 iOS。

Flutter

• https://flutter.cn/

• https://flutter-io.cn/

Flutter 為應(yīng)用開發(fā)帶來了革新： 只要一套代碼庫(kù)（Dart），即可構(gòu)建、測(cè)試和發(fā)布適用于移動(dòng)、Web、桌面和嵌入式平臺(tái)的精美應(yīng)用

Electron

• https://www.electronjs.org/

• https://wizardforcel.gitbooks.io/electron-doc/content/tutorial/tutorial.html

Electron（原名為Atom Shell）是GitHub開發(fā)的一個(gè)開源框架。它通過使用Node.js（作為后端）和Chromium的渲染引擎（作為前端）完成跨平臺(tái)的桌面GUI應(yīng)用程序的開發(fā)。Electron現(xiàn)已被多個(gè)開源Web應(yīng)用程序用于前端與后端的開發(fā)，著名項(xiàng)目包括GitHub的Atom和微軟的Visual Studio Code。

高性能應(yīng)用

WebAssembly

• https://developer.mozilla.org/zh-CN/docs/WebAssembly

• https://juejin.cn/post/7035991254257106958

WebAssembly是一種新的編碼方式，可以在現(xiàn)代的網(wǎng)絡(luò)瀏覽器中運(yùn)行 － 它是一種低級(jí)的類匯編語言，具有緊湊的二進(jìn)制格式，可以接近原生的性能運(yùn)行，并為諸如C / C ++等語言提供一個(gè)編譯目標(biāo)，以便它們可以在Web上運(yùn)行。它也被設(shè)計(jì)為可以與JavaScript共存，允許兩者一起工作。

當(dāng)你學(xué)完了這個(gè)部分的內(nèi)容，基本上已經(jīng)是算是一位高階的前端工程師了，能夠在任何大廠勝任各種研發(fā)工作，當(dāng)然能夠堅(jiān)持到這里不容易，需要持續(xù)的努力，加油

寫在最后

本文從三個(gè)維度切入了在 2022 年作為一名前端工程師需要學(xué)習(xí)的內(nèi)容，以及給出了詳細(xì)的學(xué)習(xí)路線圖和對(duì)應(yīng)的學(xué)習(xí)資源，當(dāng)然有些資源都是國(guó)外的，需要自備科學(xué)上網(wǎng)工具，后續(xù)會(huì)基于這條學(xué)習(xí)路線圖進(jìn)行完善，并且補(bǔ)充詳細(xì)的中文學(xué)習(xí)資源，敬請(qǐng)期待。

??/ 感謝支持 /

以上便是本次分享的全部?jī)?nèi)容，希望對(duì)你有所幫助^_^

喜歡的話別忘了 分享、點(diǎn)贊、收藏 三連哦~

歡迎關(guān)注公眾號(hào) 程序員巴士，來自字節(jié)、蝦皮、招銀的三端兄弟，分享編程經(jīng)驗(yàn)、技術(shù)干貨與職業(yè)規(guī)劃，助你少走彎路進(jìn)大廠。