前端面试知识点

请输入密码：提交

闭包面试题

func(1)(2) = 3
func(3)(5) = 8
由上例推导函数主体

function func(num1) {
  return function func(num2) {
    return num1 + num2
  }
}

对web标准及W3C的理解和认识

标签闭合、标签小写、使用外部链接脚本和样式、结构层行为层和表现层的分离、
内容能被更多的用户访问、内容能被更多的设备访问、更少的代码及组件，容易维护

什么是前端？

前台的设计,包括动画制作,图像处理,文字编辑,版面设计
一名合格的前端开发工程师，应该具有一定的审美能力和基础的美工操作能力，能很好的与交互及视觉协作

xhtml和html的区别

• html是一种基本的web网页设计语言，xhtml是一个基于xml的置标语言
• 不同点：
  • xhtml必须正确嵌套
  • xhtml元素必须关闭
  • 标签名必须小写
  • xhtml文档必须拥有根元素

为什么选择H5

• 更具有语义性
• 更支持搜索引擎的搜索（直观的认识标签）
• 阅读性更强，支持残障人士的阅读

H5的特性

• 简单易记的语言标签
• 简单易记的编码类型
• 不需要标签闭合
• 标签名不区分大小写
• 语义化的新增标签
• 表单增强
• 视频和音频
• canvas绘画

css引入方式：

行内样式、内嵌样式、外部链接样式、导入样式（@import url("");）
link和@import的区别：link无兼容性，link支持js操控

css权重优先级

!important > 内嵌样式 > ID选择器 > 类选择器 > 标签选择器和伪类选择器 > 通用选择器

SEO优化

文件合并、文件压缩、CDN托管（内容分发网络）、利用缓存

主流浏览器的内核和厂商前缀：

• 火狐：Gecko -moz-
• 谷歌：webkit -webkit-
• IE:ie内核/Trident -ms-
• 欧朋：Presto -o-

强制转换和隐式转换

• 强制：parseInt、parseFloat、number
• 隐式：（直接将一种类型赋值给另一种类型）

parseInt()、parseFloat()和number

• parseInt()：将字符串开头的整数分解出来，转换为整数

  • parseInt(“123”)、parseInt(“123.45”)、parseInt(“123.45abc”) 返回123
  • parseInt(“abc123”)、parseInt(true) 返回NaN

• parseFloat()：将字符串开头的整数或浮点数分解出来，转换为浮点数

  • parseFloat(“123.45”)、parseFloat(“123.45abc”) 返回123.45

  • parseFloat(“abc 123.45”)、parseFloat(“true”) 返回NaN

  • number()：将对象的值转换成数字

Javascript的对象

Javascript的本地对象、内置对象、宿主对象和自定义对象

• 本地对象：date、array、string、number、object、function、regexp、boolean,可以new实例化
• 内置对象：global、load、Math不可以实例化（每个内置对象都是本地对象）
• 宿主（浏览器）对象：document、window
• 自定义对象：开发人员自定仪的对象
  通常来说：本地对象和内置对象可以归为一类，即分为本地对象、宿主对象和自定义对象

JS的数据类型

JS是一种弱语言类型的语言
number、string、boolean、object、function、underfined

• 基本类型：存放在栈中：number、string、boolean
• 引用类型：存放在堆中：object、function

事件绑定和普通事件的区别

事件绑定可以添加多个事件

事件冒泡、事件捕获、事件委托、事件绑定、事件默认行为

• 事件冒泡：触发子级事件会同时向上触发父级的事件
  addEventListener('click',abc,false); // 默认事件冒泡
  • 阻止事件冒泡：event.stopPropagation(); // return false;
• 事件捕获：触发父级事件会同时向下触发子级的事
  addEventListener('click',abc,true); //事件捕获

