面试题四高级

面试题高级四

一、html5部分
1.sessionStorage和localStorage的区别
答案：
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
2.Canvas和SVG的区别是什么
答案：
canvas绘制2d位图svg绘制2d 矢量图
canvas通过js程序指令创建图形，svg通过标签创建图形
canvas可以只能将事件绑定在画布上，svg可以将事件绑定在任意元素上
canvas应用方向，网页特效与小游戏，svg创建统计图与地图应用

3.如何通过canvas路径绘制一个圆心 250 200 半径为100 描边红色的圆
提示：画布id 为box 画布宽高相同500px

var can = docuemnt.getElementById(“box”);
var ctx = can.getContext(“2d”);
ctx.beginPath();
ctx.arc(250,200,100,0,2*Math.PI);
ctx.stroke();

4. html5有哪些新特性举五种
   canvas 绘图技术
   svg 绘图技术
   webworker 新线程
   websocket 网络协议
   webstorage 客户端存储

5. html5表单中新input type 属性值有哪些
   Color
   Date
   Datetime
   Email
   Time
   Url
   Range
   Tel
   Number
   Search

6. html5中如何创建一个worker线程,以及接收和发送数据
   var worker = new Worker(“1.js”);
   worker.postMessage();
   worker.onmessage = function (e)
   {
   e.data;
   };

7. Local storage和cookies之间的区别是什么？
   区别一:客户端和服务端都能访问数据。
   Cookie的数据通过每一个请求发送到服务端
   Local storage只有本地浏览器端可访问数据，
   服务器不能访问本地存储直到故意通过POST或者GET的通道发送到服务器
   区别二:大小
   每个cookie有4095byte
   Local storage每个域5MB
   区别三:过期
   Cookies有有效期，所以在过期之后cookie和cookie数据会被删除
   Local storage有过期数据，如需删除只能手工删除

8. HTML5 中如何嵌入音频？
   HTML5 支持 MP3、Wav 和 Ogg 格式的音频，下面是在网页中嵌入音频的简单示例：
   

   您的浏览器不支持音频播放

9. HTML5 中如何嵌入视频？
   HTML5 支持 MP4、WebM 和 Ogg 格式的视频，下面是简单示例：
   

您的浏览器不支持视频播放

10. html5视频专用的css属性有哪些
    object-fit
    fill: “填充” 默认值 将视频拉伸操作填满空间
    contain: "包含"保持原有尺寸比例，容器空白
    cover: "覆盖"保持原有尺寸比例,宽度或者高度
    至少一个可以与父元素一致[裁切]

11. Html5 视频常用的方法和事件有哪些

-controls -是否显示播放控件
-autoplay -是否自动播放
-loop -是否循环播放
-muted -是否是静音播放
-poster -在播放视频之前广告
-preload -预加载策略
auto:预加载一定时长视频与元数据
metadata:预加载元数据
none:不预加载数据
-volume:1 当前音量 (0~1)
-playbackRate 回放速率 大于1快放 小于1慢播
-paused:true 当前视频是否处理暂停状态
-play() 播放视频
-pause() 暂停播放视频
-onplay 当前视频开始播放时触发事件
-onpause 当前视频暂停播放时触发事件

12. 如何解决html5视频移动播放时同层播放问题

13. Canvas 绘图技术常用路径方法与属性有哪些
    ctx.beginPath():
    ctx.closePath();
    ctx.moveTo(x,y);
    ctx.lineTo(x,y);
    ctx.stroke();
    ctx.fill();
    ctx.arc(cx,cy,r,start,end);

14. Canvas 绘图技术常用图像方法与属性有哪些
    var p3 = new Image();
    p3.src = “x.png”
    p3.onload = function(){…}
    ctx.drawImage(p3,x,y);

15. Canvas 绘图技术常用变形方法与属性有哪些
    –rotate(deg)
    -translate(x,y)
    -save()
    -restore();

16. Svg 绘图技术例举三个常用标签
    
    
    <rect x="" y="" width="" height="" fill="" fill-opacity=""
    

17. Canvas 绘图技术如何绘制贝赛尔曲线
    moveTo(x,y); 起点坐标
    quadraticCurveTo(cp1x,cp1y,x,y); 控制点和终点坐

