web前端面试题

web前端面试题

1、前端如何实现优化性能

(1)减少网络时间 ①使用DNS缓存技术 ​ ②减少需要传输的文件尺寸 ​ ③加快文件传输速度

(2)减少发送的请求数量 ①利用浏览器缓存 ​ ②使用合并的图片文件

(3)提高浏览器下载的并发度 ①JS文件放在HTML文档最后 ​ ②使用多个域名

(4)让页面尽早开始显示
①将样式表的引用放在HTML文档的开头，将JS的引用放在HTML文档的最后，这样JS文件的下载和执行会在所有页面都下载完成后，不会阻止其他页面元素的显示。从用户感官上说，JS文件的下载和执行时间完全不会被用户感觉到。

2、浏览器缓存

引用地址

3、cookie sessionStorage localStorage 区别

区别：
1、cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下
2、存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
3、数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭
4、作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localstorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的

4、Canvas和SvG的区别是什么？

两者的区别如下：
一旦 Canvas绘制完成将不能访问像素或操作它；任何使用SVG绘制的形状都能被记忆和操作，可以被浏览器 再次显示。
Canvas对绘制动画和游戏非常有利；SVG对创建图形（如CAD）非常有利。
因为不需要记住以后事情，所以 Canvas运行更快；因为为了之后的操作，SVG需要记录坐标，所以运行比较 缓慢。
在 Canvas中不能为绘制对象绑定相关事件；在SVG中可以为绘制对象绑定相关事件。
Canvas绘制出的是位图，因此与分辨率有关；SvG绘制出的是矢量图，因此与分辨率无关

5、清除浮动的方式

第一种 清除浮动方式 clear 在浮动元素的同级末尾加上 一个空div 并添加样式 clear属性
第二种 当子元素发生浮动 使用 overflow属性会强制性包裹起来浮动内容 而达到清除浮动的效果
第三种：用伪类去实现清除浮动 ： after伪类 来实现清除浮动 有借助第二种方式的方法

6、谈谈你对静态布局、自适应布局、响应式布局、弹性布局的理解？

静态布局
描述：就是设定好的长和宽，大小不会改变，不管你多大的屏幕它都是那么大，分辨率是不会改变的
自适应布局
描述：不同屏幕分辨率下，保持原有展示方式。元素的尺寸大小可以改变，但展示方式不会改变
响应式布局
描述：不同屏幕分辨率下，展示方式不同
弹性布局（flex布局）
描述：目前比较流行的一种布局，使用传统布局难以实现一些复杂的布局，使用flex布局实现就变得非常容易

7、async和defer的区别

defer和async是script标签的两个属性，用于在不阻塞页面文档解析的前提下，控制脚本的下载和执行。
defer：用于开启新的线程下载脚本文件，并使脚本在文档解析完成后执行 - js的执行在所有的元素都解析完成之后执行。
async：新增属性，用于异步下载脚本文件，下载完毕立即解释执行代码 - js加载完成之后立即执行。

8、JS判断数据类型的方法

1、typeof
2、instanceof
3、constructor
4、toString
5、is Array 判断是否为数组
6、通过原型 Object.prototype.toString.call(val) === ‘[object Object]’

9、数组去重

利用ES6 Set去重（ES6中最常用）
利用for嵌套for，然后splice去重（ES5中最常用）

10、var let const的区别

①var有变量提升 let、const没有变量提升
②var除函数内部都为全局变量 let、const都属于块级作用域
③var可以重复定义，会覆盖之前的变量 let、const不能重复定义，报错
④var没有暂时性死区 let、const有暂时性死区
⑤var声明为全局变量的时候会挂载到window let、 const不会挂载到window
⑥var、let为变量 const为常量

11、new操作符具体做了哪些事情

①new会在内存中创建一个新的空对象
②new会让this指向这个对象
③执行构造函数里的代码，给这个新对象添加属性和方法
④new 会返回这个新对象（所以构造函数不需要return）

12、js的继承

1、原型链继承
优点：父类方法和属性可以复用
缺点：1、父类中的引用数据类型会被共享（子类修改父类中的引用数据，另一个子类跟着改动）2、不能传递参数

function Person() {
   
    this.name = "小明"
    this.eats = ['苹果']
    this.getName = function() {
   
        console.log(this.name)
    }
}
Person.prototype.get = () => {
   
    console.log("Person.prototype上的方法")
}