• 事件委托：让其他的元素帮忙处理事件，如让ul来处理li的事件

  <!-- HTML: -->
  <ul id="parent-list">
    <li id="post-1" class="it-1">Item 1</li>
    <li id="post-2">Item 2</li>
    <li id="post-3">Item 3</li>
    <li id="post-4">Item 4</li>
    <li id="post-5">Item 5</li>
    <li id="post-6" class="it-1">Item 6</li>
    <span id="post-7" class="pt-7"></span>
    <strong id="post-8"></strong>
    <em id="post-9" class="pt-7"></em>
  </ul>

  // JS:
  $('#parent-list').on('click', 'li', function(){ //为子级绑定事件
    var number = $(this).index(); //获取当前子级的索引值
    console.log('number', number);
    var check = $('li').eq(number).attr('id');  //获取相应的属性值
    console.log('check', check);
    alert('当前的id为：' + check);
  });
  
  $('#parent-list').on('click',  function(e){
    var ev = e || window.event;  //事件对象兼容
    var etarget = ev.target || ev.srcElement;  //事件源兼容
    if (etarget && etarget.nodeName == 'LI') { //nodeName为大写字母
      alert('当前的id为：' + etarget.id);
    }
  });

• 事件绑定：为某个对象绑定事件，可以绑定多个

  // JS:
  addEventListener('click',abc,false);  //W3C绑定
  attachEvent('onclick',abc);         //IE绑定
  
  // jQuery:
  bind();
  on();

• 事件默认行为：如链接a

  • 阻止事件默认行为：return false; 或 event.preventDefault();

函数闭包

允许使用内部函数（函数定义和函数表达式位于另一个函数的函数体内），这些内部函数可以访问它们所在外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。也就是内部函数在外部函数返回后执行。而当这个内部函数执行时，它仍然必须访问其外部函数的局部变量、参数以及内部函数。这些局部变量、参数和函数声明的值是外部函数返回的值，但也会受到内部函数的影响

ajax中get和post区别

get	post
从服务器上获取数据	向服务器上传递数据
将表单数据添加到url后面	将表单数据放在虚拟载体中
不安全，用户可以看到数据	相对用户安全，操作对用户不可见
传输数据量小，url长度限制默认	传输数据量大（上传文件只能使用post）

AJAX的异步机制，优缺点

核心是XMLHttpRequest对象
XMLHttpRequest对象是的JS脚本能够实现对服务器的异步请求，向后台发送请求并接收服务器响应，动态获取响应数据来更新局部页面

• 优点
  • 页面无刷新即可更新页面，用户体验好
  • 异步方式与服务器通信，不需要打断用户操作，响应能力快
  • 可以让客户端来处理一些工作，减轻服务器带宽
  • 不需要下载插件
  • 促进页面和数据的分离
• 缺点：
  • 兼容性
  • 破坏前进和后退按钮
  • 对流媒体和移动设备支持易购
  • 对搜索引擎的支持比较弱

    // JS:
    if(window.XMLHttpRequest){
        var ajax = new XMLHttpRequest();
    }else{
        var ajax = new ActiveXObject(“Microsoft.XMLHttp”);
    }
    ajax.open('GET','***',true);
    ajax.send();
    ajax.onreadystatechange = function(){
      if(ajax.readyState == 4){
        if(ajax.status == 200){
          alert(ajax.responseText);
        }else{
          alert(“失败！”);
        }
      }
    }
    
    // JQuery:
    $.ajax({
      url: 'api.php',
      type: 'GET',
      dataType: 'json',
      timeout: 3000,
      data: {
        num1: num1,
        num2: num2
      },
      beforeSend: function(xhr, settings) {
        // 发送请求前
        console.log('beforeSend', xhr, settings);
      },
      success: function(data, status, xhr) {
        // 请求成功
        console.log('success', data, status, xhr);
        if (data.code === 0) {
          console.log('处理成功');
          $('#result').val(data.result);
        } else {
          console.log('处理失败');
        }
      },
      error: function(xhr, errorType, error) {
        // 请求失败
        console.log('error', xhr, errorType, error);
        alert('请求失败');
      },
      complete: function(xhr, status) {
        // 请求成功或失败都执行
        console.log('complete', xhr, status);
      }
    });

测出页面加载时间

<!-- HEAD: -->
<script>
  var a = new Date().getTime(); //获取初始时间
</script>

<!-- BODY: -->
<script>
  window.onload = function(){
    document.getElementById('div1').innerHTML = "页面加载时间："+ (new Date().getTime()-a)+"毫秒";
  }
</script>

<div id="div1"></div>

ECMAScript规范

