前端面试-牛客网前端501题

一、浏览器

1.浏览器页面有哪三层构成，分别是什么，作用是什么?

• 结构层：HTML
• 表示层：CSS，页面的表现风格
• 行为层：JS，客户端功能、业务

2.内核&主流浏览器内核？

浏览器模块
引擎解析

内核 Rendering engine：解析DOM文档和CSS规则并将内容排版到浏览器中显示有样式的界面
a、 IE: trident 内核
b、 Firefox ： gecko 内核
c、 Safari: webkit 内核
d、 Opera: 以前是 presto 内核， Opera 现已改用 Google Chrome 的 Blink 内核
e、 Chrome:Blink( 基于 webkit ， Google 与 Opera Software 共同开发 )

二、web

1.web标准&w3c

web标准

本质就是一些语法规范
关注web和用户交互的的接口、技术标准。集成到客户端环境中。

三、HTML5

1.HTML5是什么

是HTML的新一代标准。
HTML4太依赖插件=>为了减少依赖，用户体验更好，开发方便
然后可以讲一下优缺点

2.HTML5的优缺点

HTML5基本简介

3.HTML5增加的元素

简记：结构：头部 导航；级块：code；行内语义：音频；交互：菜单

4.HTML5元素

完整版

5.cookie & Storage

都是在浏览器端存储的数据。

• cookie：随时发请求到服务器。小&开销&各数限制
• localStorage SessionStorage是HTML5提供的API，不用在C & S之间来回穿数据
  （1）localStorage 永久存储。存储量5MB。
  （2）SessionStorage 浏览器窗口的概念。⚠️窗口！！

四、HTML文件&标签用法等

1.Doctype作用；严格模式与混杂模式怎么区分&意义

（1）声明位于文档中的最前面的位置，处于标签之前。此标签告诉浏览器按照何种规范解析页面。
（2）严格模式：排版、JS以浏览器支持的最高标准允许；混杂模式：模拟老式浏览器行为=>doctype不存在/格式不正确
即：有就用最高标准/ w3c标准解析；没有就以浏览器各自不同的模式解析

2.语义化的理解

根据内容的意思，选择合适的标签

• 对开发者：直接看的时候很方便。
• 对于爬虫：依赖标签确定信息
• 对于其他设备解析：（盲人阅读器等）用意义对方式渲染

3. link @import区别

都是外部引用css文件。

• 本质：link是个标签（其他属性 rel等）；@import只是一种方式
• 加载顺序：link和网页同时；@等到页面全部下载才加载（一开始可能没样式）
• 兼容性：@在很老的浏览器不兼容
• dom：link的样式：可以用js改变（element.style等），@

4.HTML 全局属性

16个全局属性
class、id、style、title、lang

5. 其中value取值

a、 _blank ：在【新窗口】中打开链接文件
b、 _parent ：将链接的文件载入含有该链接【框架】的父框架集或父窗口中。如果含有该链接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件，就象 _self 参数一。
c、 _self ：在【同一框架或窗口】中打开所链接的文档。此参数为默认值，通常不用指定。但是我不太理解。
d、 _top ：在【当前整个窗口】中打开所链接的文档，因而会删除所有框架。

6.data-属性

data-为H5新增的为前端开发者提供自定义的属性，这些属性集可以通过对象的 dataset 属性获取，不支持该属性的浏览器可以通过 getAttribute 方法获取 :
data-实例

五、WEBGL

1.什么是WEBGL&优点

3D绘图标准：OPENGL（提供接口、使用底层图形硬件渲染）+JS（脚本实现）
为canvas提供3D加速渲染。=>可以在浏览器里展示3D场景
提供一些开源库，比如three.js

六、SVG

1.SVG的理解