（如果问我这个问题，我会很兴奋的，因为可以说半个小时。）
谈谈你喜欢的开发环境。(例如操作系统，编辑器，浏览器，工具等等。)
（有两套开发环境，一套是用来平时团队项目的开发，我的jdk、tomcat、photoshop等等都部署安装在wins系统上面；另外一套是用来“装逼”的，呃，对于我这种选择困难症病人，纠结了一下最后决定说说“装逼”的那套开发环境）
操作系统用的是linux的ubuntu，能够是我接触到linux常用命令、下载安装、转移新增删除文件都很方便（面试官会问到哪些指令吗？）
编辑器是brackets，作为免费、开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境，简约、优雅、快捷！
浏览器是chrome，内部提供的开发工具很丰富，例如单步调试、模拟不同像素设备、能够显示较多css3属性等。
*你最熟悉哪一套版本控制系统？
（这个问题，用过git，用过myeclipse里的svn，用过tortoiseSVN将代码上传到sinaapp服务器，但是都不是很熟悉，只好翻了一下《Pro.Git-zh_CN》）
在Git 中的绝大多数操作都 只需要访问本地文件和资源，不用连网 。对于任何一个文件，在Git 内都只有三种状态： 已提交（committed），已修改（modified）和已暂存（staged） 。已提交表示该文件已经 被安全地保存在本地数据库 中了；已修改表示修改了某个文件，但还没有提交保存；已暂存表示把已修改的文件放在下次提交时要保存的清单中。
基本的Git 工作流程如下所示：
1. 在工作目录中修改某些文件。
2. 对这些修改了的文件作快照，并保存到 暂存区域 。
3. 提交更新，将保存在暂存区域的 文件快照转储到git 目录 中。
常用命令：
//用git 把Git 项目仓库克隆到本地，以便日后随时更新：$ git clone git://git.kernel.org/pub/scm/git/git.git//git add 命令告诉Git 开始对这些文件进行跟踪，然后提交：$ git add filenme.html//每次准备提交前，先用git status 看下，是不是都已暂存起来了，然后再运行提交命令$ git commit -m 'initial project version'// 把本地仓库提交到远程仓库的master分支中$ git push origin master
你能描述一下当你制作一个网页的工作流程吗？
1）根据需求，确定主题。透彻深入所做网站的核心功能和关键。
2）收集资料。从对比相同类型的网站（惯用而熟悉的样式，用户更乐意接受），参照别人可行的实现方法。 3）规划网站。抽离出类似的模块和可重用的部件。如果是响应式网站就需要设定断点，根据不同宽度屏幕设定样式。 4）设计数据库。 5）搭建基本的框架。引入重置样式表reset.css和字体样式表font.css，风格统一的图标还有后台需要用到的包。 6）编码和调试。注意统一命名和编码规范。当多人开发时，还需要制定规范文档。 7）上传测试。利用FTP工具，把网站发布到自己申请的主页存放服务器上。网站上传以后，你要在浏览器中打开自己的网站，逐页逐个链接的进行测试，发现问题，及时修改，然后再上传测试。 8）推广宣传 。不断宣传，提高网站的访问率和知名度。推广的方法有很多，例如到搜索引擎上注册、与别的网站交换链接、加入广告链等。
9）维护更新 。网站要注意经常维护更新内容，保持内容的新鲜，不要一做好就放在那儿不变了，只有不断地给它补充新的内容，才能够吸引住浏览者
（具体还需要集合我的实际经验：http://HdhCmsTestcnblogs测试数据/0603ljx/p/4284521.html）你能描述一下渐进增强和优雅降级之间的不同吗?
它们是看待同种事物的两种观点，它们关注在同一个网站同一功能在不同设备不同浏览器下的表现：
渐进增强，一开始值构建站点的最小特性，然后不断针对个浏览器追加功能，性能越好的设备能够显示更加出众的效果。
优雅降级，一开始就构造站点的完整功能，然后针对浏览器测试和修复。
web标准对可访问性做了如下定义：web内容对于残障用户或者普通的可阅读和可理解性。无论用户是否残障，都得通过 用户代理 （User Agent）来访问Web内容。因此要提高可访问性，首先得考虑各种用户代理 ：桌面浏览器、语音浏览器、移动电话、车载个人电脑等等。还得考虑用户访问Web内容时的环境限制 。比如：我们真的要考虑浏览器禁用JavaScript/CSS的情形吗？我的理解是，要考虑的其实不是 禁用 了JavaScript/CSS的浏览器，而是那些对JavaScript/CSS不支持或支持不好的用户代理。比如语音阅读器，手机浏览器等，JavaScript提供的是一层可访问性，不能代替内容本身。
当然，从渐进增强的角度讲，鼓励使用高级特性，只是同时要做到 优雅降级 ，让低端用户代理上，也能保留低保真的体验。（除了用户代理，还有什么方法检测客户端设备？特性检测，css3媒体查询）
(讲讲我在平时项目中，在“渐进增强”和“优雅降级”的努力)
如果提到了特性检测，可以加分。假若你有5个不同的 CSS 文件, 加载进页面的最好方式是?
文件拼合，减少http请求。
用一个大的CSS文件替代多个小体积的CSS文件这是一个很好的实践，可以获得更好的可维护性，但是在网站性能方面会产生一定的影响（这里指的是随着文件体积的增大，随之消耗服务器的内存也会增加）。尽管你应该把CSS文件拆分成小块，但是当浏览器请求这些文件时，会产生同等数量的http请求。 每个http请求都会产生一次从你的浏览器到服务器端网络往返过程 ， 并且导致推迟到达服务器端和返回浏览器端的时间，我们称之为延迟 。因此，如果你有4个Javascript和3个css文件在页面中被加载，你浪费掉了7次因网络往返过程产生的时间。在美国，延迟平均是70毫秒，这样你就浪费了7*70 = 490毫秒，大致延迟了半秒的时间。在美国之外的国家访问你的页面，平均延迟大约是200毫秒，这意味着你的页面有1400毫秒的时间是在等待中度过。浏览器在你的CSS完全加载完成之前是不能很好的渲染你的页面的。因此越多的延迟让你的页面载入越慢。
请解释一下什么是“语义化的 HTML”分离结构和表现 的另一个重要方式是使用语义化的标记来构造文档内容。一个XHTML元素的存在意味着被标记内容有相应的结构化意义，例如
是用来标记段落
标记标题 标记列表，不能过分使用
语义化的标签往往与默认样式有所联系，像是Hx系列 表示标题，会被赋予默认的块级加粗居中样式； , 用来区别于其他文字，起到了强调的作用。用来明确告诉你它们的用途。
语义化标签让大家更直观认识标签和属性的用途。语义化的网页，对搜索引擎友好，更容易被搜索引擎抓取，有利于推广。
*你如何对网站的文件和资源进行优化？ 期待的解决方案包括： 文件合并（同上题“ 假若你有5个不同的 CSS 文件, 加载进页面的最好方式是？” ）
减少调用其他页面、文件的数量。一般我们为了让页面生动活泼会大量使用background来加载背景图，而每个 background的图像都会产生1次HTTP请求，要改善这个状况，可以采用css的1个有用的background-position属 性来加载背景图，我们 将需要频繁加载的多个图片合成为1个单独的图片 ，需要加载时可以采用：background:url(....) no-repeat x-offset y-offset;的形式加载即可将这部分图片加载的HTTP请求缩减为1个。
文件最小化/文件压缩即 将需要传输的内容压缩后传输到客户端再解压 ，这样在网络上传输的 数据量就会大幅减小。通常在服务器上的Apache、Nginx可以直接开启这个设置，也可以从代码角度直接设置传输文件头，增加gzip的设置，也可以 从 负载均衡设备直接设置。不过需要留意的是，这个设置会略微增加服务器的负担。建议服务器性能不是很好的网站，要慎重考虑。
使用 CDN 托管CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。
缓存的使用Ajax调用都采用缓存调用方式，一般采用 附加特征参数方 式实现，注意其中的 这个参数不变化就使用缓存文件 ，如果发生变化则重新下载新文件或更新信息。
css文件放置在head，js放置在文档尾部 在服务器端配置control-cache last-modify-date 在服务器配置Entity-Tag if-none-match闻东师兄说：
可再结合H5新特性里的预加载，图片优化方面，可对图片进行压缩，JPG的推荐jpegmin这个软件，png的推荐 https://tinypng测试数据/，前面这两个是压缩后不会失真的，gif的推荐GIF Optimizer，但可能会有毛边。
为什么利用多个域名来提供网站资源会更有效？ 浏览器同一时间可以从一个域名下载多少资源？
即浏览器并发请求数。同一时间针对同一域名下的请求有一定数量限制。超过限制数目的请求会被阻止。（借用百度上的一张图片）
有什么例外吗？ 加分项： 指出在手机端可能有负面影响 (http://HdhCmsTestmobify测试数据/blog/domain-sharding-bad-news-mobile-performance/) 加分项： HTTP2 / SPDY请说出三种减少页面加载时间的方法。（加载时间指感知的时间或者实际加载时间）
关于实际加载时间，可以使用上题” 你如何对网站的文件和资源进行优化？ “方法。
关于感知时间，可以使用上题“ 编写代码的哪些方面能够使你兴奋或感兴趣？ ”答案。
*如果你参与到一个项目中，发现他们使用 Tab 来缩进代码，但是你喜欢空格，你会怎么做？ 建议这个项目使用像 EditorConfig (http://editorconfig.org/) 之类的规范 为了保持一致性，接受项目原有的风格 直接使用 VIM 的 retab 命令请写一个简单的幻灯效果页面 如果不使用JS来完成，可以加分。
*你都使用哪些工具来测试代码的性能？ Profiler, JSPerf, Dromaeo 如果今年你打算熟练掌握一项新技术，那会是什么？
开发单页webapp的技术。
SAP能够是页面与页面之间无缝连接，避免出现白页，且带有动态效果，提高用户体验。同时SAP，有javascript渲染页面，然后在从服务器获取小量的数据显示，如此反复，请求的数据无需要服务器处理，减少服务器负荷。
SAP对技术要求高。要考虑首屏加载事件过长；动画效果要考虑低端手机；垃圾收集，需要自己释放资源，避免页面变卡。
*Long-Polling, Websockets, SSE(Server-Sent Event) 之间有什么区别？请谈一下你对网页标准和标准制定机构重要性的理解。
关于W3C标准，要求：
1）书写闭合，标签小写、不乱嵌套。有利于SEO
2）尽量使用外链的css和js脚本， 结构行为表现分离 。有利于页面加载速度加快。
3）样式和标签分离，使用更合理的 语义化标签 ，内容被更多用户设备访问，维护成本也会降低。
指定标准，能够规避不同开发商开发出来不同的浏览器显示不一致问题，同时为
*什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？某些页面在Windows 下的Internet Explorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为 文档样式短暂失效 (Flash of Unstyled Content),简称为FOUC.原因大致为：1，使用import方法导入样式表。2，将样式表放在页面底部3，有几个样式表，放在html结构的不同位置。其实原理很清楚：当样式表晚于 结构性html 加载，当加载到此样式表时，页面将停止之前的渲染。 此样式表被下载和解析后，将重新渲染页面 ，也就出现了短暂 的 花屏现象。解决方法：使用LINK标签将样式表放在文档HEAD中更多
请尽可能完整得描述下从输入URL到整个网页加载完毕及显示在屏幕上的整个流程
1）用户输入网址
2）浏览器通过DNS获取网站的IP地址
3）浏览器尝试与服务器建立连接
4）服务器发送永久重定向
5）浏览器跟踪从定向地址
7）服务器处理请求
8）服务器发送HTML响应
9）浏览器开始显示HTML
10）浏览器发送获取嵌套在html中的元素
关于页面渲染过程：
1）解析HTML代码，生成一棵DOM树
2）解析CSS文件
3）生成渲染树（受样式影响，包含不可见元素）
4）渲染树中的节点
HTML 相关问题：
doctype（文档类型）的作用是什么？位于html标签最前面，告诉浏览器以那种html和xhtml规范。分为标准模式和怪异模式、基于框架的HTML模式。假如浏览器不以doctype标准模式编写DTD，页面除了无法通过代码检验之外，还无法在浏览器中正确显示。
a.如果需要干净的标记，免于表现层的混乱，用XHTML Strict DTD类型。
b.Transitional DTD 可 包含 W3C 所期望移入样式表的呈现属性和元素 。如果用户使用了不支持层叠样式表（CSS）的浏览器以至于你不得不使用 HTML 的呈现特性时，用Transitional DTD 类型。
c.Frameset DTD 被用于带有框架的文档。除 frameset 元素取代了 body 元素之外，Frameset DTD 等同于 Transitional DTD
浏览器标准模式和怪异模式之间的区别是什么？当浏览器厂商开始创建与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一目的，他们创建了两种呈现模式，标准和混杂模式。在标准模式中，浏览器会根据规范呈现页面；在混杂模式中。页面会以一种相对宽松的向后兼容方式显示。混杂模式常用于模拟老式浏览器的行为，以防止老站点无法工作。
他们最大的不同是对盒模型的解析。
如：在strict mode中 ：width是内容宽度 ，也就是说,元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right- width + margin-right;
在quirks mode中 ：width则是元素的实际宽度 ，内容宽度 = width - (margin-left + margin-right + padding-left + padding-right + border-left-width + border-right-width)
使用 document测试数据patMode来判断浏览器的解析方式。
使用 XHTML 的局限有哪些？
xhtml要求严格：放弃了一些语义不好的标签，必须有head、body，每个dom必须要闭合。一些老的浏览器并不兼容。如果页面使用 'application/xhtml+xml' 会有什么问题吗？
为contentType属性值，IE不支持application/xhtml+xml类型，支持text/html
如果网页内容需要支持多语言，你会怎么做？使用统一的UTF-8编码
在设计和开发多语言网站时，有哪些问题你必须要考虑？1）制图时，应该讲图形的图像层与文本层分离，这样在重新绘制改图形时只需对文本进行翻译。
2）设置控件属性应考虑到各种语言版本的文本显示，尽可能为翻译预留足够的空间。同时也应该保持不同语言界面的统一性，避免过多的差异。
3）编码注意代码复用，将多个模块的共用信息存放在共通的文件中便于全局管理。
页面请求的过程可描述如下:
1）用户在终端 选择 自己所偏好的语言,并通过浏览器向服务器发送页面请求。
2） 模板界面 接收到语言选项后,从资源文件中读取相应区域的资源。
3）在响应用户的页面请求时,系统将根据检索到的语言选项, 动态的加载 相关区域的JS文件和CSS文件,为不同区域初始化不同的样式。
4）数据库接口接收到语言选项后,将其作为一个SQL参数传入数据库,检索相应区域的数据。
5）模板界面将接收到的各种信息,组织成Html代码,再发送给浏览器,显示给终端用户。
该架构的核心是模板界面,它主要负责将接收到的各类信息组织成Html代码。
data-属性的作用是什么？
data-是HTML5为前端开发者提供自定义的属性，这些属性集可以通过对象的dataset属性获取，不支持该属性的浏览器可以通过 getAttribute方法获取。
如果把 HTML5 看作做一个开放平台，那它的构建模块有哪些？1）Web Storage API 2）基于位置服务LBS 3）无插件播放音频视频 4）调用相机和GPU图像处理单元等硬件设备 5）拖拽和Form API
*请描述一下 cookies，sessionStorage 和 localStorage 的区别？
共同点：都是保存在浏览器端，且同源的。 区别： 1）cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。 2）cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。 3）sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 4）作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。
sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，可以方便的在 web请求之间保存数据 。有了本地数据，就可以 避免数据在浏览器和服务器间不必要地来回传递 。 sessionStorage、localStorage、cookie都是在 浏览器端存储的数据 。 其中sessionStorage的概念很特别，引入了一个“浏览器窗口”的概念。sessionStorage是在 同源的同窗口（或tab）中，始终存在的数据 。也就是说只要这个浏览器窗口没有关闭，即使 刷新页面或进入同源另一页面 ，数据仍然存在。关闭窗口后，sessionStorage即被销毁。同时“独立”打开的不同窗口，即使是同一页面，sessionStorage对象也是不同的。Web Storage带来的好处： 1）减少网络流量：一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递。 2）快速显示数据：性能好，从本地读数据比通过网络从服务器获得数据快得多，本地数据可以即时获得。再加上网页本身也可以有缓存，因此整个页面和数据都在本地的话，可以立即显示。 3）临时存储：很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage非常方便。浏览器本地存储与服务器端存储之间的区别其实数据既可以在浏览器本地存储，也可以在服务器端存储。浏览器端可以保存一些数据，需要的时候直接从本地获取，sessionStorage、localStorage和cookie都由浏览器存储在本地的数据。服务器端也可以保存所有用户的所有数据，但需要的时候浏览器要向服务器请求数据。1.服务器端可以保存用户的持久数据，如数据库和云存储将用户的大量数据保存在服务器端。2.服务器端也可以保存用户的临时会话数据。服务器端的session机制，如jsp的 session 对象，数据保存在服务器上。实现上，服务器和浏览器之间仅需传递session id即可，服务器根据session id找到对应用户的session对象。会话数据仅在一段时间内有效，这个时间就是server端设置的session有效期。服务器端保存所有的用户的数据，所以服务器端的开销较大，而浏览器端保存则把不同用户需要的数据分布保存在用户各自的浏览器中。浏览器端一般只用来存储小数据，而服务器可以存储大数据或小数据。服务器存储数据安全一些，浏览器只适合存储一般数据。请描述一下 GET 和 POST 的区别?
get是从服务器上获取数据，post是向服务器传送数据。
get是把 参数数据队列加到提交表单的ACTION属性所指的URL 中， 值和表单内各个字段一一对应 ，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程
get形式的url对搜索引擎更加友好，可以提高搜索引擎排名。Post使用的url有时候会阻止爬虫和搜索引擎的访问。其他网站和用户可以链接到get形式的url，无论用户的访问，还是搜索引擎的收录而相应提高了页面排名，能够 直接或间接提高网站浏览 。同时，get形式的url 这种表示法是可以缓存的，显著提升了客户端和服务端的性能 。
而不安全操作，如确定订购、下订单、达成协议和删除页面等，应该通过post执行，避免没有显式用户请求和同一的情况下发生意外的操作。例如搜索引擎删除整个页面，只因为抓取了一个链接。很多不希望用户浏览器遵循页面链接的各种完整，这些情况下，应该要求用户登录并且足够的权限才能执行某些危险操作。
若符合下列任一情况，则用POST方法：
* 请求的结果 有持续性的副作用 ，例如，数据库内添加新的数据行。
* 若使用GET方法，则表单上收集的数据可能让URL过长。
* 要传送的数据不是采用7位的ASCII编码。
若符合下列任一情况，则用GET方法：
* 请求是为了查找资源，HTML表单数据仅用来帮助搜索。
* 请求结果无持续性的副作用。
* 收集的数据及HTML表单内的输入字段名称的总长不超过1024个字符。
（目测还会问到“ 同步和异步的区别?” ）
同步： 脚本会停留并等待服务器发送回复然后再继续 。 提交请求->等待服务器处理->处理完毕返回，这个期间客户端浏览器不能干任何事 。
异步： 脚本允许页面继续其进程并处理可能的回复 。 请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完毕
若要在使用ajax请求后处理发送请求返回的结果，最好使用同步请求。
CSS 相关问题：
CSS 中类(classes)和 ID 的区别。 在样式表定义一个样式的时候，可以定义id也可以定义class。
1、在CSS文件里书写时，ID加前缀"#"；CLASS用"."
2、id一个页面只可以使用一次；class可以多次引用。
3、ID是一个标签，用于区分不同的结构和内容，就象名字，如果一个屋子有2个人同名，就会出现混淆；class是一个样式，可以套在任何结构和内容上，就象一件衣服；
4、从概念上说就是不一样的：id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。
目前的浏览器还都允许用多个相同ID，一般情况下也能正常显示，不过当你需要用JavaScript通过id来控制div时就会出现错误。
描述下 “reset” CSS 文件的作用和使用它的好处。
reset.css能够重置浏览器的默认属性。不同的浏览器具有不同的样式，重置能够使其统一。比如说ie浏览器和FF浏览器下button显示不同，通过reset能够统一样式，显示相同的想过。但是很多reset是没必要的，多写了会增加浏览器在渲染页面的负担。
比如说，
1）我们不应该对行内元素设置无效的属性，对span设置width和height，margin都不会生效的。
2）对于absolute和fixed定位的固定尺寸（设置了width和height属性），如果设置了top和left属性，那么bottom和right，margin和float就没有作用。
3）后面设置的属性将会覆盖前面重复设置的属性。
期待能够指出它的负面影响，或者提到它的一个更好的替换者"normalize"
normalize.css是一个可以定制的css文件，它让不同的浏览器在渲染元素时形式更统一。
解释下浮动和它的工作原理。问题成因：在一个容器中，有两个浮动的子元素，会造成显示结果意想不到的问题。在CSS规范中，浮动定位不属于正常的页面流，而是独立定位的。
关于css的定位机制：普通流，浮动，绝对定位（position：fixed是position：absolute的一个子类）。浮动的框可以左右移动，直到它的外边缘遇到包含框或者另一个浮动框的边缘，所以才说浮动定位不属于正常的页面流。文档中的普通流就会表现得和浮动框不存在一样， 当浮动框高度超出包含框的时候，就会出现包含框不会自动伸缩高度类笔盒浮动元 素。所以，只含有浮动元素的父容器在显示时不需要考虑子元素的位置，就造成显示父容器像空容器一样。
解决浮动：
1）添加额外标签
在浮动元素末尾添加一个空的标签例如
查看更多关于前端知识梳理1_html/css_WEB-ITnose的详细内容...