您的位置：360文档中心› 前端面试题及答案2020

前端面试题及答案2020

前端面试题及答案2020
前端面试题及答案2020

web前端面试试题（含答案）

一、先自我介绍一下,说一下项目的技术栈,以及项目中遇到的一些问题

二、从整体中,看你对项目的认识,框架的认识和自己思考。

三、项目中有没有遇到什么难点,怎么解决。

四、如果你在创业公司你怎么从0开始做(选择什么框架,选择什么构建工具)。

五、说一下你项目中用到的技术栈,以及觉得得意和出色的点,以及让你头疼的点,怎么解决的。

六、一个业务场景,面对产品不断迭代,以及需求的变动该怎么应对,具体技术方案实现。

七、你的学习来源是什么。

八、你觉得哪个框架比较好,好在哪里。

九、你觉得最难得技术难点是什么。

十、你见过的最好的代码是什么

十一、网站性能优化

1. http 请求方面,减少请求数量,请求体积,对应的做法是,对项目资源进行压缩,控制项目资源的dns 解析在2到4个域名,提取公告的样式,公共的组件,雪碧图,缓存资源,

2. 压缩资源,提取公共资源压缩,提取css ,js 公共方法

3. 不要缩放图片,使用雪碧图,使用字体图表(阿里矢量图库)

4. 使用CDN,抛开无用的cookie

5. 减少重绘重排,CSS属性读写分离,最好不要用js 修改样式,dom 离线更

新,渲染前指定图片的大小

6. js 代码层面的优化,减少对字符串的计算,合理使用闭包,首屏的js 资源加载放在最底部

十二、js 自定义事件实现

1. 原生提供了3个方法实现自定义事件

2. createEvent,设置事件类型,是html 事件还是鼠标事件

3. initEvent 初始化事件,事件名称,是否允许冒泡,是否阻止自定义事件

4. dispatchEvent 触发事件

十三、angular 双向数据绑定与vue数据的双向数据绑定

1. 二者都是MVVM 模式开发的典型代表

2. angular 是通过脏检测实现,angular 会将UI 事件,请求事件,settimeout 这类延迟,的对象放入到事件监测的脏队列,当数据变化的时候,触发$diget 方法进行数据的更新,视图的渲染

3. vue 通过数据属性的数据劫持和发布订阅的模式实现,大致可以理解成由3个模块组成,observer 完成对数据的劫持,compile 完成对模板片段的渲染,watcher 作为桥梁连接二者,订阅数据变化及更新视图

十四、get与post 通讯的区别

1. Get 请求能缓存,Post 不能

2. Post 相对Get 安全一点点,因为Get 请求都包含在URL 里,且会被浏览器保存历史纪录,Post 不会,但是在抓包的情况下都是一样的.

3. Post 可以通过request body来传输比Get 更多的数据,Get 没有这个技术

4. URL有长度限制,会影响Get 请求,但是这个长度限制是浏览器规定的,不是RFC 规定的

5. Post 支持更多的编码类型且不对数据类型限制

十五、有没有去研究webpack的一些原理和机制,怎么实现的

1. 解析webpack配置参数,合并从shell传入和webpack.config.js文件里配置的参数,生产最后的配置结果.

2. 注册所有配置的插件,好让插件监听webpack构建生命周期的事件节点,以做出对应的反应.

3. 从配置的entry入口文件开始解析文件构建AST语法树,找出每个文件所依赖的文件,递归下去.

4. 在解析文件递归的过程中根据文件类型和loader配置找出合适的loader用来对文件进行转换.

5. 递归完后得到每个文件的最终结果,根据entry配置生成代码块chunk.

6. 输出所有chunk到文件系统.

十六、ES6模块与CommonJS模块的差异

1. CommonJs 模块输出的是一个值的拷贝,ES6模块输出的是一个值的引用

2. CommonJS 模块是运行时加载,ES6模块是编译时输出接口

3. ES6输入的模块变量,只是一个符号链接,所以这个变量是只读的,对它进行重新赋值就会报错

十七、模块加载AMD,CMD,CommonJS Modules/2.0 规范

1. 这些规范的目的都是为了JavaScript 的模块化开发,特别是在浏览器端

的

2. 对于依赖的模块,AMD 是提前执行,CMD 是延迟执行

