今天为大家分享，好程序员HTML5大前端经典面试题81-100题，主要包含：如何从浏览器的URL中获取参数信息、 浏览器标准模式和怪异模式之间的区别是什么？ Javascript同源策略、请简述为什么要使用数据库的事务、 聊一聊前端存储等技术问题，已经解答方法，希望能够对你的前端面试有所帮助！

一、 写一个获取非行间样式的函数

二、 请用正则表达式验证数字

/[0一9]*$/

三、 为什么利用多个域名来提供网站资源会更有效？

1) 突破浏览器的并发限制（浏览器同一域名最大的并发请求数量为6个，ie6为2个）

2) 节约cookie带宽

3) CDN缓存更方便

4) 防止不必要的安全问题（尤其是cookie的隔离尤为重要）

5) 节约主机域名连接数，优化页面响应速度

四、 你如何从浏览器的URL中获取参数信息

浏览器宿主环境中，有一个location对象，同时这个对象也是window对象和document对象的属性。

location对象中提供了与当前窗口加载的文档有关的的信息，即URL信息。

如  https://www.baidu.com/api/sousu?search=baidu&id=123#2

location.href: 完整URL

location.protocol: 返回协议（https:）

location.host: 返回服务器名称和端口号（www.baidu.com）

 location.hostname: 返回服务器名称（www.baidu.com）

 location.port:返回服务器端口号（http默认80，https默认443）

 location.pathname:返回URL中的目录和文件名（api/sousu）

 location.search:返回查询字符串（?search=baidu&id=123#2）

 location.hash:返回hash值（#2）

五、 手机端文字大小用什么单位

对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可

对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备

六、 是否做过有上百图层的psd切图？ps隐藏其他图层，只显示其中一个图层的快捷键

Alt + 当前图层前眼睛

七、 浏览器标准模式和怪异模式之间的区别是什么？

这是个历史遗留问题，W3C标准推出前，旧的页面都是根据旧的渲染方式对页面进行渲染的，因此在W3C标准推出后为了保证旧页面的正常显示，保持浏览器的兼容性，这样浏览器上就产生了能够兼容W3C标准渲染的严格模式和保证旧页面显示的怪异模式的标准兼容模式。

具体表现：

1.在严格模式中 ：width是内容宽度 ，元素真正的宽度 = margin一left + border一left一width + padding一left + width + padding一right + border一right一 width +  margin一right;

在怪异模式中 ：width则是元素的实际宽度 ，内容宽度 = width 一 ( padding一left + padding一right + border一left一width + border一right一width)

2）可以设置行内元素的高宽

    在标准模式下，给span等行内元素设置wdith和height都不会生效，而在怪异模式下，则会生效。

3）可设置百分比的高度

    在标准模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。

4）用margin:0 auto设置水平居中在IE下会失效

    使用margin:0 auto在标准模式下可以使元素水平居中，但在怪异模式下却会失效, 怪异模式下的解决办法，用text一align属性:

   body{text一align:center};#content{text一align:left}

5）怪异模式下设置图片的padding会失效

6）怪异模式下Table中的字体属性不能继承上层的设置

7）怪异模式下white一space:pre会失效

八、 Javascript同源策略

同源策略是Javascript重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。所谓的同源就是同协议，同主机名，同端口号。

它的精髓很简单：它认为自任何站点装载的信赖内容是不安全的。当被浏览器半信半疑的脚本运行在沙箱时，它们应该只被允许访问来自同一站点的资源，而不是那些来自其它站点可能怀有恶意的资源。

九、 为什么要有同源限制？

我们举例说明：比如一个黑客程序，他利用Iframe把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过Javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。

缺点：

现在网站的JS 都会进行压缩，一些文件用了严格模式，而另一些没有。这时这些本来是严格模式的文件，被 merge 后，这个串就到了文件的中间，不仅没有指示严格模式，反而在压缩后浪费了字节。

十、 了解响应式布局吗？请大体说一说

响应式布局概念：Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。

设计步骤：

1．设置meta标签

2．根据媒体查询设置样式