18. Canvas 绘图技术如何使用平滑动画处理
    window.requestAnimationFrame()

19. Html5拖放api提供哪些事件

-拖动源对象
dragstart 拖动开始
drag 拖动中
dragend 拖动结束

-拖动目标对象(不会动)
dragenter 拖动进入
dragover 拖动悬停
dragleave 拖动离开
drop 释放

20. Html5 地于定位对象与方法有哪些

navigator.geolocation.getCurrentPosition
navigator.geolocation.watchPosition()
navigator.geolocation.clearWatch();

21. 说说HTML5，CSS3的新特性，使用过哪些？
    答案：
    H5新特性：
    结构标记（header，footer，section，article，aside，nav），新表单元素（url，email，number，date，month，color等），canvas，audio，video，地理定位，拖放，web存储，Web Workers，WebSocket等。
    CSS3新特性：
    复杂选择器器（属性选择器，伪类选择器，伪元素选择器，兄弟选择器等），边框倒角，边框阴影，渐变，转换，过渡，动画，弹性盒子，媒体查询技术等。

二、vue组件库部分

1. vuex作用？哪种功能场景使用它
   答案：
   vue框架中状态管理。
   场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

2. 解释vuex最常用的二种属性
   答案：
   分别是 State、 Getter
   vuex的State特性
   A、Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的data
   B、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新
   C、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中
   vuex的Getter特性
   A、getters 可以对State进行计算操作，它就是Store的计算属性
   B、 虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用
   C、 如果一个状态只在一个组件内使用，是可以不用getters

3. 请列举出3个Vue中常用的生命周期钩子函数
   答案：
   created: 实例已经创建完成之后调用,在这一步,实例已经完成数据观测, 属性和方法的运算, watch/event事件回调. 然而, 挂载阶段还没有开始, $el属性目前还不可见mounted:el被新创建的vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
   activated: keep-alive组件激活时调用

4. mint-ui是什么？怎么使用？至少说出三个组件
   答案：
   基于 vue 的前端组件库。npm 安装，然后 import 样式和js，
   Vue.use(mintUI)全局引入。
   -在单个组件内部引入：import { Toast } from ‘mint-ui’

• 组件1：Toast(‘登录成功’)；
  组件2：mint-header
  组件3：mint-swiper

5. vue-loader是什么？使用它的用途有哪些
   答案：
   解析.vue文件的一个加载器，跟template/js/style转换成js模块。
   用途：js可以写es6、style样式可以scss或less、template可以加jade等

6. axios的特点有哪些
   答案：
   Axios 是一个基于 promise 的 HTTP 库，支持promise所有的API
   它可以拦截请求和响应
   它可以转换请求数据和响应数据，并对响应回来的内容自动转换成 JSON类型的数据
   安全性更高，客户端支持防御 XSRF

7. axios有哪些常用方法
   答案：
   axios.get(url[, config]) //get请求用于列表和信息查询
   axios.delete(url[, config]) //删除
   axios.post(url[, data[, config]]) //post请求用于信息的添加
   axios.put(url[, data[, config]]) //更新操作

8. Vuex的理解
   答案：Vuex是一个专为Vue开发的应用程序的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
   核心概念：
   Store：要使用Vuex，我们要创建一个实例 store ，我们称之为仓库，利用这个仓库 store 来对我们的状态进行管理
   State
   Vuex 使用单一状态树，用一个对象State包含了整个应用层级的所有状态，你可以理解为这些状态就是一堆全局变量和数据
   Getter
   还记得Vue中的计算属性computed 吗？当我们需要在data的基础上再派生一些状态的时候，就会使用computed 来实现。同样，当我们需要从 state 中派生出一些状态的时候，就会使用到getters，你可以将 getters 理解state的计算属性。
   Mutation
   Vuex相比传统的全局变量有两个优势，其中一个是Vuex中的状态不能随意修改，要修改必要按照Vuex提供的方式才能修改
   Action
   Action 类似于 mutation，不同在于：
   Action 提交的是 mutation，而不是直接变更状态。
   Action 可以包含任意异步操作，通过 store.dispatch 方法触发

9. Vue和angular的区别
   答案：
   Vue：上手容易 指令以 v-xxx html+json,然后再new Vue()实例化对象 个人维护项目
   适合移动端
   Angular：上手难 指令以 ng-xxx 列表内容 所有属性和方法都挂载到$scope上
   由google维护 适合web端

