zoukankan      html  css  js  c++  java
  • 前端面试

    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

  • 相关阅读:
    Redis 多项目序列化问题
    Java序列化的相关认知
    《Proxy系列专题》:代理模式(静态、JDK、CGLib)
    好文章地址
    @ServletComponentScan
    Spring 自动配置的原理
    B+Tree
    Sentinel
    ThreadPoolUtil
    UUID
  • 原文地址:https://www.cnblogs.com/zhengming2016/p/8733839.html
Copyright © 2011-2022 走看看