常见的前端开发面试题(附答案)DreamTraveler

1.讲讲输入完网址按下回车,到看到网页这个过程中发生了什么

a.域名解析

b.发起TCP的3次握手

e.浏览器解析html代码,并请求html代码中的资源

f.浏览器对页面进行渲染呈现给用户

2.谈谈你对前端性能优化的理解

a.请求数量:合并脚本和样式表,CSSSprites,拆分初始化负载,划分主域

b.请求带宽:开启GZip,精简JavaScript,移除重复脚本,图像优化,将icon做成字体

c.缓存利用:使用CDN,使用外部JavaScript和CSS,添加Expires头,减少DNS查找,配置ETag,使AjaX可缓存

d.页面结构:将样式表放在顶部,将脚本放在底部,尽早刷新文档的输出

e.代码校验:避免CSS表达式,避免重定向

3.前端MV*框架的意义

早期前端都是比较简单,基本以页面为工作单元,内容以浏览型为主,也偶尔有简单的表单操作,基本不太需要框架。

随着AJAX的出现,Web2.0的兴起,人们可以在页面上可以做比较复杂的事情了,然后前端框架才真正出现了。

如果是页面型产品,多数确实不太需要它,因为页面中的JavaScript代码,处理交互的绝对远远超过处理模型的,但是如果是应用软件类产品,这就太需要了。

长期做某个行业软件的公司,一般都会沉淀下来一些业务组件,主要体现在数据模型、业务规则和业务流程,这些组件基本都存在于后端,在前端很少有相应的组织。

从协作关系上讲,很多前端开发团队每个成员的职责不是很清晰,有了前端的MV框架,这个状况会大有改观。

之所以感受不到MV*框架的重要性,是因为Model部分代码较少,View的相对多一些。如果主要在操作View和Controller,那当然jQuery这类库比较好用了。

4.请简述盒模型

IE6盒子模型与W3C盒子模型。

文档中的每个元素被描绘为矩形盒子。盒子有四个边界:外边距边界margin,边框边界border,内边距边界padding与内容边界content。

CSS3中有个box-sizing属性可以控制盒子的计算方式,

content-box:padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和。(W3C盒子模型)

border-box:padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值。(IE6盒子模型)

5.请你谈谈Cookie的弊端

a.每个特定的域名下最多生成的cookie个数有限制

b.IE和Opera会清理近期最少使用的cookie,Firefox会随机清理cookie

c.cookie的最大大约为4096字节,为了兼容性,一般不能超过4095字节

d.安全性问题。如果cookie被人拦截了,那人就可以取得所有的session信息。

6.浏览器本地存储

在HTML5中提供了sessionStorage和localStorage。

sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁,是会话级别的存储。

localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

7.webstorage和cookie的区别

a.Cookie的大小是受限的

b.每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽

c.cookie还需要指定作用域,不可以跨域调用

d.WebStorage拥有setItem,getItem等方法,cookie需要前端开发者自己封装setCookie,getCookie

e.Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在,而WebStorage仅仅是为了在本地“存储”数据而生

f.IE7、IE6中的UserData通过简单的代码封装可以统一到所有的浏览器都支持webstorage

8.对BFC规范的理解

BFC全称是BlockFormattingContext,即块格式化上下文。它是CSS2.1规范定义的,关于CSS渲染定位的一个概念。

BFC是页面CSS视觉渲染的一部分,用于决定块盒子的布局及浮动相互影响范围的一个区域。

BFC的一个最重要的效果是,让处于BFC内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响。

利用BFC可以闭合浮动,防止与浮动元素重叠。

9.线程与进程的区别

a.一个程序至少有一个进程,一个进程至少有一个线程

b.线程的划分尺度小于进程,使得多线程程序的并发性高

c.进程在执行过程中拥有独立的内存单元,而多个线程共享内存,从而极大地提高了程序的运行效率

d.每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行,必须依存在应用程序中,由应用程序提供多个线程执行控制

e.多线程的意义在于一个应用程序中,有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用,来实现进程的调度和管理以及资源分配

a.尽量减少页面中重复的HTTP请求数量

b.服务器开启gzip压缩

c.css样式的定义放置在文件头部

d.Javascript脚本放在文件末尾

e.压缩合并Javascript、CSS代码

f.使用多域名负载网页内的多个文件、图片

11.你都使用哪些工具来测试代码的性能?

JSPerf,Dromaeo

12.你遇到过比较难的技术问题是?你是如何解决的?

13.你常使用的库有哪些?常用的前端开发工具?开发过什么应用或组件?

14.列举IE与其他浏览器不一样的特性?

a.IE的排版引擎是Trident(又称为MSHTML)

b.Trident内核曾经几乎与W3C标准脱节(2005年)

