共计 6023 个字符，预计需要花费 16 分钟才能阅读完成。
原文链接：链接描述
1.css 禁用鼠标事件
.disabled {
pointer-events: none;
cursor: default;
opacity: 0.6;
}
2.get/post 的理解和他们之间的区别
http
超文本传输协议（HTTP）的设计目的是保证客户机与服务器之间的通信。HTTP 的工作方式是客户机与服务器之间的请求 - 应答协议。web
浏览器可能是客户端，而计算机上的网络应用程序也可能作为服务器端。
http 方法：
HEAD: 与 GET 相同，但只返回 HTTP 报头，不返回文档主体 PUT: 上传指定的 URI 表示 DELETE: 删除指定资源
OPTIONS: 返回服务器支持的 HTTP 方法 CONNECT: 把请求连接转换到透明的 TCP/IP 通道 POST:
向指定的资源提交要被处理的数据
// 查询字符串（名称 / 值对）是在 POST 请求的 HTTP 消息主体中发送的
POST /test/demo_form.asp HTTP/1.1
Host: w3schools.com
name1=value1&name2=value2
GET: 从指定的资源请求数据
GET 和 POST 的区别
GET 请求可被缓存 GET 请求保留在浏览器历史记录中 GET 请求可被收藏为书签 GET 请求不应在处理敏感数据时使用 GET
请求有长度限制 (2048 字符),IE 和 Safari 浏览器限制 2k;Opera 限制 4k;Firefox，Chrome 限制 8k GET
请求只应当用于取回数据 POST 请求不会被缓存 POST 请求不会保留在浏览器历史记录中 POST 不能被收藏为书签 POST
请求对数据长度没有要求
3. 实现条纹网格的方式
1.nth-child(even/odd)
// odd 表示基数，此时选中基数行的样式，even 表示偶数行
.row:nth-child(odd){background: #eee;}
2.nth-of-type(odd)
.row:nth-of-type(odd){background: #eee;}
3. 渐变实现 linear-gradient
.stripe-bg{
padding: .5em;
line-height: 1.5em;
background: beige;
background-size: auto 3em;
background-origin: content-box;
background-image: linear-gradient(rgba(0,0,0,.2) 50%, transparent 0);
}
4.js 求平面两点之间的距离
// 数据可以以数组方式存储，也可以是对象方式
let a = {x:'6', y:10},
b = {x: 8, y: 20};
function distant(a,b){let dx = Number(a.x) - Number(b.x)
let dy = Number(a.y) - Number(b.y)
return Math.pow(dx*dx + dy*dy, .5)
}
5.css 禁止用户选择
body{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
6. 数组去重
// indexOf 实现
var array = [1, 1, '1'];
function unique(array) {var res = [];
for (var i = 0, len = array.length; i < len; i++) {var current = array[i];
if (res.indexOf(current) === -1) {res.push(current)
}
}
return res;
}
console.log(unique(array));
// 排序后去重
var array = [1, 1, '1'];
function unique(array) {var res = [];
var sortedArray = array.concat().sort();
var seen;
for (var i = 0, len = sortedArray.length; i < len; i++) {
// 如果是第一个元素或者相邻的元素不相同
if (!i || seen !== sortedArray[i]) {res.push(sortedArray[i])
}
seen = sortedArray[i];
}
return res;
}
console.log(unique(array));
// filter 实现
var array = [1, 2, 1, 1, '1'];
function unique(array) {var res = array.filter(function(item, index, array){return array.indexOf(item) === index;
})
return res;
}
console.log(unique(array));
// 排序去重
var array = [1, 2, 1, 1, '1'];
function unique(array) {return array.concat().sort().filter(function(item, index, array){return !index || item !== array[index - 1]
})
}
console.log(unique(array));
// Object 键值对
var array = [{value: 1}, {value: 1}, {value: 2}];
function unique(array) {var obj = {};
return array.filter(function(item, index, array){console.log(typeof item + JSON.stringify(item))
return obj.hasOwnProperty(typeof item + JSON.stringify(item)) ? false : (obj[typeof item + JSON.stringify(item)] = true)
})
}
console.log(unique(array)); // [{value: 1}, {value: 2}]
// ES6 Set 实现
var unique = (a) => [...new Set(a)]
7. 什么是 CDN 和 CDN 的好处
CDN:CDN 是将源站内容分发至最接近用户的节点，使用户可就近取得所需内容，提高用户访问的响应速度和成功率。解决因分布、带宽、服务器性能带来的访问延迟问题，适用于站点加速、点播、直播等场景。
好处：1、多域名加载资源
一般情况下，浏览器都会对单个域名下的并发请求数（文件加载）进行限制，通常最多有 4 个，那么第 5 个加载项将会被阻塞，直到前面的某一个文件加载完毕。
因为 CDN 文件是存放在不同区域（不同 IP）的，所以对浏览器来说是可以同时加载页面所需的所有文件（远不止 4 个），从而提高页面加载速度。
2、文件可能已经被加载过并保存有缓存 一些通用的 js 库或者是 css 样式库，如 jQuery，在网络中的使用是非常普遍的。当一个用户在浏览你的某一个网页的时候，很有可能他已经通过你网站使用的 CDN 访问过了其他的某一个网站，恰巧这个网站同样也使用了 jQuery，那么此时用户浏览器已经缓存有该 jQuery 文件（同 IP 的同名文件如果有缓存，浏览器会直接使用缓存文件，不会再进行加载），所以就不会再加载一次了，从而间接的提高了网站的访问速度
3、高效率 你的网站做的再 NB 也不会 NB 过百度 NB 过 Google 吧？一个好的 CDNs 会提供更高的效率，更低的网络延时和更小的丢包率。
4、分布式的数据中心 假如你的站点布置在北京，当一个香港或者更远的用户访问你的站点的时候，他的数据请求势必会很慢很慢。而 CDNs 则会让用户从离他最近的节点去加载所需的文件，所以加载速度提升就是理所当然的了。
5、使用情况分析 一般情况下 CDNs 提供商（如百度云加速）都会提供数据统计功能，可以了解更多关于用户访问自己网站的情况，可以根据统计数据对自己的站点适时适当的做出些许调整。
6、有效防止网站被攻击 一般情况下 CDNs 提供商也是会提供网站安全服务的
8. 圣杯布局和双飞翼布局
参考连接
9. 正则表达式匹配手机号
function checkPhone(){if(!(/^1[34578]\d{9}$/.test(phone))){alert("手机号码有误，请重填");
return false;
}
}
10. 如何提高首频加载速度
1.js 外联文件放到 body 底部，css 外联文件放到 head 内 2.http 静态资源尽量用多个子域名 3. 服务器端提供 html 和 http 静态资源时最好开启 gzip 4. 在 js,css,img 等资源响应的 http headers 里设置 expires,last-modified 5. 尽量减少 http requests 的数量
6.js/css/html/img 资源压缩 7. 使用 css spirtes，可以减少 img 请求次数 8. 大图使用 lazyload 懒加载 9. 避免 404，减少外联 js 10. 减少 cookie 大小可以提高获得响应的时间 11. 减少 dom elements 的数量 12. 使用异步脚本，动态创建脚本
11. 浏览器内核(渲染引擎)
IE/360/ 搜狗浏览器: Trident Chrome/Safari/Opera: WebKit(KHTML 的一个开源的分支)
(虽然我们称 WebKit 为浏览器内核，但不太适合直接称渲染引擎，因为 WebKit 本身主要是由两个引擎构成的，一个正是渲染引擎“WebCore”，另一个则是 javascript 解释引擎“JSCore”，它们均是从 KDE 的渲染引擎 KHTML 及 javascript 解释引擎 KJS 衍生而来。)
(在 13 年发布的 Chrome
28.0.1469.0 版本开始，Chrome 放弃 Chromium 引擎转而使用最新的 Blink 引擎（基于 WebKit2——苹果公司于 2010 年推出的新的 WebKit 引擎），Blink 对比上一代的引擎精简了代码、改善了 DOM 框架，也提升了安全性。)
(为了减少研发成本，Opera 在 2013 年 2 月宣布放弃 Presto，转而跟随 Chrome 使用 WebKit 分支的 Chromium 引擎作为自家浏览器核心引擎)
Firefox/SeaMonkey: Gecko
12. 浏览器渲染过程及优化建议
1）解析：一个是 HTML/SVG/XHTML，事实上，Webkit 有三个 C ++ 的类对应这三类文档。解析这三种文件会产生一个 DOM
Tree。CSS，解析 CSS 会产生 CSS 规则树。Javascript，脚本，主要是通过 DOM API 和 CSSOM API 来操作 DOM
Tree 和 CSS Rule Tree.
2）渲染：浏览器引擎会通过 DOM Tree 和 CSS Rule Tree 来构造
Rendering Tree。注意：Rendering Tree
渲染树并不等同于 DOM 树，因为一些像 Header 或 display:none 的东西就没必要放在渲染树中了。CSS 的 Rule
Tree 主要是为了完成匹配并把 CSS Rule 附加上 Rendering
Tree 上的每个 Element。也就是 DOM 结点。也就是所谓的 Frame。
然后，计算每个 Frame（也就是每个 Element）的位置，这又叫 layout 和 reflow 过程。
3）绘制：最后通过调用操作系统 Native GUI 的 API 绘制。减少 reflow 和 repaint
4）不要一条一条地修改 DOM 的样式。还不如预先定义好 css 的 class，然后修改 DOM 的 className。
把 DOM 离线后修改。如：使用 documentFragment 对象在内存里操作 DOM 先把 DOM 给 display:none(有一次 reflow)，然后你想怎么改就怎么改。比如修改 100 次，然后再把他显示出来。clone 一个 DOM 结点到内存里，然后想怎么改就怎么改，改完后，和在线的那个的交换一下。3）不要把 DOM 结点的属性值放在一个循环里当成循环里的变量。不然这会导致大量地读写这个结点的属性 4）为动画的 HTML 元件使用 fixed 或 absoulte 的 position，尽量使用 transfoem，那么修改他们的 CSS 是不会 reflow 的 5）尽量少使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局
13. 页面导入样式时，使用 link 和 @import 有什么区别？
（1）link 属于 XHTML 标签，除了加载 CSS 外，还能用于定义 RSS,
定义 rel 连接属性等作用；而 @import 是 CSS 提供的，只能用于加载 CSS;
（2）页面被加载的时，link 会同时被加载，而 @import 引用的 CSS 会等到页面被加载完再加载;（3）import 是 CSS2.1
提出的，只在 IE5 以上才能被识别，而 link 是 XHTML 标签，无兼容问题;
(4)link 支持使用 js 控制 DOM 去改变样式，而 @import 不支持;
14. 简述一下你对 HTML 语义化的理解？
用正确的标签做正确的事情。html 语义化让页面的内容结构化，便于对浏览器、搜索引擎解析;
即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的;
搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于 SEO; 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
15. 请描述一下 cookies，sessionStorage 和 localStorage 的区别？
cookie 是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。cookie 数据始终在同源的 http 请求中携带（即使不需要），记会在浏览器和服务器间来回传递。sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存。
存储大小：cookie 数据大小不能超过 4k。sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大。
有期时间：localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；sessionStorage 数据在当前浏览器窗口关闭后自动删除。cookie 设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭
16. iframe 有那些缺点？
iframe 会阻塞主页面的 Onload 事件；搜索引擎的检索程序无法解读这种页面，不利于 SEO; *iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。使用 iframe 之前需要考虑这两个缺点。如果需要使用 iframe，最好是通过 javascript 动态给 iframe 添加 src 属性值，这样可以绕开以上两个问题。
最后
感谢您的阅读！想学习前端的小伙伴们记得关注我
