仕德伟做的网站,整合营销活动策划方案,自助分红网站建设,企业站web前端面试题
1、前端如何实现优化性能 (1)减少网络时间 ①使用DNS缓存技术 ②减少需要传输的文件尺寸 ③加快文件传输速度 (2)减少发送的请求数量 ①利用浏览器缓存 ②使用合并的图片文件 (3)提高浏览器下载的并发度 ①JS文件放在HTML文档最后 ②使用多个域名 (…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上的方法")
}