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