JasonLonger
JasonLonger

2020前端面经知识点汇总

灵魂拷问：说说你对前端的理解：

大多数人对前端的认识可能是写点简单的 HTML，CSS 样式，制作点网页界面，其实不然。

2005 年之前，前端开发这个词还是很少见的，尤其在国内。但近几年的前端可谓是飞速发展，在没有前端岗位之前，一个项目中负责后台功能逻辑处理的代码和前端页面展示代码混在一起，不免会给开发和维护带来各种问题，渐渐的许多大中小公司开始把前后端的界限分的越来越明确，前端工程师只管前端的事情，后端工程师只管后端的事情。

前端工程师的主要工作就是通过代码方式，增强系统的交互功能 ，同时结合后台开发技术，进行互联网的 Web 和 App 开发，致力于通过技术改善用户体验 。现在前端工程师的工作不仅仅只是网页制作，还有微网站、APP制作、游戏制作等，前端的技术也慢慢的从原来的 HTML+CSS+JavaScript 愈来愈丰富，如 jquery、Vue、React 等。同时不久将来相信前端工作开发模式将实现突破，Serverless无服务端计算的出现让我看到了这些迹象，

前端开发工程师在整个项目的开发和交付中扮演相当重要的角色，前端工程师是最贴近用户的程序员，主要负责实现页面交互，优化提升用户体验，如果后端是用来解决系统能不能用的问题，那么前端就用来解决系统好不好用的问题。

————————————————

什么是web标准？

WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为 （Behavior）。

对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如 W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。




firefox没有浏览器内核


flash和js通过类ExternalInterface进行交互。

ExternalInterface有两个方法call和addCallback：

1、ExternalInterface.addCallback("在js里可调用的flash方法名",flash内方法)       //在js里调用flash里的方法

2、ExternalInterface.call("js方法",传给js的参数)                                                     //在flash里调用js里的方法

————————————————


cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限性的。



Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

参考答案

1. 声明位于文档中的最前面，处于 标签之前。告知浏览器以何种模式来渲染文档。 

2. 严格模式的排版和 JS 运作模式是  以该浏览器支持的最高标准运行。

3. 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

4. DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。 


Javascript高级程序设计

你知道多少种Doctype文档类型？

参考答案

1. 该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。Strict、Transitional 以及 Frameset。


HTML与XHTML——二者有什么区别

XHTML（可扩展超文本标记语言） = XML(可扩展标记语言) + HTML(超文本标记语言)

参考答案

最主要的不同：

XHTML 元素必须被正确地嵌套。

XHTML 元素必须被关闭。

标签名必须用小写字母。

XHTML 文档必须拥有根元素。


overflow属性定义溢出元素内容区的内容会如何处理

展开

参数是scroll时候，必会出现滚动条。

参数是auto时候，子元素内容大于父元素时出现滚动条。

参数是visible时候，溢出的内容出现在父元素之外。

参数是hidden时候，溢出隐藏。

————————————————



HTTP部分

SGML是指“标准通用标记语言”

HTML“HyperText Markup Language” （超文本标识语言）

xml（eXtensible Markup Language）, “可扩展标识语言“

HTML 是人们抽取了 SGML 的一个微小子集而提取出来的。其早期规范比较松散，但比较易学。

XML 也是 SGML 的一个子集，但使用比较严格的模式。

DTD是文档类型定义，可定义合法的XML文档构建模块，它使用一系列合法的元素来定义文档的结构。

HTML5 ≈ HTML + CSS 3 + JavaScript + API.

从输入网址到显示页面的过程分析

1）应用层DNS解析域名

2）浏览器向服务器建立TCP连接（默认端口为80）（详细可以说下三次握手）

3）客户端发送HTTP请求

4）服务器响应请求

5）服务器向浏览器返回相应文件

6）TCP连接释放

7）浏览器根据HTML文件进行解析构建DOM树，构建渲染树，JS根据DOMAPI操作执行绑定事件等，页面显示完成。


