html+css+js前端面试题汇总

一 . html模块+css模块
1、怎么让一个不定宽高的 DIV，垂直水平居中？
答：1）使用 CSS 方法：
父盒子设置：display：table-cell； text-align：center；vertical-align：middle；
Div 设置： display：inline-block；vertical-align：middle；
2）使用 CSS3 transform：
父盒子设置：display：relative
Div 设置： transform： translate(-50%，-50%)；position： absolute；top： 50%；left： 50%

2.px，em，rem 的区别？
答： 1）px 像素（Pixel）。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算
机系统的数字化图像长度单位，如果 px 要换算成物理长度，需要指定精度 DPI。
2）em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，
则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。
3）rem 是 CSS3 新增的一个相对单位（root em，根 em），使用 rem 为元素设定字体大小时，仍然是相对大小，
但相对的只是 HTML 根元素。
4）区别：IE 无法调整那些使用 px 作为单位的字体大小，而 em 和 rem 可以缩放，rem 相对的只是 HTML 根
元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有
字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了 IE8 及更早版本外，所有浏览器均已支持 rem

3.清除浮动的几种方式？
答：1，父级 div 定义 height
原理：父级 div 手动定义 height，就解决了父级 div 无法自动获取到高度的问题。 简单、代码少、容易掌握 ，但
只适合高度固定的布局.
2，结尾处加空 div 标签 clear：both
原理：在浮动元素的后面添加一个空 div 兄弟元素，利用 css 提高的 clear：both 清除浮动，让父级 div 能自动获
取到高度 ，如果页面浮动布局多，就要增加很多空 div，让人感觉很不好

4.简述对 Web 语义化的理解？
答：就是让浏览器更好的读懂你写的代码，在进行 HTML 结构、表现、行为设计时，尽量使用语义化的标
签，使程序代码简介明了，易于进行 Web 操作和网站 SEO，方便团队协作的一种标准，以图实现一种“无障碍”
的 Web 开发。

5.display： none；与 visibility： hidden 的区别是什么？
答：display：none； 使用该属性后，HTML 元素（对象）的宽度、高度等各种属性值都将“丢失”；
visibility：hidden； 使用该属性后，HTML 元素（对象）仅仅是在视觉上看不见（完全透明），而它所
占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。

2.JS模块
== 判断内容是否相等 不比较类型
console.log(1 == “1”)； true
=== 判断内容相等 且类型也相等
console.log(1 ===“1”)； false

js 中一共有几种数据类型？
答：Undefined、Null、Boolean、Number 和 String。
还有一种复杂的数据类型 Object，Object 本质是一组无序的名值对组成的。

1.谈谈 js 作用域和闭包？
答：简单的说，作用域是针对变量的，比如我们创建一个函数 a1，函数里面又包了一个子函数 a2。此时就存
在三个作用域：
全局作用域－a1 作用域－a2 作用域；即全局作用域包含了 a1 的作用域，a2 的作用域包含了 a1 的作用域。
当 a1 在查找变量的时候会先从自身的作用域区查找，找不到再到上一级 a2 的作用域查找，如果还没找到就
到全局作用域区查找，这样就形成了一个作用域链。
理解闭包首先要理解，js 垃圾回收机制，也就是当一个函数被执行完后，其作用域会被收回，如果形成了闭包，执行完后其作用域就不会被收回。
如果某个函数被他的父函数之外的一个变量引用，就会形成闭包。
闭包的作用，就是保存自己私有的变量，通过提供的接口（方法）给外部使用，但外部不能直接访问该变量。
2.什么是原型链？
答：Javascript 是面向对象的，每个实例对象都有一个__proto_属性，该属性指向它原型对象，这个实例对象
的构造函数有一个原型属性 prototype，与实例的__proto__属性指向同一个对象。当一个对象在查找一个属性的时，
自身没有就会根据__proto__ 向它的原型进行查找，如果都没有，则向它的原型的原型继续查找，直到查到
Object.prototype._proto_为 nul，这样也就形成了原型链

3.列举字符串操作的方法？
charCodeAt 方法返回一个整数，代表指定位置字符的 Unicode 编码；
charAt 方法返回指定索引位置处的字符。如果超出有效范围的索引值返回空字符串；
slice 方法返回字符串的片段；
substring 方法返回位于 String 对象中指定位置的子字符串。
substr 方法返回一个从指定位置开始的指定长度的子字符串。
indexOf 方法返回 String 对象内第一次出现子字符串位置。如果没有找到子字符串，则返回-1；
lastIndexOf 方法返回 String 对象中字符串最后出现的位置。如果没有匹配到子字符串，则返回-1；
search 方法返回与正则表达式查找内容匹配的第一个字符串的位置。
concat 方法返回字符串值，该值包含了两个或多个提供的字符串的连接；
split 将一个字符串分割为子字符串，然后将结果作为字符串数组返回；
4.谈谈你对递归的认识？

