面试准备（常见问题）

一.网页制做流程

版本一

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

结构代码：写出合理的html结构代码

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

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

交互设计：鼠标特效

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

测试兼容性：

优化性能：

版本二

1）根据需求，肯定主题。透彻深刻所作网站的核心功能和关键。

2）收集资料。从对比相同类型的网站（惯用而熟悉的样式，用户更乐意接受），参照别人可行的实现方法。

3）规划网站。抽离出相似的模块和可重用的部件。若是是响应式网站就须要设定断点，根据不一样宽度屏幕设定样式。

4）设计数据库。

5）搭建基本的框架。引入重置样式表reset.css和字体样式表font.css，风格统一的图标还有后天须要用到的包。

6）编码和调试。注意统一命名和编码规范。当多人开发时，还须要制定规范文档。

7）上传测试。利用ftp工具，把网站发布到本身申请的主页存放服务器上。网站上传之后，你要在浏览器中打开本身的网站，逐个链接的进行测试，发现问题，及时修改，而后再上传测试。

8）推广宣传。不断宣传，提升网站的访问率和知名度。推广的方法有不少，例如到搜索引擎上注册、与别的网站交换连接、加入广告链等。

9）维护更新。网站要注意常常维护更新内容，才可以吸引住浏览者。

 

版本三

1.内容分析：仔细研究须要在网页中的展示的内容，梳理其中的逻辑关系，分清层次，以及重要程度。

2.结构设计：根据内容分析的成果，搭建出合理的html结构，保证在没有任何css样式的状况下，在浏览器保持高度可读性。

3.原型设计：根据网页结构，绘制出原型线框图，对页面进行合理的分区的布局，原型线框图是设计负责与客户交流的最佳媒介。

4.方案设计：在肯定的原型线框图基础上，使用美工软件，设计出具备良好视觉效果的页面设计方法。

5.布局设计：使用html和css对页面进行布局。

6.视觉设计：使用css并配合美工设计元素，完成由设计方法到网页的转化。

7.交互设计：为网页增添交互效果，如鼠标指针通过时的一些特效等。

 

2、倘若你有5个不一样的样式文件，整合进网站的最好方式是？

文件合并，减小http请求。

用一个大的css文件代替多个小体积css文件，这是一个很好的实践，能够得到更好的可维护性，可是在网站性能方面会产生必定影响（这是指的是随文件体积的增大，随之消耗服务器的内存也会增长）。尽管你应该把css文件拆分红小块，可是当浏览器请求这些文件时，会产生同等数量的http请求。每一个http请求都会产生一次从你的浏览器到服务器端网络往返过程，而且致使推迟到达服务器和返回浏览器端的时间，咱们称之为延迟。

 

3、渐进加强（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;
}

优雅降级和渐进加强印象中是随着css3流出来的一个概念。因为低级别浏览器不支持css3，但css3的效果又太优秀不忍放弃，因此在高级浏览器中使用css3而低级别浏览器只保证最基本的功能。咋一看两个概念差很少，都是在关注不一样浏览器下的不一样体验，关键的区别是他们所侧重的内容，以及这种不一样形成的工做流程的差别。

　　

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

　　优雅降级 graceful degradation：一开始就构建完整的功能，而后再针对低版本浏览器进行兼容。

　　区别：优雅降级是从复杂的现状开始，并试图减小用户体验的供给，而渐进加强则是从一个很是基础的，可以起做用的版本开始，并不断扩充，以适应将来环境的须要。降级（功能衰减）意味着往回看；而渐进加强则意味着朝前看，同时保证其根基处于安全地带。

 4、对网站的文件和资源进行优化

版本一

1.文件合并、压缩

2.使用cdn（内容分发网络）来托管资源；

"其基本思路是尽量避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。经过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统可以实时地根据网络流量和各节点的链接、负载情况以及到用户的距离和响应时间等综合信息将用户的请求从新导向离用户最近的服务节点上。"   形象点说：古代打仗你们必定都知道，因为古代的交通很不发达，因此当外族进攻的时候每每不能及时的反击，等朝廷征完兵再把兵派往边境的时候那些侵略者倒是早已不见了踪迹，这个让古代的帝王非常郁闷。后来帝王们学聪明了，都将大量的兵员提早派往边境驻扎，让他们平时屯田，战时当兵，这样的策略起到了很显著的做用。

3.缓存的使用

版本二

1.图片优化