最新版：ECMA-262 《ECMAScript国际标准（第6版）》 2015年6月

ECMAScrip规范是为了解决早期Web浏览器支持的Javascript脚本编程语言而制定的技术标准，目前来说，被浏览器广泛支持的是 ECMAScript 规范第三版

包括：

• 在广大Web浏览器/Web服务器等宿主环境中实现的Javascript
• 在Microsoft Internet Explorer（IE浏览器）/IIS中实现的JScript
• 在Adobe/Macromedia的Flash、Director等软件中实现的ActionScript

实现的基本内容：

• 类型：Undefined、Null、Boolean、Number、String 和 Object
• 对象和属性：对象是属性的集合，属性包括命名数据属性、命名访问器属性和内部属性

函数：三种创建方法

• 使用构造函数function
• 使用函数声明
• 使用函数表达式

数组：内置对象array，本身相当于一个构造函数，可以用来创建新的数组实例

• Array.prototype.every：该函数用来判断数组中的全部元素是否都满足给定的条件。条件是通过作为参数的另一个函数来指定的。函数的返回值（true或 false）决定了条件是否满足
• Array.prototype.forEach：该函数用来遍历数组中的所有元素，对每个元
  素调用由参数指定的函数
• Array.prototype.map：该函数对数组中的每个元素执行特定的处理，并
  把处理的结果保存在一个新的数组中
• Array.prototype.filter：该函数根据给定的条件对数组中的元素进行过
  滤。只有满足条件的元素才会出现在结果数组中
• Array.prototype.reduce 和 Array.prototype.reduceRight：这两个函数用来
  对数组中的元素进行累积操作。上一次操作的结果会作为下一次操作的输入值。两个函数的区别在于 reduceRight 是从数组的末尾开始进行处理。

JSON：第五版开始支持，JSON 也通常被用来作为客户端与服务器端之间的数据传输格式代码执行：ECMAScript 代码的执行由运行环境来完成，通过 eval 函数也可以指定一段需要执行的代码，代码的基本执行方式是从上到下，顺序执行

严格模式：
注：必须实现该规范描述的所有的“类型、值、对象、属性、函数和程序语法及语义”，并且必须支持Unicode字符标准（UCS）。在此基础上，每个具体实现还可以指定“额外的类型、值、对象、属性和函数”，可以定义新的“程序和正则表达式语法”等.

JavaScript三大组成：

• ECMAScript：描述了语言的语法和基本对象
• DOM：描述处理网页内容的方法和接口
• BOM：描述处理与浏览器进行交互的方法与接口

  最新版为ECMA-262  第三版  对应为1.5 JavaScript（2.0版本在制定中）
  

两种响应式网页的设计

• 跳转方式
  当不同的设备访问我们的网站时候，通过JS去判定这是一个什么设置，如果是手机，那就直接跳转到另外一个网站。这样的方面比较古老，要求要有两个网站，一个是手机网站，一个是PC网站。
• 更换样式
  通过JS去判断当前访问网站的屏幕宽度，然后调用不同的CSS样式文件。这样的方法比较方便，一个网站，只要做几个尺寸的样式表就能实现响应式网站。也可以直接使用CSS中的媒体查询直接通过屏幕宽度选择相应的样式

解决IE6 bug的方法

• 双边距：float ——>display:inline
• 超链接点击后失效：——>按照书写顺序：link visited hover active
• z-index——>给父级添加position:relative
• png透明——>使用JS代码修改
• min-height——>!important
• select在ie6中被遮盖——>frame
• 无法定义1px左右的容器——>IE6的默认行高造成，使用over:hidden;zoom:0.08 ;line-height:1px

title和alt的区别

• alt是当图片不显示的时候用文字代替
• title是当鼠标停留的时候出现提示信息

css sprites的使用及作用

把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量，提高加载速度

三种盒模型

• content-box（默认）
  box-sizing: content-box; 只算内容，表示padding、border、margin不计算在设置的width和height中
  即 盒模型宽度 = content + padding + border + margin

• padding-box（不常用）
  box-sizing: padding-box; 从padding开始算，表示padding计算在设置的width和height中
  即 盒模型宽度 = content + border + margin

