web前端面试问题，金三银四有备无患

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

(1)减少网络时间

①使用DNS缓存技术 ​ ②减少需要传输的文件尺寸 ​ ③加快文件传输速度

(2)减少发送的请求数量

①利用浏览器缓存 ​ ②使用合并的图片文件

(3)提高浏览器下载的并发度

①JS文件放在HTML文档最后 ​ ②使用多个域名

(4)让页面尽早开始显示

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

2、cookie sessionStorage localStorage 区别

区别：

cookie数据始终在同源的http请求中携带(即使不需要)，即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径(path)的概念，可以限制cookie只属于某个路径下

存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大

数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭之前有效;localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据;cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭

作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面;localstorage在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的

3、Canvas和SvG的区别是什么?

两者的区别如下：

一旦 Canvas绘制完成将不能访问像素或操作它;任何使用SVG绘制的形状都能被记忆和操作，可以被浏览器 再次显示。

Canvas对绘制动画和游戏非常有利;SVG对创建图形(如CAD)非常有利。

因为不需要记住以后事情，所以 Canvas运行更快;因为为了之后的操作，SVG需要记录坐标，所以运行比较 缓慢。

在 Canvas中不能为绘制对象绑定相关事件;在SVG中可以为绘制对象绑定相关事件。

Canvas绘制出的是位图，因此与分辨率有关;SvG绘制出的是矢量图，因此与分辨率无关

4、清除浮动的方式

第一种 清除浮动方式 clear 在浮动元素的同级末尾加上 一个空div 并添加样式 clear属性

第二种 当子元素发生浮动 使用 overflow属性会强制性包裹起来浮动内容 而达到清除浮动的效果

第三种：用伪类去实现清除浮动 ： after伪类 来实现清除浮动 有借助第二种方式的方法

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

静态布局

描述：就是设定好的长和宽，大小不会改变，不管你多大的屏幕它都是那么大，分辨率是不会改变的

自适应布局

描述：不同屏幕分辨率下，保持原有展示方式。元素的尺寸大小可以改变，但展示方式不会改变

响应式布局

描述：不同屏幕分辨率下，展示方式不同

弹性布局(flex布局)

描述：目前比较流行的一种布局，使用传统布局难以实现一些复杂的布局，使用flex布局实现就变得非常容易

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

1、typeof

2、instanceof

3、constructor

4、toString

5、is Array 判断是否为数组

7、数组的方法

push() 末尾添加 、 join() 数组转化字符串、 pop() 末尾删除 、 unshift() 首个添加、 shift() 第一个删除 、 sort() 排序、 concat() 合并数组 、 slice() 截取 、 splice() 数组更新、 indexOf() 从开头查询 查询到即结束 、 lastIndexOf() 从末尾查询 查询到即结束、 reverse() 数组倒序

map()方法 给数组的每个元素做特殊的处理 返回一个新的数组

filter() 方法 过滤一个数组中符合要求的元素，返回一个新数组

some()方法 用于数组判断 当数组中只要有一个符合条件就返回 true

forEach此方法是用来代替 for 循环遍历数组

every返回值是布尔值，判断数组中的值是否都符合条件，如果是则返回true，有一个不符合则返回false

find 、findLast返回值为符合条件的对应的那个值后者从后往前遍历

includes方法用来判断一个数组是否包含一个指定的值，包含就返回 true , 否则返回false。

8、字符串方法

charAt() 返回指定位置字符 concat() 连接字符串 replace() 替换 split() 分割 indexOf() 从前往后第一次出现 lastindexOf() 从后往前第一次出现 toLowerCase() 转换为小写 toUpperCase() 转换为大写 clice()字符串截取 subString() 字符串截取

includes()：返回布尔值，表示是否找到了参数字符串。 startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。 endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。 repeat()方法返回一个新字符串，表示将原字符串重复n次

padStart()和padEnd()接受两个参数第一个参数是字符串补全生效的最大长度，第二个参数是用来补全的字符串。少补多删

以上就是“web前端面试问题，金三银四有备无患”，你能回答上来吗?如果想要了解更多的相关内容，可以关注极悦Java官网。