首先，你须要优化你网站上的图片，来得到丝毫加速网站的机会。从原图上移除额外的注解、没必要要的空间和无用的颜色，将图片保存为JPEG格式，由于它即便占用空间小，也能保证图片的高质量。

对于WordPress网站，建议使用smush.it插件来自动优化网站的图片。若是图片是PNG格式，可使用tinypng 优化图片，提升图片质量。

2.开启GZip压缩

被用于减小HTTP请求的大小来缩短响应时间。由于这容许你发送GZip压缩文件而不是HTML文件给浏览器，它将缩短页面等待时间和加载时间。

3.服务器响应时间

即便网站已经格外优化，可是除非服务器响应时间很是快，不然就不会有什么大的效果。当涉及到提升网站的速度，服务器响应时间起着重要的做用。下面是一些提升服务器响应时间的建议。

1. 有独立的服务器，而不是选择共享/托管服务器。
2. 提升Web服务器的质量。
3. 移除没必要要的插件，只有那些必要的插件，才须要一直保持启用状态。

4.浏览器缓存

浏览器具备缓存的功能，能够存储指定的文件，减小HTTP请求，从而提升网站的加载速度。

注意：若是过时时间与文件挂钩，而此时文件中的内容须要更改的话，那必须先重命名文件，以便浏览器能够获取新添加的代码。

5.开启长链接（Keep-Alive）

Keep-Alive头对缩短浏览器和服务器之间的分布式请求的潜伏期是很是重要的。当用户经过浏览器请求网页时，浏览器会读取服务器发送的特定的HTML文件，若是请求的页面中包含了外部的CSS和JavaScript文件，浏览器会再次发送独立的请求来获取这些文件。正如你想的，这会延长页面的加载时间。

使用Keep-Alive头能够一直保持链接，直到浏览器从服务器获取到全部与这个页面相关的资源。

6.使用cdn

https://segmentfault.com/a/1190000002956639

 

5、浏览器容许的并发请求资源数

首先，是基于端口数量和线程切换开销的考虑，浏览器不可能无限量的并发请求，所以衍生出来并发限制和http/1.1的keep alive。 因此，ie6/7在http/1.1下的并发才2，但http/1.0倒是4 。而随着技术的发展，负载均衡和各种nosql的大量应用，基本已经足以应对c10k的问题。但并非每一个网站都懂得利用domain hash也就是多域名来加速访问。所以，新的浏览器加大了并发数的限制，但却仍控制在8之内。

浏览器即便放弃保护本身，将全部请求一块儿发给服务器，也极可能会引起服务器的并发阈值控制而被ban，而另一个控制在8之内的缘由也是keep alive 技术的存在使得浏览器复用现有链接和服务器通讯比建立新链接的性能要更好一些。

因此，浏览器的并发数其实并不只仅只是良知的要求，而是双方都须要保护本身的默契，并在可靠的状况下提供更好的性能。

 

题外——

前端技术的逐渐成熟，还衍生了domain hash，cookie free，css sprites，js/css combine，max expire time，loading images on demand等等技术。这些技术的出现和大量使用都和并发资源数有光。

1.按照普通设计，当网站cookie信息有1kb、网站首页共150个资源时，用户在请求过程当中须要发送150kB的cookie信息，在512kbps的常见上行宽带下，须要长达3秒左右才能所有发送完毕。尽管这个过程能够和页面下载资源的时间并发，但毕竟对速度形成了影响。 并且这些信息在js/css/images/flash等静态资源上，几乎是没有任何须要的。 解决方案是启用和主站不一样的域名来放置静态资源，也就是cookie free。

2.将css放置在页面最上方应该是很天然的习惯，但第一个css内引入的图片下载是颇有可能堵塞后续的其余js的下载。而在目前广泛过百的整页请求数的前提下，浏览器提供的仅仅数个并发，对于进行了良好优化甚至前面有cdn系统而言，是极大的性能瓶颈。这也就衍生了domain hash技术来使用多个域名加大并发量（由于浏览器是基于domain 的并发控制，而不是page），不过过多的散布会致使dns解析上付出额外的代价，因此通常也是控制在2-4之间。这里常见的一个性能小坑是没有机制去确保url的哈希一致性（即同一个静态资源应该被哈希到同一个域名下），而致使资源被屡次下载。

