答寒冬winter面试题

前几天在微博上看到@winter寒冬老师的发的几道题,挺有意思, 答来看看。也是对自己最近实习所学的东西做下梳理。
以下是题目:
 
谈谈你对CSS布局的理解

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

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

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

现在有很多的MV*框架,你对它们有什么看法

iOS体验好在哪里,Web能赶上么?

网页游戏怎么做?

Hybrid技术应当如何应用?

你最爱的前端框架是什么,为什么?

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

输完网址到看到网页,首先浏览器会解析url,浏览器会分别通过浏览器缓存、系统缓存、DNS服务器缓存、DNS服务器找到url对应的唯一IP地址,并解析IP地址搜索服务器并发送请求,服务器根据请求返回编译后的HTML字符串,浏览器开始进行解析。

浏览器通过“状态机”对HTML进行解析,生成DOM Tree。

解析HTML的过程中遇到CSS和JS资源的标签会立即开始请求资源或执行,这里提一下出于JS脚本可能会有样式操作的考虑,CSS文件的下载会阻塞JS文件的加载,由于开发者希望JS脚本能在引用的地方立即执行,JS文件的加载和执行会阻塞HTML的解析。所以一般建议优先或者异步加载CSS,在body底部再加载js.

CSS下载好会生成CSS Rule Tree,代表CSS的映射规则, CSS Rule Tree会比照HTML DOM Tree生成Render Tree。

Render Tree生成好后,变开始了浏览器的渲染过程。主要是以下4个步骤:

样式计算:计算每个渲染对象的样式属性

布局:基于流的模型对元素进行布局,简单说就是计算宽度和位置

绘制:基于以上两个步骤的结果将元素显示到屏幕上

层级组合:根据z坐标将不同层级组合起来,z-index或translate3d可以改变元素的层级,也就是z坐标,z坐标越小的元素越优先绘制。

此外对于有动画效果的页面,被改变的CSS属性不同,触发的渲染步骤也不同(参照),尽量触发靠后的渲染步骤或者缩小受影响的元素可以减少页面性能消耗。合理利用translate3d分层可以减小受影响的元素并利用GPU加速,尽量用translate代替left和top进行位置变换进行也是同理。

Web前端组件化

在前端开发中会有很多相同的组件需求,例如我们经常用到的input、select,这些是浏览器原生的组件。可是浏览器提供的组件十分有限,大部分时候无法满足我们的需求,需要我们自己开发这些功能,比如幻灯片、手机上的滚动条、日历等功能,都是很常用的功能。。于是我们就把这些常用的功能提取出来,作为组件,这些组件抽象封装后就是我们所谓的插件,插件有一些弊端:大多数插件的接口和调用方式并不兼容,当我们想替换插件的时候有学习成本,有时候甚至需要修改代码逻辑

插件内外并没有隔离,插件存在可能会被页面其他部分影响(如样式属性),也有影响页面其他部分的可能。

Web Components提出了组件定义方式的规范化。目前包括四个部分,templateShadow DomCustom ElementImport

template是指我们可以通过<template>元素导入HTML模板(之前一般是用js),并且这段模板不会在Dom结构中出现,也不会预先加载其中所需的img之类的资源。

Shadow Dom是指我们可以在DOM中生成一块隐藏的DOM,它不会显示到正常的DOM结构中,同时也会和它外面的Dom元素隔离,不受彼此的影响。新版的chrome实现了这个,提供createShadowRoot这个方法创建Shadow Dom。

以上方法看着很酷炫,可是我们使用的时候还没有到完全声明化,还是需要通过传统的id或class方式筛选到组件寄生的dom,这个时候Custom Element就登场了, 它允许我们自定义元素(要求是继承HTMLElement),并提供createdCallback接口,让我们可以定义HTML解析到这个元素时调用的回调函数。也就是塞数据和注册Shadow Dom可以在callback里面完成,我们只需要在Dom中插入自己Custom Element就Ok了。

到这里我们就要考虑了,如何实现复用呢? 没错,这就是import的作用了,它是link的一个rel属性,允许我们像链接css那样链接一个HTML文件。

目前走在前面的是Chrome,polymer官网上的标语welcome to the future很让人心动。组件化一定程度上解决了前端重复造轮子的问题,实现了“一个备胎,车车能用”,未来某天某个开发者将开发好的组件分享到云上,大家都能拿来使,这也许就是传说中的, 云备胎。。。。。


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

前端的资源主要是css,js文件和图片。

目前我们的优化方法:

css、js压缩(减小文件体积)

css sprite(减少图片资源的请求次数)

前文提到的,优先加载css,将js文件置底

通过打包工具将文件合并(文件请求占加载的大头,减少文件请求数)

合理选择js、css文件的加载方式:内嵌 / 外部引用(选择内嵌,是为了减少文件请求数。而将更新较少,不同页面都公用的文件提取出来,做为外链加载,是为了利用缓存,减少它的请求次数,且减少需要多次请求的HTML文件大小)

配置离线存储

上线前使用打包工具进行项目优化,减少无用代码。

 

现在有很多的MV*框架,你对它们有什么看法

MV*框架的目的简单来说是为了实现代码分工,增加模块的重用,让业务逻辑和界面交互解耦。
前端框架,实习中接触过Ractivejs和AngularJs,都是MVVM的框架
前端框架给我带来的好处在于它引导了我做项目的流程。要求我们在项目开动前就得先构思好这个项目的分级,每层的结构,在写之前要求我们对项目有一个大概的把握,有更清晰的思路。
 
对于MVVM框架,通过DataBing的方式让我们远离了繁琐的Dom操作,专心于业务逻辑和界面交互的设计。AngularJS和RactiveJS的区别也很明显,AngularJS优点就是Angular真的很强大,可以用的组件很多,有directive,提供了依赖注入,各种组件也很全。但是用Angular要求有一定的学习门槛,刚入门的时候不知其所以然出了问题很难排查,不过熟悉了它的原理和各种机制以后会好一些,另外依赖注入不负责文件的加载顺序,所以还需要用其他的模块化工具管理模块。
RactiveJS相比起来就简单多了,我们可以按需选择数据更新的时间,正是因为小很多地方要自己实现,自定义的程度更高。

准大四学生,目前出来实习三个月,寒冬老师出的题目论点有点大,我这里就只对我实习中接触过的几个点写了写我的理解,希望和大家交流一下。
能力有限,答得不好的可以批评我,一起学习,指正出来可以一起完善这些答案,只求不要喷哈 O(∩_∩)O。。。。
原文地址:https://www.cnblogs.com/oneX/p/3906084.html