【答阿里寒冬面试题】呵呵，大神的面试题就是好！

时间 2019-11-11

标签答阿里寒冬面试题呵呵面试就是栏目快乐工作繁體版

原文原文链接

前言

今天微博看到了寒冬大神的面试题，以为挺有意思的，这里就作一点解答javascript

http://weibo.com/1196343093/Bhj510t50

谈谈你对CSS布局的理解css

讲讲输入完网址按下回车，到看到网页这个过程当中发生了什么。html

谈谈你对Web前端组件化的理解，Web Component会带来怎样的影响前端

谈谈你对前端资源下载性能优化的经验和思考java

如今有不少的MV*框架，你对它们有什么见解jquery

iOS体验好在哪里，Web能遇上么？android

网页游戏怎么作？ios

Hybrid技术应当如何应用？git

你最爱的前端框架是什么，为何？程序员

首先老师的题目都很大，很差答，我这里技术有缺陷，答得很差你们不要喷我，能够好好教育我嘛

浅谈CSS布局

概述

从网页表现来看，HTML是实体自己，要实现各类优雅的布局的须要依赖CSS

HTML元素两大类型为块级元素与行内元素，网页的布局通常由块级元素组织，元素不一样便有不同的表现

要实现布局就要用到与布局有关的CSS属性为position，经常使用属性为static、absoulute、fixed、relative

position的做用是改变元素的状态，由文档流转为相对文档流或者脱离文档流元素（定位元素）

固然float也能引起块级元素脱离文档流，可是其表现与原理与上面不一致，并且要慎用float布局

因而这里便已经有三种“流”了，不一样的布局元素会处于不一样的“执行环境”，在“执行环境”中才能方便的对其进行管理

这个管理的依据即是BFC（块级做用域上下文），根据我粗浅的理解是，BFC也就是浏览器提供的一块渲染区

文档流的元素处于一个渲染区，而定位元素处于另外一层渲染区，float元素又会与之不一样

各个渲染区中的元素具备其定位规则，最简单的即是文档流中的元素，遵循其块级元素独占一行+盒模型的规则：

① 块级元素独占一行，而且具备框（经典盒模型）

② 块级元素间由margin属性分割，而且垂直方向的margin会取其大者

③ 块级元素一定左靠这父级块级元素左边框（包含块，布局上下文）

④ float元素不能影响块级元素的BFC区域，可是其高度会参与计算

建立BFC的方式有：

① float

② overflow

③ display（使行内元素具备BFC）

④ position

基于此，咱们即可以实现咱们的布局了，这里以最简单的两列布局为例（左边导航，右边内容主体）

因为先出现的DOM先展现，因此内容优先原则，咱们会将主体dom先展现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style>
    * { margin: 0; padding: 0; } div { border: 1px solid black; } #sidebar { position: absolute; left: 0; top: 0; width: 95px; } #content { margin-left: 100px; } </style> <script src="../jquery-1.7.1.js" type="text/javascript"></script> </head> <body> <div id="content"> 主体 </div> <div id="sidebar"> 导航 </div> </body> </html>

这里从理论上说，即是触发了siderbar元素的定位特性，其BFC与文档流不相关了

固然，这里siderbar可使用float实现，可是float自己应该用于处理文字与图片包裹的需求，咱们本着职责分离的想法就别那样干了

并且使用float还会引发元素坍塌，这里还要费劲去处理清除浮动

行内元素

行内元素的处理比较复杂，首先行内元素的高度由其line-height决定，因此不要妄想其设置一个行内元素的高度，这会引发意想不到的问题

举一个例子来讲，不少大型网站都会具备统计代码，而此类统计代码通常是以img作请求发出，这个时候可能会致使10px左右的白屏问题

这个就是妄想设置行内元素高度的结果，独立的inline元素出现时，会为其建立一个line boxes做为容器（文字框）

一行文字一个line Boxes，一行高度由其中最高的行内元素肯定，上例中有一个height为0的img，却为其生成了一个高度为10的行高

下面的代码中，div会被行内元素撑开，其高度会由span中line-height高者决定

<div>
  <span id="span1">主体 </span><span id="span2">导航 </span>