答：递归：程序调用自身的编程技巧称为递归，自己调用自己。

function factorial(num) {
return ( num <= 1 ) ? 1 ： num * factorial(num - 1)；
}
console.log(factorial(8))

4.网络
1.、Post 与 get 的区别，什么时候用 post，什么时候用 get？
答：区别：
get 存储内容小，不能超过 2kb，有限；文件上传只能用 post。
get 不安全，显示在地址栏。
get 效率高，因为 post 请求需要加密和解密的过程，get 不需要。
在做数据查询时，建议用 Get 方式；而在做数据添加、修改或删除时，建议用 Post 方式；在提交一些不紧要信息
时，使用 get，效率高。

2.性能优化的认识？
答：网页内容
减少 http 请求次数
80%的响应时间花在下载网页内容(images， stylesheets， javascripts， scripts， flash 等)。减少请求次数是
缩短响应时间的关键！可以通过简化页面设计来减少请求次数，但页面内容较多可以采用以下技巧。
减少 DNS 查询次数
DNS 查询也消耗响应时间，如果我们的网页内容来自各个不同的 domain (比如嵌入了开放广告，引用了外部
图片或脚本)，那么客户端首次解析这些 domain 也需要消耗一定的时间。DNS 查询结果缓存在本地系统和浏览器
中一段时间，所以 DNS 查询一般是对首次访问响应速度有所影响。下面是我清空本地 dns 后访问博客园主页 dns
的查询请求。
缓存 Ajax
Ajax 可以帮助我们异步的下载网页内容，但是有些网页内容即使是异步的，用户还是在等待它的返回结果，
例如 ajax 的返回是用户联系人的下拉列表。所以我们还是要注意尽量应用以下规则提高 ajax 的响应速度。
延迟加载
这里讨论延迟加载需要我们知道我们的网页最初加载需要的最小内容集是什么。剩下的内容就可以推到延迟
加载的集合中。
Javascript 是典型的可以延迟加载内容。一个比较激进的做法是开发网页时先确保网页在没有 Javascript 的时
候也可以基本工作，然后通过延迟加载脚本来完成一些高级的功能。

3.请描述一下 cookie，sessionStorage 和 localStorage 的区别？
答：cookies 兼容所有的浏览器，Html5 提供的 storage 存储方式。
1 Document.cookie
2 Window.localstorage
3 Window.sessionstorage
cookie 数据始终在同源的 http 请求中携带（即使不需要），即 cookie 在浏览器和服务器间来回传递。而
sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存。
存储大小限制也不同，cookie 数据不能超过 4k，同时因为每次 http 请求都会携带 cookie，所以 cookie 只适合
保存很小的数据，如会话标识。sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可
以达到 5M 或更大。
数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：
始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie 只在设置的 cookie 过期时间之前一直有效，
即使窗口或浏览器关闭。
作用域不同，sessionStorage 不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗
口中都是共享的；cookie 也是在所有同源窗口中都是共享的

4.CDN 是啥？
答：CDN 的全称：是 Content Delivery Network，即内容分发网络，加速的意思，那么网站 CND 服务就是网
站加速服务。
CDN 加速原理：CDN 加速将网站的内容缓存在网络边缘（离用户接入网络最近的地方），然后在用户访问网
站内容的时候，通过调度系统将用户的请求路由或者引导到离用户接入网络最近或者访问效果最佳的缓存服务器上，有该缓存服务器为用户提供内容服务；相对于直接访问源站，这种方式缩短了用户和内容之间的网络距离，
从而达到加速的效果。
CDN 的特点：
1、本地加速 提高了企业站点(尤其含有大量图片和静态页面站点)的访问速度，并大大提高以上性质站点的
稳定性
2、镜像服务 消除了不同运营商之间互联的瓶颈造成的影响，实现了跨运营商的网络加速，保证不同网络中
的用户都能得到良好的访问质量。
3、远程加速 远程访问用户根据 DNS 负载均衡技术 智能自动选择 Cache 服务器，选择最快的 Cache 服务器，
加快远程访问的速度
4、带宽优化 自动生成服务器的远程 Mirror(镜像)cache 服务器，远程用户访问时从 cache 服务器上读取数据，
减少远程访问的带宽、分担网络流量、减轻原站点 WEB 服务器负载等功能。
5、集群抗攻击 广泛分布的 CDN 节点加上节点之间的智能冗于机制，可以有效地预防黑客入侵以及降低各
种 D.D.o.S 攻击对网站的影响，同时保证较好的服务质量。