没有合适的资源？快使用搜索试试~ 我知道了~

文库首页安全技术网络安全高级前端工程师面试题整理1

高级前端工程师面试题整理1

需积分: 0 12 下载量 183 浏览量 2022-08-08 21:22:13 上传评论 3 收藏 39KB DOCX 举报

温馨提示

试读

21页

4. 实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果 2. CSS3有哪些新特性 5. canvas 如何绘制

资源推荐

资源详情

资源评论

高级前端工程师面试题

一、HTML

1. html5 有哪些新特性、移除了那些元素？如何处理 HTML5 新标签的浏览器

兼容问题？如何区分 HTML 和 HTML5？

(Q1) HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任

务等功能的增加。

(1)绘画 canvas;

(2)用于媒介回放的 video 和 audio 元素;

(3)本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;

(4)sessionStorage 的数据在浏览器关闭后自动删除;

(5)语意化更好的内容元素，比如 article、footer、header、nav、section; (6)表单

控件，calendar、date、time、email、url、search;

(7)新的技术 webworker, websocket, Geolocation;

(Q2) IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签，可以利用

这一特性让这些浏览器支持 HTML5 新标签，浏览器支持新标签后，还需要添加

标签默认的样式。也可以直接使用成熟的框架、比如 html5shim，

2.请描述一下 cookies，sessionStorage 和 localStorage 的区别？

cookie 是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据

（通常经过加密）。

cookie 数据始终在同源的 http 请求中携带（即使不需要），记会在浏览器和服务

器间来回传递。

sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存。

存储大小：

cookie 数据大小不能超过 4k。

sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得

多，可以达到 5M 或更大。

有期时间：

localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；

sessionStorage 数据在当前浏览器窗口关闭后自动删除。

cookie 设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭

3.HTML5 为什么只需要写 <!DOCTYPE HTML>？

HTML5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范

浏览器的行为（让浏览器按照它们应该的方式来运行）；

而 HTML4.01 基于 SGML,所以需要对 DTD 进行引用，才能告知浏览器文档所使用

的文档类型。

4. 实现不使用 border 画出 1px 高的线，在不同浏览器的标准模式与怪异模式

下都能保持一致的效果。

5. 网页验证码是干嘛的，是为了解决什么安全问题。

区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论

坛灌水；

有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆

尝试。

二、CSS

1.CSS3 新增伪类举例：

　　p:first-of-type 选择属于其父元素的首个元素的每个元素。

　　p:last-of-type 选择属于其父元素的最后元素的每个元素。

　　p:only-of-type 选择属于其父元素唯一的元素的每个元素。

　　p:only-child 选择属于其父元素的唯一子元素的每个元素。

　　p:nth-child(2) 选择属于其父元素的第二个子元素的每个元素。

　　:enabled :disabled 控制表单控件的禁用态。

　　:checked 单选框或复选框被选中。

2. CSS3 有哪些新特性？

新增各种 CSS 选择器（: not(.input)：所有 class 不是“input”的节点）

圆角（border-radius:8px）

多列布局（multi-column layout）

阴影和反射（Shadow\Reflect）

文字特效（text-shadow、）

文字渲染（Text-decoration）

线性渐变（gradient）

旋转（transform）

缩放,定位,倾斜,动画,多背景

例如:transform:\scale(0.85,0.90)\ translate(0px,-30px)\

skew(-9deg,0deg)\Animation:

3. 用纯 CSS 创建一个三角形的原理是什么？

把上、左、右三条边隐藏掉（颜色设为 transparent）

#demo {

width: 0;

height: 0;

border-width: 20px;

border-style: solid;

border-color: transparent transparent red transparent;

}

4. canvas 在标签上设置宽高和在 style 中设置宽高有什么区别？

canvas 标签的 width 和 height 是画布实际宽度和高度，绘制的图形都是在这

个上面。而 style 的 width 和 height 是 canvas 在浏览器中被渲染的高度和宽

度。如果 canvas 的 width 和 height 没指定或值不正确，就被设置成默认值。

5. canvas 如何绘制一个三角形|正方形

moveto 是移动到某个坐标， lineto 是从当前坐标连线到某个坐标。这两个函数加起来就

是画一条直线。画线要用“笔”，那么 MoveTo()把笔要画的起始位置固定了（x,y）然后要

固定终止位置要用到 LineTo 函数确定终止位置（xend,yend）,这样一条线就画出来了。每

