前端面试集锦之一

常见问题:

1你在昨天/本周学到了什么?

2编写代码的哪些方面能够使你兴奋或感兴趣?

3你最近遇到过什么技术挑战?你是如何解决的?

4在制作一个网页应用或网站的过程中,你是如何考虑其UI、安全性、高性能、SEO、可维护性以及技术因素的?

    一 UI

         界面美观,要有个性,考虑用户使用的逻辑要简单,用起来舒适自由。使用习惯要符合大部分用户的习惯,比如少让用户输入,采用选择的方式,提供搜索和提示功能。

    二 安全性:

          1、对输入进行有效性验证(非法字符,特殊字符)如PHP中的方法htmlspecialchars()将特殊字符(>)转化为html实体,trim()去掉用户输入的不必要字符,stripslashes()去掉用户输入的反斜杠等等。

           2、对交互操作进行身份验证和授权

           3、异常错误处理(向用户反馈单额错误提示不要让攻击者分析出一些网络环境和配置)

           4、缓冲区溢出;

           5、注入攻击:注入攻击是应用违背了“数据与代码分离原则”导致的结果。它有两个条件:一是用户能够控制数据的输入;二是代码拼凑了用户输入的数据,把数据当作代码执行了。

           6、不安全的存储;不要使用单独类似MD5或SHA加密策略,在进行散列密码值时,使用作料或多种作料以防止彩虹攻击。对于短密码,采 用一个短散列算法处理,例如:bcrypt或scrypt。

    三 高性能:

           1、DNS(域名系统)负载均衡;在DNS中为多个IP地址配置同一个域名如:www.baidu.com,因而查询这个域名的客户机将得到其中一个地址,从而使得不同的客户访问不同的服务器,达到负载均衡的目的,从而减小服务器端的压力。DNS负载均衡是一种简单而有效的方法,但是它不能区分服务器的差异,也不能反映服务器的当前运行状态。

            2、HTTP重定向(通过使客户端重定向,来分散和转移请求压力,比如一些下载服务通常都有几个镜像服务器);301重定向是网址重定向最为可行的一种办法,seo最为友好。

            3、分布式缓存;

            4、数据库扩展:读写分离,垂直分区,水平分区

            5、反向代理负载均衡:让代理服务器将请求均匀转发给多台内部Web服务器之一上,从而达到负载均衡的目的。这种代理方式与普通的代理方式有所不同,标准代理方式是客户使用代理访问多个外部Web 服务器,而这种代理方式是多个客户使用它访问内部Web服务器,因此也被称为反向代理模式。

使用反向代理的好处是,可以将负载均衡和代理服务器的高速缓存技术结合在一起,提供有益的性能,具备额外的安全性,外部客户不能直接访问真实的服务器。并且实现起来可以实现较好的负载均衡策略,将负载可以非常均衡的分给内部服务器,不会出现负载集中到某个服务器的偶然现象。

    四SEO:

           选好关键字,描述语言,修饰性图片换成文本,合理使用h1-h6,对图片添加alt属性,链接添加target属性。

    五可维护性:

            代码是否容易被理解,是否容易被修改和增加新的功能,当出现问题时是否能快速定位到问题代码。

5请谈谈你喜欢的开发环境。

6你最熟悉哪一套版本控制系统?

7你能描述当你制作一个网页的工作流程吗?

       内容分析:分清展现在网络中内容的层次和逻辑关系

       结构设计:写出合理的html结构代码

       布局设计:使用html+css进行布局

       样式设计:首先要使用reset.css

       交互设计:鼠标特效

       行为设计:js代码,ajax页面行为和从服务器获取数据

       测试兼容性;优化性能。

8假若你有5个不同的样式文件(stylesheets),整合进网站的最好方式是?

       根据class命名规则写样式,这样样式不会冲突,提取公共的样式,进行合并,非公共的单独拎出来。然后打包压缩一下就行了,若每个文件都很大,就需要分模块加载。

9你能描述渐进增强(progressive enhancement)和优雅降级(graceful degradation)之间的不同吗?

 .transition{

-webkit-transition:all .5s;

-moz-transition:all .5s;

-o-transition:all .5s;

transition:all .5s;

}

.transition{

transition:all .5s;

-o-transition:all .5s;

-moz-transition:all .5s;

-webkit-transition:all .5s;

}

            渐进增强(progressive enhancement):针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。(从被所有浏览器支持的基本功能开始,逐步地添加那些只有新式浏览器才支持的功能,向页面添加无害于基础浏览器的额外样式和功能。当浏览器支持时,它们会自动地呈现出来并发挥作用。)

            优雅降级(graceful degradation):一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。(Web站点在所有新式浏览器中都能正常工作,如果用户使用的是老式浏览器,则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题,针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案,使之在旧式浏览器上以某种形式降级体验却不至于完全失效。)

             区别:优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的、能够起作用的版本开始,并不断扩充,以适应未来环境的需要。

