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