前端其它一些面试题

题目和答案来自于网络，不保证准确性！

1、对前端工程师这个职位你是怎么样理解的？

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

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

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

 d. 做好的页面结构，页面重构和用户体验；

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

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

2、一次完整的HTTP事务是怎样的一个过程？

 基本流程：

 a. 域名解析

 b. 发起TCP的3次握手

 c. 建立TCP连接后发起http请求

 d. 服务器端响应http请求，浏览器得到html代码

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

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

3、 说说你对WEB标准以及W3C的理解与认识。

（1）web标准规范要求，书写标签必须闭合、标签小写、不乱嵌套，可提高搜索机器人对网页内容的搜索几率。--- SEO

（2）建议使用外链css和js脚本，从而达到结构与行为、结构与表现的分离，提高页面的渲染速度，能更快地显示页面的内容。

（3）样式与标签的分离，更合理的语义化标签，使内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件， 从而降低维护成本、改版更方便

（4）不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性.

4、解释下表现与数据分离

 就是类似MVC结构；

 html控制结构，css控制表现，js的数据来联系表现和结构；

 实现三者分离 又相互联系。对于网页的数据更新、维护、以及改版很有帮助。

5、请说出三种减少页面加载时间的方法（加载时间指感知的时间或者实际加载时间）

 1）减少http请求（合并文件、合并图片）

 2）优化图片文件，减小其尺寸，特别是缩略图，

 3）压缩Javascript、CSS代码

 4）网址后面加上“/”:对服务器而言，不加斜杠服务器会多一次判断的过程，加斜杠就会直接返回网站设置的存放在网站根目录下的默认页面。

6、一个网站的首页图片很多，导致页面打开较慢，你有什么优化方案

    1）自己网速一定的情况下，图片越小加载速度越快。用PS把使用的图片处理一下，在不失真的情况下，把图片另存为WEB所用格式，这样图片明显比原来小很多，加载速度也就变快了。

    2）按需分页延迟加载方法加载。图片太多时，可以分页或是下拉加载，减小请求数量。

    3）等待图片加载完毕整体显示该页面（需要做一个加载的页面，判断所有图片加载完毕之后关闭加载页面）。

7、什么是前端工程师？与后端工程师的区别？

   前端工程师就是指做静态网页的工程师：

  （1）、广义的前端分为三种：安卓工程师、ios工程师、web前端工程师。

  （2）、狭义的前端指的是web前端工程师，web前端工程师指的是做静态的PC端和手机端静态网页的工程师。

   通俗地说，用户通过浏览器看到的，操作的都是前端范围，服务端数据的处理属于后端。

8、什么是静态网页？什么叫做动态网页？

    （1）、静态网页：没有数据交互的网页，没有数据库参与，没有服务器端数据的加载。比如静态网页就是只有html+css+JavaScript做成的网站。

    （2）、动态网页：有后台数据参与的网页，网页中的数据是从数据库取的，需要有后台逻辑的支持。比如动态网页就是jsp页面（后台语言是java）、asp页面（后台语言是asp.net）。

9、前端语言有哪些？后端语言有哪些？

    (1)、前端语言：HTML、css、javascript。

    (2)、后端语言（服务器端语言）：php、java、asp.net。最近新出的node.js

10、做一个网站的团队都需要哪些人？

   （1）、产品经理：设计这个产品，通常就是了解用户的网站需求，画原型图。

   （2）、项目经理：通常是对整个产品有一个整理管理和负责，通常是会代码技术的人来构建整个网站的代码框架，以后网站实现的全面管理。

   （3）、UI设计师，通过原型图画psd设计图的。

   （4）、前端工程师，根据设计图来做静态网页，可能是原生app的IOS和安卓工程师，或者web端的web前端工程师。

   （5）、后端工程师，通常就是做java、asp.net、php的工程师来写后端逻辑的工程师。

11、你怎么来实现页面设计图，你认为前端应该如何高质量完成工作?

 首先划分成头部、body、脚部； 实现效果图是最基本的工作，精确到2px；与设计师，产品经理的沟通和项目的参与做好的页面结构，页面重构和用户体验处理hack，兼容、写出优美的代码格式针对服务器的优化。

12、著名的前端框架都有哪些的呢？

 布局框架：bootstrap、easy UI等。

 Js动效框架：jquery、angular.js等。

13、做一个网页设计师或者前端工程师，平常访问学习的IT网站都有哪些？

（1）、W3School 

（2）、菜鸟教程

（3）、源码之家(相似的还有A5、站长之家)

（4）、csdn（博客）

（5）、前端网

（6）、我要自学网

（7）、慕课网

（8）、百度

14、切图工作是UI设计师来做？还是前端工程师来做？

   对于app工程师，也就是ios和Android工程师，大多由UI设计师来完成切图。

   对于web前端工程师，也就是PC端、浏览端，大多有web前端工程师自己完成切图。

