产品必懂技术术语（前端类）

目录

1. 控件
2. 组件和组件库
3. 框架
4. 页面适配
5. 渲染
6. 同源和跨域
7. cdn

控件

众所周知，html是一门标签语言，组成了网页的基本结构。比如：

<input type="text"></input>
表示单行文本输入框

<table></table>
表示表格<button></button>
表示按钮

文本框、按钮、下拉框等最小的界面视觉元素就叫做控件。

组件和组件库

1. 组件

单纯的控件只是展示了简陋的视觉UI和基本行为，在实际开发中需要用到的是经过各种样式装饰和动画还有丰富行为的UI，而且还会被重复利用。所以为了降低代码重复率，提高开发效率，一般开发会把一个或多个控件的结构、样式、行为、联动封装到一个文件中，这样一个组合文件就称为“组件”。

我们来看下经过封装的表格组件，它具有表头的灰色样式、表头固定样式、行状态样式、间距样式等。同时它也具有表格行可伸缩、可排序、可拖拽、可内嵌展开等行为。

1)可以排序的表格

2）可以展开的表格

3）自带搜索的表格

注：现在市面上看到的UI,一般都是经过组合封装的，UI主题样式一般跟公司、项目有关。所以目前最多的叫法是“组件”。

1. 组件库

多个组件通过一定的方式封装起来，可以提供给多个项目使用的同一套代码组件，就叫组件库。多个项目使用一套组件库，不仅可以让类似项目保持相同的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缓存设备获取资源。

这样不仅能提高资源加载速度，还能避免网络拥塞。