答寒冬winter面试题

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

输完网址到看到网页，首先浏览器会判断这是url还是搜索，如果是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提出了组件定义方式的规范化。目前包括四个部分，template、Shadow Dom、Custom Element、Import。

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很让人心动。组件化一定程度上解决了前端重复造轮子的问题，实现了“一个备胎，车车能用”，未来某天某个开发者将开发好的组件分享到云上，大家都能拿来使，这也许就是传说中的， 云备胎。。。。。