15、UI设计师需要会使用的工具的简称都有哪些？

   以下一些工具的简称，大家应该有一定的了解，以免被问到咱们只知道简称。

 （1）、AI (adobe illustrator)基于矢量的图形制作软件

 （2）、PS(adobe Photoshop)图像处理软件。

 （3）、DW(Adobe Dreamweaver)网页编辑器

 （4）、AE(Adobe After Effects)一款图形视频处理软件

 （5）、flash（Adobe Flash）二维动画软件

 （6）、Axure（Axure RP）快速原型设计工具

 （7）、墨刀（MockingBot）移动端原型工具

 （8）、Fireworks网页作图软件

16、什么是网页三剑客？

     网页三剑客，是一套强大的网页编辑工具，最初是由Macromedia公司开发出来的。由Dreamweaver，Fireworks，Flash三个软件组成，俗称网页三剑客。

Dreamweaver 是一个“所见即所得”的可视化网站开发工具，主要用于动态网页和静态网页的开发；Fireworks主要是用于对网页上常用的jpg、gif的制作和处理，也可用于制作网页布局；Flash主要用来制作动画，现推出Flash平台，可预见有极好的前景。

17、怎么调试网页代码？怎么查看网页源代码？

（1）、按键盘上的F12，打开开发者调试工具；

（2）、鼠标右键查看页面源代码。

18、UI设计师的工作内容是什么？

（1）、负责软件界面的美术设计、创意工作和制作工作；

（2）、根据各种相关软件的用户群，提出构思新颖、有高度吸引力的创意设计；

（3）、对页面进行优化，使用户操作更趋于人性化；

（4）、维护现有的应用产品；

（5）、收集和分析用户对于GUI的需求。

19、切图工程师、前端工程师、UI设计师、美工、网页设计师区别是什么？

   （1）、UI设计师俗称美工，不过UI设计师工作高端、名字大气、工资上档次，不过大多公司都称呼UI为美工，你也不要介意的，不管他们怎么称呼的，反正就是做网站设计图的就OK，别人怎么称呼不重要的了，只要你拿了高工资就是UI设计师了：

    UI的主要任务是设计。了解用户的意图，分析网站配色，基本布局。绘制出一个网站效果图。 UI需要掌握的知识体系应该包括网页设计，UI（User Interface）用户界面人机交互、操作逻辑、界面美观的整体设计，UED（user experience design）用户体验设计--简单来说就是如何使得网站更加便于交互。

   （2）、前端开发：

    美工在完成设计效果图之后，由前端开发人员将其制作成为适合浏览器查看的HTML页面。

    由于现在移动互联网的大规模流行，加上各个不同厂商的浏览器的激烈竞争，前端开发的主要任务简单来说就是使网页在不同浏览器不同分辨率不同设备上提供相似或相近的浏览体验。

    前端开发需要掌握的知识体系主要是兼容性问题的解决，流畅完美的交互体验。具体到技术细节上就是HTML，CSS，JavaScript，各大公司各种不同内核的浏览器、各种各样的JS库、简单的与后台交互的知识。

   （3）、后台开发：

    前台开发完成之后，就是后台程序员的工作了，相比较前端来说，后台更像传统意义上的程序员。后台的工作简单来说就是网页文件对数据库的增删改查。

后台需要掌握的知识体系应该包括，编程基础，基本HTML语言，至少一门主流网页语言（C#，C++，JAVA，PHP等），数据库的操作等等。

   （4）、 UI设计师和网页设计师有什么区别？

    其实网页设计，分出来有两块，一个是UI设计，一个是web前端。UI设计自然要懂的更多的是PS，FW，AI，CD等制图软件，还有一些比较优秀的网页设计理念，切图等相关知识。

  web前端，需要的html+css+javascript，通过这三个东西把设计图转换成代码。这一步所实现的就是设计图的静态化，也就是变成了网页形式。

    网页设计师，是个很泛的概念，不过一般指的会偏重UI设计。稍微关注过网页设计领域的公司，有点规模的，招人都会写得比较详细，例如招UI设计师，或者招web前端工程师。

你找工作的时候，都找这些名称比较规范的，因为起码他们会区别职位的不同。一定要找的时候看清楚是UI设计师，不是找前端或者美工的，前端更多的写较高级的代码的，会比设计懂的知识点更多的，美工其实就是淘宝装修店铺或者说简单的PS照片的，就是会玩美图秀秀或者PS简单的绘图就可以的了，UI设计师才是咱们的IT行业“高大上”职位。

（5）、UI设计师：

   “UI”的本义是用户界面，是英文User和interface的缩写。UI设计师简称UID（User Interface Designer），指从事对软件的人机交互、操作逻辑、界面美观的整体设计工作的人。

    UI设计师的涉及范围包括商用平面设计、高级网页设计、移动应用界面设计及部分包装设计，是目前中国信息产业中最为抢手的人才之一。

UI设计师的特点是：工资高、发展前景好，会一些简单的前端知识代码，做手机端和PC端的网站设计图。

20、前端需要注意哪些SEO？

 - 合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；

  description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可

 - 语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页

 - 重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取

 - 重要内容不要用js输出：爬虫不会执行js获取内容

 - 少用iframe：搜索引擎不会抓取iframe中的内容

 - 非装饰性图片必须加alt

 - 提高网站速度：网站速度是搜索引擎排序的一个重要指标

