撩课-Web大前端每天5道面试题-Day36
程序员文章站
2022-05-30 14:57:32
1.介绍一下你对浏览器内核的理解? 2.知道什么是微格式吗? 3.一个页面上有大量的图片,加载很慢,你有哪些方法优化这些图片的加载,给用户更好的体验? 4.数据绑定最基本的实现? 5.数据结构处理? ......
1.介绍一下你对浏览器内核的理解?
主要分成两部分:渲染引擎(layout engineer或rendering engine)和js引擎。 渲染引擎:负责取得网页的内容(html、xml、图像等等)、 整理讯息(例如加入css等),以及计算网页的显示方式,然后会输出至显示器或打印机。 浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。 所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。 js引擎则:解析和执行javascript来实现网页的动态效果。 最开始渲染引擎和js引擎并没有区分的很明确,后来js引擎越来越独立,内核就倾向于只指渲染引擎。
2.知道什么是微格式吗?
微格式(microformats)是一种让机器可读的语义化xhtml词汇的集合,是结构化数据的开放标准。 是为特殊应用而制定的特殊格式 优点:将智能数据添加到网页上,让网站内容在搜索引擎结果界面可以显示额外的提示。
3.一个页面上有大量的图片,加载很慢,你有哪些方法优化这些图片的加载,给用户更好的体验?
(1)图片懒加载,在页面上的未可视区域可以添加一个滚动条事件, 判断图片位置与浏览器顶端的距离与页面的距离,如果前者小于后者,优先加载。 (2)如果为幻灯片、相册等,可以使用图片预加载技术, 将当前展示图片的前一张和后一张优先下载。 (3)如果图片过大,可以使用特殊编码的图片, 加载时会先加载一张压缩的特别厉害的缩略图,以提高用户体验。 (4)如果图片展示区域小于图片的真实大小,则因在服务器端根据业务需要先行进行图片压缩,图片压缩后大小与展示一致。
4.数据绑定最基本的实现?
列子: // 实现一个方法,可以给 obj 所有的属性添加动态绑定事件,当属性值发生变化时会触发事件 let obj = { key_1: 1, key_2: 2 } function func(key) { console.log(key + ' 的值发生改变:' + this[key]); } binddata(obj, func); obj.key_1 = 2; // 此时自动输出 "key_1 的值发生改变:2" obj.key_2 = 1; // 此时自动输出 "key_2 的值发生改变:1" 答案: function binddata(obj, fn) { for (let key in obj) { object.defineproperty(obj, key, { set(newval) { if (this.value !== newval) { this.value = newval; fn.call(obj, key); } }, get() { return this.value; } }) } }
5.数据结构处理?
有一个祖先树状 json 对象,当一个人有一个儿子的时候,其 child 为其儿子对象,如果有多个儿子,child 为儿子对象的数组。 请实现一个函数,找出这个家族中所有有多个儿子的人的名字(name),输出一个数组。 列子: // 样例数据 let data = { name: 'jack', child: [ { name: 'jack1' }, { name: 'jack2', child: [{ name: 'jack2-1', child: { name: 'jack2-1-1' } }, { name: 'jack2-2' }] }, { name: 'jack3', child: { name: 'jack3-1' } } ] } 答案: 用递归 function findmultichildperson(data) { let namelist = []; function tmp(data) { if (data.hasownproperty('child')) { if (array.isarray(data.child)) { namelist.push(data.name); data.child.foreach(child => tmp(child)); } else { tmp(data.child); } } } tmp(data); return namelist; } 不用递归 function findmultichildperson(data) { let list = [data]; let namelist = []; while (list.length > 0) { const obj = list.shift(); if (obj.hasownproperty('child')) { if (array.isarray(obj.child)) { namelist.push(obj.name); list = list.concat(obj.child); } else { list.push(obj.child); } } } return namelist; }