前端笔试题 (八)

36. 你有对 Vue 项目进行哪些优化?

1)v-if 和 v-show 区分使用场景
2)computed 和 watch 区分使用场景
3)懒加载(第5)
4)浏览器缓存(上面第28道题)

37.网页前端性能优化的方式有哪些?

1)压缩 css, js, 图片
2)减少 dom 元素数量
3)图片懒加载
4)减少 http 请求次数, 合并 css、js 、合并图片
5)巧用事件委托(上8)

38. 移动端性能优化?

1)尽量使用css3动画,开启硬件加速
2)适当使用touch时间代替click时间
3)避免使用css3渐变阴影效果
4)可以用transform: translateZ(0) 来开启硬件加速
5)不滥用float。float在渲染时计算量比较大,尽量减少使用
6)不滥用web字体。web字体需要下载,解析,重绘当前页面
7)合理使用requestAnimationFrame动画代替setTimeout
8)css中的属性(css3 transitions、css3 3D transforms、opacity、webGL、video)会触发GUP渲染,耗电

39. H5新增新特性

1、拖拽释放(Drap and drop) API ondrop

拖放是一种常见的特性,即抓取对象以后拖到另一个位置,在HTML5中,拖放是标准的一部分,任何元素都能够拖放。

2、自定义属性data-id

3、语义化更好的内容标签(header,nav,footer ,aside, article, section)

4、音频,视频(audio, video)

如果浏览器不支持自动播放怎么办?在属性中添加autoplay

5、画布Canvas

1)getContext()方法返回一个用于在画布上绘图的环境

Canvas.getContext(contextID)参数contextID指定了您想要在画布上绘制的类型。当前唯一的合法值是“2d”,它指定了二维绘图,并且导致这个方法返回一个环境对象,该对象导出一个二维绘图API。

2)cxt.stroke()如果没有这一步线条是不会显示在画布上的

3)canvas和image在处理图片的时候有什么区别?

image是通过对象的形式描述图片的,canvas通过专门的API将图片绘制在画布上。

6、地理(Geolocation)API

7、本地离线存储localStorage长期存储数据浏览器关闭后数据不丢失

8、sessionStorage 的数据在浏览器关闭后自动删除

9、表单控件calendar,date,time,email,url,search,tel,file,number。

10、新的技术webworker, websocket , Geolocation

CSS3 新特性

1、颜色: 新增RGBA, HSLA模式
2、文字阴影(text-shadow)
3、边框: 圆角(border-radius) 边框阴影 : box-shadow
4、盒子模型: box-sizing
5、背景:background-size background-origin background-clip
6、渐变: linear-gradient, radial-gradient
7、过渡: transition可实现动画
8、自定义动画 animate @keyfrom
9、媒体查询多栏布局 @media screen and (width:800px) {…} 10、border-image
11、2D转换;transform: translate(x,y) rotate(x,y) skew(x,y) scale(x,y)
12、3D转换
13、字体图标font-face
14、弹性布局flex

40.元素隐藏display:none和visibility:hidden

1)
display:none是彻底消失,不在文档流中占位,浏览器也不会解析该元素;visibility:hidden是视觉上消失了,可以理解为透明度为0的效果,在文档流中占位,浏览器会解析该元素;
2)
使用visibility:hidden比display:none性能上要好,display:none切换显示时visibility,
页面产生回流(当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等,页面重新构建,此时就是回流。所有页面第一次加载时需要产生一次回流),而visibility切换是否显示时则不会引起回流。

(document).ready()方法和window.onload有什么区别?

(1)window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。
(2)$(document).ready() 方法可以在DOM载入就绪时就对其进行操纵,并调用执行绑定的函数。

上一篇:性能优化: content-visibility 优化长列表


下一篇:前端每日面试题(2)