3. CMD 推崇依赖就近,AMD 推崇依赖前置

十八、浅拷贝和深拷贝的问题

1. 深拷贝和浅拷贝是只针对Object和Array这样的复杂类型的

2. 也就是说a和b指向了同一块内存,所以修改其中任意的值,另一个值都会随之变化,这就是浅拷贝

3. 浅拷贝, "Object.assign() 方法用于将所有可枚举的属性的值从一个或多个源对象复制到目标对象.它将返回目标对象

4. 深拷贝,JSON.parse()和JSON.stringify()给了我们一个基本的解决办法.但是函数不能被正确处理

Web前端开发笔试题集锦(已读)

Web前端开发笔试题集锦 HTML/CSS篇 1, 判断字符串是否是这样组成的，第一个必须是字母，后面可以是字母、数字、下划线，总长度为5-20 var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/; reg.test("a1a__a1a__a1a__a1a__"); 2，截取字符串abcdefg的efg var str = "abcdefg"; if (/efg/.test(str)) { var efg = str.substr(str.indexOf("efg"), 3); alert(efg); } 3，判断一个字符串中出现次数最多的字符，统计这个次数 //将字符串的字符保存在一个hash table中，key是字符，value是这个字符出现的次数 var str = "abcdefgaddda"; var obj = {}; for (var i = 0, l = str.length; i < l; i++) { var key = str[i]; if (!obj[key]) { obj[key] = 1; } else { obj[key]++; } } /*遍历这个hash table，获取value最大的key和value*/ var max = -1; var max_key = ""; var key; for (key in obj) { if (max < obj[key]) { max = obj[key]; max_key = key; } } alert("max:"+max+" max_key:"+max_key); 4，IE与FF脚本兼容性问题 (1) window.event： 表示当前的事件对象，IE有这个对象，FF没有，FF通过给事件处理函数传递事件对象 (2) 获取事件源

最新web前端面试题(及答案)

1、常用那几种浏览器测试？有哪些内核(Layout Engine)? 答： (Q1) 浏览器：IE，Chrome，FireFox，Safari，Opera。 (Q2) 内核：Trident，Gecko，Presto，Webkit。 2、说下行内元素和块级元素的区别？行内块元素的兼容性使用？（IE8 以下）答： (Q1) 行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。 块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行。 (Q2) 兼容性：display:inline-block;*display:inline;*zoom:1; 3、清除浮动有哪些方式？比较好的方式是哪一种？ 答： (Q1) （1）父级div定义height。 （2）结尾处加空div标签clear:both。 （3）父级div定义伪类:after和zoom。 （4）父级div定义overflow:hidden。 （5）父级div定义overflow:auto。 （6）父级div也浮动，需要定义宽度。 （7）父级div定义display:table。 （8）结尾处加br标签clear:both。 (Q2) 比较好的是第3种方式，好多网站都这么用。 4、box-sizing常用的属性有哪些？分别有什么作用？ 答： (Q1)box-sizing: content-box|border-box|inherit; (Q2)content-box:宽度和高度分别应用到元素的内容框。在宽度和高度 之外绘制元素的内边距和边框(元素默认效果)。 border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内 进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的 宽度和高度。 5、Doctype作用？标准模式与兼容模式各有什么区别? 答： (Q1) 告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不 存在或格式不正确会导致文档以兼容模式呈现。 (Q2) 标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防 止站点无法工作。 6、HTML5 为什么只需要写？

前端面试题大全(html篇)

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言。最主要的不同： (1)XHTML元素必须被正确地嵌套 (2)XHTML元素必须被关闭 (3)XHTML标签名必须用小写字母 (4)XHTML文档必须拥有根元素 2.什么是语义化的HTML html5的语义化是指用正确的标签包含正确的容，比如nav标签就应该包含导航条容 (1)直观的认识标签对于搜索引擎的抓取有好处，用正确的标签做正确的事情！ (2)html语义化就是让页面的容结构化，便于对浏览器、搜索引擎解析 (3)在没有CCS样式情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下和各个关键字的权重，利于SEO。 (4)使阅读源代码的人更容易将分块，便于阅读维护理解。 写一段语义的html代码(HTML5中新增加的很多标签如：

、