c.Trident内核的大量Bug等安全性问题没有得到及时解决

d.JS方面,有很多独立的方法,例如绑定事件的attachEvent、创建事件的createEventObject等

e.CSS方面,也有自己独有的处理方式,例如设置透明,低版本IE中使用滤镜的方式

15.什么叫优雅降级和渐进增强?

渐进增强progressiveenhancement:

针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级gracefuldegradation:

一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

区别:

a.优雅降级是从复杂的现状开始,并试图减少用户体验的供给

b.渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要

c.降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带

16.WEB应用从服务器主动推送Data到客户端有那些方式?

a.html5websoket

b.WebSocket通过Flash

d.XHRMultipartStreaming

e.不可见的Iframe

17.对前端界面工程师这个职位是怎么样理解的?

a.前端是最贴近用户的程序员,前端的能力就是能让产品从90分进化到100分,甚至更好

b.参与项目,快速高质量完成实现效果图,精确到1px;

c.与团队成员,UI设计,产品经理的沟通;

d.做好的页面结构,页面重构和用户体验;

e.处理hack,兼容、写出优美的代码格式;

f.针对服务器的优化、拥抱最新前端技术。

18.你在现在的团队处于什么样的角色,起到了什么明显的作用?

请自行根据自己情况做回答,这个没有统一标准答案。

19.你的优点是什么?缺点是什么?

请自行根据自己情况做回答,这个没有标准答案。

20.如何管理前端团队

21.最近在学什么?能谈谈你未来3,5年给自己的规划吗?

22.平时如何管理你的项目?

a.先期团队必须确定好全局样式(globe.css),编码模式(utf-8)等;

b.编写习惯必须一致(例如都是采用继承式的写法,单样式都写成一行);

c.标注样式编写人,各模块都及时标注(标注关键样式调用的地方);

d.页面进行标注(例如页面模块开始和结束);

e.CSS跟HTML分文件夹并行存放,命名都得统一(例如style.css);

f.JS分文件夹存放命名以该JS功能为准的英文翻译。

g.图片采用整合的images.pngpng8格式文件使用尽量整合在一起使用方便将来的管理

23.说说最近最流行的一些东西吧?常去哪些网站?

CSDN、SegmentFault、php.net、MDN、css参考手册、iconfont、

underscore、github、Bootstrap、W3Shool、W3Cplus、caniuse

24.请解释一下JavaScript的同源策略

同源策略指的是:协议,域名,端口相同,同源策略是一种安全协议。

25.AMD和CMD规范的区别?

AMD提前执行依赖-尽早执行,requireJS是它的实现

CMD按需执行依赖-懒执行,seaJS是它的实现

26.网站重构的理解

重构:在不改变外部行为的前提下,简化结构、添加可读性,而在网站前端保持一致的行为。

a.使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)

b.对于移动平台的优化,针对于SEO进行优化

c.减少代码间的耦合,让代码保持弹性

d.压缩或合并JS、CSS、image等前端资源

27.浏览器的内核分别是什么

IE浏览器的内核Trident;

Mozilla的Gecko;

Chrome的Blink(WebKit的分支);

Opera内核原为Presto,现为Blink;

28.请介绍下cache-control

每个资源都可以通过Cache-ControlHTTP头来定义自己的缓存策略

Cache-Control指令控制谁在什么条件下可以缓存响应以及可以缓存多久

Cache-Control头在HTTP/1.1规范中定义,取代了之前用来定义响应缓存策略的头(例如Expires)。

29.前端页面有哪三层构成,分别是什么?作用是什么?

a.结构层:由HTML或XHTML之类的标记语言负责创建,仅负责语义的表达。解决了页面“内容是什么”的问题。

b.表示层:由CSS负责创建,解决了页面“如何显示内容”的问题。

c.行为层:由脚本负责。解决了页面上“内容应该如何对事件作出反应”的问题。

30.知道的网页制作会用到的图片格式有哪些?

png-8,png-24,jpeg,gif,svg

Webp:谷歌(google)开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3,并能节省大量的服务器带宽资源和数据空间。FacebookEbay等知名网站已经开始测试并使用WebP格式。

Apng:全称是“AnimatedPortableNetworkGraphics”,是PNG的位图动画扩展,可以实现png格式的动态图片效果。04年诞生,但一直得不到各大浏览器厂商的支持,直到日前得到iOSsafari8的支持,有望代替GIF成为下一代动态图标准。

31.一次js请求一般情况下有哪些地方会有缓存处理?

a.浏览器端存储

b.浏览器端文件缓存

c.HTTP缓存304

d.服务器端文件类型缓存

e.表现层&DOM缓存