</div>

移动端的建议

① 移动端的文档流渲染效率最高，应该避免大范围使用定位元素，在小米，三星等低端下定位元素可能渲染不出来（解决方案是引发回流）

② img元素加载失败时候会有边框，须要搞掉

③ 慎用fixed属性，fixed对于移动端来讲有点头疼，首先会有文本聚焦fixed定位错乱问题，其次在ios4的屏幕中，若是加上浏览器上下工具条，再用fixed可视区域会变得很小

④ ios是按块渲染的，布局时候能够分块，不会渲染可视区域外的内容

⑤ 动画或者border-radius、box-shadow等属性皆会使手机耗电加重（可是这个好像与咱们不要紧）

⑥ fixed元素为其设置html可能不响应或者说渲染看不见，常见于ipod或者低端android

⑦ 固然能在布局上用上一些语义化标签天然是好事，这样对SEO或者特殊人事有必定帮助，好比strong、article之类的

总结

由于我自己专一点在js对css了解较少只能作此解析，请尽可能拍砖指正

一次请求的完整流程

咱们一次网址输入会发起一连串连锁效应，可是由于我这边对HTTP一块不是十分熟悉，只能解释本身了解的

一次URl输入后，其流程以下，首先是请求响应的流程：

1 解析URL，解析域名生成惟一IP地址，开始搜索服务器

2 找到服务器后，服务器接收请求被服务器进程拦截；通常而言，.net的程序会被IIS处理，java会被jBoss或者tomcat处理

3 服务器处理请求，若是静态文件的话直接返回，如果.net或者java等动态脚本会通过服务器编译，执行其中的服务器端代码

4 如果服务器端具备数据库操做的话，这里还须要与DB创建链接，操做数据库

5 服务器处理结束后，生成最终的静态HTML字符串返回，开始向请求者（客户端）返回请求字符串，一次返回量过大就会分批次，这是一个优化点

6 服务器响应到达浏览器，浏览器开始处理请求，进入浏览器解析流程

请求返回后，便进入了咱们关注的前端模块

简单来讲，浏览器会解析HTML生成DOM Tree，其次会根据CSS生成CSS Rule Tree，而javascript又能够根据DOM API操做DOM

上面的文字描述的很简单，事实上发生的事情，却很复杂，这里与代码实现也颇有关联，可是有几个关键点：

页面必定会等全部的HTML结构与CSS加载下来才渲染（ webkit内核）

好比咱们这里使用fiddler限制其外链加载，咱们为其限速为10s

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style>
    div { border: 1px solid black; } a { color: Red; } </style> </head> <body> <div> <a id="span1" href="http://www.baidu.com">主体 </a><span id="span2">导航 </span> </div> <link href=" http://kb.cnblogs.com/style/common.css" rel="stylesheet" /> </body> </html>

咱们看到事实上62ms后页面总体dom结构就加载好了，这个时候咱们是可使用js操做dom结构的，但这里一个重点是：

CSS外链加载会阻塞js的执行，而且重置CSS会引发浏览器的回流或者重绘，也就是：

css外链会阻塞整个页面的渲染（显示），可是其DOM结构是可操做的，中间若是有阻塞性的操做，好比alert的话会强制浏览器绘制页面

上面的特性与css外链的顺序无关，而且有几个样式相关的操做，便会执行几回，最终采用最近或者优先级最高的样式

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style>
    div { border: 1px solid black; } a { color: Red; } </style> </head> <body> <div> <a id="span1" href="http://www.baidu.com">主体 </a><span id="span2">导航 </span> </div> <script> document.getElementById('span2').innerHTML = '测试'; alert(1) </script> <script> alert(2) </script> <link href=" http://kb.cnblogs.com/style/common.css" rel="stylesheet" /> </body> </html>

一个须要注意的地方是， chrome与firefox或者IE表现不一致，firefox与IE都是先渲染页面最后等段CSS下来后再次渲染

因此咱们不少同窗面试时说将css外链放到header中，而不是body中的理解都是只知其一;不知其二，这里真实的处理办法是异步插入css外链才行

至少对于chrome须要作这个处理，不然页面就是出不来，由于多数手机是webkit内核，保不齐这里出多少事情