10. vue 两种模式
    答案：
    vue-router里面除了要配置路由词典外 还要选择 模式 有 hash模式和history模式

11. vue的声明周期
    答案：
    总共8个阶段：
    创建前/后: 创建模型数据和响应系统
    beforeCreated 挂在元素$el：undefined数据data：undefinedCreated挂在元素$el：undefined 数据data：{…}
    载入前/后: 挂载 创建虚拟DOM 并生成真实DOM
    认为Vue实例/组件首次加载完成
    可以发送ajax请求
    也可以操作DOM元素
    beforeMount:挂载元素$elundefined数据data.....Mounted:挂载元素$el DOM 数据data{…}
    更新前/后: 模型数据发生变化时触发
    BeforeUpdate：
    Updated：
    销毁前/后: destroy()方法被调用时，要销毁组件/实例时
    beforeDestroy
    Destroyed
    v-show和v-if指令的共同点和不同点?
    v-show指令是通过修改元素的displayCSS属性让其显示或者隐藏
    v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果

三、微信小程序

1. 微信小程序组件的生命周期
   答案：
   生命周期函数-onLoad: 页面加载
   一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数。
   -onShow: 页面显示
   每次打开页面都会调用一次。
   -onReady: 页面初次渲染完成
   一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
   -onHide: 页面隐藏
   当navigateTo或底部tab切换时调用。
   -onUnload: 页面卸载

2. 简单描述下微信小程序的相关文件类型
   答案：
   微信小程序项目结构主要有四个文件类型,如下
   .json 后缀的 JSON 配置文件
   .wxml 后缀的 WXML 模板文件
   .wxss 后缀的 WXSS 样式文件
   .js 后缀的 JS 脚本逻辑文件

3. app.json 是对当前小程序的全局配置，讲述三个配置各个项的含义
   答案：
   pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
   window字段 —— 小程序所有页面的顶部背景颜色，文字颜色定义在这里的
   tab字段—小程序全局顶部或底部tab

4. 小程序的wxss和css有哪些不一样的地方
   答案：
   新像素单位 rpx
   样式可直接使用import导入

5. 小程序有哪些参数传值的方法
   答案：
   给HTML元素添加data-*属性来传递我们需要的值，然后通过e.currentTarget.dataset或onload的param参数获取。但data-名称不能有大写字母和不可以存放对象；
   设置id 的方法标识来传值通过e.currentTarget.id获取设置的id的值,然后通过设置全局对象的方式来传递数值；
   在navigator中添加参数传值。

6. 如何提高微信小程序的应用速度？
   答案：
   一、提高页面加载速度
   二、用户行为预测
   三、减少默认data的大小
   四、组件化方案

7. 微信小程序与H5的区别？
   答案：
   第一条是运行环境的不同
   传统的HTML5的运行环境是浏览器，包括webview，而微信小程序的运行环境并非完整的浏览器，是微信开发团队基于浏览器内核完全重构的一个内置解析器，针对小程序专门做了优化，配合自己定义的开发语言标准，提升了小程序的性能。
   第二条是开发成本的不同
   只在微信中运行，所以不用再去顾虑浏览器兼容性，不用担心生产环境中出现不可预料的奇妙BUG
   第三条是获取系统级权限的不同
   接系统级权限都可以和微信小程序无缝衔

8. 小程序获取场景值的方法
   let options = wx.getLanchOptionsSync()

9. 小程序onPageScroll方法的使用注意什么
   由于此方法调用频繁，不需要时，可以去掉，不要保留空方法，并且使用onPageScroll时，尽量避免使用setData()，尽量减少setData()的使用频次。

10. 小程序视图渲染结束回调
    使用setData(data, callback)，在callback回调方法中添加后续操作代码

11. 小程序同步API和异步API使用时注意事项
    像wx.setStorageSync这种以Sync结尾的API为同步API，使用时使用try-catch来查看异常，如果判定API为异步，可以在其回调方法success、fail、complete中进行下一步操作。

12. 小程序对wx:if 和 hidden使用的理解
    wx:if 有更高的切换消耗。
    hidden 有更高的初始渲染消耗。
    因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

