面试准备（常见问题）
一.网页制作流程
版本一
内容分析：分清展现在网络中内容的层次和逻辑关系
结构代码：写出合理的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.交互设计：为网页增添交互效果，如鼠标指针经过时的一些特效等。
二、假若你有5个不同的样式文件，整合进网站的最好方式是？
文件合并，减少http请求。
用一个大的css文件代替多个小体积css文件，这是一个很好的实践，可以获得更好的可维护性，但是在网站性能方面会产生一定影响（这是指的是随文件体积的增大，随之消耗服务器的内存也会增加）。尽管你应该把css文件拆分成小块，但是当浏览器请求这些文件时，会产生同等数量的http请求。每个http请求都会产生一次从你的浏览器到服务器端网络往返过程，并且导致推迟到达服务器和返回浏览器端的时间，我们称之为延迟。
三、渐进增强（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：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
四、对网站的文件和资源进行优化
版本一
1.文件合并、压缩
2.使用cdn（内容分发网络）来托管资源；
"其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。" 形象点说：古代打仗大家一定都知道，由于古代的交通很不发达，所以当外族进攻的时候往往不能及时的反击，等朝廷征完兵再把兵派往边境的时候那些侵略者却是早已不见了踪影，这个让古代的帝王很是郁闷。后来帝王们学聪明了，都将大量的兵员提前派往边境驻扎，让他们平时屯田，战时当兵，这样的策略起到了很显著的作用。
3.缓存的使用
版本二
1.图片优化
首先，你需要优化你网站上的图片，来获得丝毫加速网站的机会。从原图上移除额外的注解、不必要的空间和无用的颜色，将图片保存为JPEG格式，因为它即使占用空间小，也能保证图片的高质量。
对于WordPress网站，建议使用smush.it插件来自动优化网站的图片。如果图片是PNG格式，可以使用tinypng 优化图片，提高图片质量。
2.开启GZip压缩
被用于减少HTTP请求的大小来缩短响应时间。因为这允许你发送GZip压缩文件而不是HTML文件给浏览器，它将缩短页面等待时间和加载时间。
3.服务器响应时间
即使网站已经格外优化，但是除非服务器响应时间非常快，否则就不会有什么大的效果。当涉及到提高网站的速度，服务器响应时间起着重要的作用。下面是一些提高服务器响应时间的建议。
- 有独立的服务器，而不是选择共享/托管服务器。
- 提高Web服务器的质量。
- 移除不必要的插件，只有那些必要的插件，才需要一直保持启用状态。
4.浏览器缓存
浏览器具有缓存的功能，可以存储指定的文件，减少HTTP请求，从而提高网站的加载速度。
注意：如果过期时间与文件挂钩，而此时文件中的内容需要更改的话，那必须先重命名文件，以便浏览器可以获取新添加的代码。
5.开启长连接（Keep-Alive）
Keep-Alive头对缩短浏览器和服务器之间的分布式请求的潜伏期是非常重要的。当用户通过浏览器请求网页时，浏览器会读取服务器发送的特定的HTML文件，如果请求的页面中包含了外部的CSS和JavaScript文件，浏览器会再次发送独立的请求来获取这些文件。正如你想的，这会延长页面的加载时间。
使用Keep-Alive头可以一直保持连接，直到浏览器从服务器获取到所有与这个页面相关的资源。
6.使用cdn
https://segmentfault.com/a/1190000002956639
五、浏览器允许的并发请求资源数
首先，是基于端口数量和线程切换开销的考虑，浏览器不可能无限量的并发请求，因此衍生出来并发限制和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或空白的样式，在用户翻页将图片放入可见区或即将放入可见区时再去载入。 不过这个优化其实和并发资源数的关系就比较小了，只是对一些散布不合理，或第一页底部的资源会有一定的帮助。 主要意图还是降低带宽费用。
总的来说，各类技术都是为了能让用户更快的看到页面进行下一步操作，但却不必将宝贵的资源浪费在没有必要的重复请求、不看的内容上。
六、减少页面加载时间的方法
优化图片
优化图片文件，减小其尺寸，特别是缩略图，一定要按尺寸生成缩略图然后调用，不要在网页中用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的由来。
七、请解释 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大多时候没有兼容性问题
