历年前端经典面试题.docxVIP

PAGE2 / NUMPAGES2 历年前端经典面试题(一) 一、HTML/CSS篇 1、如何使用 Canvas和HTML5中的SVG画一个矩形？ 【仅供参考】使用SVG绘制矩形的代码如下：svg xmlns=/2000/svg version=1.1rect style=fill:rgb（255,100，0）；height=200 width=400/rect/svg使用 Canvas绘制矩形的代码如下。canvas id=myCanvas width=500 height=500/canvasvar canvas=document.getElementById（mycanvas）；var ctx= canvas.getContext（2d）； ctx.rect（100,100,300,200）；ctx fillstyle = pink ctx. fill() 2、title 与 h1 的区别？ 【仅供参考】title 属性没有明确意义只表示是个标题，h1 则表示层次明确的标题，对页面信息的抓取也有很大的影响。 3、HTML5如何实现跨域？ 【仅供参考】在服务器端设置允许在其他域名下访问，例如允许所有域名访问以下内容。response.setHeader（Access-Control-Allow-Origin，*）；response.setHeader （Access-Control-Allow-Methods，POST）；response.setHeader（Access-Control-Allow-Headers，x-requested-with, content-type）； 4、Canvas和SvG的区别是什么？ 【仅供参考】两者的区别如下：（1）一旦 Canvas绘制完成将不能访问像素或操作它；任何使用SVG绘制的形状都能被记忆和操作，可以被浏览器再次显示。（2）Canvas对绘制动画和游戏非常有利；SVG对创建图形（如CAD）非常有利。（3）因为不需要记住以后事情，所以 Canvas运行更快；因为为了之后的操作，SVG需要记录坐标，所以运行比较缓慢。（4）在 Canvas中不能为绘制对象绑定相关事件；在SVG中可以为绘制对象绑定相关事件。（5）Canvas绘制出的是位图，因此与分辨率有关；SvG绘制出的是矢量图，因此与分辨率无关。 5、HTML5为浏览器提供了哪些数据存储方案？ 【仅供参考】在较高版本的浏览器中，提供了 sessionStorage：和 globalStorage。在HTML5规范中，用 localStorage取代 globalStorage 。HTML5中的 Web Storage包括两种存储方式，分别是 sessionStorage和 localStorage。sessionStorage用于在本地存储一个会话（ session）中的数据，这些数据只有同一个会话中的页面才能访问，当会话结来后，数据也随之销毀。因此 sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。localStorage和 sessionStorage都具有相同的操作方法，例如 setItem、 getItem和removeltem等 6、HTML5新增了哪些功能AP？ 【仅供参考】新增的功能API包括 Media APl、 Text Track API、 Application Cache API、User Interaction、 Data Transfer API、 Command API、 Constraint Validation API、 History API 7、标签上 title 与 alt 属性的区别是什么？ 【仅供参考】alt 是给搜索引擎识别，在图像无法显示时的替代文本；title 是关于元素的注释信息，主要是给用户解读。当鼠标放到文字或是图片上时有 title 文字显示。（因为 IE 不标准）在 IE 浏览器中 alt 起到了 title 的作用，变成文字提示。在定义 img 对象时，将 alt 和 title 属性写全，可以保证在各种浏览器中都能正常使用。 8、请描述一下 sessionStorage和 localStorage的区别。 【仅供参考】sessionStorage用于在本地存储一个会话中的数据，这些数据只有同一个会话中的页面才能访问，当会话结束后，数据也随之销毀。因此 sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而 localstor