13. .小程序简单介绍下三种事件对象的属性列表
    基础事件（BaseEvent）
    type: 事件类型
    timeStamp：事件生成时的时间戳
    target：触发事件的组件的属性值集合
    currentTarget：当前组件的一些属性集合
    自定义事件（CustomEvent）
    detail
    触摸事件（TouchEvent）
    touches
    changedTouches

14. 小程序的双向绑定和vue的异同？
    答案：
    大体相同，但小程序直接this.data的属性是不可以同步到视图的，必须调用this.setData()方法！

15. 小程序页面间有哪些传递数据的方法？
    答案：
    使用全局变量实现数据传递
    页面跳转或重定向时，使用url带参数传递数据
    使用组件模板 template传递参数
    使用数据库传递数据

16. 小程序wxml与标准的html的异同？
    答案：
    都是用来描述页面的结构；
    都由标签、属性等构成；
    标签名字不一样，且小程序标签更少，单一标签更多；
    多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式
    WXML仅能在微信小程序开发者工具中预览，而HTML可以在浏览器内预览
    组件封装不同， WXML对组件进行了重新封装，
    小程序运行在JS Core内，没有DOM树和window对象，小程序中无法使用window对象和document对象。

17. 小程序WXSS和CSS的异同？
    答案：都是用来描述页面的样子；
    WXSS 具有 CSS 大部分的特性，也做了一些扩充和修改；
    WXSS新增了尺寸单位，WXSS 在底层支持新的尺寸单位 rpx；
    WXSS 仅支持部分 CSS 选择器；
    WXSS 提供全局样式与局部样式

18. 微信小程序事件类型有哪两种，分别有什么特点？
    答案：冒泡事件与非冒泡事件。
    默认情况下当触发了子组件的冒泡事件时会继续触发父组件的冒泡事件。而非冒泡事件则不会。

四、性能优化与web安全部分

1. 请简要介绍什么是CDN与CDN的工作流程。
   CDN的全称是Content Delivery Network，即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术

2. 请简要介绍接种服务端性能优化的方案。
   HTML静态化
   效率最高、消耗最小的就是纯静态化的html页面，所以我们尽可能使我们的网站上的页面采用静态页面来实现。
   图片服务器分离
   对于Web服务器来说，不管是Apache、IIS还是其他容器，图片是最消耗资源的，于是我们有必要将图片与页面进行分离，这是基本上大型网站都会采用的策略，他们都有独立的、甚至很多台的图片服务器。这样的架构可以降低提供页面访问请求的服务器系统压力，并且可以保证系统不会因为图片问题而崩溃。
   缓存
   根据应用自身业务结构特点设计优秀的缓存方案。
   负载均衡
   负载均衡将是大型网站解决高负荷访问和大量并发请求采用的高端解决办法，即使用多台服务器共同处理海量请求，从而降低单台服务器的压力。可以使用Nginx实现。

3. 请简要介绍请求响应时间优化的方案。
   减少DNS查找：每次主机名的解析都需要一次网络往返，从而增加了请求的延迟时间，同时还会阻塞后续的请求。
   减少HTTP重定向。HTTP冲定向需要额外的DNS查询、TCP握手等非常耗时，最佳的重定向次数为0.
   使用CDN（内容分发网络）：把数据放在离用户地理位置更近的地方，可以明显减少每次TCP连接的网络延迟，增大吞吐量。
   删除没有必要请求的资源。
   在客户端缓存资源：缓存必要的应用资源，避免每次都重复请求相同的内容，例如多图片下载可以考虑使用缓存。
   内容在传输前先压缩：传输数据之前应该先压缩应用资源，把要传输的字节减少到最小，在压缩的时候确保对每种不同的资源采用最好的压缩手段。
   消除不必要的请求开销：减少请求的HTTP首部数据（比如HTTP cookie）.
   并行处理请求和响应：请求和响应的派对都会导致延迟，可以尝试并行的处理请求和响应（利用多个HTTP1.1连接实现并行下载，在可能的情况下使用HTTP管道计数）。
   针对协议版本采取优化措施。升级到HTTP2.0。

4. 列出常见的web安全问题。
   SQL注入问题
   XSS跨站脚本攻击
   XSRF跨站请求伪造
   Session劫持