次与前面一个坐标相连。

stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑

色。

<!DOCTYPE

HTML5> <html>

<head>

/> <title>画布</title>

</head>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid

#c3c3c3;"> Your browser does not support the canvas element.

</canvas>

var

c=document.getElementById("myCanvas"); //三角形

var

cxt=c.getContext("2d")

; cxt.moveTo(10,10);

cxt.lineTo(50,50);

cxt.lineTo(10,50);

cxt.lineTo(10,10);

cxt.stroke();

//正方形

var

cxt2=c.getContext("2d");

cxt2.moveTo(60,10);

cxt2.lineTo(100,10);

cxt2.lineTo(100,50);

cxt2.lineTo(60,50);

cxt2.lineTo(60,10);

cxt2.stroke();

</script>

</body>

</html>

6. 什么是 CSS 预处理器 / 后处理器？

预处理器例如：LESS、Sass、Stylus，用来预编译 Sass 或 less，增强了 css 代码的

复用性，还有层级、mixin、变量、循环、函数等，具有很方便的 UI 组件模块化

开发能力，极大的提高工作效率。

后处理器例如：PostCSS，通常被视为在完成的样式表中根据 CSS 规范处理 CSS，

让其更有效；目前最常做的是给 CSS 属性添加浏览器私有前缀，实现跨浏览器兼

容性的问题。

7. sass 和 less 有什么区别?

a.编译环境不一样

Sass 的安装需要 Ruby 环境，是在服务端处理的，而 Less 是需要引入 less.js

来处理 Less 代码输出 css 到浏览器，也可以在开发环节使用 Less，然后编译成

css 文件，直接放到项目中。

b.变量符不一相，less 是@，而 scss 是$,而且它们的作用域也不一样，less 是块

级作用域

c. 输出设置， Less 没有输出设置， sass 提供 4 种输出选项，

nested,compact,compressed 和 expanded

nested：嵌套缩进的 css 代码(默认)

expanded：展开的多行 css 代码

compact：简洁格式的 css 代码

compressed：压缩后的 css 代码

8.什么是面向对象的 CSS(OOCSS)？

面向对象的 CSS 是一种容易重用的一种 CSS 规则，也是 OOP 的概念，从而降低

了页面的加载时间，提高了网面的性能。这里关键的一点就是如何在页面中识别，

创建和模块化可重用的对象，并在页面中任何需要的地方重用，并扩展其附加功

能。

三、Javascript

1．JavaScript 原型，原型链 ? 有什么特点？

每个对象都会在其内部初始化一个属性，就是 prototype(原型)，当我们访问一个

对象的属性时，

剩余20页未读，继续阅读

评论收藏

内容反馈

资源评论

资源反馈

评论星级较低，若资源使用遇到问题可联系上传者，3个工作日内问题未解决可申请退款~

赵小杏儿

粉丝: 19
资源: 314

上传资源快速赚钱

我的内容管理展开

我的资源快来上传第一个资源

我的收益

登录查看自己的收益

我的积分登录查看自己的积分

我的C币登录后查看C币余额

我的收藏

我的下载

下载帮助

前往需求广场，查看用户热搜

高级前端工程师面试题整理1

前端面试题汇总

前端工程师面试题库

前端工程师面试题

前端工程师面试题题及答案全面综合.pdf

2019自己整理的前端工程师面试题题及答案(全面综合).doc

Web前端开发经典面试题（附参考答案）

阿里2016前端开发工程师面试及答案1

WEB前端开发工程师面试题

初中级前端工程师面试题整理.docx

前端工程师面试题手册(2).pdf

2021阿里前端工程师面试题手册.rar

前端工程师面试题手册.pdf

2023前端工程师面试题手册

前端面试题整理前端面试题整理

前端工程师面试题手册(1).pdf

前端工程师笔试面试题

2017前端面试题整理汇总

2021前端工程师面试题手册.pdf

前端高级面试题整理及答案.md

前端面试题整理

最新版ISO/IEC 27001:2022、ISO 27002:2022中英文合集

Goby红队版-win-x64-2.4.7版本

Chrome Header Editor 插件

ISO SAE 21434-2021 中文版.pdf

安全认证cisp教材全套

OpenVAS GVM 中文翻译补丁

2024最新：Hvv中常见的面试问题

现代永磁同步电机控制原理及MATLAB仿真__袁雷编著1

最新资源