• border-box（特殊盒模型、开发常用）
  box-sizing: border-box; 表示padding、border计算在设置的width和height中
  即 盒模型宽度 = content + margin

开发时常在根元素设置：box-sizing: border-box; 其余元素，设置box-sizing: inherit;继承根部的

清除浮动

• 使用空标签清除浮动clear:both;
• 使用overflow:auto;
• after伪元素清除浮动
  给父级设置after伪元素，不可以设置before

  #content:after{
    content:"";
    display:block;
    clear:both;
  }

split()和join()的区别

• split()是将字符串切割成数组
• join()是数组转换成字符串

数组方法

• push()：尾部添加
• pop()：尾部删除
• unshift()：头部添加
• shift()：头部删除
• splice()：任意位置的删除或添加
• splice(操作位置，删除个数，[添加的数组项1]，[添加的数组项2])
  • 删除个数为零，表示不删除，直接添加数组项
  • 删除个数不为零且无添加项，表示直接删除几项
  • 删除个数不为零，表示先删除几项，再添加数组项
• reverse：用于对数组数据的倒序排列
• sort：对数组里数据的排序，可以给sort函数加一个排序函数作为参数

数组去重：

var myArray = [0, 1, 6, 9, 0, 2, 4, 5, 4];
function aaa(){
  var newArray = []; //一个新的临时数组
  for(var i = 0; i < myArray.length; i++){ //遍历当前数组
    //如果当前数组的第i项已经保存进了临时数组，那么跳过，
    //否则把当前项push到临时数组里面
    if (newArray.indexOf(myArray[i]) == -1){
      newArray.push(myArray[i]);
    }
  }
  alert("新的数组：" + newArray);
}
aaa();

IE和DOM时间流的区别

执行顺序不一样
参数不一样
事件不加on
this指向问题

IE和标准下有哪些兼容性的写法

var oEvent = e || event;
var oDocumentElement = document.documentElement.clientWidth || document.body.clientWidth;
var oTarget = oEvent.srcElement || oEvent.target;

添加、删除、替换、插入

• 添加：appendChild()
• 删除：removeChild()
• 替换：replaceChild()
• 插入insertBefore()

window.onload和$(document).ready的区别

• window.onload是在页面（所有元素）加载完毕后执行
  不能同时编写多个，可用addLoadEvent()解决多个问题
• $(document).ready时DOM结构绘制完毕后就执行，不必等到加载完毕
  可以同时编写多个
  可简化$()

  ==和===的不同

• ==会自动转换类型
• ===不会自动转换类型

DOM和BOM

• DOM：文档对象模型
  document
• BOM：浏览器对象模型
  window、event、frame、history、location、navigator、screen

display:none和visiblity:hidden的区别

• display:none:不在文档流中，完全隐藏
• visibility:hidden:还在文档流中，看不见但摸得着

分别写出几个HTML文字标签

• 文本居中：不赞成使用
• 文字加粗：
• 文字强调：
• 强烈语气的强调文本：
• 带下划线的文本： 不赞成使用
• 文字倾斜：
• 上标文本：sup
• 下标文本：sub
• 字体：不赞成使用

H5新增标签

time定义时间、wbr定义视频、video定义视频、audio定义声音、source定义媒介源、
track定义媒体播放器的文本轨道datalist定义下拉列表、keygen定义生成秘钥、
output定义输出的一些类型、canvas定义图形、figcation定义figure元素标题、
figure定义媒介内容的分组、header定义页眉、nav定义导航、main定义主窗口、
aside定义侧栏、footer定义页脚

jQuery的特点

• 轻量级JS框架
• 选择器使用方便
• 链式操作和隐式迭代
• 简化了JS代码
• 简化了AJAX操作
• 兼容主流浏览器，不需要考虑兼容
• 丰富的第三方插件
• 可扩展性强

一个大容器里面的图片或div如何设置可以让其垂直居中、水平居中

• 将图片设置成背景图片

  <!-- HTML: -->
  <div class="div1">
  
  <!-- CSS: -->
  .div1{
    width:700px;
    height:600px;
    border:1px solid #000;
    background:url(1.jpg) no-repeat center center;
  }