根据以上流程后，页面也基本出来了，这里简述其流程

① 生成DOM树

② 计算CSS样式

③ 构建render Tree

④ reflow，定位元素位置与大小

⑤ 绘制页面

上面过程若是js操做dom或者终结有一段style都会引发reflow，因为img会在文档加载结束后加载，可能会撑开页面，致使回流，因此通常须要对img设置尺寸

对于这块的优化各位本身来吧，我这里便只能理解到这个程度了

PS：事实上chrome得到请求时自己也有几个事件点，这里能够用其开发性能插件，但对前端基本透明，咱们这里不关注了

MVC与组件化

这里我将2块题目合到一块儿了，我以为这里能够连到一块儿作说明

View分离

不少程序的变革集中积累在VIEW一块的处理，缘由是这里的需求是最复杂的，就View分离来讲，最成功的我以为是ASP到ASP.net的变革

最初的ASP程序，会将C#代码写在asp代码中，这样的结果即是页面里面既有html又有C#代码，甚至一个js循环中会嵌套出C#的循环

PS：你必定要相信，那个时候不会有js分红的概念，由于需求达不到

所谓的View分离即是，程序员确实受不了维护显示与逻辑同时处于一个页面的程序了，因而他选择了改变，改变的结果即是拆分

View分离一大核心思惟即是， 分得开，合得拢，他们这里引入一个codebehind方案将一个页面文件分红两个（事实上是三个）

① index.apsx

② index.aspx.cs

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="_00综合_11mvc_index" %>

public partial class _00综合_10doc_write_index : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e) { } }

最终这两个文件会和到一块儿，两个文件之间也可通讯，而通讯的桥梁是.net一个个被人诟病的组件，好比：

① button组件

② datalist

③ label组件

④ 伟大的gridview

各个组件在C#层面上会拥有一个ID进行约束，.cs文件即可以根据该ID为其注册各个事件，这个与javascript的模型便很是相似了

View分离的第一个优势即是，用户的界面变得干净了，不会有代码混杂的现象，第二个优势即是业务端的代码能够再分离，从而多了数据层、业务层等各个概念

而组件的出现让.net变成了世界上开发最快的语言，这点谁也不能否认，而这些都是前端MVC出现或者组件出现的意义

前端View分离

与asp当初的状况一致，js进行dom操做或者字符串拼接的目的事实上就是想造成一个可供展现的View，前端jser已经不再能忍受这种代码了：

不少时候，咱们想将对应的模板单独的放到一个地方，每次样式如果有更改，只须要更改那个文件便可，只要与之呼应的“ID”不丢失便可，好比这样的结构和代码：

View Code

<div class="cui-pop-box">
  <div class="cui-hd">
      <%=title%> </div> <div class="cui-bd"> <div class="cui-error-tips"> <%=content%></div> <div class="cui-roller-btns"> <% for(var i = 0, len = btns.length; i < len; i++ ) {%> <div class="cui-flexbd <%=btns[i].className%>"> <%=btns[i].name%></div> <% } %> </div> </div> </div>

这样作的道理是，这个样子作到了表现与行为分离，咱们分得开，而后回根据基类的一个机制，让他们最终合到一块，以完成功能

这里咱们依旧须要强调一个前提：“ID”关联不可丢失，不然“行为”将不可表现，只要二者间关联不丢，这里即可轻松知足如下逻辑：

① CSS名修改（非标识性CSS名）

② 标签改变

③ 描述性文字改变

......

MVC在前端

重构一书有说，重复性或者相似重复性的代码应该抽象为一个方法，程序员也不傻，在重复使用须要提示框需求后便会学会造成alert组件

组件的出现是代码抽象，代码重用的标识，这个样子既能够减小工做量也能够减小代码容量，而组件的实现与MVC思惟的很好诠释

好比如下代码：

View Code

事实上，MVC的任意一块均可以做为单独的模块实现，好比会有这样的需求：一个model实例的变化会影响两个View的显示，可是仅仅对UI一块来讲咱们作了以下处理：

核心点变成了几个属性：

① template，根据他生成UI

② datamodel，根据他生成viewModel提供给template使用

