初级前端面试常考题总结(持续记录中........)

技术文章 1年前 (2020) 完美者
982 0

标签:load   ansi   width   lazy   刷新   pos   网站   play   ons   

1.H5和CSS3新特性

   #H5新特性

  • 语义化标签:header、footer、section、nav、article
  • 增强型表单:input的type,如email、range、number、search、url、date等
  • 新增表单属性:placeholder、required、min和max
  • 音频视频:audio、video
  • 地理地位
  • 拖拽
  • 本地存储:localStorag-没有时间限制的数据存储;sessionStorage-针对一个session的数据存存储,当用户关闭浏览器窗口后,数据会被删除
  • 新事件:onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause
  • WebSocket:单个TCP连接上进行全双工通讯的协议

   #CSS3新特性

  • 过渡:transition; 动画:animation; 2D/3D形状转换:transform
  • 选择器::last-child, :first-child, :nth-child(1) , :disabled, :checked,伪类和伪元素等
  • 背景:background-size:规定背景图片的尺寸;baclground-origin:规定背景图片的定位区域
  • 边框:border-radius:圆角;box-shadow/text-shadow:阴影;border-image:边框图片
  • 文本效果:text-shadow:向文本添加阴影;text-overflow:规定当文本溢出包含元素发生的事情;text-decoration:文本修饰符-overline、line-through、underline分别是上划线、中划线、下划线  等其他属性自行查阅
  • 多列布局
  • 弹性布局:display:flex
  • 栅格布局
  • 盒模型定义:box-sizing:content-box(默认)/border-box/inherit
  • 滤镜:filter
  • 媒体查询

2.作用域与作用域链的概念

   #作用域

    作用域分为全局作用域函数作用域(块级作用域):全局作用域表示该代码在程序的任何地方都能访问,window对象的内置属性都拥有全局作用域。但是函数作用域在固定的代码片段才能被访问。作用域的最大用处是隔离变量,不同作用域下同名变量不会有冲突。

   #作用域链

     一般情况下变量取值到创建这个变量的函数的作用域中取值,但是如果在当前的作用域中没有查到值,就会向上级作用域去查直到找到全局作用域,这么一个查找的过程形成的链条叫做作用域链

 

3.闭包

     闭包就是能够访问另外一个函数作用域的变量的函数。由于在JavaScript语言中只有函数内部的子函数才能读取局部变量,清晰的讲闭包就是一个函数,这个函数能够访问其他函数的作用域中的变量。 所以本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另外一个就是让这些变量的值始终保存在内存中

     使用闭包的注意点:1.由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存的泄露。解决方法时,在退出函数之前,将不使用的局部变量全部删除。2.闭包会在父函数外部,改变父函数内部变量的值,所以,如果你把父函数当做对象使用,把闭包单做它的公用方法,把内部变量当做它的私有属性,这时一定要小心,不要随便改变父函数内部变量的值

4.原型与原型链的概念

    #原型

  • 概念: 在构造函数创建出来之后,系统会默认的帮构造函数创建并关联一个神秘的对象,这个对象就是原型。
  • 原型默认是一个空对象
  • 原型的作用:原型中的属性和方法,可以被该构造函数创建出来的对象使用

   #原型链

    • 完整的原型链结构图
完整原型链结构图
  • 原型链的概念:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。那么假如让我们原型等于另一个类型的实例,显然,此刻的原型对象将包含指向另一个原型的指针,相应的,另一个原型中也包含着一个指向另一个构造函数的指针,假如另一个原型又是另一个类型的实例,那么上述关系依然成立,如此层层递进,就构成了实例与原型的链条,这就是所谓的原型链的基本能概念

5.ES6新特性

  • 新增let,const:注意let和const与var的区别。1.let和const不会对变量进行变量提升 2.let和const声明形成块级作用域 3.同一作用域下let和const不能声明同名变量,而var可以  4.let会形成暂时性死区 5.const一旦声明必须赋值,不能使用null占位  6.const声明后不能再修改 ,但是const定义的对象属性是可以改变的,原因是对象是引用类型,const定义的引用类型只要指针不发生改变,其它的不论如何改变都是允许的
  • 箭头函数
  • 展开运算符
  • 解构赋值
  • 新增四个数组API: map(映射),reduce(汇总),filter(过滤),forEach(循环)
  • 字符串匹配startwith,endwith
  • 字符串模板 ${ }
  • promise
  • generator 认识生成器

6.seo搜索引擎优化

  • 减少http请求,使用精灵图
  • 不滥用闭包,会加深作用域链,增加变量的查找时间
  • css样式压缩(gzip),图片懒加载,模块懒加载
  • DNS解析优化
  • CDN外部网页加载服务器

7.如何让一个盒子上下居中

  • 弹性布局:align-items:center(纵轴居中), justify-content:center(主轴居中)
  • 定位(推荐):父 position:relative,子 position: absolute ,top:50% left 50%,回退盒子一半的距离:margin-top:-50px;margin-left:-50px
  • transform:translate(-50%,-50%)      translate()函数是css3的新特性,在不知道自身宽高的情况下,可以利用它来进行水平垂直居中

8.浏览器的缓存机制

考察cookie,sessionStorage,localStorage的区别和用法

共同特点:用于浏览器端存储的缓存数据

  1. cookie:限制大小为4kb,主要用途有保存登录信息,比如登录网址时可以看到“记住密码”选项,这通常就是通过cookie中存入一段用来辨别用户身份的数据来实现。当设置了cookie后,数据会发送到服务器端,造成一定宽带的浪费。cookie过期时间之前一直有效,即使关闭窗口或浏览器。cookie和localStorage是在同源窗口中共享的。cookie有效时间默认为-1,如果不进行设置的话,就会默认在浏览器会话关闭时结束。可以通过setMaxAge()方法设置cookie的生命周期。当setMaxAge(0)表示立刻删除该浏览器上指定的cookie
  2. localStorage:存储大小可达5M,是HTML5标准中新加入的技术,它并不是划时代的新东西,早在IE6时代,就有一个叫userData的东西用于本地存储,但是考虑到浏览器的兼容性,更通用的方案是使用Flash.而如今,localStorage被大多数浏览器支持,如果你的网站需要支持IE6+,那么使用userData作为你的polyfill(向下兼容浏览器)的方案是种不错的选择。localStorage数据存储永久有效,除非手动删除
  3. sessionStorage:存储大小可达5M,是一个前端的概念,它可以将一部分数据在当前的会话中保存下来,刷新数据依旧存在,但当页面关闭后,sessionStorage中的数据就会被清空。sessionStorage仅在关闭浏览器之前有效。sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面
技术图片

初级前端面试常考题总结(持续记录中........)

标签:load   ansi   width   lazy   刷新   pos   网站   play   ons   

原文地址:https://www.cnblogs.com/rongwang/p/13520047.html

版权声明:完美者 发表于 2020-09-02 16:44:05。
转载请注明:初级前端面试常考题总结(持续记录中........) | 完美导航

暂无评论

暂无评论...