3.再怎么提速，页面上过百的总资源数也仍然是很可观的，若是能将其中一些不少页面都用到的元素如经常使用元素如按钮、导航、Tab等的背景图，指示图标等等合并为一张大图，并利用css background的定位来使多个样式引用同一张图片，那也就能够大大的减小总请求数了，这就是css sprites的由来。

4.全站的js/css本来并很少，其合并技术的产生倒是有着和图片不一样的考虑。 因为cs/js一般可能对dom布局甚至是内容形成影响，在浏览器解析上，不连贯的载入是会形成屡次从新渲染的。所以，在网站变大须要保持模块化来提升可维护性的前提下，js/css combine也就天然衍生了，同时也是minify、compress等对内容进行多余空格、空行、注释的整理和压缩的技术出现的缘由。

5.随着cookie free和domain hash的引入，网站总体的打开速度将会大大的上一个台阶。 这时咱们一般看到的问题是大量的请求因为全站公有header/footer/nav等关系，其对应文件早已在本地缓存里存在了，但为了确保这个内容没有发生修改，浏览器仍是须要请求一次服务器，拿到一个304 Not Modified才能放心。 一些比较大型的网站在创建了比较规范的发布制度后，会将大部分静态资源的有效期设置为最长，也就是Cache-Control max-age为10年。 这样设置后，浏览器就不再会在有缓存的前提下去确认文件是否有修改了。 超长的有效期可让用户在访问曾访问过的网站或网页时，得到最佳的体验。 带来的复杂性则体如今每次对静态资源进行更新时，必须发布为不一样的URL来确保用户从新加载变更的资源。

6.即便是这样作完，仍然还存在着一个很大的优化空间，那就是不少页面浏览量很大，但其实用户直接很大比例直接就跳走了，第一屏如下的内容用户根本就不感兴趣。 对于超大流量的网站如淘宝、新浪等，这个问题尤为重要。 这个时候通常是经过将图片的src标签设置为一个loading或空白的样式，在用户翻页将图片放入可见区或即将放入可见区时再去载入。 不过这个优化其实和并发资源数的关系就比较小了，只是对一些散布不合理，或第一页底部的资源会有必定的帮助。 主要意图仍是下降带宽费用。

总的来讲，各种技术都是为了能让用户更快的看到页面进行下一步操做，但却没必要将宝贵的资源浪费在没有必要的重复请求、不看的内容上。

 

6、减小页面加载时间的方法

优化图片 

   优化图片文件，减少其尺寸，特别是缩略图，必定要按尺寸生成缩略图而后调用，不要在网页中用resize方法实现，虽然这样看到的图片外形笑了，可是其加载的数据量一点也没减小。曾经见过有人在网页中加载的缩略图，其真实尺寸有10M之巨。普通图像、icon也要尽量压缩后，能够采用web图像保存、减小颜色数等等方法实现。

 图像格式的选择 

    除了优化图片，选择正确的图片格式也是很重要的。JPEG格式适合于照片或真彩图片。GIF格式适用于标志或按钮等平面彩色图片。PNG相似于GIF，但支持更多的色彩。GIF提供的颜色较少，可用在一些对颜色要求不高的地方。 

压缩Javascript、CSS代码 

    通常js、css文件中存在大量的空格、换行、注释，这些利于阅读，若是可以压缩掉，将会颇有利于网络传输。（压缩合并css，如margin-top,margin-left...) 

css和js文件在文档位置 

  css格式定义放置在文件头部：用户端是慢速网络或网页内容比较庞大的状况，网页逐步呈现的同时仍会保持格式信息，不影响网页美感。 
  Javascript脚本放在文件末尾：在主体网页加载完成后再加载，防止其影响到主体网页的加载速度。 

标明高度和宽度 

   若是浏览器没有找到这两个参数，它须要一边下载图片一边计算大小，若是图片不少，浏览器须要不断地调整页面。这不但影响速度，也影响浏览体验。 
   当浏览器知道了高度和宽度参数后，即便图片暂时没法显示，页面上也会腾出图片的空位，而后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。 

减小http请求（合并文件，合并图片）。 

   当加载一个网页时，网页上的每个对象（图象、文字和线等）将请求服务器的回应。这种请求会延长加载时间。所以要尽可能减小对象的数量，而且把CSS的文件和脚本进行结合。 
   1）例如：载入图形文件时使用css sprites技术。 
   2）Ajax调用尽可能采用GET方法调用：实际使用XMLHttpRequest时，若是使用POST方法实现，会发生2次HTTP请求，而使用GET方法只会发生1次HTTP请求。若是改用GET方法，HTTP请求减小50%。 

