【前端面试】一、HTTP和浏览器 16-20

【前端面试】一、HTTP和浏览器  16-20

目录

【前端面试】一、HTTP和浏览器  16-20

16. iframe是什么？有什么缺点？

17. webworker

18. HTML5新增的元素

19. HTML5 drag api

20. Session、Cookie、sessionStorage、localStorage

---

16. iframe是什么？有什么缺点？

定义：iframe元素会创建包含另一个文档的内联框架

提示：可以将提示文字放在之间，来提示某些不支持iframe的浏览器

缺点：会阻塞主页面的onload事件；搜索引擎无法解读这种页面，不利于SEO；iframe和主页面共享连接池，而浏览器对相同区域有限制，所以会影响性能。

17. webworker

HTML页面中，如果在执行脚本时，页面的状态是不可响应的，直到脚本执行完成后，页面才变成可响应。webworker是运行在后台的js，独立于其他脚本，通过postMessage将结果回传到主线程，不会影响页面性能，不会阻塞主线程。

创建webworker：检测浏览器对于webworker的支持性；创建webworker文件（js，回传函数等）；创建webworker对象

18. HTML5新增的元素

• HTML5语义化标签：正确的标签包含正确的内容，结构良好，便于阅读，nav导航条、article、header、footer、aside、section、main、figure等标签

• 内容元素：mark高亮、progress进度

• 新的表单控件：calander、date、time、email、url、search

• 新的input类型：color、email、data、datetime、range

• web存储，提供了sessionStorage，localStorage和本地离线存储（把需要离线存储在本地的文件列在一个manifest配置文件），方便数据在客户端存储和获取

• 多媒体方面，规定了音频和视频元素audio和vedio、source、embed、track

• 地理定位，canvas绘图（支持内联SVG、支持MathML），拖放，多线程编程的webworker和websocket协议

19. HTML5 drag api

事件主体是被拖放元素：

• dragstart：在开始拖放被拖放元素时触发

• darg：在正在拖放被拖放元素时触发

• dragend：在整个拖放操作结束时触发

事件主体是目标元素：

• dragenter：在被拖放元素进入某元素时触发。

• dragover：在被拖放在某元素内移动时触发。

• dragleave：在被拖放元素移出目标元素是触发。

• drop：在目标元素完全接受被拖放元素时触发。

JS拖拽功能

mouseup：当鼠标点击按下，需要一个tag标识此时已按下，获取元素初始坐标offsetX、offsetY

mousemove：clientX，clientY分别标识鼠标横纵坐标

mousedown：移动距离=鼠标移动的坐标-鼠标按下去时的坐标。定位信息=鼠标移动时的坐标-鼠标按下去时的坐标+元素初始offetLeft

20. Session、Cookie、sessionStorage、localStorage

Cookie和session都可用来存储用户信息

• Cookie：存放于客户端，不安全，存放不敏感信息（窃取风险）。可以通过客户端js设置、服务器端响应的时候设置，单个cookie保存数据不超过4K，很多浏览器都限制一个站点最多保存20个cookie。Cookie路径（path）可以限制cookie只属于某个路径下。

• session：存放于服务器端（文件、数据库、内存），存放敏感信息（用户登录），占用服务器性能。

生命周期：

• Cookie：所有同源窗口中共享，在设置的过期时间前有效，即使窗口或浏览器关闭（否则默认为关闭浏览器后失效）

• Localstorage：所有同源窗口共享，持久数据（窗口或浏览器关闭也一直永久保存，除非被手动清除）

• Sessionstorage：不在不同的浏览器窗口中共享，仅在当前浏览器窗口关闭前有效（关闭页面或浏览器后就会被清除）

存放数据：

• Cookie：4k左右，encodeURI（）编码方式

• 其他两个：可以保存约5M的信息

http请求：

• Cookie：携带在http头中，在浏览器和服务器间来回传递（保存过多数据浪费带宽）

• 其他两个：仅在客户端即浏览器中保存，不参与服务器通信

易用性：

• Cookie：需封装，原生的cookie接口不友好；

• 其他两个：即可采用原生接口，亦可再次封装

应用场景：

• Cookie：保存用户登录状态（用户id）、设置过期时间、跟踪用户行为、记录用户选项（网站主题）

• 其他两个：页面间传递参数，保存临时数据，防止用户刷新页面后丢失了一些参数。