前端面试

HTML

---------------------------------------------------------------

html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?

  * HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。
  	  绘画 canvas;
  	  用于媒介回放的 video 和 audio 元素;
  	  本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;
        sessionStorage 的数据在浏览器关闭后自动删除;
  	  语意化更好的内容元素,比如 article、footer、header、nav、section;
  	  表单控件,calendar、date、time、email、url、search;
  	  新的技术webworker, websocket, Geolocation;

    移除的元素:
  	  纯表现的元素:basefont,big,center,font, s,strike,tt,u;
  	  对可用性产生负面影响的元素:frame,frameset,noframes;

  * 支持HTML5新标签:
  	 IE8/IE7/IE6支持通过document.createElement方法产生的标签,
    	 可以利用这一特性让这些浏览器支持HTML5新标签,
    	 浏览器支持新标签后,还需要添加标签默认的样式。

       当然也可以直接使用成熟的框架、比如html5shim;
  	 <!--[if lt IE 9]>
  		<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
  	 <![endif]-->

  * 如何区分HTML5: DOCTYPE声明新增的结构元素功能元素

简述一下你对HTML语义化的理解?

  用正确的标签做正确的事情。
  html语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析;
  即使在没有样式CSS情况下也以一种文档格式显示,并且是容易阅读的;
  搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重,利于SEO;
  使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。


HTML5的离线储存怎么使用,工作原理能不能解释一下?

  在用户没有与因特网连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件。
  原理:HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术),通过这个文件上的解析清单离线存储资源,这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示。


  如何使用:
  1、页面头部像下面一样加入一个manifest的属性;
  2、在cache.manifest文件的编写离线存储的资源;
  	CACHE MANIFEST
  	#v0.11
  	CACHE:
  	js/app.js
  	css/style.css
  	NETWORK:
  	resourse/logo.png
  	FALLBACK:
  	/ /offline.html
  3、在离线状态时,操作window.applicationCache进行需求实现。

 请描述一下 cookies,sessionStorage 和 localStorage 的区别?

  cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)。
  cookie数据始终在同源的http请求中携带(即使不需要),记会在浏览器和服务器间来回传递。
  sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。

  存储大小:
  	cookie数据大小不能超过4k。
  	sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。

  有期时间:
  	localStorage    存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;
  	sessionStorage  数据在当前浏览器窗口关闭后自动删除。
  	cookie          设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭

如何实现浏览器内多个标签页之间的通信? (阿里)

  WebSocket、SharedWorker;
  也可以调用localstorge、cookies等本地存储方式;

  localstorge另一个浏览上下文里被添加、修改或删除时,它都会触发一个事件,
  我们通过监听事件,控制它的值来进行页面信息通信;
  注意quirks:Safari 在无痕模式下设置localstorge值时会抛出 QuotaExceededError 的异常;

webSocket如何兼容低浏览器?(阿里)

  Adobe Flash Socket 、
  ActiveX HTMLFile (IE) 、
  基于 multipart 编码发送 XHR 、
  基于长轮询的 XHR

牛B的和可以分享的地方:

实现了一个 touchendV1, 灵感主要来自 zepto 的 tab事件, 由于tab 事件是绑定在document上,所以会有兼容性的问题

zepto 里面对于animate 实现了一个 stop的功能, 设置当前这个元素的 transform 的属性, 支持2D;

时间和年化收益率 曲线用createjs实现, 不会奔溃,团队其它人找了网上好多库的代码, 比如 echarts,在微信和app上造成了奔溃

声音模块, 先让它play再pause, 可以实现iPhone 上播放声音的功能; iPhone 上要先 play后pause 才可以实现结果音乐的播放;  不过现在流行用 WebAudio;

修改了 layabox 的源码,让它支持可以不用全屏展示,可以滚动展示; 增加方法让以前的游戏 支持iPhoneX  的适配的功能;

之前做弹珠机游戏的时候, 性能会一直上去, 通过chrome  的性能分析工具,找出哪个函数占用的内存比较高。

页面 rem 不能自适应的问题

组件:

每秒点击几次的 limitPerTime 组件

bindInput 组件 和 dragTo 组件 和 texttip 组件

Lightbox 兼容手机端和PC端;

如何做游戏的性能优化:

参考地址:

https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions/Questions-and-Answers

原文地址:https://www.cnblogs.com/zhengming2016/p/8733839.html