撩课-Web大前端每天5道面试题-Day25
程序员文章站
2024-01-14 09:15:34
1.web前端开发,如何提高页面性能优化? 2.前端开发中,如何优化图像?图像格式的区别? 3.Vue的双向数据绑定原理是什么? 4.请说下封装 vue 组件的过程? 5.vue.cli中怎样使用自定义的组件?有遇到过哪些问题吗? ......
1.web前端开发,如何提高页面性能优化?
内容方面: 1.减少 http 请求 (make fewer http requests) 2.减少 dom 元素数量 (reduce the number of dom elements) 3.使得 ajax 可缓存 (make ajax cacheable) 针对css: 1.把 css 放到代码页上端 (put stylesheets at the top) 2.从页面中剥离 javascript 与 css (make javascript and css external) 3.精简 javascript 与 css (minify javascript and css) 4.避免 css 表达式 (avoid css expressions) 针对javascript : 1. 脚本放到 html 代码页底部 (put scripts at the bottom) 2. 从页面中剥离 javascript 与 css (make javascript and css external) 3. 精简 javascript 与 css (minify javascript and css) 4. 移除重复脚本 (remove duplicate scripts) 面向图片(image): 1.优化图片 2 不要在 html 中使用缩放图片 3 使用恰当的图片格式 4 使用 css sprites 技巧对图片优化
2.前端开发中,如何优化图像?图像格式的区别?
优化图像: 1、不用图片,尽量用css3代替。 比如说要实现修饰效果,如半透明、边框、圆角、阴影、渐变等,在当前主流浏览器中都可以用css达成。 2、 使用矢量图svg替代位图。对于绝大多数图案、图标等,矢量图更小,且可缩放而无需生成多套图。现在主流浏览器都支持svg了,所以可放心使用! 3.、使用恰当的图片格式。我们常见的图片格式有jpeg、gif、png。 基本上,内容图片多为照片之类的,适用于jpeg。 而修饰图片通常更适合用无损压缩的png。 gif基本上除了gif动画外不要使用。且动画的话,也更建议用video元素和视频格式,或用svg动画取代。 4、按照http协议设置合理的缓存。 5、使用字体图标webfont、css sprites等。 6、用css或javascript实现预加载。 7、webp图片格式能给前端带来的优化。 webp支持无损、有损压缩,动态、静态图片,压缩比率优于gif、jpeg、jpeg2000、pg等格式,非常适合用于网络等图片传输。 图像格式的区别: 矢量图:图标字体,如 font-awesome;svg 位图:gif,jpg(jpeg),png 区别: 1、gif:是是一种无损,8位图片格式。 具有支持动画,索引透明,压缩等特性。适用于做色彩简单(色调少)的图片,如logo,各种小图标icons等。 2、jpeg格式是一种大小与质量相平衡的压缩图片格式。适用于允许轻微失真的色彩丰富的照片, 不适 合做色彩简单(色调少)的图片,如logo,各种小图标icons等。 3、png:png可以细分为三种格式:png8,png24,png32。后面的数字代表这种png格式最多可以索引和存储的颜色值。 关于透明:png8支持索引透明和alpha透明;png24不支持透明;而png32在24位的png基础上增加了8位(256阶)的alpha通道透明; 优缺点: 1、能在保证最不失真的情况下尽可能压缩图像文件的大小。 2、对于需要高保真的较复杂的图像,png虽然能无损压缩,但图片文件较大,不适合应用在web页面上。
3.vue的双向数据绑定原理是什么?
vue.js 是采用数据劫持结合发布者-订阅者模式的方式, 通过object.defineproperty()来劫持各个属性的setter, getter,在数据变动时发布消息给订阅者,触发相应的监听回调。 具体步骤: 第一步:需要observe的数据对象进行递归遍历, 包括子属性对象的属性,都加上 setter和getter 这样的话,给这个对象的某个值赋值, 就会触发setter,那么就能监听到了数据变化 第二步:compile解析模板指令,将模板中的变量替换成数据, 然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数, 添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图 第三步:watcher订阅者是observer和compile之间通信的桥梁,主要做的事情是: 1、在自身实例化时往属性订阅器(dep)里面添加自己 2、自身必须有一个update()方法 3、待属性变动dep.notice()通知时,能调用自身的update()方法, 并触发compile中绑定的回调,则功成身退。 第四步:mvvm作为数据绑定的入口,整合observer、compile和watcher三者, 通过observer来监听自己的model数据变化,通过compile来解析编译模板指令, 最终利用watcher搭起observer和compile之间的通信桥梁, 达到数据变化 -> 视图更新;视图交互变化(input) -> 数据model变更的双向绑定效果。
4.请说下封装 vue 组件的过程?
首先,组件可以提升整个项目的开发效率。 能够把页面抽象成多个相对独立的模块, 解决了我们传统项目开发:效率低、难维护、复用性等问题。 然后,使用vue.extend方法创建一个组件,然后使用vue.component方法注册组件。 子组件需要数据,可以在props中接受定义。 而子组件修改好数据后,想把数据传递给父组件。可以采用emit方法。
5.vue.cli中怎样使用自定义的组件?有遇到过哪些问题吗?
第一步:在components目录新建你的组件文件(smithbutton.vue),script一定要export default { 第二步:在需要用的页面(组件)中导入:import smithbutton from ‘../components/smithbutton.vue’ 第三步:注入到vue的子组件的components属性上面,components:{smithbutton} 第四步:在template视图view中使用,<smith-button> </smith-button> 问题有:smithbutton命名,使用的时候则smith-button。
上一篇: 双层循环时进度条的使用