原文链接-fe-interview

原文链接2

集成面试

【常见问题】

一、在制作一个网页应用或网站的过程中，你是如何考虑其 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 个不同的样式文件 (stylesheets), 整合进网站的最好方式是?

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

三、你能描述渐进增强 (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实践过优雅降级了，为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。）

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

  • 渐进增强观点：

渐进增强观点认为应该关注于内容本身。内容是我们建立网站的诱因，有的网站展示它，有的则收集它，有的寻求、有的操作，还有的网站甚至包含以上的种种，但相同点是他们全都涉及到内容，这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被Yahoo!所采纳并用以构建其“分级式浏览器支持（Graded Browser Support)“策略的原因所在。

  • 优雅降级观点：

优雅降级观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如IE、Mozilla等）的前一个版本。

在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨（poor,but passable)”的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

四、如何对网站的文件和资源进行优化

  • 1、文件合并（目的是减少http请求）
  • 2、文件压缩（目的是直接减少文件下载的体积）
  • 3、使用cdn托管资源
    • 内容分发网络（CDN）是位于不同地理位置的服务器组成的网络。每个服务器都拥有所有网站的文件副本。当用户请求文件和网页时，就可以直接从就近的网站服务器获取相应资源（也可以是从负载最小的服务器）。你可以使用Amazon cloud front 或者MaxCDN为网站开启CDN加速
  • 4、使用缓存
  • 5、gizp压缩你的js和css文件
  • 6、meta标签优化（title,description,keywords）、heading标签的优化、alt优化
  • 7、反向链接，网站外链接优化

详情点击此处

五、浏览器同一时间可以从一个域名下载多少资源？—-浏览器并发请求数

浏览器的并发请求数目限制是针对同一域名的。 意即，同一时间针对同一域名下的请求有一定数量限制。超过限制数目的请求会被阻塞 。

  • 目前所有浏览器的并发数目一般限制在10以内。

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

  • 优化图片
  • 图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）
  • 优化CSS（压缩合并css，如 margin-top, margin-left…)
  • 网址后加斜杠（如www.campr.com/目录，会判断这个目录是什么文件类型，或者是目录。）
  • 标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。 当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了）
  • 减少http请求（合并文件，合并图片）

七、参与到一个项目中，发现他们使用 Tab 来缩进代码，但是你喜欢空格，你会怎么？

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

  • 为了保持风格的一致性，保持原有

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

八、对网页标准和标准指定机构重要性 的理解：

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

九、什么是FOUC—无样式内容闪烁；

  • 如果使用@import方法对css进行导入，会导致某些页面在windows下的 internet explorer出现一些奇怪的现象：以无样式显示内容的瞬间闪烁，这种现象称为FOUC
  • Flash of Unstyled Content;
  • 原因大致为：
    • 使用@import方法导入样式表；
    • 将样式表放在页面底部；
    • 有几个样式表，放在html结构的不同位置；
    • 原理就是：当样式表晚于结构性html加载，当加载到此样式时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象；
  • 结局方法：使用link将样式表放在文档head中；

十、js动画与css动画的区别？

  • JS动画缺点：
    • (1)JavaScript在浏览器的主线程中运行，而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞，从而造成丢帧的情况。 　　* (2)代码的复杂度高于CSS动画
  • JS动画优点：
    • (1)JavaScript动画控制能力很强, 可以在动画播放过程中对动画进行控制：开始、暂停、回放、终止、取消都是可以做到的。
    • (2)动画效果比css3动画丰富,有些动画效果，比如曲线运动,冲击闪烁,视差滚动效果，只有JavaScript动画才能完成
    • (3)CSS3有兼容性问题，而JS大多时候没有兼容性问题
  • CSS动画缺点：
    • (1)运行过程控制较弱,无法附加事件绑定回调函数。CSS动画只能暂停,不能在动画中寻找一个特定的时间点，不能在半路反转动画，不能变换时间尺度，不能在特定的位置添加回调函数或是绑定回放事件,无进度报告
    • (2)代码冗长。想用 CSS 实现稍微复杂一点动画,最后CSS代码都会变得非常笨重。
  • CSS动画优点：
    • (1)浏览器可以对动画进行优化。 浏览器使用与 requestAnimationFrame 类似的机制，requestAnimationFrame比起setTimeout，setInterval设置动画的优势主要是:1)requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率,一般来说,这个频率为每秒60帧。2)在隐藏或不可见的元素中requestAnimationFrame不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。 强制使用硬件加速 （通过 GPU 来提高动画性能）

【HTML】

一、doctype(文档类型) 的作用是什么

DOCTYPE是docunment type（文档定义）的简写，用来说明web设计中所用的html或xhtml的类型，指出浏览器或者其他阅读程序按照什么样的规则（W3C所发布的一个文档类型定义即DTD）集去解释文档中的标记.

二、浏览器标准模式 (standards mode) 、几乎标准模式（almost standards mode）和怪异模式 (quirks mode) 之间的区别是什么

浏览器表现模式
  • 所谓的标准模式是指，浏览器按W3C标准解析执行代码；怪异模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。
  • 浏览器解析时到底使用标准模式还是怪异模式，与你网页中的DTD声明直接相关，DTD声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相应的方式加载网页并显示，忽略DTD声明,将使网页进入怪异模式(quirks mode)
  • 浏览器从服务器端获取网页后会根据文档的DOCTYPE定义显示网页，如果文档正确定义了DOCTYPE浏览器则会进入标准模式，否则浏览器会进入怪异模式或混杂模式。 浏览器开发初期W3C提倡的网页标准并不流行，因此浏览器有独特的对网页标签或属性的解析模式随着日后网页标准的流行，浏览器增加了对日后网页标准的流行，浏览器增加了对新标准的支持，但又没放弃对原有模式的兼容，这就是浏览器多种表现模式的来源。 常用的浏览器表现模式：
  • IE –两种模式–标准模式(IES)/怪异模式(IEQ)(或混杂模式)；
  • Firefox/Opera–三种模式–标准模式、几乎标准模式、怪异模式；
  • 对于这两种模式引起最大的问题就是盒模式的问题（width的含义是否包括了边界还是只是内容宽度问题？），或者现在大家已经忽视了IE5的存在，但是，IE在怪异模式运行的盒模式依然在最新版本的IE7保留着，一旦应用不得当，IE7将变成跟IE5一样愚蠢
  • 当没有使用DTD声明或者使用HTML4以下（不包括HTML4）的DTD声明时，基本所有的浏览器都是使用Quirks Mode呈现

三、html和xhtml区别：

  • XHTML元素必须被正确嵌套，
  • XHTML元素尿素必须被关闭，
  • xhtml文档必须拥有根元素，
  • 标签名必须小写；

四、如果页面使用 ‘application/xhtml+xml’ 会有什么问题吗

要求比较严格，必须有head、body标签且每个元素必须是关闭的。 一些老的浏览器不支持，实际上，任何最新的浏览器都将支持application/xhtml+xml媒体类型。大多数浏览器也接受以application/xml发送的XHTML文档。