常见的前端开发面试题(附答案)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.网页设计需要了解的相关知识小的本身是一个平面设计人员,前一阵儿有一些空闲的时间,便在各个站长网上发布了贴子,大意是免费制作logo,以换取网站连接(相信很多人都看过),半个月的时间做了80多个个人站或企业的logo,认识到了许许多多的站长,他们人都很好,但是其中一些站长由于由于对美工知识过于匮乏,导致了诸如让我直接给图片加连接,把橙色当作http://www2.hnsyu.net/syxywlzx/jszc/wlxxaq/201012/t20101212_46968.html
2.豆瓣交互设计 算法 通信 神经网络 更多 新书速递 ···(更多) 世界上最丑的女 [波兰] 奥尔 免费试读 天堂主题公园 [美] 乔治· 免费试读 忍不住想打扰你 bibi园长 免费试读 十二月十日 [美] 乔治· 免费试读 原创数字作品 ···(更多) 盲警 8.60元 免费https://www.douban.com/
3.个人网站策划书你肯定看到现在许多提供免费服务的网站吧!什么免费空间、免费邮箱、免费网络硬盘等等,这些都是带去流量的最好方式,但是我们这里不是做专业的免费服务,所以不需要那么庞大,也不需要那么完整,这只是营销过程中的一个手段而已。 (4)网络适时促销活动 这种方式也能够很好的提高访问量,马上圣诞节要来了,我们可以精心制作一https://www.yjbys.com/cehuashu/3711305.html
4.河南省济源第一中学网站首页 网站首页 走进一中 走进一中 新闻中心 新闻中心 通知公告 通知公告 教学教研 教学教研 学生工作 学生工作 党群工作 党群工作 教育资源 图书馆 高考信息 下载专区 家校共育 家校共育 国际部 国际部 附属初中 附属初中 高招专栏 高招专栏 ? ? 全国https://www.hnjyyz.com/
5.搜搜更懂你? 2024 SOSO.COM / 京ICP证050897号 / 京ICP备11001839号-4 / 京公网安备11000002000025号https://soso.com/
6.家装网家装设计家装图片装修招标专业家庭装修网站家装网,专业家庭装修网站,最好的中国家装网。提供家装设计、家装图片、家装效果图、装修招标、施工与验收、装修样板房、家居风水以及家具、地板、瓷砖、橱柜、墙纸等家居建材选购相关内容,并提供大量的装修实例、3d模型及cad施工图免费下载,为企业、设计人员及装修业主http://www.jiazhuang6.com/
7.百姓网在百姓网,您可以免费查找本地各种新鲜的的二手物品交易、二手车买卖、房屋租售、宠物、招聘、兼职、求职、交友活动、生活服务信息。还能免费发布这些信息。http://www.baixing.com/
8.在线设计免费设计制作搞定平面设计设计什么,都毫不费力 不管是设计演示文稿,还是Logo和社交媒体的帖子,你不需要拥有专业的技能,在Canva可画的模板中获取灵感,几分钟就能做出想做的设计。 使用网页版 更方便 下载桌面应用 更稳定 创造各种设计 从名片到朋友圈照片,你可以用Canva可画做出任何类型的设计。我们的步骤指南会手把手地教你如何做出快捷又好https://www.canva.cn/create/
9.15个免费素材网站,总有一个你会用得上!无论是个人使用还是企业商用,都会遇到不知去哪找免费素材、找到了不知能否商用、用了不知是否会侵权等问题,明明标有“免费可商用”的字样,为何侵权问题还会屡见不鲜? 这篇文章精挑细选了15个免费素材网,内容涵盖插画、LOGO 、网页设计、图标、灵感采集等,每一个网站都详细标明了使用规范、版权说明及署名要求,实用https://www.digitaling.com/articles/748215.html
10.平面教程影视动画教程办公教程机械设计教程网站设计教程我要自学网-免费视频教程,提供全方位软件学习,有3D教程,平面教程,多媒体制作教程,办公信息化教程,机械设计教程,网站制作教程,电脑培训https://www.51zxw.net/
11.分享8个免费设计logo的网站!!。想开网店但不会自己设计l直播 放映厅 知识 游戏 二次元 音乐 美食 干货搜罗 粉丝22.9万获赞32.4万 分享8个免费设计logo的网站!!。想开网店但不会自己设计logo? 分享8个可一键免费生成logo的网站 特别适合新手小白学习使用,赶快码住! #logo设计#品牌设计#设计#干货分享#logohttps://www.douyin.com/note/7322382591254908210
12.hao123hao123是汇集全网优质网址及资源的中文上网导航。及时收录影视、音乐、小说、游戏等分类的网址和内容,让您的网络生活更简单精彩。上网,从hao123开始。https://www.hao123.com/
13.觅元素免费PNG素材觅元素专注于提供高质量版权素材图片免费下载的网站,提供优质png素材、高清背景素材、图片素材、设计素材,找高质量版权素材就来觅元素.http://51yuansu.com/
14.13个私人收藏的免费设计资源网站优设网作为一个设计师,做设计时需要用到不少审美优良的资源。但如果预算有限,去哪里找好的照片、好的图标、好的素材呢? 接下来就为大家介绍13个优秀的免费设计资源网站,赶紧收藏起来为你的设计项目锦上添花吧! 一、图片和视频类 一般来说,视觉比文字的冲击力要强。在这个奋力争取用户注意力的时代,如果你的照片不够「https://www.uisdc.com/13-free-design-resource-website
15.小灯泡设计好看的网站模板设计网站主题美化、小灯泡设计是一个关注前端开发、用户体验设计、HTML5、CSS3、Javascript的前端开发主题博客。https://www.veimoz.com/
16.不花冤枉钱!十款免费设计网站推荐跨平台:无论你是在什么设备上,都能使用 Gravit Designer 创造出令人惊艳的设计作品。 5.Behance Behance ,这是一个由Adobe运营的在线免费设计网站,允许设计师在全球范围内展示和发现创意作品,是全球最大的创意网络之一,设计师可以在这里展示和发现最新的创新作品。除了是优秀作品展示平台,Behance也常被作为寻找设计https://pixso.cn/designskills/design-websites-for-free/
17.大作网全球高清图片素材图片搜索网站大作设计网(www.bigbigwork.com)是专为设计师度身定制的设计灵感图片搜索,聚合全球知名设计网站。目前在库21.2亿高清图片、摄影照片。每日更新量在25万张以上免费版权图片,CC0图片素材。提供压缩图、AI扩大图、智能插件高效设计工具。整理建筑设计图、广告设计图、家居设计http://zly.bigbigwork.com/
18.10个免费的电商设计素材网站,设计师需要知道!知道的 10 个免费的电商设计素材网站分享,他们分别是:即时设计、Pinterest、iconfont、Unsplash、Ec Design、CartFrenzy、The stocks、Gratisography、Pexels、Rare Device,不花钱就能获得丰富的优质电商设计素材资源,也省去了我们在设计时要寻找电商设计素材所需要的大量时间和精力,可以让我们把注意力放到更重要的设计地方https://js.design/special/article/e-commerce-design-materials.html
19.精选设计导航必备设计网站大全一流影视导航是一家专注于收录高清影视站的网站,为用户提供高清、免费的优质影视网站,无论是高清免费在线观看,还是各种网盘下载,全部都可以找到。 花猫导航 花猫导航收录了设计师、日常办公、二次元、电商、学习教程、辅助工具等领域优质网站或服务,并结合收录了以相关网站或服务的教程类、科普类和资讯类的文章,为广https://hao.58pic.com/
20.56视频首页56网是中国原创视频网站,免费上传搞笑逗趣生活视频,观看优质丰富的特色节目,关注感兴趣的原创导演和美女解说,快速分享及评论互动。"https://www.56.com/