题目来自于牛客网题库-前端校招面试题目合集。
该题库共501题
学习目标:题库501道题目学习一遍。

学习目标:

  • 学习进度:20/501

学习内容:

  1. 描述以下cookies,sessionStorage和localStorage的区别。
    cookies:在浏览器端存储数据,内存比较小,并且有条件限制,会被发往服务器端。会被发送到服务器端。有个数限制
    sessionStorage:只在session中有效,内存比较大,存储在本地不会发送到服务端,当本浏览器窗口被关闭,就会被删除。
    localStorage:永久存储,总体数量无限制。浏览器窗口关闭不会删除。
  2. 谈谈HTML语义化的理解。
    HTML语义化便于开发者阅读和写出更优雅的代码,同时让浏览器的爬虫和机器很好的解析。可以在没用css的情况下,使页面也能呈现很好的内容结构和代码结构。有利于SEO,和搜索引擎建立良好沟通,有助于爬虫爬取更多信息。便于团队开发和维护,语义化更有可读性。
  3. 谈谈link和@import的区别。
    两者都是外部引用css的方法,存在的区别是:
    Link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务,而@import属于CSS范畴,只能加载CSS文件。

    link引用CSS时,在页面载入时同时加载,@import需要页面内容完全载入后再加载。

    link无兼容问题,@import在css2.1提出,低版本浏览器不支持。

    link支持JS控制的DOM去改变样式,@import不支持。
  4. 谈谈SVG的理解。
    SVG可缩放矢量图形( Scalable Vector Graphics )是基于可扩展标记语言( XML ),用于描述二维矢量图形的一种图形格式。
    特点:
    (1)任意放缩。
    (2)文本独立。
    (3)较小文件,下载速度快。
    (4)超强显示效果,缩放不失真。
    (5)超级颜色控制,提供1600万调色板。
  5. HTML全局属性有哪些?
    accesskey 规定激活元素的快捷键。
    class 规定元素的一个或多个类名(引用样式表中的类)。
    contenteditable 规定元素内容是否可编辑。
    contextmenu 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。
    data-* 用于存储页面或应用程序的私有定制数据。
    dir 规定元素中内容的文本方向。
    draggable 规定元素是否可拖动。
    dropzone 规定在拖动被拖动数据时是否进行复制、移动或链接。
    hidden 规定元素仍未或不再相关。样式上导致元素不显示。
    id 规定元素的唯一 id。
    lang 规定元素内容的语言。
    spellcheck 规定是否对元素进行拼写和语法检查。
    style 规定元素的行内 CSS 样式。
    tabindex 规定元素的 tab 键次序。
    title 规定有关元素的额外信息。
    translate 规定是否应该翻译元素内容。
  6. 谈谈超链接target属性的取值和作用。
    target这个属性指定所链接的页面在浏览器窗口中的打开方式。
    它的参数值主要有:
    a、 _blank :在新浏览器窗口中打开链接文件
    b、 _parent :将链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的,则在浏览器全屏窗口中载入链接的文件,就象 _self 参数一。
    c、 _self :在同一框架或窗口中打开所链接的文档。此参数为默认值,通常不用指定。但是我不太理解。
    d、 _top :在当前的整个浏览器窗口中打开所链接的文档,因而会删除所有框架。
  7. ·data-·属性的作用是什么?
    data- 属性是 HTML5 中的新属性,用于存储页面或应用程序的私有自定义数据。data-赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。
    data-* 属性包括两部分:
    1.属性名不应该包含任何大写字母,并且在前缀 “data-” 之后必须有至少一个字符
    2.属性值可以是任意字符串
  8. 谈谈你对浏览器内核的理解。
    主要分成两部分:渲染引擎(layout engineer或 Rendering Engine) 和 JS 引擎。
    渲染引擎:负责取得网页的内容(HTML、 XML 、图像等等)、整理讯息(例如加入 CSS 等),以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。
    JS引擎:解析和执行 javascript 来实现网页的动态效果。最开始渲染引擎和JS引擎并没有区分的很明确,后来 JS 引擎越来越独立,内核就倾向于只指渲染引擎。
  9. 常见的浏览器内核有哪些?
    a、 IE: trident 内核
    b、 Firefox :gecko 内核
    c、 Safari:webkit 内核
    d、 Opera: 以前是 presto 内核, Opera 现已改用 Google Chrome 的 Blink 内核
    e、 Chrome:Blink( 基于 webkit , Google 与 Opera Software 共同开发 )
  10. 谈谈iframe的缺点
    1.会产生很多页面,不容易管理。
    2.iframe框架结构有时会让人感到迷惑,如果框架个数多的话,可能会出现上下、左右滚动条,会分散访问者的注意力,用户体验度差。
    3.代码复杂,无法被一些搜索引擎索引到,这一点很关键,现在的搜索引擎爬虫还不能很好的处理iframe中的内容,所以使用iframe会不利于搜索引擎优化。
    4.很多的移动设备(PDA 手机)无法完全显示框架,设备兼容性差。
    5.iframe框架页面会增加服务器的http请求,对于大型网站是不可取的。



学习时间:

2021/1/9 18:45-19:20
花费时间:35min

寄语

想做知识的相机、将它保留在心中的相册。
又是努力学习的一天,加油!