• 使用table-cell是标签元素以表格单元格的形式呈现

  <!-- HTML: -->
  <div class="div1">
    <img src="1.jpg" alt="">
  </div>
  
  <!-- CSS: -->
  .div1{
    display:table-cell;
    width:800px;
    height:800px;
    border:1px solid #000;
    text-align:center;
    vertical-align:middle;
  }
  img{ vertical-align:middle;}

• 增加一个空的span元素，使用vertical-align

  <!-- HTML: -->
  <div class="div1">
    <span></span>
    <img src="1.jpg" alt="">
  </div>
  
  <!-- CSS: -->
  .div1{
    width:700px;
    height:600px;
    border:1px solid #000;
    text-align:center;
  }
  span{
    display:inline-block;
    width:1px;
    height:100%;
    vertical-align:middle;
  }
  img{
    display:inline;
    vertical-align:middle;
  }

  延伸：该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐

• 在图片外围套个盒子，使用margin-top

  <!-- HTML: -->
  <div class="div1">
    <div class="div2">
      <img src="1.jpg" alt="">
    </div>
  </div>
  
  <!-- CSS: -->
  .div1{
    width:700px;
    height:600px;
    border:1px solid #000;
  }
  .div2{
    width:400px;
    height:300px;
    margin-top:50%;
    margin-left:50%;
  }
  img{
    margin-top:-50%;
    margin-left:-50%;
  }

• 使用定位 + transform

  <!-- HTML: -->
  <div class="div1">
    <div class="div2"></div>
  </div>
  
  <!-- CSS: -->
  .div1{
    width:500px;
    height: 500px;
    border: 1px solid #f00;
    position:relative;
  }
  .div2{
    width: 200px;
    height: 200px;
    border: 1px solid #0f0;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform:translate(-50%,-50%);
  }

• flex弹性布局

  <!-- HTML: -->
  <div class="div1">
    <div class="div2"></div>
  </div>
  
  <!-- CSS: -->
  .div1{
    width:500px;
    height: 500px;
    border: 1px solid #f00;
    justify-content:center; //水平居中
    align-items:center;  //垂直居中
    display: -webkit-flex; //表示弹性布局
  }
  .div2{
    width: 200px;
    height: 200px;
    border: 1px solid #0f0;
  }

css兼容

IE6下双边距bug：
两个浮动的元素，第一个设置左边距，IE6下显示双倍间距
解决办法：给浮动的元素增加display:inline

IE6下3像素bug：
前面的浮动，后面的不浮动，后面的上来，现代浏览器显示浮动在上面，不浮动的在下面，IE6中显示浮动的在左边，不浮动的在右边，并且有3个像素的间距。
解决办法：
前面的浮动，后面的也设置浮动
给前面浮动的元素增加 _margin-right:-3px;

img图片有默认间距：
解决办法：vertical-align:middle/bottom/baseline

当应用于表单元素时，如输入框和按钮垂直错位时，给表单增加vertical-align:middle

标签最低高度min-height兼容：
如果我们要设置一个标签的最小高度200px，需要进行的设置为：
{min-height:200px; height:auto !ImportAnt; height:200px; overflow:visible;}
显示效果，容器最小高度为200px,内容大于200px时，容器会被撑高，而不会出现滚动条

不同浏览器的标签默认的外边距和内间距不同：
margin:0; padding:0;

设置较小高度标签：
设置字号高度等于标签高度
其他符号：
使用方法：使用了渐进识别的方式，从总体中逐渐排除局部
_:IE6支持
+:IE6、7支持
\0:IE8支持
\9:IE6、7、8支持

box-sizing:border-box; width:50%; /表示显示父级的一般长/

允许以确切的方式定义适应某个区域的具体内容。
即可以设置该元素在相对于其父级的容器大小所显示的比例

高阶函数

高阶函数是至少满足下列一个条件的函数：

• 接受一个函数或多个函数作为输入
• 输出一个函数
  三个高阶函数：map、filter、reduce
• map：将每个数组元素通过某种方法进行转换
• filter：用于选择数组元素中满足某种条件的元素
• reduce：把数组元素组合计算为一个值

雅虎军规

雅虎军规是网站页面性能优化的黄金守则

