wordpress页脚内容居中,seo整站网站推广优化排名,win7iis部署asp.net网站,开启wordpress upwn前言
本文整理了一系列前端工程师面试中常见的 HTML、CSS 和 JavaScript 问题及其答案#xff0c;涵盖基础知识、常见问题及面试技巧。适用于准备前端开发职位面试的候选人参考。 目录 前言HTML CSS1. 对 WEB 标准以及 W3C 的理解与认识2. XHTML 和 HTML 有什么区别3.…前言
本文整理了一系列前端工程师面试中常见的 HTML、CSS 和 JavaScript 问题及其答案涵盖基础知识、常见问题及面试技巧。适用于准备前端开发职位面试的候选人参考。 目录 前言HTML CSS1. 对 WEB 标准以及 W3C 的理解与认识2. XHTML 和 HTML 有什么区别3. Doctype? 严格模式与混杂模式4. 行内元素有哪些? 块级元素有哪些? CSS 的盒模型?5. CSS 引入的方式有哪些? link 和 import 的区别是?6. CSS 选择符有哪些? 哪些属性可以继承? 优先级算法如何计算? 内联和 !important 哪个优先级高?7. 前端页面有哪三层构成分别是什么? 作用是什么?8. CSS 的基本语句构成是?9. 你做的页面在哪些浏览器测试过? 这些浏览器的内核分别是什么? 经常遇到的浏览器的兼容性有哪些? 怎么会出现? 解决方法是什么?10. 写出几种 IE6 BUG 的解决方法11. 标签上 title 与 alt 属性的区别是什么?12. 描述 CSS Reset 的作用和用途13. 解释 CSS Sprites如何使用14. 浏览器标准模式和怪异模式之间的区别是什么?15. 你如何对网站的文件和资源进行优化?16. 什么是语义化的 HTML?17. 清除浮动的几种方式各自的优缺点 JavaScript1. JavaScript 的 typeof 返回哪些数据类型2. 例举 3 种强制类型转换和 2 种隐式类型转换3. split() 和 join() 的区别4. 数组方法 pop()、push()、unshift()、shift()5. 事件绑定和普通事件有什么区别6. IE 和 DOM 事件流的区别7. IE 和标准下有哪些兼容性的写法8. AJAX 请求的时候 GET 和 POST 方式的区别9. call 和 apply 的区别10. AJAX 请求时如何解析 JSON 数据11. B 继承 A 的方法12. 写一个获取非行间样式的函数13. 事件委托是什么14. 闭包是什么有什么特性对页面有什么影响15. 如何阻止事件冒泡和默认事件16. 添加、删除、替换、插入到某个节点的方法17. 解释 JSONP 的原理以及为什么不是真正的 AJAX18. JavaScript 的本地对象内置对象和宿主对象19. document load 和 document ready 的区别20. 和 的不同21. JavaScript 的同源策略22. 编写一个数组去重的方法23. String 对象的方法不包括哪一个24. 关于 setTimeout(check, 10) 中说法正确的是25. 以下哪个单词不属于 JavaScript 关键字 前端工程师面试心得基本知识少量提问解决问题有激情最后一点 其他面试题百度腾讯 前端开发工程师面试知识点大纲HTML CSSJavaScript其他必须掌握的知识点 其他面试题百度腾讯 参考资料 HTML CSS
1. 对 WEB 标准以及 W3C 的理解与认识
WEB 标准是指一套用于规范网页设计和开发的技术标准旨在确保网页在不同浏览器和设备上具有一致的表现和功能。W3C万维网联盟是制定和维护这些标准的国际组织。
遵循 WEB 标准的好处包括
标签闭合确保 HTML 标签正确闭合避免结构混乱。标签小写统一标签名称为小写提高代码一致性。不乱嵌套正确嵌套 HTML 元素确保文档结构合理。提高搜索机器人搜索几率标准化代码有助于搜索引擎更好地抓取和索引内容。使用外链 CSS 和 JS 脚本实现结构、行为和表现的分离提升可维护性。文件下载与页面速度更快外链资源可以被缓存减少重复下载提高加载速度。内容能被更多的用户所访问标准化代码兼容更多设备和浏览器。更少的代码和组件容易维护简洁的代码更易于维护和更新。改版方便不需要变动页面内容样式与结构分离便于进行视觉改版。提供打印版本而不需要复制内容通过 CSS 打印样式实现页面的打印优化。提高网站易用性一致的标准提升用户体验。
2. XHTML 和 HTML 有什么区别
HTML 是一种用于创建网页的标记语言而 XHTML 是基于 XML 的标记语言两者的主要区别如下
严格嵌套XHTML 元素必须被正确地嵌套避免标签交叉。元素必须被关闭所有的 XHTML 元素必须有对应的结束标签或使用自闭合标签。标签名必须小写XHTML 标签名必须全部使用小写字母。文档必须拥有根元素XHTML 文档必须有一个唯一的根元素如 html。
3. Doctype? 严格模式与混杂模式
Doctype 用于声明文档类型告诉浏览器按照哪种标准解析网页。它可以触发浏览器的严格模式或混杂模式。
严格模式Standards Mode浏览器按照 W3C 标准严格解析和渲染网页。触发方式使用正确的 Doctype 声明例如 !DOCTYPE html。混杂模式Quirks Mode浏览器以向后兼容的方式解析网页允许使用一些旧版浏览器的特性和漏洞。触发方式缺少 Doctype 或使用不正确的 Doctype 声明。
区别与意义
渲染方式不同严格模式下浏览器遵循标准混杂模式下浏览器兼容旧版行为。盒模型差异在严格模式下盒模型按照标准计算在混杂模式下IE6 等浏览器使用不同的盒模型。布局与样式表现严格模式提供更一致和可预测的布局表现有助于开发者编写符合标准的代码。
4. 行内元素有哪些? 块级元素有哪些? CSS 的盒模型?
块级元素Block-Level Elements
常见标签div、p、h1-h6、form、ul、ol、dl、li、table、tr、td
行内元素Inline Elements
常见标签a、b、br、i、span、input、select、textarea、strong、em
CSS 盒模型Box Model
每个 HTML 元素在浏览器中被视为一个盒子包含以下部分
内容区Content实际内容显示区域。内边距Padding内容周围的空白区域透明。边框Border包围内边距和内容的边框。外边距Margin盒子外部的空白区域透明。
---------------------------
| Margin |
| --------------------- |
| | Border | |
| | --------------- | |
| | | Padding | | |
| | | ----------- | | |
| | | | Content | | | |
| | | ----------- | | |
| | | | | |
| | --------------- | |
| | | |
| --------------------- |
| |
---------------------------5. CSS 引入的方式有哪些? link 和 import 的区别是?
CSS 引入方式 内联样式Inline Styles 直接在 HTML 元素的 style 属性中定义样式。示例div stylecolor: red;文本/div内嵌样式Internal Styles 在 HTML 文档的 head 部分使用 style 标签定义样式。示例headstyle.text { color: red; }/style
/head外链样式External Styles 使用 link 标签在 HTML 文档中引入外部 CSS 文件。示例headlink relstylesheet hrefstyles.css
/headimport 引入 在 CSS 文件中使用 import 语句引入其他 CSS 文件。示例import url(styles.css);link 和 import 的区别
特性link 标签import 语句加载方式同时加载减少延迟顺序加载可能增加延迟兼容性所有浏览器均支持CSS2.1 以下浏览器不支持动态修改支持使用 JavaScript 动态改变样式不支持使用 JavaScript 动态改变样式优先级较高较低性能更优减少 HTTP 请求时间较差可能阻塞后续样式的加载
总结
外链样式 (link)推荐使用因为它性能更好兼容性更强且支持动态修改。import适用于需要在 CSS 文件中组织和引入样式但可能会影响性能尽量减少使用。
6. CSS 选择符有哪些? 哪些属性可以继承? 优先级算法如何计算? 内联和 !important 哪个优先级高?
CSS 选择符Selectors 标签选择器Type Selector 例如div、p、h1 类选择器Class Selector 例如.container、.active ID 选择器ID Selector 例如#header、#footer 后代选择器Descendant Selector 例如div p、ul li 群组选择器Group Selector 例如h1, h2, h3、.btn, .link 伪类选择器Pseudo-class Selector 例如:hover、:active、:nth-child(2) 属性选择器Attribute Selector 例如input[typetext]、a[href^https]
可继承的属性Inherited Properties
字体相关font-family、font-size、font-weight、color、line-height文本相关text-align、text-indent、text-transform其他visibility、cursor
不可继承的属性
布局相关margin、padding、border、width、height、display、position
优先级算法Specificity计算
优先级由四个部分组成按照从高到低依次为
内联样式Inline styles最高优先级。ID 选择器ID selectors类、属性、伪类选择器Classes, attributes, pseudo-classes标签、伪元素选择器Type selectors, pseudo-elements
具体计算方式
每一类选择器对应一个数字位数例如 内联样式1,0,0,0ID 选择器0,1,0,0类选择器0,0,1,0标签选择器0,0,0,1
!important 和内联样式的优先级比较
!important无论选择器的优先级如何带有 !important 的声明优先级最高。内联样式在没有 !important 的情况下内联样式的优先级高于外部样式。
总结
!important 内联样式 ID 选择器 类选择器 标签选择器建议尽量避免使用 !important以保持 CSS 的可维护性和层次性。
7. 前端页面有哪三层构成分别是什么? 作用是什么?
前端页面的三层构成 结构层Structure Layer 技术HTML、XHTML作用定义网页的基本结构和内容如标题、段落、列表等。 表现层Presentation Layer 技术CSS作用控制网页的视觉表现如布局、颜色、字体、边距等。 行为层Behavior Layer 技术JavaScript作用实现网页的动态交互和行为如按钮点击、表单验证、动画效果等。
总结
结构层负责内容的组织和呈现。表现层负责内容的视觉样式和布局。行为层负责内容的交互和动态行为。
8. CSS 的基本语句构成是?
CSS 基本语句构成
选择器 {属性1: 值1;属性2: 值2;/* 更多属性 */
}示例
.container {width: 100%;padding: 20px;background-color: #f0f0f0;
}9. 你做的页面在哪些浏览器测试过? 这些浏览器的内核分别是什么? 经常遇到的浏览器的兼容性有哪些? 怎么会出现? 解决方法是什么?
测试过的浏览器及其内核
IETrident 内核火狐FirefoxGecko 内核谷歌ChromeBlink 内核基于 WebKitOperaPresto 内核最新版本基于 BlinkSafariWebKit 内核MaxthonTrident/WebKit 双内核
常见的浏览器兼容性问题及解决方法 默认字体大小差异 问题不同浏览器的默认字体大小不同导致字体显示不一致。解决方法在 CSS 中统一设置字体大小例如 body { font-size: 14px; }。 嵌套 a 标签 问题某些浏览器不允许 a 标签嵌套 a 标签会导致结构错误。解决方法避免在 a 标签内嵌套其他 a 标签使用其他元素包裹。 链接内容样式差异 问题不同浏览器对 a 标签内部内容的样式处理不同。解决方法在 CSS 中明确设置 a 标签的 display 属性例如 display: block;并统一样式。 列表样式和内边距 问题不同浏览器对 ul、ol 和 dl 等列表标签的默认样式和内边距处理不同。解决方法在 CSS 中重置列表样式和内边距例如ul, ol, dl {margin: 0;padding: 0;list-style: none;
}Wrapper div 高度问题 问题外部包裹的 div 高度在不同浏览器中表现不一致。解决方法设置 overflow: hidden; 使高度自适应避免固定高度。 手形光标兼容性 问题不同浏览器对 cursor: hand; 和 cursor: pointer; 的支持不同。解决方法统一使用 cursor: pointer;兼容性更好。 居中问题 问题不同浏览器对居中方式的支持不同特别是浮动元素的居中。解决方法 对父元素使用 text-align: center;对子元素使用 margin: 0 auto;。使用 Flexbox 布局实现居中。 浮动引起的双倍边距 问题在 IE 中浮动元素可能会导致双倍边距。解决方法设置 display: inline; 使浮动忽略元素间的空隙或使用其他清除浮动的方法。 居中浮动元素 问题浮动元素无法通过常规方式居中。解决方法使用 margin: 0 auto; 配合 display: block;或使用 Flexbox 实现居中。
10. 写出几种 IE6 BUG 的解决方法 双边距 BUGDouble Margin Float Bug 问题在 IE6 中浮动元素的左右外边距会被倍增。解决方法设置 display: inline;使 IE6 忽略外边距的倍增。.float-element {float: left;margin-left: 10px;display: inline;
}3 像素问题 问题IE6 中浮动元素的高度可能出现 3 像素的误差。解决方法调整 line-height 或使用 zoom: 1; 触发 hasLayout。.float-element {float: left;line-height: 1px;zoom: 1;
}超链接 hover 点击后失效 问题在 IE6 中超链接在 :hover 状态下点击后失效。解决方法确保 CSS 中的链接伪类顺序为 :link、:visited、:hover、:active。a:link { /* 样式 */ }
a:visited { /* 样式 */ }
a:hover { /* 样式 */ }
a:active { /* 样式 */ }IE z-index 问题 问题在 IE6 中子元素的 z-index 无法超越父元素。解决方法给父元素添加 position: relative;。.parent {position: relative;z-index: 1;
}
.child {position: absolute;z-index: 2;
}PNG 透明问题 问题IE6 不支持 PNG 图片的透明背景。解决方法使用 JavaScript 或滤镜filter修复透明效果。.png-fix {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(srcimage.png, sizingMethodscale);
}min-height 最小高度问题 问题IE6 不支持 min-height 属性。解决方法使用 height 代替并触发 hasLayout。.container {height: 300px; /* 代替 min-height */zoom: 1; /* 触发 hasLayout */
}select 元素遮盖问题 问题在 IE6 中select 元素会遮盖浮动元素。解决方法使用 iframe 嵌套层级或者使用其他替代方案。!-- 使用 iframe 作为遮罩层 --
iframe srcabout:blank styleposition:absolute; top:0; left:0; width:100%; height:100%;/iframe无法定义 1px 宽度的容器 问题IE6 默认行高导致无法准确设置 1px 宽度。解决方法使用 overflow: hidden;、zoom: 1; 或调整 line-height。.one-pixel {width: 1px;overflow: hidden;zoom: 1;line-height: 1px;
}11. 标签上 title 与 alt 属性的区别是什么? alt 属性 用途为图片提供替代文本当图片无法显示时显示该文字。示例img srcimage.jpg alt描述性文本title 属性 用途为元素提供额外的信息通常在鼠标悬停时显示为工具提示。示例a href# title更多信息链接/a总结
alt 用于替代内容增强可访问性。title 用于提供额外信息提升用户体验。
12. 描述 CSS Reset 的作用和用途
CSS Reset 的作用是重置不同浏览器的默认样式使各浏览器在渲染网页时有一致的基础从而减少跨浏览器的兼容性问题。
用途
统一样式消除不同浏览器默认的内边距、外边距、字体等差异。简化样式管理提供一个统一的起点便于后续的样式设计和开发。提升可维护性减少因浏览器差异导致的样式调整和修复工作。
常见的 CSS Reset 工具
Eric Meyer’s Reset CSSNormalize.css
示例
/* 简单的 CSS Reset */
* {margin: 0;padding: 0;box-sizing: border-box;
}13. 解释 CSS Sprites如何使用
CSS Sprites 是一种将多个小图标或图片合并为一张大图的技术通过 CSS 的 background-image 和 background-position 属性来显示不同部分的图片。
优点
减少 HTTP 请求合并图片减少页面加载时的 HTTP 请求数量提升加载速度。提高性能减少服务器资源的消耗提升用户体验。
使用方法 创建 Sprites 图 将多个小图标拼接成一张大图记录每个小图标在大图中的位置坐标。 CSS 设置 使用 background-image 指定大图。使用 background-position 设置显示大图的特定部分。设置元素的宽度和高度为小图标的尺寸。
示例
.icon {background-image: url(sprites.png);width: 32px;height: 32px;display: inline-block;
}.icon-home {background-position: 0 0;
}.icon-search {background-position: -32px 0;
}.icon-settings {background-position: -64px 0;
}span classicon icon-home/span
span classicon icon-search/span
span classicon icon-settings/span14. 浏览器标准模式和怪异模式之间的区别是什么?
浏览器标准模式Standards Mode 和 怪异模式Quirks Mode 是浏览器解析和渲染网页时的两种模式主要区别体现在以下方面 盒模型 标准模式采用标准的盒模型元素的宽高只包含内容区不包括内边距和边框。怪异模式采用 IE6 盒模型元素的宽高包括内容、内边距和边框。 渲染行为 标准模式严格遵循 W3C 标准提供一致和可预测的渲染结果。怪异模式兼容旧版浏览器的渲染方式可能导致不一致和不可预测的布局问题。 触发方式 标准模式通过正确的 Doctype 声明如 !DOCTYPE html。怪异模式缺少 Doctype 或使用不正确的 Doctype 声明。
检测渲染模式
if (document.compatMode CSS1Compat) {console.log(标准模式);
} else {console.log(怪异模式);
}意义
一致性标准模式提供更一致的跨浏览器表现便于开发和维护。兼容性怪异模式用于兼容旧版浏览器的网页确保旧网站正常显示。
15. 你如何对网站的文件和资源进行优化?
文件和资源优化方法 文件合并 将多个 CSS 或 JavaScript 文件合并为一个文件减少 HTTP 请求次数。 文件最小化/压缩 使用工具如 UglifyJS、CSSNano压缩 JavaScript 和 CSS 文件减少文件大小。 使用 CDN 托管 将静态资源如图片、库文件托管在 CDN 上提升加载速度和分发效率。 缓存的使用 利用浏览器缓存通过设置合适的 HTTP 缓存头如 Cache-Control、Expires提高资源加载效率。 图片优化 压缩图片文件选择合适的格式如 JPEG、PNG、WebP使用 CSS Sprites 减少图片请求。 延迟加载Lazy Loading 对不在视口内的资源进行延迟加载提升页面初始加载速度。 代码分割Code Splitting 将代码拆分成按需加载的模块减少初始加载的 JavaScript 量。 使用 GZIP 压缩 启用 GZIP 压缩减少传输数据量提升加载速度。
总结
通过以上优化方法可以显著提升网站的加载速度、响应效率和用户体验。
16. 什么是语义化的 HTML?
语义化 HTML 指的是使用具有明确意义的 HTML 标签来描述内容使代码更具可读性和可维护性同时提升搜索引擎优化SEO效果和可访问性。
优势
提高可读性开发者和其他人更容易理解代码结构和内容。增强 SEO搜索引擎更容易抓取和理解网页内容提高网站排名。改善可访问性辅助技术如屏幕阅读器更好地理解和呈现内容提升无障碍体验。
示例
使用 header、nav、main、footer 来定义页面的不同部分。使用 article、section、aside 来组织内容。使用 figure、figcaption 来描述图像和其说明。
articleheaderh1文章标题/h1p作者信息/p/headersectionh2章节标题/h2p内容.../p/sectionfooterp版权信息/p/footer
/article17. 清除浮动的几种方式各自的优缺点
1. 使用空标签清除浮动Clearfix Hack
div classcontainerdiv classfloat-element浮动元素/divdiv classfloat-element浮动元素/divdiv classclearfix/div
/div.clearfix {clear: both;
}优点
简单直接易于理解和实现。
缺点
增加了无意义的 HTML 标签影响语义化。 2. 使用 overflow: auto 或 overflow: hidden
.container {overflow: hidden;
}优点
不需要额外的 HTML 元素保持结构简洁。触发块级格式化上下文自动清除浮动。
缺点
可能会截断溢出的内容不适用于需要显示溢出部分的场景。 3. 使用 ::after 伪元素
.container::after {content: ;display: table;clear: both;
}div classcontainerdiv classfloat-element浮动元素/divdiv classfloat-element浮动元素/div
/div优点
不需要添加额外的 HTML 元素保持结构干净。支持 CSS3适用于现代浏览器。
缺点
不支持 IE8 及以下版本。 总结
使用空标签简单但增加 HTML 负担。使用 overflow简洁但可能影响内容显示。使用伪元素高效且不污染 HTML但需现代浏览器支持。
JavaScript
1. JavaScript 的 typeof 返回哪些数据类型
typeof 运算符用于检测变量的数据类型返回以下几种类型
undefinedobject对于 null 也是 objectbooleannumberstringfunctionsymbolES6 引入bigintES2020 引入
示例
console.log(typeof undefined); // undefined
console.log(typeof null); // object
console.log(typeof true); // boolean
console.log(typeof 42); // number
console.log(typeof Hello); // string
console.log(typeof function(){}); // function
console.log(typeof Symbol()); // symbol
console.log(typeof 10n); // bigint2. 例举 3 种强制类型转换和 2 种隐式类型转换
强制类型转换Explicit Type Conversion parseInt 将字符串转换为整数。示例parseInt(123); // 123parseFloat 将字符串转换为浮点数。示例parseFloat(123.45); // 123.45Number 将值转换为数字类型。示例Number(123); // 123隐式类型转换Implicit Type Conversion 使用 进行比较 自动转换不同类型的值后进行比较。示例5 5; // true使用算术运算符 在运算过程中自动转换类型。示例5 * 2; // 103. split() 和 join() 的区别 split() 方法 用途将字符串按指定分隔符拆分为数组。示例const str apple,banana,cherry;
const arr str.split(,); // [apple, banana, cherry]join() 方法 用途将数组元素按指定分隔符连接为字符串。示例const arr [apple, banana, cherry];
const str arr.join(,); // apple,banana,cherry总结
split()字符串 → 数组join()数组 → 字符串
4. 数组方法 pop()、push()、unshift()、shift() push() 用途在数组末尾添加一个或多个元素。示例const arr [1, 2, 3];
arr.push(4); // [1, 2, 3, 4]pop() 用途移除数组末尾的元素并返回该元素。示例const arr [1, 2, 3, 4];
const last arr.pop(); // last 4, arr [1, 2, 3]unshift() 用途在数组开头添加一个或多个元素。示例const arr [2, 3];
arr.unshift(1); // [1, 2, 3]shift() 用途移除数组开头的元素并返回该元素。示例const arr [1, 2, 3];
const first arr.shift(); // first 1, arr [2, 3]5. 事件绑定和普通事件有什么区别
事件绑定Event Binding
定义通过 JavaScript 动态地将事件处理函数绑定到元素上。方法 使用 addEventListener现代浏览器element.addEventListener(click, function() {// 处理代码
});使用 attachEventIE8 及以下element.attachEvent(onclick, function() {// 处理代码
});普通事件Inline Event Handlers
定义在 HTML 标签中直接使用事件属性绑定事件处理函数。示例button onclickhandleClick()点击我/button区别 可维护性 事件绑定代码与 HTML 分离易于维护和管理。普通事件代码混杂在 HTML 中难以维护。 多重绑定 事件绑定允许为同一事件绑定多个处理函数。普通事件只能绑定一个处理函数后绑定的会覆盖前面的。 兼容性 事件绑定现代方法 addEventListener 在所有现代浏览器中支持attachEvent 支持 IE8 及以下。普通事件所有浏览器都支持但功能有限。
总结
推荐使用事件绑定方法如 addEventListener以提高代码的可维护性和灵活性。
6. IE 和 DOM 事件流的区别
IE 事件模型IE Event Model
事件处理方式基于 attachEvent 和 detachEvent 方法。事件对象通过全局变量 window.event 获取。事件冒泡事件总是从目标元素向上冒泡。取消默认行为使用 return false; 或设置 event.cancelBubble true;。
DOM 事件模型W3C DOM Event Model
事件处理方式基于 addEventListener 和 removeEventListener 方法。事件对象作为事件处理函数的参数传递。事件流包括捕获阶段、目标阶段和冒泡阶段。取消默认行为使用 event.preventDefault(); 和 event.stopPropagation();。
主要区别 事件绑定方法 IEattachEvent / detachEventDOMaddEventListener / removeEventListener 事件对象获取 IE通过 window.eventDOM通过事件处理函数的参数 事件流控制 IE仅支持冒泡DOM支持捕获和冒泡 取消冒泡和默认行为的方法 IEevent.cancelBubble true; 和 return false;DOMevent.stopPropagation(); 和 event.preventDefault();
总结
现代浏览器支持 W3C DOM 事件模型建议使用 addEventListener 等标准方法进行事件处理。对于需要兼容 IE8 及以下版本的项目需结合 attachEvent 方法进行兼容处理。
7. IE 和标准下有哪些兼容性的写法
常见的 IE 和标准兼容写法 获取事件对象 function handleEvent(event) {var e event || window.event; // 兼容 IE// 处理事件
}获取元素的宽度 var width document.documentElement.clientWidth || document.body.clientWidth; // 兼容 IE获取事件目标元素 var target event.srcElement || event.target; // 兼容 IE阻止事件冒泡 if (event.stopPropagation) {event.stopPropagation(); // 标准
} else {event.cancelBubble true; // IE
}阻止默认行为 if (event.preventDefault) {event.preventDefault(); // 标准
} else {event.returnValue false; // IE
}添加事件处理函数 if (element.addEventListener) {element.addEventListener(click, handler, false); // 标准
} else if (element.attachEvent) {element.attachEvent(onclick, handler); // IE
}移除事件处理函数 if (element.removeEventListener) {element.removeEventListener(click, handler, false); // 标准
} else if (element.detachEvent) {element.detachEvent(onclick, handler); // IE
}总结
使用逻辑判断 (if-else) 来确定使用哪种方法以兼容不同浏览器的事件模型。关注现代浏览器的支持逐步淘汰对旧版 IE 的兼容性处理。
8. AJAX 请求的时候 GET 和 POST 方式的区别
GET 和 POST 的区别
特性GETPOST数据位置URL 后面作为查询字符串请求体中发送数据数据大小限制有限制通常为 2048 字符无明显限制安全性不安全数据暴露在 URL 中相对安全数据隐藏在请求体中幂等性是重复请求不会改变服务器状态否重复请求可能导致数据重复提交缓存可以被浏览器缓存通常不被缓存使用场景数据检索、搜索请求数据提交、表单提交、文件上传
应用场景
GET适用于获取数据、不改变服务器状态的请求如搜索、数据查询。POST适用于提交数据、改变服务器状态的请求如表单提交、数据创建。
9. call 和 apply 的区别
call 和 apply 方法用于改变函数的上下文this并调用函数。 call 方法 语法function.call(thisArg, arg1, arg2, ...)用法传递参数列表。示例function greet(greeting, punctuation) {console.log(greeting , this.name punctuation);
}const person { name: Alice };
greet.call(person, Hello, !); // 输出: Hello, Alice!apply 方法 语法function.apply(thisArg, [argsArray])用法传递参数数组。示例function greet(greeting, punctuation) {console.log(greeting , this.name punctuation);
}const person { name: Bob };
greet.apply(person, [Hi, ?]); // 输出: Hi, Bob?主要区别
参数传递方式 call逐个传递参数。apply以数组形式传递参数。
总结
使用 call 时参数以逗号分隔。使用 apply 时参数作为数组传递。
10. AJAX 请求时如何解析 JSON 数据
解析 JSON 数据的方法 使用 JSON.parse() 用途将 JSON 字符串转换为 JavaScript 对象。示例const jsonString {name: Alice, age: 25};
const obj JSON.parse(jsonString);
console.log(obj.name); // Alice使用 eval() 用途将字符串当作 JavaScript 代码执行。注意存在安全风险容易受到 XSS 攻击不推荐使用。示例const jsonString {name: Bob, age: 30};
const obj eval(( jsonString ));
console.log(obj.name); // Bob推荐方法
使用 JSON.parse()因为它安全、标准且高效。避免使用 eval()因其潜在的安全风险和性能问题。
11. B 继承 A 的方法
实现继承的方法有多种以下为常见的两种
原型链继承
function A() {this.name A;
}A.prototype.sayHello function() {console.log(Hello from A);
};function B() {A.call(this); // 继承属性this.name B;
}B.prototype Object.create(A.prototype); // 继承方法
B.prototype.constructor B;const b new B();
b.sayHello(); // 输出: Hello from A
console.log(b.name); // B寄生组合继承
function A() {this.name A;
}A.prototype.sayHello function() {console.log(Hello from A);
};function B() {A.call(this);this.name B;
}(function() {const Super function() {};Super.prototype A.prototype;B.prototype new Super();B.prototype.constructor B;
})();const b new B();
b.sayHello(); // 输出: Hello from A
console.log(b.name); // B总结
原型链继承简单易懂但存在引用类型属性共享的问题。寄生组合继承结合构造函数继承和原型链继承避免了原型链继承的问题推荐使用。
12. 写一个获取非行间样式的函数
获取元素非行内样式的函数示例
function getStyle(obj, attr) {if (window.getComputedStyle) {// 标准浏览器return window.getComputedStyle(obj, null).getPropertyValue(attr);} else if (obj.currentStyle) {// IEreturn obj.currentStyle[attr];}return null;
}// 设置样式
function setStyle(obj, attr, value) {obj.style[attr] value;
}// 使用示例
const element document.getElementById(myElement);
const fontSize getStyle(element, font-size);
console.log(fontSize); // e.g., 16pxsetStyle(element, color, blue);说明 获取样式 标准浏览器使用 window.getComputedStyle。IE6-8使用 element.currentStyle。 设置样式 直接通过 element.style 属性设置。
13. 事件委托是什么
事件委托Event Delegation 是一种利用事件冒泡机制将事件处理器绑定到父元素上而不是每个子元素上从而提高性能和简化代码的方法。
原理
事件冒泡事件从目标元素向上冒泡到父元素。委托处理父元素通过判断事件目标 (event.target) 来处理子元素的事件。
优点
减少事件处理器避免为每个子元素绑定事件处理器节省内存和提高性能。动态元素支持自动支持动态添加的子元素无需重新绑定事件。
示例
ul idparentListliItem 1/liliItem 2/liliItem 3/li
/uldocument.getElementById(parentList).addEventListener(click, function(event) {const target event.target;if (target target.nodeName LI) {alert(Clicked on target.textContent);}
});总结
事件委托 通过绑定单一的事件处理器到父元素管理所有子元素的事件提升代码效率和可维护性。
14. 闭包是什么有什么特性对页面有什么影响
闭包Closure 是指在函数内部创建的函数可以访问其外部函数的作用域即使外部函数已经执行完毕。
特性
访问外部函数的变量闭包可以访问并操作外部函数的变量和参数。保持变量状态即使外部函数执行完毕闭包仍然保持对变量的引用。私有变量通过闭包可以创建私有变量和方法增强封装性。
影响
数据隐私通过闭包可以保护变量不被外部直接访问和修改。内存管理过多的闭包可能导致内存泄漏因为它们保持对外部变量的引用。功能扩展闭包在模块化开发、函数式编程等方面具有重要应用。
示例
function outerFunction() {var count 0;function innerFunction() {count;console.log(count);}return innerFunction;
}const counter outerFunction();
counter(); // 输出: 1
counter(); // 输出: 2总结
闭包 是理解 JavaScript 作用域和函数特性的关键合理使用闭包可以提升代码的灵活性和封装性但需注意内存管理。
15. 如何阻止事件冒泡和默认事件
阻止事件冒泡Event Bubbling 标准方法 event.stopPropagation();IE 兼容方法 event.cancelBubble true;阻止默认事件Prevent Default Behavior 标准方法 event.preventDefault();IE 兼容方法 event.returnValue false;示例
element.addEventListener(click, function(event) {// 阻止冒泡if (event.stopPropagation) {event.stopPropagation();} else {event.cancelBubble true; // IE}// 阻止默认行为if (event.preventDefault) {event.preventDefault();} else {event.returnValue false; // IE}
});总结
使用 stopPropagation() 和 preventDefault() 来阻止事件冒泡和默认行为兼容不同浏览器的写法确保功能一致。
16. 添加、删除、替换、插入到某个节点的方法
常用的 DOM 操作方法 创建新节点 createDocumentFragment()创建一个空的文档片段用于批量添加节点。 const fragment document.createDocumentFragment();createElement()创建一个新的元素节点。 const newDiv document.createElement(div);createTextNode()创建一个新的文本节点。 const text document.createTextNode(Hello World);添加、删除、替换、插入 appendChild()在父节点末尾添加一个子节点。 parent.appendChild(child);removeChild()从父节点中移除一个子节点。 parent.removeChild(child);replaceChild()用一个新节点替换父节点中的一个子节点。 parent.replaceChild(newChild, oldChild);insertBefore()在指定子节点之前插入一个新节点。 parent.insertBefore(newChild, referenceChild);查找节点 getElementsByTagName()通过标签名称查找元素。 const divs document.getElementsByTagName(div);getElementsByName()通过元素的 name 属性查找元素。 const inputs document.getElementsByName(username);getElementById()通过元素的 id 查找元素。 const header document.getElementById(header);总结
使用 DOM 方法进行节点操作可以动态改变网页内容和结构提升用户体验和交互性。
17. 解释 JSONP 的原理以及为什么不是真正的 AJAX
JSONPJSON with Padding 是一种跨域请求数据的技术通过动态创建 script 标签并使用回调函数来实现数据的跨域获取。
原理 创建 script 标签在页面中动态添加一个 script 标签设置其 src 属性指向跨域的数据源并包含回调函数名称。 const script document.createElement(script);
script.src https://api.example.com/data?callbackhandleData;
document.body.appendChild(script);服务器返回 JSONP 格式的数据服务器响应时将数据包裹在回调函数中。 handleData({name: Alice, age: 25});回调函数执行页面中的回调函数接收数据并处理。 function handleData(data) {console.log(data.name); // Alice
}为什么不是真正的 AJAX
基于 script 标签JSONP 使用 script 标签加载数据而 AJAX 使用 XMLHttpRequest 对象。仅支持 GET 请求JSONP 只能进行 GET 请求无法执行其他类型的 HTTP 请求如 POST。安全性问题JSONP 允许执行任意 JavaScript 代码存在 XSS 攻击风险。
总结
JSONP 是一种跨域数据获取的替代方案但因其安全性和功能限制不属于标准的 AJAX 技术。现代跨域方案推荐使用 CORS跨域资源共享提供更安全和灵活的跨域请求支持。
18. JavaScript 的本地对象内置对象和宿主对象
JavaScript 对象分类 本地对象Native Objects 定义JavaScript 语言本身提供的对象可以通过 new 关键字实例化。示例 构造函数Array、Object、Function、Date、RegExp实例const arr new Array();
const obj new Object();
const func new Function();
const date new Date();
const regex new RegExp(pattern);内置对象Built-in Objects 定义JavaScript 环境预定义的对象不能通过 new 关键字实例化。示例 全局对象Math、JSON、Promise对象实例const pi Math.PI;
const json JSON.stringify({ name: Alice });
const promise new Promise((resolve, reject) {});宿主对象Host Objects 定义由宿主环境如浏览器、Node.js提供的对象用于与环境交互。示例 浏览器宿主对象window、document、navigator、locationNode.js 宿主对象process、Buffer、fs
总结
本地对象JavaScript 内置的可实例化对象。内置对象JavaScript 环境提供的预定义对象无法实例化。宿主对象宿主环境提供的对象用于与环境交互。
19. document load 和 document ready 的区别
document.onload 和 document.ready 的区别 document.onloadwindow.onload 触发时机在整个页面包括所有依赖资源如图片、样式表、脚本等加载完成后触发。使用方法window.onload function() {// 页面完全加载后执行
};document.readyjQuery 的 $(document).ready() 触发时机在 DOM 树构建完成后触发不等待图片、样式表等资源加载。使用方法$(document).ready(function() {// DOM 树构建完成后执行
});原生实现document.addEventListener(DOMContentLoaded, function() {// DOM 树构建完成后执行
});区别与意义 执行时机 window.onload 适用于需要确保所有资源加载完成后执行的操作。document.ready 适用于需要在 DOM 准备好后立即执行的操作如绑定事件、操作 DOM 元素。 性能与用户体验 document.ready 提升页面响应速度用户可以更早地与页面交互。window.onload 可能会延迟执行影响用户体验。
总结
document.ready适用于大多数 DOM 操作提升页面交互性。window.onload适用于需要所有资源加载完成后执行的任务。
20. 和 的不同
双等号与 三等号的区别 相等运算符 特性进行类型转换后再比较可能导致不同类型的值相等。示例5 5; // true
null undefined; // true
0 false; // true严格相等运算符 特性不进行类型转换只有在类型和值都相等时返回 true。示例5 5; // false
null undefined; // false
0 false; // false优先级 的优先级高于 。 优先级高于 !important。
总结
使用 推荐使用严格相等运算符避免类型转换带来的潜在问题提升代码可靠性。使用 仅在确实需要类型转换时使用需谨慎处理。
21. JavaScript 的同源策略
同源策略Same-Origin Policy 是浏览器的安全机制限制从一个源加载的文档或脚本如何与来自不同源的资源进行交互。
定义
同源协议如 http、https、主机如 www.example.com、端口如 :80、:443都相同。不同源只要协议、主机或端口有一个不同即为不同源。
作用
防止恶意脚本在未经授权的情况下访问或篡改其他网站的敏感数据。限制跨域的 AJAX 请求确保数据的安全性和隐私。
示例 同源 http://www.example.com/page1.htmlhttp://www.example.com/page2.html 不同源 http://www.example.com 与 https://www.example.comhttp://www.example.com 与 http://api.example.comhttp://www.example.com 与 http://www.example.com:8080
绕过同源策略的方法
CORS跨域资源共享通过服务器设置响应头 Access-Control-Allow-Origin 允许跨域请求。JSONP利用 script 标签的跨域能力传递回调函数处理数据。代理服务器通过同源的服务器代理跨域请求。
总结
同源策略是浏览器安全的重要组成部分理解其机制有助于开发安全和高效的前端应用。
22. 编写一个数组去重的方法
示例使用对象存储法
function removeDuplicates(arr) {const seen {};const result [];for (let i 0; i arr.length; i) {const item arr[i];if (!seen[item]) {seen[item] true;result.push(item);}}return result;
}// 使用示例
const array [1, 2, 2, 3, 4, 4, 5];
const uniqueArray removeDuplicates(array);
console.log(uniqueArray); // [1, 2, 3, 4, 5]说明
使用一个对象 seen 来记录已经出现过的元素。遍历数组只有当元素未在 seen 中出现时才添加到结果数组中。
其他方法 使用 SetES6 function removeDuplicates(arr) {return [...new Set(arr)];
}const array [1, 2, 2, 3, 4, 4, 5];
const uniqueArray removeDuplicates(array);
console.log(uniqueArray); // [1, 2, 3, 4, 5]使用 filter 和 indexOf function removeDuplicates(arr) {return arr.filter((item, index) arr.indexOf(item) index);
}const array [1, 2, 2, 3, 4, 4, 5];
const uniqueArray removeDuplicates(array);
console.log(uniqueArray); // [1, 2, 3, 4, 5]总结
多种方法可以实现数组去重选择适合项目需求和浏览器兼容性的方式。
23. String 对象的方法不包括哪一个
选项
a) charAt()
b) substring()
c) length
d) toUpperCase()
答案 c) length
解释
length 是 String 对象的属性不是方法。其他选项都是 String 对象的方法。
24. 关于 setTimeout(check, 10) 中说法正确的是
选项
a) 程序循环执行 10 次
b) check 函数每 10 秒执行一次
c) 10 作为参数传给函数 check
d) check 函数每 10 毫秒执行一次
答案 d) check 函数每 10 毫秒执行一次
解释
setTimeout(check, 10) 会在 10 毫秒后执行 check 函数一次。若要循环执行需要使用 setInterval 或在回调中再次调用 setTimeout。
25. 以下哪个单词不属于 JavaScript 关键字
选项
a) with
b) parent
c) class
d) void
答案 c) class
解释
class 是 ES6 引入的关键字用于定义类但在早期的 JavaScript 中不属于关键字。parent 在 JavaScript 中不是关键字是一个全局变量属性。
注意不同的 JavaScript 版本中关键字的定义可能有所变化。 前端工程师面试心得
基本知识
作为一名前端工程师以下知识点是必须掌握的 DOM 结构 理解节点之间的关系父子关系、兄弟关系等。如何在节点之间任意移动使用 DOM 方法如 appendChild、insertBefore 等。 DOM 操作 添加、移除、移动、复制、创建和查找节点。常用方法createElement、createTextNode、appendChild、removeChild、replaceChild、insertBefore、getElementById、getElementsByTagName、getElementsByName。 事件 如何使用事件绑定事件处理函数、事件对象的使用。IE 和 DOM 事件模型的主要差别事件绑定方法、事件对象获取方式、事件流控制方法等。 XMLHttpRequest 定义用于在后台与服务器交换数据。完整的 GET 请求流程创建 XMLHttpRequest 对象、配置请求、发送请求、处理响应、检测错误。 严格模式与混杂模式 触发方式通过正确或错误的 Doctype 声明。区别盒模型、渲染行为等。 盒模型 外边距Margin、内边距Padding、边框Border 的关系。IE8 以下的浏览器盒模型差异内容宽高是否包含内边距和边框。 块级元素与行内元素 CSS 控制display 属性的使用如 block、inline、inline-block。合理使用根据内容语义和布局需求选择合适的元素类型。 浮动元素 使用方法float 属性的应用。问题浮动导致父容器高度塌陷、元素重叠等。解决方法清除浮动、使用 Flexbox 等现代布局方法。 HTML 与 XHTML 区别严格的语法规则、标签闭合、标签小写等。选择建议推荐使用 HTML5因其更灵活且广泛支持。 JSON 定义轻量级的数据交换格式。作用在客户端和服务器之间传递数据。用途配置文件、API 数据响应等。设计结构键值对形式支持嵌套和数组。
少量提问
面试时应尽量减少提问数量但每个问题深入考察多个知识点。
示例问题
问题现在有一个正显示着 Yahoo! 股票价格的页面。页面上有一个按钮你可以单击它来刷新价格但不会重新加载页面。请你描述一下实现这个功能的过程假设服务器会负责准备好正确的股票价格数据。
考察知识点
DOM 结构如何获取和操作 DOM 元素。事件处理绑定按钮点击事件。XMLHttpRequest发送 AJAX 请求获取数据。JSON处理服务器返回的数据格式。动态更新将新数据更新到页面中。
深入提问
替代方法如果不使用 AJAX你还能如何实现数据刷新安全问题如何确保数据传输的安全性性能优化如何优化数据请求和页面更新的性能
解决问题
关键能力找出问题的多种解决方案理解底层机制。
重要性
应对复杂问题如 IE6 的兼容性问题能灵活应对不同浏览器的差异。创新思维能够在既有方法受限时创造新的解决方案。技术掌握深入理解浏览器技术能高效解决实际开发中的问题。
示例
问题IE6 中浮动元素的双倍边距问题。解决方案 1设置 display: inline; 使 IE6 忽略外边距的倍增。解决方案 2使用 CSS hack针对 IE6 单独设置样式。解决方案 3改变布局方式避免使用浮动。
有激情
前端工程师需要对所做的工作充满热情持续学习和自我提升。
识别方法
询问兴趣领域如 “目前你对什么 Web 技术最感兴趣”了解学习习惯是否主动学习新技术、关注前沿趋势。探讨项目经验是否在项目中展示出对技术的深入理解和应用。
重要性
技术更新迅速持续学习才能跟上技术发展。解决问题的动力热情驱动工程师积极解决复杂问题提升项目质量。
最后一点
基础知识的重要性
掌握基本知识如 DOM 操作、事件处理、AJAX 等确保能够胜任工作。深入理解不仅仅是记忆方法更要理解其原理和应用场景。扩展知识面结合项目需求学习相关技术和工具提升综合能力。
建议
系统学习通过系统的学习和实践形成自己的知识体系。实战经验通过项目经验深化对知识点的理解和应用。持续改进在工作中不断反思和优化提高技术水平和工作效率。
其他面试题
百度 JavaScript 有哪几种数据类型 答案Object、Number、Function、Boolean、undefined alt 和 title 的区别 答案alt 用于图片无法显示时提供替代文本title 用于提供元素的额外信息通常在鼠标悬停时显示。 下面 CSS 标签在 JavaScript 中调用应如何拼写border-left-color-moz- 答案在 JavaScript 中CSS 属性使用驼峰命名法例如 borderLeftColorMozTransform带前缀的属性。 动态打印 yyyy-mm-dd hh:mm:ss 答案function formatDate(date) {const pad (n) n 10 ? 0 n : n;const year date.getFullYear();const month pad(date.getMonth() 1);const day pad(date.getDate());const hours pad(date.getHours());const minutes pad(date.getMinutes());const seconds pad(date.getSeconds());return ${year}-${month}-${day} ${hours}:${minutes}:${seconds};
}setInterval(() {console.log(formatDate(new Date()));
}, 1000);如何提高网页的运行速度 答案 文件合并与压缩使用 CDN 托管资源图片优化与使用 CSS Sprites启用浏览器缓存延迟加载非关键资源 JavaScript 中如何对一个对象进行深度 clone 答案function deepClone(obj) {if (obj null || typeof obj ! object) return obj;if (obj instanceof Date) return new Date(obj);if (obj instanceof Array) {const arrCopy [];for (let i 0; i obj.length; i) {arrCopy[i] deepClone(obj[i]);}return arrCopy;}const objCopy {};for (let key in obj) {if (obj.hasOwnProperty(key)) {objCopy[key] deepClone(obj[key]);}}return objCopy;
}const original { a: 1, b: { c: 2 } };
const copy deepClone(original);
console.log(copy); // { a: 1, b: { c: 2 } }Flash 中 ActionScript 2.0 和 ActionScript 3.0 面向对象的异同 答案 ActionScript 2.0 基于原型的面向对象模型。支持类和继承但功能较为有限。 ActionScript 3.0 基于类的面向对象模型严格的类结构。支持接口、多继承的部分功能、命名空间等高级特性。更高的性能和更强的类型检查。 编写一个方法求一个字符串的字节长度 答案function byteLength(str) {let length 0;for (let i 0; i str.length; i) {const code str.charCodeAt(i);if (code 0x7f) {length 1;} else if (code 0x7ff) {length 2;} else if (code 0xd800 code 0xdfff) {// Surrogate pairlength 4;i;} else {length 3;}}return length;
}console.log(byteLength(Hello)); // 5
console.log(byteLength(你好)); // 6
console.log(byteLength()); // 4如何控制 alert 中的换行 答案 使用转义字符 \n 实现换行。示例alert(这是第一行\n这是第二行);解释 document.getElementById(ElementID).style.fontSize 1.5em 答案 document.getElementById(ElementID)获取页面中 id 为 ElementID 的元素。.style.fontSize 1.5em设置该元素的字体大小为 1.5em即相对于父元素字体大小的 1.5 倍。 将一个类似图中的效果分离成 CSS 和 HTML 答案 HTMLdiv classcontainerdiv classbox内容/div
/divCSS.container {display: flex;justify-content: center;align-items: center;height: 100vh;
}.box {width: 200px;height: 200px;background-color: #f0f0f0;border: 1px solid #ccc;display: flex;justify-content: center;align-items: center;
}按照格式 xxxx年xx月xx日xx时xx分xx秒 动态显示时间要求不足 10 的补 0 答案function padZero(num) {return num 10 ? 0 num : num;
}function getCurrentTime() {const now new Date();const year now.getFullYear();const month padZero(now.getMonth() 1);const day padZero(now.getDate());const hours padZero(now.getHours());const minutes padZero(now.getMinutes());const seconds padZero(now.getSeconds());return ${year}年${month}月${day}日${hours}时${minutes}分${seconds}秒;
}setInterval(() {console.log(getCurrentTime());
}, 1000);编写一个方法去掉一个数组的重复元素 答案function removeDuplicates(arr) {const seen {};const result [];for (let i 0; i arr.length; i) {const item arr[i];if (!seen[item]) {seen[item] true;result.push(item);}}return result;
}const array [1, 2, 2, 3, 4, 4, 5];
const uniqueArray removeDuplicates(array);
console.log(uniqueArray); // [1, 2, 3, 4, 5]最近看的一篇 JavaScript 的文章是? 答案可以回答最近阅读的一篇技术博客或文章并简要描述其内容和收获。 你如何去实现这个 Tabview 答案描述使用 HTML、CSS 和 JavaScript 实现标签页切换的思路例如通过事件监听切换显示的内容区。 常使用的库有哪些? 常用的前端开发工具? 开发过什么应用或组件? 常用库 jQueryReactVue.jsAngularLodash 常用前端开发工具 编辑器VSCode、Sublime Text、WebStorm调试工具Chrome DevTools、Firebug版本控制Git、SVN构建工具Webpack、Gulp、Grunt图形工具Photoshop、Figma、Sketch 开发过的应用或组件 开发过响应式网页、单页应用SPA、UI 组件库等。
腾讯 要动态改变层中内容可以使用的方法有哪些AB 选项 a) innerHTML b) innerText c) 通过设置层的隐藏和显示来实现 d) 通过设置层的样式属性的 display 属性 答案A、B 当按键盘 A 时使用 onKeyDown 事件打印 event.keyCode 的结果是A 选项 a) 65 b) 13 c) 97 d) 37 答案A 在 JavaScript 里下列选项中不属于数组方法的是B 选项 a) sort() b) length() c) concat() d) reverse() 答案B 下列哪一个选项可以用来检索被选定的选项的索引号?B 选项 a) disabled b) selectedIndex c) option d) multiple 答案B 希望图片具有“提交”按钮同样的功能该如何编写表单提交?A 选项 a) 在图片的 onClick 事件中手动提交 b) 在图片上添加 onSubmit 事件 c) 在图片的 onSubmit 事件中手动提交 d) 在表单中自动提交 答案A 使 div 层和文本框处在同一行的代码正确的是D 下列选项中描述正确的是选择两项A、D 选项 a) options.add(new Option(a, A)) 可以动态添加一个下拉列表选项 b) option.add(new Option(a, A)) 可以动态添加一个下拉列表选项 c) new Option(a, A) 中 a 表示列表选项的值A 用于在页面中显示 d) new Option(a, A) 中 A 表示列表选项的值a 用于在页面中显示 答案A、D var emp new Array(3); for(var i in emp) 以下答案中能与 for 循环代码互换的是选择一项D 答案D 制作级联菜单功能时调用的是下拉列表框的A事件。 选项 a) onChange b) onFocus c) selected d) onClick 答案A 下列声明数组的语句中错误的选项是C。 选项 a) var arry new Array() b) var arry new Array(3) c) var arry[] new Array(3)(4) d) var arry new Array(3, 4) 答案C 下列属性哪一个能够实现层的隐藏?C 选项 a) display: false b) display: hidden c) display: none d) display: 答案C 下列哪一个选项不属于 document 对象的方法?D 选项 a) focus() b) getElementById() c) getElementsByName() d) bgColor() 答案D 下列哪项是按下键盘事件A、B 选项 a) onKeyDown b) onKeyPress c) keyCode d) onMouseOver 答案A、B JavaScript 进行表单验证的目的是B 选项 a) 把用户的正确信息提交给服务器 b) 检查提交的数据必须符合实际 c) 使得页面变得美观、大方 d) 减轻服务器端的压力 答案B display 属性值的常用取值不包括C。 选项 a) inline b) block c) hidden d) none 答案C 以下有关 pixelTop 属性与 top 属性的说法正确的是。D 选项 a) 都是 Location 对象的属性 b) 使用时返回值都是字符串 c) 都是返回以像素为单位的数值 d) 以上都不对 答案D 使用 open 方法打开具有浏览器工具条、地址栏、菜单栏的窗口下列选项正确的是D 选项 a) open(x.html,HI,toolbas1,scrollbars1,status1); b) open(HI,scrollbars1,location1,status1); c) open(x.html,statusyes,menubar1,location1); d) open(x.html,HI,toolbasyes,menubar1,location1); 答案D 下面关闭名为 mydiv 的层的代码正确的是C。 选项 a) document.getElementByIdx_x_x_x(mydiv).style.displaynone; b) document.getElementByIdx_x_x_x(mydiv).style.displaynone; c) document.getElementByIdx_x_x_x(mydiv).style.displaynone; d) document.getElementByIdx_x_x_x(mydiv).style.displaynone; 答案C 为什么要使用 div CSS 布局 答案 形式与内容分离通过 CSS 控制布局和样式使 HTML 只关注内容。减少页面代码通过样式表集中管理样式减少重复代码。提高页面加载速度统一的样式表可以被浏览器缓存减少资源加载时间。结构清晰有利于 SEO语义化的 HTML 结构有助于搜索引擎优化。缩短改版时间布局更方便通过修改 CSS 即可实现整体布局的调整简化维护工作。一次设计多次使用统一的 CSS 样式可以被多个页面复用提升开发效率。 Block 元素的特点是什么? 哪些元素默认为 Block 元素 特点 总是在新行上开始。宽度默认占满其父容器的整个可用宽度除非明确设置。可以设置宽高、内边距、外边距等。 默认的 Block 元素 div、p、h1-h6、ul、ol、li、form、table、tr、td Inline 元素的特点是什么? 哪些元素属于 Inline 元素? 特点 和其他元素在同一行内显示。宽度和高度不可设置只能由内容决定。不能设置上下边距和内边距的垂直方向。 属于 Inline 元素的有 span、a、img、em、strong、input、textarea、select、label JavaScript 中表达式 parseInt(X8X8) parseFloat(8) 的结果是什么?C 选项 a) 8 8 b) 88 c) 16 d) “8” ‘8’ 答案C 解释 parseInt(X8X8)由于字符串以非数字字符 X 开头返回 NaN。parseFloat(8)返回 8。NaN 8结果为 NaN。正确答案应为 NaN可能题目有误。 String 对象的方法不包括哪一个C 选项 a) charAt() b) substring() c) length d) toUpperCase() 答案C 解释 length 是 String 对象的属性不是方法。其他选项都是 String 对象的方法。 关于 setTimeout(check, 10) 中说法正确的是D 选项 a) 程序循环执行 10 次 b) check 函数每 10 秒执行一次 c) 10 作为参数传给函数 check d) check 函数每 10 毫秒执行一次 答案D 解释 setTimeout(check, 10) 会在 10 毫秒后执行一次 check 函数。要循环执行需要使用 setInterval 或在回调中再次调用 setTimeout。 以下哪个单词不属于 JavaScript 关键字C 选项 a) with b) parent c) class d) void 答案C 解释 class 是 ES6 引入的关键字用于定义类。parent 在 JavaScript 中不是关键字是一个全局变量属性。 前端开发工程师面试知识点大纲
HTML CSS
对 WEB 标准的理解浏览器内核差异兼容性与 hack 技术CSS 基本功布局、盒子模型、选择器优先级及使用HTML5、CSS3、移动端适应
JavaScript
数据类型、面向对象、继承、闭包插件、作用域、跨域原型链、模块化、自定义事件内存泄漏、事件机制、异步装载回调模板引擎、Node.js、JSON、AJAX 等
其他
HTTP、安全、正则、优化、重构响应式设计、移动端开发、团队协作可维护性、SEO、用户体验设计UED、架构设计、职业生涯规划
必须掌握的知识点
DOM 结构节点关系与操作。DOM 操作添加、移除、移动、复制、创建和查找节点。事件事件使用及 IE 和 DOM 事件模型差异。XMLHttpRequest完整的 GET 请求执行及错误检测。严格模式与混杂模式触发方式及区别。盒模型外边距、内边距和边框的关系IE8 以下盒模型差异。块级元素与行内元素CSS 控制与合理使用。浮动元素使用方法、问题与解决方案。HTML 与 XHTML区别及使用建议。JSON作用、用途及设计结构。 其他面试题
百度
内容略参考上文百度部分
腾讯
内容略参考上文腾讯部分 前言
本文总结了一些优质的前端面试题多数源于网络初学者阅后也要用心钻研其中的原理重要知识需要系统学习透彻学习形成自己的知识链。万不可投机取巧只求面试过关是错误的
面试有几点需注意
题目类型技术视野、项目细节、理论知识题算法题开放性题案例题。进行追问确保深入理解应对关联知识的扩展。态度重要是否愿意与面试官共事展现职业素养。激情驱动对 Web 开发充满热情持续学习和自我提升。
面试技巧
少量提问每个问题深入考察多个知识点提升区分度和深度。解决问题能力展示多种解决方案理解底层机制。有激情对所做工作充满热情主动学习新技术。基础知识扎实掌握核心知识点确保能独立完成工作。
总结
通过掌握上述知识点和面试技巧前端工程师候选人可以更好地准备面试展示自己的技术能力和职业素养提升面试通过率。
参考资料
Ant Design Tree 组件文档React 官方文档 - 状态提升React Hooks 使用指南MDN Web Docs: CSS Grid LayoutCSS-Tricks: A Complete Guide to GridGrid by ExampleCan I Use: CSS Grid