32.一个页面上有大量的图片(大型电商网站),加载很慢,你有哪些方法优化这些图片的加载,给用户更好的体验[性能优化]。

a.图片懒加载,滚动到相应位置才加载图片。

b.图片预加载,如果为幻灯片、相册等,将当前展示图片的前一张和后一张优先下载。

c.使用CSSsprite,SVGsprite,Iconfont、Base64等技术,如果图片为css图片的话。

d.如果图片过大,可以使用特殊编码的图片,加载时会先加载一张压缩的特别厉害的缩略图,以提高用户体验。

THE END
1.优点和缺点自我评价(通用10篇)优点和缺点自我评价(通用10篇) 在日常的学习、工作、生活中,我们都需要频繁使用自我评价,自我评价在很大程度上还会自我督促,促使我们维持自我的一致性。怎么写自我评价才能避免踩雷呢?下面是小编为大家整理的优点和缺点自我评价,欢迎大家分享。 优点和缺点自我评价 1 https://www.yjbys.com/jianli/ziwopingjia/641137.html
2.自身优点缺点自我评价(通用18篇)无论是在学校还是在社会中,我们很多时候都不得不用到自我评价,自我评价会促使我们进行自我验证,从而为自我发展提供动力。你知道自我评价怎样写才规范吗?下面是小编为大家收集的自身优点缺点自我评价,仅供参考,希望能够帮助到大家。 自身优点缺点自我评价 1 我的https://www.ruiwen.com/ziwopingjia/4257810.html
3.“痛肝”《黑神话:悟空》几十小时后,让我们冷静谈谈它的优缺点不论你喜欢与否,在如今的游戏市场上,类魂ARPG已经成了一种偏主流的游戏类型。 从早些年间的《堕落之王》《迸发》《致命躯壳》,到近两年涌现的《匹诺曹的谎言》《堕https://www.thepaper.cn/newsDetail_forward_28503326
4.2022软件测试面试题大全(整理版)1000+面试题附答案详解,最全面1、结构化程序设计和面向对象程序设计各自的特点及优缺点是什么? 2、Python中的可变对象和不可变对象? 3、Python中is和==的区别? 4、Python的魔法方法? 5、面向对象中怎么实现只读属性? 6、谈谈你对面向对象的理解? selenium 面试题 1、什么是Selenium? https://maimai.cn/article/detail?fid=1700715497&efid=tA7eC1eCPIrzCZI7LISXLQ
5.[YellowStone]:分集剧评第四季优缺点+谈谈第四季问题出在哪[E10本文分为三个部分:第一部分:分集剧评第四季优缺点[E10完结]第二部分:前三季黄石三部整体评价第三部分:从美剧黄石四季看美州西进运动和牛仔文化关于评论区出现一部分其他影视作品饭圈粉丝骚扰的回复:这几天发现有一部分其他影视剧饭圈的粉丝们来黄石影评下面故意辱骂和哗众取宠,攻击煽风点火的留言,我奉劝这一部分https://movie.douban.com/review/14035505
6.面试问题及答案15篇12.在上大学前你做什么? 13.你打算在此工作多久? 14.你对工作时间以外的超时工作怎么看? 15.请说一说本人的职业观? 16.你决意离职的动机是什么? 17.你向其它公司申请了吗? 18.你认为自己的英语实力如何? 19.你有资格证和特殊技能吗? 20.你认为自己的性格如何? 21你的优点和缺点是什么? 22.学生时代印http://mip.pincai.com/article/2385908.htm
7.strutshibernatespringmybatisspringboot等面试题5、谈谈Struts中的Action servlet。 6、Struts优缺点 优点: 1. 实现MVC模式,结构清晰,使开发者只关注业务逻辑的实现. 2.有丰富的tag可以用,Struts的标记库(Taglib),如能灵活动用,则能大大提高开发效率 3.页面导航 使系统的脉络更加清晰。通过一个配置文件,即可把握整个系统各部分之间的联系,这对于后期的维护有着https://blog.51cto.com/teayear/5085523
8.考研复试问你的优点和缺点是什么怎么回答?具体分析无论回答优点还是缺点,都要注意保持自信、真诚和积极的态度。同时,尽量避免说出过于消极或过于自负的话,而是展现出你的自我认知和成长潜力。 本文内容整理于网络,仅供参考。 关于考研复试问你的优点和缺点是什么怎么回答的内容,小编就给大家简单介绍到这里了。如果还有其他考研相关内容想要了解的,就请登录高顿考研频道看https://www.gaodun.com/kaoyan/1608028.html
9.Java程序员必须熟记的微服务面试题(含答案)7、微服务的优缺点分别是什么?说下你在项目开发中碰到的坑? 优点 每个服务足够内聚,足够小,代码容易理解这样能聚焦一个指定的业务功能或业务需求 开发简单、开发效率提高,一个服务可能就是专一的只干一件事。 微服务能够被小团队单独开发,这个小团队是2到5人的开发人员组成。 https://www.jianshu.com/p/41b7ad10aca4
10.浅谈递归算法优缺点递归算法(recursion algorithm)在计算机科学中,它是一种解决问题的方法,通过重复将问题分解为类似的子问题。绝大多数编程语言支持函数的自调用可以通过调用自己来递归。当然,递归算法不是万能的,它也有一些缺点。我们来谈谈这篇文章递归算法的优缺点。 一、递归算法的优点: https://www.tulingxueyuan.cn/tlzx/jsp/1251.html
11.自我鉴定优点第六,我的语言表达能力强,普通话说的好,我觉得这个特长是做好公务员工作必备的基本功之一自我评价优点及缺点自我评价优点及缺点。 3、能谈谈你的缺点吗? 第一,我不太善于过多的交际,尤其是和陌生人交往有一定的难度。这虽然是缺点,但是说明你交友慎重; https://www.liuxue86.com/k_%E8%87%AA%E6%88%91%E9%89%B4%E5%AE%9A%E4%BC%98%E7%82%B9/
12.面试问答太多记不住?这3个技巧让你举一反三,从容应对可以谈谈是因为考虑到个人的发展,自己想在工作中提升一个更高的平台。 5. 谈谈你的优缺点? 切忌 过于追求完美; 工作狂; 我没有缺点; 我总是处理不好自己的感情生活; 我受不了太大的压力; 正确做法 优点要与工作岗位相关; 优点要简明,直指重点; https://blog.csdn.net/weixin_43664270/article/details/105690929
13.你觉得自己的优点和缺点是什么+如果有的话如何改正缺点:性格内向,不太主动与人沟通;有时太在意别人的看法和评价,而忽略了自己;情感较脆弱,有自怜倾向 01、培养主动开口的微习惯一般来说,由于性格内向不会说话,我们都会习惯性地避免与人交流,甚至躲着任何需要交流的可能性,宁愿自己宅着。然而,你越是逃避,你就越会陷入不会聊天的怪圈中,永远都https://wen.baidu.com/question/721851202539976285.html
14.个人工作总结优点缺点(通用15篇)时间乘着年轮循序往前,一段时间的工作已经结束了,过去这段时间的辛苦拼搏,一定让你在工作中有了更多的提升!这也意味着,又要准备开始写工作总结了。工作总结怎么写才能发挥它最大的作用呢?下面是小编整理的个人工作总结优点缺点,希望能够帮助到大家。 个人工作总结优点缺点 篇1 https://www.yuwenmi.com/fanwen/gongzuo/502650.html
15.ChatGPT可以用来写论文吗?我们将研究如何用ChatGPT和其他人工智能工具写论文。我们还将研究使用ChatGPT的优点和缺点,并讨论为什么我们认为你仍然需要人情味来获得最佳结果。 以下是你将学到的内容: 使用ChatGPT写论文的优点和缺点 作弊、剽窃和ChatGPT 如何使用ChatGPT写好论文:5个提示 https://www.wbolt.com/can-chatgpt-write-essays.html
16.入党积极分子谈心谈话记录(精选15篇)审批通过后,你就成为一名预备党员。预备期以发展大会日期为准,并从入党当月开始算党费,要每月初及时向党支部交党费(每月0.2元)。正常的预备期是一年,这一年中要按照党员标准严格要求自己,按照发展会上党支部的决议来发扬优点,克服缺点,不断进步,定期向党支部提交思想汇报。预备期满之前,要向党支部提交转正申请书。https://www.hrrsj.com/wendang/qitafanwen/55994.html
17.面试官最爱问的20个经典面试题(附答案)三、你的缺点是什么 选择1-2条真实但不致命的普遍缺点,给出改进措施。千万不要故作谦虚挑大梁,也不要选择职业生涯中已经改正的老派缺点。最好的方法是选择一个小缺点,并围绕这个小缺点讲述改进历程,以体现自我管理与成长的能力。 回答示范:我个人的一个小缺点是有时候过于完美主义,花太多时间在细节上。比如做一https://news.gxrc.com/Article/Detail/37282
18.面试问题大全及答案大全系列文章(一)3) 在这三到五个优点之中, 精选出一两个和所申请职位最吻合的优点。 缺点认识自己的缺点是一个巨大的优点, 当HR问到你缺点的时候, 你的机会来了, 请快展示你的自知之明吧!你想把优点故意包装成缺点?比方说把”对工作负责”这个优点伪装成”对自己和他人要求过高?” 面试官会不屑一顾地批注: 这是我五年http://www.yjianli.com/?p=675