本文探讨了前端开发中的关键技术，包括HTML5的Canvas与SVG的区别，WebGL与OpenGL的关系，以及如何清除浮动和实现两侧固定中间自适应布局。此外，详细介绍了HTTP缓存机制，包括强缓存和协商缓存，并解析了跨域问题和解决方案。同时，文章还涉及Vue.js的单向数据流及其应用场景，并讨论了数据埋点、PV与UV的概念和实现。最后，提到了前端路由的两种模式——Hash模式和History模式，以及单页面应用的工作原理。
目录
1.什么是Canvas？
Canvas 是H5新出来的标签
Canvas画布，利用JavaScript在网页绘制图像
在标签中给上宽高： 不用加单位
如果在css中给宽高 会对图像造成拉伸 （默认宽高300px*150px）
通过过去绘制工具 .getContext(“2d”) 来在画布中绘制图形
2.什么是SVG？
SVG 可缩放矢量图形（Scalable Vector Graphics），基于可扩展标记语言XML 出来的时间比较老
SVG 用来定义用于网格的基于矢量的图形
二.Canvas 和 SVG 区别
1.绘制的图片格式不同
Canvas 的工具getContext 绘制出来的图形或传入的图片都依赖分辨率，能够以 .png 和 .jpg格式保存存储图像，可以说是位图
SVG 可以在H5中直接绘制，但绘制的是矢量图
由于位图依赖分辨率，矢量图不依赖分辨率，所以Canvas和SVG的图片格式的不同实际上是他们绘制出来的图片的格式不同造成的。
2.Canvas不支持事件处理器，SVG支持事件处理器
Canvas 绘制的图像 都在Canvas这个画布里面，是Canvas的一部分，不能用js获取已经绘制好的图形元素。
webGL和openGL的区别为：性bai质不同、插件支du持不同、用途不zhi同。daoWebGL 2.0基于OpenGL ES 3.0，确保了提供许多选zhuan择性shu的WebGL 1.0扩展，并引入新的API。
一、性质不同
1、webGL：webGL的为。是一种用于展示各种3D模型和场景的绘图协议，并提供了3D图形的API。
2、openGL：openGL是用于渲染2D、3D矢量图形的跨语言、跨平台的应用程序编程接口（API）。
5. 两边固定中间自适应的如何设置？ 如何使用flex设置？
rem给html 标签设置一个值, 后代的元素就可以用font-size: nrem表示
em是子元素相对于父元素的大小， 设置一个父元素的font-size: 12px; 子元素： font-size： 3em;
9. 前后端交互是如何交互的？ http是如何封装的，http的封装原理是什么？ ajax设置get和post的参数是哪个字段？
1. 创建Ajax简易步骤：
创建Ajax对象：var xhr=new XMLHttpRequest();
链接服务器：xhr.open('get','a.php',true);
发送请求或数据：xhr.send();
状态值改变时调用函数：xhr.onreadystatechange=fncallback;
2. http怎么封装?
1. 首先创建一类，引入http 模块，封装两个函数，post请求和get请求
2. 定义get和post的数据结构
get 请求： url接口，参数，成功回调，失败回调
post： url接口，参数，成功回调，失败回调
3. 写两个函数，函数里面的内容是是根据参数组装的请求头：
封装完成调用node 的http的request 方法请求，node的http已经经过封装了
11. 知道深拷贝的？怎么区分是数组和对象。基本类型中哪个是会返回Object?
12. 做过浏览器的兼容性？考虑过IE吗？你做pc端不考虑IE吗？
13. vue2怎么处理兼容IE的？ vue3呢？
15. vue的数据流是单向的还是双向的？为什么双向的？其中关键的方法是什么？object.definePropertyv
vue是单向数据流
双向数据流的利弊
首先肯定，弊肯定是大于利的，不然vue直接就支持‘双向数据流’了。
弊端是数据流动不可追踪，无法保证数据源的唯一性，一旦出现问题很难找到错误的位置。
优点是有的时候，在某些特定的场景下，会很方便。比如封装的弹窗显隐控制，表单数据等。
vue如何使用双向数据流
1、props传入引用类型
vue检测props只能检测基本类型的值，而对于复合类型（即对象），只能检测引用地址有没有变化，而属性值变化，不会被加测到。
利用这一特性，我们可以偷偷的绕过“props是只读的”这一检测，来达到“双向数据流”目的
17. http 缓存？ 介绍一下强缓存和协商缓存？知道301和302是什么？304?404，客户端异常？ 知道其他状态码？
前端缓存详解 - 简书 简书地址
前端缓存： 浏览器缓存和http缓存
http 缓存主要分为强缓存和协商缓存
前端缓存的流程：
1. 浏览器向服务器发出请求时， 先看有没有缓存，如果有缓存看看expires和cache-Control是否生效， 如果生效，读取缓存，返回缓存内容
如果没有缓存，则向服务器发起请求
如果有缓存，但是expire 和cache-lontol不生效了，则携带协商缓存 （if- Modified-Since 和if_None_Match）向服务器发起请求， 服务器根据标识查看缓存是否有更新，如果有，重新发返回资源和缓存标识，如果没有，返回304, 读取缓存。
浏览器缓存：
5.1 本地存储小容量
Cookie主要用于用户信息的存储，Cookie的内容可以自动在请求的时候被传递给服务器。
LocalStorage的数据将一直保存在浏览器内，直到用户清除浏览器缓存数据为止。
SessionStorage的其他属性同LocalStorage，只不过它的生命周期同标签页的生命周期，当标签页被关闭时，SessionStorage也会被清除。
WebSql和IndexDB主要用在前端有大容量存储需求的页面上，例如，在线编辑浏览器或者网页邮箱。
5.3 往返缓存
往返缓存又称为BFCache，是浏览器在前进后退按钮上为了提升历史页面的渲染速度的一种策略。该策略具体表现为，当用户前往新页面时，将当前页面的浏览器DOM状态保存到bfcache中；当用户点击后退按钮的时候，将页面直接从bfcache中加载，节省了网络请求的时间。
有hash模式和history模式
hash模式利用a标签锚点，可以将想要浏览的内容展示在可视区域之内。
主要用得到的API有：
window.locatin.hash
history模式：
history模式比较友好，hash在url切换时候的传参会有体积限制，histroy没有，并且history会将需要保存的路由信息放到特定的对象之中
主要用到API
window.history.pushState(state,title,url);
// state：需要保存的数据，这个数据在触发popstate事件时，可以在event.state里获取
// title：标题，基本没用，一般传 null
// url：设定新的历史记录的 url。新的 url 与当前 url 的 origin 必须是一樣的，否则会抛出错误。url可以是绝对路径，也可以是相对路径。
//如 当前url是 https://www.baidu.com/a/,执行history.pushState(null, null, './qq/')，则变成 https://www.baidu.com/a/qq/，
//执行history.pushState(null, null, '/qq/')，则变成 https://www.baidu.com/qq/说白就是无刷新，整个webapp就一个html文件，里面的各个功能页面是javascript通过hash,或者history api来进行路由，并通过ajax拉取数据来实现响应功能。因为整个webapp就一个html，所以叫单页面！通俗点来讲，在应用整个使用流程里浏览器由始至终没有刷新，所有的数据交互由ajax完成。
但是用户体验起来和app一样，有明确的页面区分，即所谓的web app。
pv代表访问量，英文全称Page View，即页面访问量，每打开一次页面PV计数+1，刷新页面也是。uv代表访问数，英语全称Unique Visitor，是指独立访客访问数，一台电脑终端为一个访客
扫一扫
1097
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