使用CDN(Content Delivery Network)网络加速 
   
    如今国内作CDN加速业务的公司不少，简单讲，就是将你的图片、视频扩散到CDN网络所能到达之处，让用户访问时能就近下载到这些文件，从而达到网络提速的目的，这样作，同时能减轻你本身网站的负载。 

网址后加斜杠 

   当用户打开一个连接时，服务器会推测连接这个地址包含哪一种文件或页面。若是在链接后加上斜线（ / ），服务器就知道这是一个目录页，这样作能够减小页面的加载时间。如www.campr.com/目录，会判断这个“目录是什么文件类型，或者是目录。 

网址后加斜杠 

   当用户打开一个连接时，服务器会推测连接这个地址包含哪一种文件或页面。若是在链接后加上斜线（ / ），服务器就知道这是一个目录页，这样作能够减小页面的加载时间。如www.campr.com/目录，会判断这个“目录是什么文件类型，或者是目录。 

再怎么提速，页面上过百的总资源数也仍然是很可观的，若是能将其中一些不少页面都用到的元素如经常使用元素如按钮、导航、Tab等的背景图，指示图标等等合并为一张大图，并利用css background的定位来使多个样式引用同一张图片，那也就能够大大的减小总请求数了，这就是css sprites的由来。

 

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

根据Google Developer， Chromium渲染线程分为main thread 和 compositor thread。

若是css动画只是改变transforms和opacity，这时整个css动画得以在compositor thread完成（而js动画则会在main thread执行，而后触发compositor进行下一步操做）

在js执行一些昂贵的任务时，main thread繁忙，css动画因为使用了compositor thread能够保持流畅。（在主线程中，维护了一颗layer树（LayerTreeHost），在compositor thread，维护了一样一颗LayerTreeHostImpl，管理了LayerImpl，这俩颗树的内容是拷贝关系。所以能够彼此不干扰，当JavaScript在main thread操做LayerTreeHost的同时，compositor thread 能够用LayerTreeHostImpl作渲染。当JavaScript繁忙致使主线程卡主时，合成到屏幕的过程也是流畅的。

为了实现防假死，鼠标键盘消息会被首先分发到compositor thread，而后再到main thread。这样，当main thread繁忙时，compositor thread仍是可以响应一部分消息，例如，鼠标滚动时，加入main thread繁忙，compositor thread也会处理滚动消息，滚动已经被提交的页面部分（未被提交的部分将被刷白）。）

 

css动画比js流畅的前提：

1.在Chromium基础上的浏览器中

2.js在执行一些昂贵的任务

3.同时css动画不触发layout或paint

在css动画或js动画触发了paint或layout时，须要main thread进行Layer树重计算，这时css动画或js动画都会阻塞后续操做。

 

只有以下属性的修改才符合“仅触发Composite，不触发layout或paint”：

1.backface-visibility

2.opacity

3.perspective

4.perspective-origin

5.transform

因此只有用上了3d加速或修改opacity时，才有机会用得上css动画的这一优点。

所以，在大部分应用场景下，效率角度更值得关注的仍是下列问题。

• 是否致使layout
• repaint的面积
• 是不是有高消耗的属性（css shadow等）
• 是否启用硬件加速

现今CSS动画和JS动画主要的不一样点是

• 功能涵盖面，JS比CSS3大
  
  
  • 定义动画过程的@keyframes不支持递归定义，若是有多种相似的动画过程，须要调节多个参数来生成的话，将会有很大的冗余（好比jQuery Mobile的动画方案），而JS则自然能够以一套函数实现多个不一样的动画过程
  • 时间尺度上，@keyframes的动画粒度粗，而JS的动画粒度控制能够很细
  • CSS3动画里被支持的时间函数很是少，不够灵活
  • 以现有的接口，CSS3动画没法作到支持两个以上的状态转化
• 实现/重构难度不一，CSS3比JS更简单，性能调优方向固定
• 对于帧速表现很差的低版本浏览器，CSS3能够作到天然降级，而JS则须要撰写额外代码
• CSS动画有自然事件支持（TransitionEnd、AnimationEnd，可是它们都须要针对浏览器加前缀），JS则须要本身写事件
• CSS3有兼容性问题，而JS大多时候没有兼容性问题