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

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。

推荐阅读更多精彩内容

  • 1.mvvm和mvc区别?它和其它框架(jquery)的区别是什么?哪些场景适合? 2.vue的优点是什么? 3....
    撩课学院阅读 89评论 0 2
  • AngularJS是什么? AngularJs(简称ng)是一个用于设计动态web应用的结构框架。首先,它是一个框...
    强哥科技兴阅读 398评论 0 1
  • 早晨老妈打电话说昨天下了一夜的雨。怕家里存水,让我去给看看。哎,要去老妈家里。最近的一条路有一点泥泞。没...
    逆风飞的会更高阅读 20评论 0 1
  • 早晨起得稍微晚 依旧跑步 只是速度比平常快 7点准时回来 路上偶遇自嗨之人 背着包 大声哼着自己的歌 沉浸在自己的...
    JENY_f22c阅读 17评论 0 2
  • 渐渐发现越来越多的人已形同陌路,并不是距离变远了,而是没有了相处的心。很多时候我们只是彼此的过往,而只有极少数成为...
    阿略1阅读 163评论 4 34