撩课-Web大前端天天5道面试题-Day25

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.前端开发中，如何优化图像？图像格式的区别？

优化图像：

一、不用图片，尽可能用css3代替。 好比说要实现修饰效果，如半透明、边框、圆角、阴影、渐变等，在当前主流浏览器中均可以用CSS达成。

二、 使用矢量图SVG替代位图。对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。如今主流浏览器都支持SVG了，因此可放心使用！

3.、使用恰当的图片格式。咱们常见的图片格式有JPEG、GIF、PNG。

基本上，内容图片多为照片之类的，适用于JPEG。

而修饰图片一般更适合用无损压缩的PNG。

GIF基本上除了GIF动画外不要使用。且动画的话，也更建议用video元素和视频格式，或用SVG动画取代。

四、按照HTTP协议设置合理的缓存。

五、使用字体图标webfont、CSS Sprites等。

六、用CSS或JavaScript实现预加载。

七、WebP图片格式能给前端带来的优化。
   WebP支持无损、有损压缩，动态、静态图片，压缩比率优于GIF、JPEG、JPEG2000、PG等格式，很是适合用于网络等图片传输。

图像格式的区别：

矢量图：图标字体，如 font-awesome；svg 位图：gif,jpg(jpeg),png

区别：

  一、gif:是是一种无损，8位图片格式。
      具备支持动画，索引透明，压缩等特性。适用于作色彩简单(色调少)的图片，如logo,各类小图标icons等。

  二、JPEG格式是一种大小与质量相平衡的压缩图片格式。适用于容许轻微失真的色彩丰富的照片，
      不适  合作色彩简单(色调少)的图片，如logo,各类小图标icons等。

  三、png:PNG能够细分为三种格式:PNG8，PNG24，PNG32。后面的数字表明这种PNG格式最多能够索引和存储的颜色值。

关于透明：PNG8支持索引透明和alpha透明;PNG24不支持透明;而PNG32在24位的PNG基础上增长了8位（256阶）的alpha通道透明;

优缺点：

  一、能在保证最不失真的状况下尽量压缩图像文件的大小。

  二、对于须要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。 

复制代码

3.Vue的双向数据绑定原理是什么？

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，
经过Object.defineProperty()来劫持各个属性的setter，
getter，在数据变更时发布消息给订阅者，触发相应的监听回调。
具体步骤：

第一步：须要observe的数据对象进行递归遍历，
包括子属性对象的属性，都加上 setter和getter
这样的话，给这个对象的某个值赋值，
就会触发setter，那么就能监听到了数据变化

第二步：compile解析模板指令，将模板中的变量替换成数据，
而后初始化渲染页面视图，并将每一个指令对应的节点绑定更新函数，
添加监听数据的订阅者，一旦数据有变更，收到通知，更新视图

第三步：Watcher订阅者是Observer和Compile之间通讯的桥梁，主要作的事情是:
一、在自身实例化时往属性订阅器(dep)里面添加本身
二、自身必须有一个update()方法
三、待属性变更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。

复制代码