10你如何对网站的文件和资源进行优化?

              1. 确保网站信息描述全站统一

              2. 清楚网站内部无效重复的信息

              3. 让用户能迅速准确的在网站查看相关内容

              4. 优化内部结构便于搜索引擎的理解和收录

       为了达到以上这几个效果,我们一般会采取几种方法:关键词优化,网站页面优化,内部结构信息优化和如何提高网页的友好度和用户体验效果。

11浏览器同一时间可以从一个域名下载多少资源?

o有什么例外吗?

12请说出三种减少页面加载时间的方法。(加载时间指感知的时间或者实际加载时间)

           1.减少HTTP请求;

           2.合并压缩Js/css文件;

           3.使用缓存manifest;

           4.服务器端开启gzip;

           5.使用CDN,用户可以就近获取所需要的资源,访问速度有保障,稳定性也有保障

           6.外部JS和CSS放底下

            7.尽可能少的操作DOM,某些需要重复操作的DOM可以放变量里

13如果你参与到一个项目中,发现他们使用Tab来缩进代码,但是你喜欢空格,你会怎么做?

           1、建议项目使用EditorConfig之类的规范

            2、为了保持风格的一致性,保持原有

            3、直接使用vim里的retab命令将所有的tab转换成空格

14请写一个简单的幻灯效果页面。

15如果今年你打算熟练掌握一项新技术,那会是什么?

16请谈谈你对网页标准和标准制定机构重要性的理解。

        网页标准和标准制定机构都是为了能让web发展的更‘健康’,首先约束浏览器开发者遵循统一的标准,其次约束网站开发者,这样降低开发难度,开发成本,SEO也会更好做,也不会因为滥用代码导致各种BUG、安全问题,最终提高网站易用性。

          w3c存在的意义就是让浏览器兼容性问题尽量小,首先是他们对浏览器开发者的约束,然后是对开发者的约束。

17什么是FOUC (无样式内容闪烁)?你如何来避免FOUC?

          如果使用import方法对CSS进行导入,会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC。

           原因大致为:

                   1,使用import方法导入样式表。

                    2,将样式表放在页面底部

                    3,有几个样式表,放在html结构的不同位置。

               其实原理很清楚:当样式表晚于结构性html加载,当加载到此样式表时,页面将停止之前的渲染。此样式表被下载和解析后,将重新渲染页面,也就出现了短暂的花屏现象。

           解决方法:

                       使用LINK标签将样式表放在文档HEAD中。

18请解释什么是ARIA和屏幕阅读器(screenreaders),以及如何使网站实现无障碍访问(accessible)。

         ARIA 为Web app提供满足用户不同需求的解决方案。建设起用户和软件之间的桥梁。

         新的HTML5标准中增加 aria-* 的标签属性,全称Accessible Rich Internet Application。与role标签属性配合使用。

         role属性表示一个非标准的tag的实际作用。比如用div做button,那么设置div 的 role=“button”,辅助工具就可以认出这实际上是个button。而aria-*的作用就是描述这个tag在可视化的情境中的具体信息。

          最简单的应用比如,

           < div role=”checkbox” aria-checked=”checked”>

           辅助工具就会知道,这个div实际上是个checkbox的角色,为选中状态。

19请解释CSS动画和JavaScript动画的优缺点。

           1. css3动画只兼容Ie10+,js动画几乎兼容所有浏览器;

            2.js动画更灵活,css3动画更简单

            3.js动画复用性高

            4.时间尺度上,css动画粒度比较粗,js动画可以更精细;

            5.帧速不好的浏览器CSS动画可以做到优雅降级,js代码还需要写额外的代码

            6.在某些条件下,css动画性能优于JS动画;(webkit内核的浏览器,js执行昂贵的任务,不引起layout和repaint情况下)

            7.css3有天然的时间支持如(animationENd和transitionEnd)

20什么是跨域资源共享(CORS)?它用于解决什么问题?

           当使用ajax跨域请求时,浏览器报错:XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin.肯定是跨域的问题,如果用jsonp或者proxy的方式进行修改的话未免需要太大的工程量,所以采用CORS这种比较简单高效的技术。相比JOSP的方式,CORS更为高效。JSONP由于它的原理只能实现GET请求,而CORS支持所有类型的HTTP请求。使用CORS,可以使用普通的ajax实现跨域

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,233评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,013评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,030评论 0 241
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,827评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,221评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,542评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,814评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,513评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,225评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,497评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,998评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,342评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,986评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,812评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,560评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,461评论 2 266

推荐阅读更多精彩内容

  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    程序员poetry阅读 113,833评论 24 450
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,611评论 4 59
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,279评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,689评论 0 2
  • 晚上回到家时,爸爸已做好饭了,今晚做的是羊肉蔬菜汤,嘿嘿,就好这口,赶紧吃饭。在饭桌上,一家人聊着,奶奶说这次...
    轩萌妈阅读 194评论 0 0