3．设置多种视图宽度

4．注意点：

5．宽度使用百分比

6．处理图片缩放问题

十一、 身为以为web前端工程师，你肯定知道现在最流行的前端技术吧，有那些？

Vuejs2.0/Angular2.0/React Native /es6//Nodejs

http2

gulp/webpack

十二、 请简述为什么要使用数据库的事务

数据库事务(Database Transaction) ，是指作为单个逻辑工作单元执行的一系列操作，要么完全地执行，要么完全地不执行。

原子性（Atomic）（Atomicity)
　　事务必须是原子工作单元；对于其数据修改，要么全都执行，要么全都不执行。通常，与某个事务关联的操作具有共同的目标，并且是相互依赖的。如果系统只执行这些操作的一个子集，则可能会破坏事务的总体目标。原子性消除了系统处理操作子集的可能性。
　　一致性（Consistent）(Consistency)
　　事务在完成时，必须使所有的数据都保持一致状态。在相关数据库中，所有规则都必须应用于事务的修改，以保持所有数据的完整性。事务结束时，所有的内部数据结构（如 B 树索引或双向链表）都必须是正确的。某些维护一致性的责任由应用程序开发人员承担，他们必须确保应用程序已强制所有已知的完整性约束。例如，当开发用于转帐的应用程序时，应避免在转帐过程中任意移动小数点。
　　隔离性（Insulation）(Isolation)
　　由并发事务所作的修改必须与任何其它并发事务所作的修改隔离。事务查看数据时数据所处的状态，要么是另一并发事务修改它之前的状态，要么是另一事务修改它之后的状态，事务不会查看中间状态的数据。这称为隔离性，因为它能够重新装载起始数据，并且重播一系列事务，以使数据结束时的状态与原始事务执行的状态相同。当事务可序列化时将获得最高的隔离级别。在此级别上，从一组可并行执行的事务获得的结果与通过连续运行每个事务所获得的结果相同。由于高度隔离会限制可并行执行的事务数，所以一些应用程序降低隔离级别以换取更大的吞吐量。
　　持久性（Duration）(Durability）
　　事务完成之后，它对于系统的影响是永久性的。该修改即使出现致命的系统故障也将一直保持。

十三、 聊一聊前端存储。

老朋友cookie

短暂的 sessionStorage

简易强大的localStorage

websql与indexeddb

详细参见：https://segmentfault.com/aZ1190000005927232

十四、 BFC

w3c规范中的BFC定义：

浮动元素和绝对定位元素，非块级盒子的块级容器（例如inline一blocks, table一cells,和 table一captions),以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的 BFC (块级格式上下文）。

在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们 的margin值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。

在BFC中，每一个盒子的左外边缘（margin一left)会触碰到容器的左边缘(border一left)(对于 从右到左的格式来说，则触碰到右边缘）。

BFC的通俗理解：

首先BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见 摸不着的），箱子里面物品的摆放是不受外界的影响的。转换为BFC的理解则是：BFC中的 元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元 素和其子元素带来的影响。）并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元 素所组成）都会垂直的沿着其父元素的边框排列。

详细参见：

http://www.w3cplus.com/css/understanding一bfc一and一margin一collapse.html

https://www.zhihu.com/question/28433480

一一一一一一一一前端工程化一一一一一

十五、 场景：你是第一天来公司上班的，项目代码托管在 GitLab，项目地址：git@lab.com:org/project.git，现在有一处代码需要你修改。请完成此项任务中，与 git/gitlab相关的操作步骤。

十六、 CSS，JS代码压缩，以及代码CDN托管，图片整合

CSSJS代码压缩：

可以应用gulp的gulp一uglify, gulp一minify一css模块完成；可以应用webpack的 UglifyJsPlugin 压缩插件完成。

CDN:

内容分发网络(CDN)是一个经策略性部署的整体系统，包括分布式存储、负载均衡、网络请 求的重定向和内容管理4个要件。主要特点有：本地Cache加速，镜像服务，远程加速，带 宽优化。关键技术有：内容发布，内容路由，内容交换，性能管理。CDN网站加速适合以 咨询为主的网站。CDN是对域名加速不是对网站服务器加速。CDN和镜像站比较不需要访 客手动选择要访问的镜像站。CDN使用后网站无需任何修改即可使用CDN获得加速效果。

如果通过CDN后看到的网页还是旧网页，可以通过URL推送服务解决，新增的网页和图片 不需要URL推送。使用动态网页可以不缓存即时性要求很高的网页和图片。CDN可以通过 gi域SVN来管理。

图片整合

减少网站加载时间的最有效的方式之一就是减少网站的HTTP请求数。实现这一目标的一个 有效的方法就是通过CSS Sprites ——将多个图片整合到一个图片中，然后再用CSS来定 位。缺点是可维护性差。可以使用百度的fis/webpack来自动化管理sprite。

十七、 如何利用webpack把代码上传服务器以及转码测试?

代码上传：

可以使用sftp一webpack一plugin,但是会把子文件夹给提取出来，不优雅。可以使用gulp +webpack来实现。

转码测试

webpack应用babel来对ES6转码，开启devtool: “source一map"来进行浏览器测试。应用 karma或mocha来做单元测试。

十八、 项目上线流程是怎样的？

流程建议

一模拟线上的开发环境

本地反向代理线上真实环境开发即可。（apache, nginx, nodejs均可实现）

一模拟线上的测试环境

模拟线上的测试环境，其实是需要一台有真实数据的测试机，建议没条件搭daily的，就直接 用线上数据测好了，只不过程序部分走你们的测试环境而已，有条件搭daily最好。

一可连调的测试环境

可连调的测试环境，分为2种。一种是开发测试都在一个局域网段，直接绑hosts即可，不在 一个网段，就每人分配一台虚拟的测试机，放在大家都可以访问到的公司内网，代码直接往 上布即可。

一自动化的上线系统

自动化的上线系统，可以采用Jenkins。如果没有，可以自行搭建一个简易的上线系统，原 理是每次上线时都抽取最新的trunk或master，做一个tag，再打一个时间戳的标记，然后分 发到cdn就行了。界面里就2个功能，打tag,回滚到某tag,部署。

一适合前后端的开发流程

开发流程依据公司所用到的工具，构建，框架。原则就是分散独立开发，互相不干扰，连调 时有hosts可绑即可。

简单的可操作流程

一代码通过git管理，新需求创建新分支，分支开发，主干发布 一上线走简易上线系统，参见上一节

一通过gulp+webpack连到发布系统，一键集成，本地只关心原码开发

一本地环境通过webpack反向代理的server

一搭建基于linux的本地测试机，自动完成build+push功能

十九、 工程化怎么管理的？

前端工程化可以自动化处理一些繁复的工作，提高开发效率，减少低级错误。

目前前端构建工具很多，综合比较来看，gulp相对来说更灵活，可以做更多的定制化任务，而webpack在模块化方面更完美一些

   gulp打造前端工程化方案，同时引入webpack来管理模块化代码，大致分工如下：

gulp：处理html压缩/预处理/条件编译，图片压缩，精灵图自动合并等任务

webpack：管理模块化，构建js/css。

具体流程可参考： http://blog.csdn.net/java_goodstudy/article/details/52797322

二十、 git常用命令

Workspace:工作区

 Index/Stage:暂存区

Repository:仓库区（或本地仓库）

 Remote:远程仓库

 git  init; (# 在当前目录新建一个Git代码库)

 git  add （添加当前目录的所有文件到暂存区）

 git  rm –cached [file] (# 停止追踪指定文件，但该文件会保留在工作区)

 git  commit  [file1] [file2]  -m  [message] (# 提交暂存区的指定文件到仓库区 )

 git   branch  -a (列出所有本地分支和远程分支)

 git  checkout  [branch-name] (# 切换到指定分支，并更新工作区)

git  status( # 显示有变更的文件)

git  push  [remote] -tags (# 提交所有tag)

详细参见：http://www.ruanyifeng.com/blog/2015/12/git一cheat一sheet.html