产品经理必懂技术术语（前端类）
目錄
控件
組件和組件庫?
框架
頁面適配
渲染
同源和跨域
cdn
控件
眾所周知，html是一門標簽語言，組成了網頁的基本結構。比如：
<input type="text"></input>
表示單行文本輸入框
<table></table>
表示表格
<button></button>
表示按鈕
文本框、按鈕、下拉框等最小的界面視覺元素就叫做控件。
組件和組件庫
1、組件
單純的控件只是展示了簡陋的視覺UI和基本行為，在實際開發中需要用到的是經過各種樣式裝飾和動畫還有豐富行為的UI，而且還會被重復利用。所以為了降低代碼重復率，提高開發效率，一般開發會把一個或多個控件的結構、樣式、行為、聯動封裝到一個文件中，這樣一個組合文件就稱為“組件”。
我們來看下經過封裝的表格組件，它具有表頭的灰色樣式、表頭固定樣式、行狀態樣式、間距樣式等。同時它也具有表格行可伸縮、可排序、可拖拽、可內嵌展開等行為。
1)可以排序的表格
2）可以展開的表格
3）自帶搜索的表格
注：現在市面上看到的UI,一般都是經過組合封裝的，UI主題樣式一般跟公司、項目有關。所以目前最多的叫法是“組件”。
2、組件庫
多個組件通過一定的方式封裝起來，可以提供給多個項目使用的同一套代碼組件，就叫組件庫。多個項目使用一套組件庫，不僅可以讓類似項目保持相同的UI主題，還能避免開發重復造輪子，提高開發效率。
現在市面上比較流行的組件庫，有螞蟻金服ant design，餓了么element ui、iView等。現在很多公司在做網站時，使用的是這幾種組件庫。當然也有部分公司使用自己研發的組件庫。
框架
框架是為解決一類問題而產生的產品。它面向的用戶是開發者。現在市面上比較流行的前端類框架有：
web端：js框架 --> react、vue、angular
客戶端：react native、flutter
微信小程序端：wepy、mpvue
它們的誕生，大多是為了解決js操作界面元素的性能消耗、代碼復用性、可維護性、可讀性、健壯性等問題。
使用不同的js框架，代碼的寫法幾乎不一樣，對應的組件庫也不一樣。
react->ant design?? ?vue->element
所以如果想把項目換一種框架來寫，成本是相當高的。如果想在不同端展示一樣的UI怎么辦？在web端、客戶端、小程序端寫3套代碼？這時跨端跨框架的解決方案就誕生了，Taro框架?=> 它支持只編寫一套代碼就能夠適配到多端的能力。
頁面適配
頁面適配一詞一般用于移動端。因為現在的手機機型和手機屏幕種類很多，不同的屏幕大小下，一樣的布局可能表現會錯亂。不同的機型下，可能因為某個樣式不兼容而表現異常。
對手機機型或手機屏幕大小或瀏覽器大小來對頁面樣式做兼容匹配，叫做頁面適配。
當一個移動端頁面做出來后，怎么知道要兼容哪些機型和屏幕呢？要看該產品的目標用戶有哪些。
如果目標用戶是東南亞等發展中國家，一般要考慮國外用戶常用的機型，比如一加手機。如果目標用戶是國內的中老年人，則要考慮大屏幕的安卓手機，比如華為、小米。如果目標用戶是18-35歲之間的藍領白領，需要適配的機型就比較多了，一般要考慮蘋果6/7/8/x/plus/se/ipad、華為、小米、三星等主流機型。
渲染
眾所周知，一個網頁基本是由html、css、js構成的。當前端請求回來html、css、js等靜態文件后，瀏覽器引擎就開始按照規則解析語言，然后測量、排版、繪制頁面，最后展現出我們眼前的網頁視覺效果。這個過程就叫做渲染。
有時候你可能會看到網頁展示有點慢或者是卡頓，那就是渲染比較慢。
同源和跨域
先看個例子：
?
設想這樣一種情況：A 網站是一家銀行，用戶登錄以后，A 網站在用戶的機器上設置了一個 Cookie，包含了一些隱私信息（比如存款總額）。用戶離開 A 網站以后，又去訪問 B 網站，如果沒有同源限制，B 網站可以讀取 A 網站的 Cookie，那么隱私信息就會泄漏。更可怕的是，Cookie 往往用來保存用戶的登錄狀態，如果用戶沒有退出登錄，其他網站就可以冒充用戶，為所欲為。因為瀏覽器同時還規定，提交表單不受同源政策的限制。（注：以上例子來自阮一峰老師）
?
為了保證用戶信息的安全，1995年開始，所有瀏覽器都遵循了“同源策略”。同源策略指的是，網址在協議、域名、端口都相同的情況下才是同源的。
舉個例子：
網址：http://a.com:80/page/index.html。http://?是協議，域名是a.com，端口是80。
不同源的網址，不能獲取對方的cookie、localstorage，不能給對方發送ajax異步請求，不能獲取對方的頁面元素。
如果你對不同源網址發起了請求，或者是去獲取不同源的頁面元素，就叫做跨域，瀏覽器會攔截報錯。
cdn
cdn是一個為了使用戶就近獲取內容，提高資源訪問速度的一種內容分發網絡，主要由內容分發技術和內容緩存設備組成。
一般我們會把html、css、js、圖片等靜態資源放在cdn上，當加載頁面時，瀏覽器會請求cdn的靜態資源。
假設你的目標用戶是國際用戶，cdn緩存設備分別在亞洲、歐洲、美洲、澳洲、非洲各有一臺，如果你是一個美國用戶，當前端請求靜態資源時，就會被分配到最近的美洲cdn緩存設備獲取資源。
這樣不僅能提高資源加載速度，還能避免網絡擁塞。
最后也歡迎有問題的小伙伴加微信：chanpin628?交流。
此外我們的官方網站也上線了，每日分享高質量的文章、原型素材和行業報告，小伙伴可自行前往索取，支持搜索，需要的小伙伴可點擊底部的閱讀原文直接查看，或者復制網址：www.dadaghp.com?打開。
更多干貨可關注微信公眾號：產品劉
想學習更多關于產品、職場、心理、認知等干貨，可長按右邊二維碼，關注我們。
··················END··················
RECOMMEND
推薦閱讀
分享關于餓了么的需求文檔
一道騰訊的專業面試題
線下實戰2.0
一周時間摸清一個行業
點擊“閱讀原文”
查看更多干貨
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的产品经理必懂技术术语（前端类）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux chmod命令小贴士
- 下一篇： html鼠标变成小手_HTML 点击的链