HTML全局属性(global attribute)有哪些?

MDN: html global attribute或者W3C HTML global-attributes

accesskey:设置快捷键，提供快速访问元素如aaa在windows下的firefox中按alt + shift + a可激活元素

class:为元素设置类标识，多个类名用空格分开，CSS和javascript可通过class属性获取元素

contenteditable: 指定元素内容是否可编辑

contextmenu: 自定义鼠标右键弹出菜单内容

data-*: 为元素增加自定义属性

dir: 设置元素文本方向

draggable: 设置元素是否可拖拽

dropzone: 设置元素拖放类型： copy, move, link

hidden: 表示一个元素是否与文档。样式上会导致元素不显示，但是不能用这个属性实现样式效果

id: 元素id，文档内唯一

lang: 元素内容的语言

spellcheck: 是否启动拼写和语法检查

style: 行内css样式

tabindex: 设置元素可以获得焦点，通过tab可以导航

title: 元素相关的建议信息

translate: 元素和子孙节点内容是否需要本地化

————————————————


说说超链接target属性的取值和作用？

参考答案

target这个属性指定所链接的页面在浏览器窗口中的打开方式。

它的参数值主要有：

a、 _blank ：在新浏览器窗口中打开链接文件

b、 _parent ：将链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件，就象 _self 参数一。

c、 _self ：在同一框架或窗口中打开所链接的文档。此参数为默认值，通常不用指定。但是我不太理解。

d、 _top ：在当前的整个浏览器窗口中打开所链接的文档，因而会删除所有框架。


`data-`属性的作用是什么？

参考答案

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

需要注意的是：`data-`之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。 所有主流浏览器都支持 data-* 属性。

即：当没有合适的属性和元素时，自定义的 data 属性是能够存储页面或 App 的私有的自定义数据。


Vue scoped原理：


2020前端面经知识点汇总_第1张图片

在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped，相当于实现了样式的模块化。

给一个组件中的所有dom添加了一个独一无二的动态属性data-v-xxx乱码，然后，给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom，这种做法使得样式只作用于含有该属性的dom——组件内部dom。


介绍一下你对浏览器内核的理解？

参考答案

主要分成两部分：渲染引擎(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 共同开发 )

什么是WebGL,它有什么优点?

WebGL（全写 Web Graphics Library ）是一种 3D 绘图标准，这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起，通过增加 OpenGL ES 2.0 的一个 JavaScript 绑定， WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染，这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示 3D 场景和模型了，还能创建复杂的导航和数据视觉化。显然， WebGL 技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂 3D 结构的网站页面，甚至可以用来设计 3D 网页游戏等等。

WebGL完美地解决了现有的 Web 交互式三维动画的两个问题：

第一，它通过HTML脚本本身实现 Web 交互式三维动画的制作，无需任何浏览器插件支持 ;

第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的。

通俗说WebGL中 canvas 绘图中的 3D 版本。因为原生的 WebGL 很复杂，我们经常会使用一些三方的库，如 three.js 等，这些库多数用于 HTML5 游戏开发。

前端页面有哪三层构成，分别是什么？作用是什么？

    结构层、表示层、行为层

结构层（structural layer）

由 HTML 或 XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：”这是一个文本段。”

表示层（presentation layer）

由 CSS 负责创建。 CSS对”如何显示有关内容”的问题做出了回答。

行为层（behaviorlayer）

负责回答”内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域


如何实现浏览器内多个标签页之间的通信?

参考答案

调用 localstorge、cookies 等本地存储方式


iframe的优缺点？

参考答案

优点：

1. 解决加载缓慢的第三方内容如图标和广告等的加载问题

2. Security sandbox

3. 并行加载脚本

缺点：

1. iframe会阻塞主页面的Onload事件

2. 即时内容为空，加载也需要时间

3. 没有语意


如果把 HTML5 看作做一个开放平台，那它的构建模块有哪些？