• 尽量减少HTTP的请求次数
• 减少DNS（域名系统）的查找次数
• 避免跳转
• 可缓存的AJAX
• 推迟加载内容
• 预加载
• 减少DOM元素的数量
• 根据域名划分页面内容
• 使iframe的数量最小
• 不要出现404错误
• 使用CDN（内容分发网络）
• 为文件头指定Expires或Cache-Control
• G-zip压缩文件内容
• 配置ETag
• 尽早刷新输出缓冲
• 使用GET来完成AJAX请求
• 把样式表至于顶部
• 避免使用CSS表达式
• 使用外部JavaScript和CSS
• 削减JavaScript和CSS
• 使用代替@import
• 避免使用滤镜
• 把脚本至于页面底部
• 提出重复脚本
• 减少DOM访问
• 开发智能事件处理程序
• 减小Cookie体积
• 对于页面内容使用无cookie域名
• 优化图像
• 优化CSS Spirite
• 不要在HTML中缩放图像
• favicon要小而且可缓存
• 保持单个内容小于25K
• 打包组件成复合文本

setTimeout和setInterval的区别

setITimeout只执行一次
清除：clearTimeout(对象);
setInterval会自动重复执行
清除：clearInterval(对象);

div+css实现三列布局，左右两列固定，中间列自适应宽度

<!-- HTML -->
<div id="left">左栏固定宽度为200px</div>
<div id="right">右栏固定宽度为200px</div>
<div id="center">中间自适应宽度</div>
<!-- 注意：布局一定是 左 右 中 -->

<!-- CSS -->
#left{ width:200px; float:left; border:1px solid #000; min-height:400px;}
#right{ width:200px; float:right; border:1px solid #000; min-height:400px;}
#center{ margin:0 210px; border:1px solid #000; min-height:400px;}

伪类和伪元素的区别

• 伪类：向某些选择器添加某些特殊效果
• 伪元素：将特殊的效果添加到某些选择器

浏览器navigator

• navigator.appName：获取浏览器名称
• navigator.appCodeName：获取浏览器的代码名
• navigator.appVersion：获取浏览器版本
• navigator.cpuClass：获取浏览器的CPU等级
• navigator.cookieEnabled：返回指明浏览器是否启用cookie的布尔值

浏览器历史记录history

history只有一个属性，长度 history.length
history.forword() //前进
history.back() //后退
history.go() //参数为整数，前进几个页面，参数为负数，后退几个页面
history.go(.com) //到达历史记录列表里第一个包含”.com”的url

使用location对象包含当前加载页面的url信息

• 使用location对象导航：
  • location.href = “www.**”; //原始页面还保存在历史记录中
  • location.replace(“www.***”); //旧url被删除，只保留新的url
• 刷新页面：
  • location.reload();

文本溢出隐藏并显示为…

<!-- 单行文本溢出： -->
.div{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

<!-- 多行文本溢出： -->
.div{
  width:300px;
  border: 1px solid #0f0;
  display: -webkit-box;
  overflow: hidden;
  text-overflow:ellipsis;
  word-break:break-all;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;  //控制显示的行数
}

通用面试问题：
1、 自我介绍
面试什么职位，为什么从事这个行业（发展前景和个人爱好）

2、 面试时被公司反问还有什么问题
对公司未来的发展？
公司的培训力度？
实习期多长时间？
如果我能成功的入职贵公司，公司对我有什么期待和要求？

3、 个人优缺点

4、 职业规划

5、 如果再工作中由于失误造成一定的损失怎么解决？
承担错误，分清责任
team共担，尽快解决
检讨自己，分析原因，避免再犯

前端必须了解：
CSS hack
DOM结构
DOM操作
事件
XMLHttpRequest
严格模式与混杂模式
盒模型
块级元素与行内元素
浮动元素
HTML与XHTML
JSON

前端面试大纲：
HTML&CSS:
WEB标准、浏览器内核差异、兼容性、hack、布局、盒模型、选择器优先级及使用、H5、CSS3、移动端
JavaScript:
数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、异步装载回调、模块引擎、前端MVC、路由、Nodejs、JSON、ajax
其他：
HTTP、WEB安全、正则、优化、重构、响应式、团队协作、可维护、SEO、UED、
架构、职业生涯