答寒冬winter面试题
讲讲输入完网址按下回车,到看到网页这个过程中发生了什么。
谈谈你对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提出了组件定义方式的规范化。目前包括四个部分,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很让人心动。组件化一定程度上解决了前端重复造轮子的问题,实现了“一个备胎,车车能用”,未来某天某个开发者将开发好的组件分享到云上,大家都能拿来使,这也许就是传说中的, 云备胎。。。。。
谈谈你对前端资源下载性能优化的经验和思考
前端的资源主要是css,js文件和图片。
目前我们的优化方法:
css、js压缩(减小文件体积)
css sprite(减少图片资源的请求次数)
前文提到的,优先加载css,将js文件置底
通过打包工具将文件合并(文件请求占加载的大头,减少文件请求数)
合理选择js、css文件的加载方式:内嵌 / 外部引用(选择内嵌,是为了减少文件请求数。而将更新较少,不同页面都公用的文件提取出来,做为外链加载,是为了利用缓存,减少它的请求次数,且减少需要多次请求的HTML文件大小)
配置离线存储
上线前使用打包工具进行项目优化,减少无用代码。
现在有很多的MV*框架,你对它们有什么看法
MV*框架的目的简单来说是为了实现代码分工,增加模块的重用,让业务逻辑和界面交互解耦。
前端框架,实习中接触过Ractivejs和AngularJs,都是MVVM的框架
前端框架给我带来的好处在于它引导了我做项目的流程。要求我们在项目开动前就得先构思好这个项目的分级,每层的结构,在写之前要求我们对项目有一个大概的把握,有更清晰的思路。
RactiveJS相比起来就简单多了,我们可以按需选择数据更新的时间,正是因为小很多地方要自己实现,自定义的程度更高。
转载于:https://www.cnblogs.com/oneX/p/3906084.html
答寒冬winter面试题相关推荐
- 答寒冬的面试题(1)
本文也发表在我另一篇独立博客qingbob.com: <答寒冬的面试题1> 有关注前端和微博的朋友一定留意到了前一阵寒冬和玉伯关于前端面试的讨论,后来老赵和左耳朵耗子也加入其中,讨论带来 ...
- 转答寒冬的面试题(1)
有关注前端和微博的朋友一定留意到了前一阵寒冬和玉伯关于前端面试的讨论,后来老赵和左耳朵耗子也加入其中,讨论带来了非常多的启发和思考--不久之前自己也经历了几轮面试,决心对自己的基础开始加强,正巧寒冬老 ...
- 快问快答JS面向对象面试题
1.说说你对闭包的理解 使用闭包主要是为了设计私有的方法和变量.闭包的优点是可以避免全局变量的污染,缺点是闭包会常驻内存,会增大内存使用量,使用不当很容易造成内存泄露.在js中,函数即闭包,只有函数才 ...
- 寒冬 winter:代码无捷径,只怕有心人
2018年初冬,在淘宝996乐队的<持续迭代>的余味中,winter 在 Vue Conf 上以"挖掘 Vue 的声明式交互能力"为题做了演讲 winter,本名程劭非 ...
- 2017计算机应用+简答,2017计算机应用基础试题及答案
2017计算机应用基础试题及答案 三.双项选择题(每小题1分,共5分) 1.计算机的存储系统一般指( ) A.ROM B.内存(主存) C.RAM D.外存(辅存) E.控制器 2.微型计算机采用总线 ...
- 90% 的人都会答错的面试题 == 和 equals 的区别
== 和 equals 的区别是什么? == 解读 对于基本类型和引用类型,== 的作用效果是不同的,如下所示: 基本类型:比较的是值是否相同: 引用类型:比较的是引用是否相同: 代码示例: Stri ...
- 答出多少面试题能吃上饭?
一.基础 1.Java都有哪些数据类型?基本数据类型有哪些?分别占多少字节?多少位?引用数据类型又有哪些? 基本数据类型:byte(1).short(2).int(4).lon ...
- 菜鸟教程中的面试题总结
前端开发面试题 分类 编程技术 本文收集总结了一些前端面试题,初学者阅后也要用心钻研其中的原理,重要知识需要系统学习.透彻学习,形成自己的知识链.万不可投机取巧,临时抱佛脚只求面试侥幸混过关是错误的! ...
- 《转》前端开发面试题
前言 只看问题点这里 看全部问题和答案点这里 本文由我收集总结了一些前端面试题,初学者阅后也要用心钻研其中的原理,重要知识需要系统学习.透彻学习,形成自己的知识链.万不可投机取巧,临时抱佛脚只求面试侥 ...
最新文章
- Windows上VS2017单步调试FFmpeg源码的方法
- Java 爬虫--类似Python的requests库--HttpClient, HttpAsyncClient--Maven
- GNU make manual 翻译( 一百一十九)
- 数据结构之链表、栈和队列 java代码实现
- 阿里云配置tornado无法访问
- ng-repeat 的重复问题
- C++多态案例一计算器类
- 如何用python批量处理图片大小_python批量修改图片大小的方法
- php layui 框架,Thinkphp5+Layui高颜值内容管理框架
- 初步接触Oracle 11g(1)
- 《Linux多线程服务端编程:使用muduo C++网络库》书摘6.6.2节
- 网购成瘾是一种精神障碍?将导致抑郁和破坏社交 网友:没钱即可根治
- 当我们谈论 996 的时候我们在谈论什么?
- windows server 2003 IIS 调试 ASP时路径问题
- 智能算法应用:基于灰狼优化的最大熵图像多阈值分割 - 附代码
- Golang六款优秀Web框架对比
- 黑客是什么?揭开郭盛华的神秘面纱,讲解他不为人知传奇故事
- 研发管理05:项目管理经验总结
- php方法帮助文档,Trace方法_帮助文档_Thinkphp手册
- moment 秒级时间戳转格式