前端面试题(2019/4/28)

原创 堕落千风 随笔 前端笔试题 399阅读 2019-05-01 13:32:05 举报

Html + Css

1.写段css实现水平垂直居中,要求能适应屏幕大小变动
2.简述一下浏览器的渲染过程
  • 处理 HTML 标记并构建 DOM 树。
  • 处理 CSS 标记并构建 CSSOM 树。
  • 将 DOM 与 CSSOM 合并成一个渲染树。
  • 根据渲染树来布局,以计算每个节点的几何信息。
  • 将各个节点绘制到屏幕上。

进一步了解:https://zhuanlan.zhihu.com/p/29418126

3.简述浏览器的重构和回流
  • 重构:浏览器的重构指的是改变每个元素的外观时所触发的浏览器行为,比如颜色、背景等样式发生了改变而进行的重新构造新外观的过程。重构不会引发页面的重新布局,不一定伴随着回流。
  • 回流:指的是浏览器为了重新渲染页面的需要而进行的重新计算元素的几何大小和位置,开销是非常大的,回流可以理解为渲染树需要重新进行计算,一般最好触发元素的重构,避免元素的回流;比如通过添加class来添加css样式,而不是直接在DOM上设置,当需要操作某一块元素的时候,最好使其脱离文档流,这样就不会引起回流了,比如设置position:absolute或者fixed,或者display:none,等操作结束后再显示。
4.简述cookie、sessionStorage、localeStorage 的区别
  • cookie是存储在浏览器端,并且随浏览器的请求一起发送到服务器端的,它有一定的过期时间,到了过期时间自动会消失。sessionStorage和localeStorage也是存储在浏览器客户端的,三者同源且同属于web Storage,比cookie的存储大小要大有8m,cookie只有4kb,localeStorage是持久化的存储在客户端,如果用户不手动清除的话,不会自动消失,会一直存在,sessionStorage也是存储在客户端,但是它的存活时间是在一个回话期间,只要浏览器的回话关闭了就会自动消失。

JavaScript

1.简述对闭包的理解
  • 函数对象可以通过作用域链相互关联起来,函数体内部的变量都可以保存在函数作用域内,这种特性称为闭包。这意味着函数变量可以隐藏于作用域链之内,看起来好像是函数将变量包裹了起来。这种方式常用于共享函数内的私有变量。
  • 闭包就是能够读取其他函数内部变量的函数。例如在javascript中,只有函数内部的子函数才能读取局部变量,所以闭包可以理解成“定义在一个函数内部的函数“。
  • 在本质上,闭包是将函数内部和函数外部连接起来的桥梁。
2.简述对浏览器垃圾回收机制的理解
  • 垃圾收集器会按照固定的时间间隔,周期性的找出不再继续使用的变量,然后释放其占用的内存。
  • 不再使用的变量也就是生命周期结束的变量,是局部变量,局部变量只在函数的执行过程中存在,当函数运行结束,没有其他引用(闭包),那么该变量会被标记回收。全局变量的生命周期直至浏览器卸载页面才会结束,也就是说全局变量不会被当成垃圾回收。
  • 浏览器通常用采用的垃圾回收有两种方法:标记清除、引用计数。
  • 标记清除
    现代浏览器大多数采用这种方式:当变量进入环境时,将变量标记"进入环境",当变量离开环境时,标记为:“离开环境”。某一个时刻,垃圾回收器会过滤掉环境中的变量,以及被环境变量引用的变量,剩下的就是被视为准备回收的变量。
  • 引用计数
    引用计数的含义是跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型赋值给该变量时,则这个值的引用次数就是 1。相反,如果包含对这个值引用的变量又取得了另外一个值,则这个值的引用次数就减 1。当这个引用次数变成 0 时,则说明没有办法再访问这个值了,因而就可以将其所占的内存空间给收回来。
3、简述“==”与“===”之间的区别
  • == 先转换类型再比较,=== 先判断类型,如果不是同一类型直接为false。===表示恒等于,比较的两边要绝对的相同
  • ==操作符:
    如果两个值具有相同类型,会进行===比较,返回===的比较值
    如果两个值不具有相同类型,也有可能返回true
    如果一个值是null另一个值是undefined,返回true
    如果一个值是string另个是number,会把string转换成number再进行比较
    如果一个值是true,会把它转成1再比较,false会转成0
    如果一个值是Object,另一个是number或者string,会把Object利用 valueOf()或者toString()转换成原始类型再进行比较
  • ===操作符:
    要是两个值类型不同,返回false
    要是两个值都是number类型,并且数值相同,返回true
    要是两个值都是stirng,并且两个值的String内容相同,返回true
    要是两个值都是true或者都是false,返回true
    要是两个值都是指向相同的Object,Arraya或者function,返回true
    要是两个值都是null或者都是undefined,返回true
4、JQuery中的 $ 与 $.fn 之间的区别
  • Jquery的方法是可以拓展的,从调用声明创建方法的方式来看,可以归结为两类:一类直接由$符调用;另一类由$("")来调用,说到这里你是不是想到了Java语言中的静态方法和实例方法,是的,如果从java类的角度认识调用创建的Jquery方法可能更好理解些,尽管Javascript没有明确的类的概念。好了现在可以回答问题了:$拓展的方法是静态方法,可以使用$直接调用,其拓展的方式有两种,一般使用$.extend({});;而$.fn拓展的方法是实例方法,必须由“对象”$("")来调用,其拓展的方式同样有两种,一般使用$.fn.extend({ })。
  • 扩展:
  • $ 即jquery的同义词,jQuery的另一种表现形式;
  • $.fn是Jquery中的原型对象相当与Js中的原型对象(prototype),那么什么是Js原型对象呢?
    JavaScript 常被描述为一种基于原型的语言,每一个对象都有一个原型对象,对象以其原型为模版,从原型继承方法和属性。而fn可以在对象的基础上扩展属性和方法,原型对象在拥有对象的基础上也有了对象的属性和方法,所以别的对象也可以从原型对象中继承别的对象的方法和属性。这叫原型链。那么为什么对象可以从原型对象中继承方法和属性呢?那就是通过创建对象后就会有一个属性proto,这个_proto_指向原型对象中的属性prototype,形成原型链。
    fn就是可以在对象上扩展原型对象上没有的属性和方法。$.fn 同理。
5.用JavaScript脚本为Array对象添加一个去重函数方法
6.写一段js代码对简述中的五种主要数据类型进行深度复制
  • 五种原始数据类型:String,Number,Boolean,Null,Undefined
  • 五种主要数据类型:Number、String、Object、Array、Boolean
评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复