前端笔试题 (八)

2021-10-21 16:59:27 阅读：188 来源： 互联网

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载入就绪时就对其进行操纵，并调用执行绑定的函数。

标签：css3,笔试,浏览器,前端,元素,visibility,画布,页面
来源： https://blog.csdn.net/weixin_44602430/article/details/120889946