21、web开发中会话跟踪的方法有哪些？

 - cookie

 - session

 - url重写

 - 隐藏input

 - ip地址

22、网站重构的理解？

    网站重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。也就是说是在不改变UI的情况下，对网站进行优化，在扩展的同时保持一致的UI。

23、为什么利用多个域名来存储网站资源会更有效？ 

  ①CDN缓存更方便 

  ②突破浏览器并发限制 

  ③节约cookie带宽 

  ④节约主域名的连接数，优化页面响应速度 

  ⑤防止不必要的安全问题 

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

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

25、一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。 

    图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。  

    如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。 

    如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。  

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

    如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

26、解释jsonp的原理，以及为什么不是真正的ajax？

    Jsonp并不是一种数据格式，而json是一种数据格式，jsonp是用来解决跨域获取数据的一种解决方案，具体是通过动态创建script标签，然后通过标签的src属性获取js文件中的js脚本，该脚本的内容是一个函数调用，参数就是服务器返回的数据，为了处理这些返回的数据，需要事先在页面定义好回调函数，本质上使用的并不是ajax技术

27、如何解决跨域问题? 

    理解跨域的概念：协议、域名、端口都相同才同域，否则都是跨域  出于安全考虑，服务器不允许ajax跨域获取数据，但是可以跨域获取文件内容，所以基于这一点，可以动态创建script标签，使用标签的src属性访问js文件的形式获取js脚本，并且这个js脚本中的内容是函数调用，该函数调用的参数是服务器返回的数据，为了获取这里的参数数据，需要事先在页面中定义回调函数，在回调函数中处理服务器返回的数据，这就是解决跨域问题的主流解决方案  

28、页面编码和被请求的资源编码如果不一致如何处理？  

    对于ajax请求传递的参数，如果是get请求方式，参数如果传递中文，在有些浏览器会乱码，不同的浏览器对参数编码的处理方式不同，所以对于get请求的参数需要使用 encodeURIComponent函数对参数进行编码处理，

后台开发 语言都有相应的解码api。对于post请求不需要进行编码 

29、阐述一下异步加载。 

    1. 异步加载的方案： 动态插入 script 标签

    2. 通过 ajax 去获取 js 代码，然后通过 eval 执行

    3. script 标签上添加 defer 或者 async 属性 

    4. 创建并插入 iframe，让它异步执行 js 

30、请解释一下 JavaScript 的同源策略。 

    同源策略是客户端脚本（尤其是Javascript）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。所谓同源指的是：协议，域名，端口相同，同源策略是一种安全协议，指一段脚本只能读取来自同一来源的窗口和文档的属性。

31、一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？ 

    分为4个步骤：  

    1. 当发送一个 URL 请求时，不管这个 URL 是 Web 页面的 URL 还是 Web 页面上每个资源的 URL，浏览器都会开启一个线程来处理这个请求，同时在远程 DNS 服务器上启动一个 DNS 查询。这能使浏览器获得请求对应的 IP 地址。 

    2. 浏览器与远程Web 服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。 

    3. 一旦 TCP/IP 连接建立，浏览器会通过该连接向远程服务器发送 HTTP 的 GET 请求。远程服务器找到资源并使用 HTTP 响应返回该资源，值为 200 的 HTTP 响应状态表示一个正确的响应。 

    4. 此时，Web 服务器提供资源服务，客户端开始下载资源。

32、请说出三种减低页面加载时间的方法。 

   1、压缩css、js文件 

   2、合并js、css文件，减少http请求 

   3、外部js、css文件放在最底下 

   4、减少dom操作，尽可能用变量替代不必要的dom操作

33、jquery 中如何将数组转化为json字符串，然后再转化回来？ 

   jQuery中没有提供这个功能，所以你需要先编写两个jQuery的扩展：    

    $.fn.stringifyArray = function(array) {      

          return JSON.stringify(array)  

   } 

    $.fn.parseArray = function(array) {      

          return JSON.parse(array) 

    }      

   然后调用： 

    $("").stringifyArray(array)

34、前端开发的优化问题（看雅虎14条性能优化原则）。 

  （1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。 

  （2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数 

  （3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。   

  （4） 当需要设置的样式很多时设置className而不是直接操作style。   

  （5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。 

  （6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。   

  （7） 图片预加载，将样式表放在顶部，将脚本放在底部  加上时间戳。 

  （8） 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。

35、jquery与jquery UI有啥区别？ 

    jquery是操作dom的框架，jqueryUI是基于jquery做的一个UI组件库 

36、针对 jQuery 的优化方法？ 

   优先使用ID选择器 

   在class前使用tag(标签名) 给选择器一个上下文 

   慎用 .live()方法（应该说尽量不要使用） 

   使用data()方法存储临时变量

37、一些无答案题目

    谈谈你认为怎样做能使项目做的更好？

    你对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？

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

    最近在学什么？能谈谈你未来3，5年给自己的规划吗？

    你有自己的技术博客吗，用了哪些技术？

    除了前端以外还了解什么其它技术么？你最最厉害的技能是什么？

    介绍一个你最得意的作品吧？

    你的优点是什么？缺点是什么？