③ eventArr，业务事件注册点

这个代码是Blade框架的UI基类，他是一个迷你MVC框架

 1     propertys: function () {
 2       //模板状态
 3       this.template = ''; 4 this.datamodel = {}; 5 this.events = {}; 6 this.wrapper = $('body'); 7 this.id = _.uniqueId('ui-view-'); 8 9 //自定义事件 10 //此处须要注意mask 绑定事件先后问题，考虑scroll.radio插件类型的mask应用，考虑组件通讯 11 this.eventArr = {}; 12 13 //初始状态为实例化 14 this.status = 'init'; 15 16 // this.availableFn = function () { } 17 18 },

template做为View的实现，datamodel做为model实现，咱们会根据datamodel与template生成基本的view实体

这里datamodel与template之间会有一个viewModel的映射关系，是为了防止服务器端忽然将title变成Title而致使模板解析错误

而整个文件即是一个控制器，view有的事件行为采用javascript委托技术所有注册在根元素上，如此整个UI就活了，他的好处是：

① 具备继承关系，能够拥有统一的资源释放，或者View通讯机制

② 代码量也会减小

MVC与组件化的意义

MVC对前端的意义甚大，由于jser对MVC或者分模块的思惟的深刻理解，咱们才会将前端代码作分离，这样会有效的避免多人更改一个文件的难题

这对前端的推进做用不可谓不大！

组件化是对重复工做，重复代码的下降，固然是好东西......

资源加载

前端优化的瓶颈始终在资源加载，只要加载快，不管你代码写的多慢（不要纠结死循环），都必定快，因此前端优化事实上一直都是一个主题：瘦身

压缩

css sprite

延迟加载（主要针对图片）

按需加载（主要针对首屏未用到的UI）

缓存

CDN

预加载

等词语不断的在前端出现，可是一个不可避免的事实是，需求愈加复杂，体验要求越高，因此一个前端可能的事实是：

前端资源体积愈来愈大，避免此事发生不是前端说了算的，须要产品与交互一块儿努力，清晰、体验好、轻量级的设计谁不喜欢，可是广告营销也不能不考虑，总之此事路还长！

webapp的资源加载

对于webapp来讲，首次加载的体积会更加大，由于其要求的库更多，而且网速更慢，这个时候能够采起fake页的方案

咱们应该避免页面长时间白页，这个时候便提出了fake页的概念。页面渲染只须要完整的HTML以及CSS，这个即是第一个优化点。

从数据请求数以及请求量来讲，webapp首页的响应应该比较慢，如果任由js加载完成再渲染页面，用户颇有可能失去耐心。

可是从DOMContentLoaded来看，首页事实上页面响应比较迅速，因此这个加载结束后页面第一屏便渲染结束，而后再异步加载js，当js改变后再动态改变dom结构中的一些关键点

这个时候一个静态HTML页面，装载首屏的基本内容，让首页快速显示

而后js加载结束后会立刻从新渲染整个页面，这个样子，用户就能够很快的看到页面响应，给用户一个快的错觉，给人感受快得多。

是否按需加载

按需加载的话确实会对首屏加载有好处，可是是否按需加载却不必定了，如下面两个体验为例:

资源彻底加载

http://yexiaochai.github.io/blade/demo/dest.html

按需加载

http://yexiaochai.github.io/blade/demo/debug.html

PS：我这里debug版本点击时候未作mask处理，你们不要疯狂点击了

这里各位直观的感觉是什么呢？是否是，首次加载后后续操做十分流畅，而按需加载的话，每次皆会感受有点“卡”

按需加载须要加载js和模板，这个过程天然卡，因此真正是否是要按需加载，或者多少资源按需加载有个临界值，须要不断的测试才行

最后，要减小资源的话，代码的质量神马的也须要考虑的，但对容量来讲效用可能不是太大

IOS的体验

IOS的体验好，主要好在两点：

① 清晰、简洁、傻瓜化设计，连我妈均可以轻巧的操做苹果手机其简易型可想而知

② 用户行为模拟，IOS体验第二点即是其无敌的动画效果

如果说web应用想遇上（寒冬老师这里遇上一词用得十分贴切，他要说超过估计没人理他了）native开发的话仍是有可能

可是若是说web应用要遇上IOS的设计的话，那么还有无数荆棘须要踩过！而且有两大前提：

① 网速快，用户没必要关心资源大

② 手机性能好，不说超越PC，至少能“遇上”PC吧

以上两点成立的话，web应用遇上IOS体验才变得可能，简单来讲就动画而言，前端有哪些问题呢？

webapp中的动画

webapp的一大优点即是在view切换时候能够拥有媲美与native的动画效果，可是不少时候那只是一种想法，真正的状况却不是这样

产生此问题的缘由有：

① 手机CPU烂！

② 手机显卡烂！就算四核其渲染也颇有问题

③ 高端手机浏览器会有BUG

④ 低端手机支持很差（国内山寨机笑而不语）

由于以上缘由，事实上作webapp的都会不一样程度的弱化动画，或者在局部区域使用动画

难在何处？

dom树过多

view的移动与简单的图片slider组件相差甚剧！缘由即是其dom结构可能很复杂，大dom树的移动在移动端效果不好

就简单列表页来讲，当项目超过100个时，使用IScroll类插件都应该很慎重，这类移动可能很是卡！

并且dom树复杂度与业务直接相关，咱们没有任何办法去控制dom树，由于业务代码可能不会通过咱们的手，就算通过，你又确定本身作出来的dom树有多小？不见得吧

长短页问题

所谓长短页即是一个view很长一个view很短，这里问题处理十分讨厌

首先咱们每次作切换须要将view位置切换至头部（window.scroll(0, 0)）如此的话ios中会引发

页面viewport的变化（系统自动发生），或者会触发低端工具栏的出现，这个时候页面抖动无可避免

如果每次不执行window.scroll(0, 0)，切换时候又会致使短的view不可见

我现阶段想到的解决方案是，移动时候将scroll设得比较大，移动时候将bview的top值与scrollTop相同

最后仍然须要执行window.scroll(0, 0)的操做，因此，这个问题只能缓解，没法解决

手机渲染问题

只要是作移动端的朋友，必定会对三星机或者一些低端机的渲染嗤之以鼻！

具体表现为屡次操做style后，后面的操做浏览器不会搭理你

解决方案是：

① 引发浏览器强烈重绘

② 临时增删一个dom结构

可是涉及view切换动画的话，颇有可能会出现一些莫名其妙的问题！

因此单单由简单的webapp的切换都如此困难，web应用想遇上IOS的话还要等几年......

Hybrid对前端的意义

应该说Ajax带动了前端的首次革命，而移动端带来了二次革命，而Hybrid将前端推上了风口浪尖！

原来我厂app是使用native开发的，会出现此等问题：一个应用须要养3个团队（ios、android、winphone），并且一旦业务改变会让开发抓狂！

而Hybrid的出现解决了此问题，一套前端代码能够用于四个地方：浏览器、ios、android、winphone，而这个倒是互联网公司最须要的

最近两年，移动大潮袭来，各个公司皆在抢占移动端的份额，谁赢了这场战斗谁就是下一代王者，因此出现了一个事实：

市场的占领、业务的扩展是第一位！

因此Hybrid的市场与需求比native大，可是这不是说native没用了，由于更好的体验咱们的追求，因此在Hybrid占领市场结束后，可能须要改版为native

除非那时前端的体验能缩小与native的距离

Hybrid开发的问题

Hybrid提升了前端开发的门槛，由于Hybrid的调试难，可是业内也出现了一些调试的方案，我这里有一套Hybrid调试的技巧，有兴趣能够交流

Hybrid 兼容BUG多，总所周知，H5站点上看着好好的程序，一旦到了webview上就出问题了，这个调试也很痛苦

哎，其实Hybrid开发也只是须要一点熟悉度罢了，没有什么可说的，就此打住吧

结语

寒冬老师喜欢出题，我喜欢答题，其中几道题我这里没有什么概念就交白卷了，不知道个人回答是否能够及格

如果寒冬老师或者各位以为个人回答能勉强及格，左边微博求粉！！！尼玛我粉丝太少了！！！