前端开发小技巧，更多在内容在和盈前端开发培训机构课程

　　本文结合自己前端日常开发中，经常用到的且非常重要的一些知识点，进行了汇总。

　　1.css禁用鼠标事件

　　.disabled { pointer-events: none; cursor: default; opacity: 0.6;}复制代码

　　2.get/post的理解和他们之间的区别

　　http

　　超文本传输协议(HTTP)的设计目的是sp an>客户机与服务器之间的通信。HTTP 的工作方式是客户机与服务器之间的请求-应答协议。web 浏览器可能是客户端，而计算机上的网络应用程序也可能作为服务器端。

　　http方法：

　　HEAD: 与 GET 相同，但只返回 HTTP 报头，不返回文档主体 PUT: 上传sp an>的 URI 表示 DELETE: 删除sp an>资源 OPTIONS: 返回服务器支持的 HTTP 方法 CONNECT: 把请求连接转换到透明的 TCP/IP 通道 POST: 向sp a n>的资源提交要被处理的数据

　　// 查询字符串(名称/值对)是在 POST 请求的 HTTP 消息主体中发送的POST /test/demo_form.asp HTTP/1.1Host: w3schools.comname1=value1&name2=value2

　　GET: 从sp an>的资源请求数据

　　GET和POST的区别

　　GET 请求可被缓存 GET 请求保留在浏览器历史记录中 GET 请求可被收藏为书签 GET 请求不应在处理敏感数据时使用 GET 请求有长度限制(2048字符),IE和Safari浏览器限制2k;Opera限制4k;Firefox，Chrome限制8k GET 请求只应当用于取回数据

　　POST 请求不会被缓存 POST 请求不会保留在浏览器历史记录中 POST 不能被收藏为书签 POST 请求对数据长度没有要求

　　3.实现条纹网格的方式

　　nth-child(even/odd)

　　// odd表示基数，此时选中基数行的样式，even表示偶数行.row:nth-child(odd){ background: #eee;}

　　nth-of-type(odd)

　　.row:nth-of-type(odd){ background: #eee;}

　　渐变实现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%, transp arent 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.正则表达式匹配手机号

　　function checkPhone(){ if(!(/^1[34578]\d{9}$/.test(phone))){ alert("手机号码有误，请重填"); return false; }}

　　9.如何提高首屏加载速度

　　js外联文件放到body底部，css外联文件放到head内

　　http静态资源尽量用多个子域名

　　服务器端提供html和http静态资源时好开启gzip

　　在js,css,img等资源响应的http headers里设置expires,last-modified

　　尽量减少http requests的数量

　　js/css/html/img资源压缩

　　使用css spirtes，可以减少img请求次数

　　大图使用lazyload懒加载

　　避免404，减少外联js

　　减少cookie大小可以提高获得响应的时间

　　减少dom elements的数量

　　使用异步脚本，动态创建脚本

　　10.浏览器内核(渲染引擎)

　　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

　　11.浏览器渲染过程及优化建议

　　浏览器渲染过程

　　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

　　1)不要一条一条地修改DOM的样式。还不如预先定义好css的class，然后修改DOM的className。

　　2)把DOM离线后修改。如：使用documentFragment 对象在内存里操作DOM 先把DOM给display:none(有一次reflow)，然后你想怎么改就怎么改。比如修改100次，然后再把他显示出来。clone一个DOM结点到内存里，然后想怎么改就怎么改，改完后，和在线的那个的交换一下。

　　3)不要把DOM结点的属性值放在一个循环里当成循环里的变量。不然这会导致大量地读写这个结点的属性

　　4)为动画的HTML元件使用fixed或absoulte的position，尽量使用transfoem，那么修改他们的CSS是不会reflow的 5)尽量少使用table布局。因为可能很小的一个小改动会造成整个table的重新布局

　　12. 页面导入样式时，使用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不支持;

　　13. 简述一下你对HTML语义化的理解?

　　用正确的标签做正确的事情。html语义化让页面的内容结构化，便于对浏览器、搜索引擎解析; 即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的; 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO; 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

　　14. 请描述一下 cookies，sessionStorage 和 localStorage 的区别?

　　cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)。cookie数据始终在同源的http请求中携带(即使不需要)，会在浏览器和服务器间来回传递。sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

　　存储大小：cookie数据大小不能超过4k。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

　　有期时间：localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据;sessionStorage 数据在当前浏览器窗口关闭后自动删除。cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

　　15. iframe有哪些缺点?

　　*iframe会阻塞主页面的Onload事件;

　　*搜索引擎的检索程序无法解读这种页面，不利于SEO;

　　*iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。使用iframe之前需要考虑这两个缺点。如果需要使用iframe，好是通过javascript 动态给iframe添加src属性值，这样可以绕开以上两个问题。

　　16. 网页验证码是干嘛的，是为了解决什么安全问题?

　　区分用户是计算机还是人的公共全自动程序。可以防止恶意密码、刷票、论坛灌水;

　　有效防止黑客对某一个特定注册用户用特定程序暴力方式进行不断的登陆尝试。

　　17. 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的?

　　(1)有两种， IE 盒子模型、W3C 盒子模型;

　　(2) 盒模型：内容(content)、填充(padding)、边界(margin)、 边框(border);

　　(3)区 别：IE的content部分把 border 和 padding计算了进去;

　　18. position的值relative和absolute定位原点是?

　　absolute 生成定位的元素，相对于值不为 static的一个父元素进行定位。

　　fixed (老IE不支持) 生成定位的元素，相对于浏览器窗口进行定位。

　　relative 生成相对定位的元素，相对于其正常位置进行定位。

　　static 默认值。没有定位，元素出现在正常的流中(忽略 top, bottom, left, right z-index 声明)。

　　inherit 规定从父元素继承 position 属性的值。

　　19. CSS优化、提高性能的方法有哪些?

　　关键选择器(key selector)。选择器的后面的部分为关键选择器(即用来匹配目标元素的部分);如果规则拥有 ID 选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则(这样样式系统就不会浪费时间去匹配它们了);提取项目的通用公有样式，增强可复用性，按模块编写组件;增强项目的协同开发性、可维护性和可扩展性; 使用预处理工具或构建工具(gulp对css进行语法检查、自动补前缀、打包压缩、自动优雅降级);

　　20. 如何修改chrome记住密码后自动填充表单的背景 ?

　　input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { background-color: rgb(250, 255, 189); /* #FAFFBD; */ background-image: none; color: rgb(0, 0, 0); }21. Javascript作用链域?全局函数无法查看局部函数的内部细节，但局部函数可以查看其上层的函数细节，直至全局细节。当需要从局部函数查找某一属性或方法时，如果当前作用域没有找到，就会上溯到上层作用域查找， 直至全局函数，这种组织形式就是作用域链。22. 什么是window对象? 什么是document对象?window对象是指浏览器打开的窗口。document对象是Documentd对象(HTML 文档对23.手机上的多行省略.overflow-hidden{ display: box !important; display: -webkit-box !important; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 4;}

　　24. 改变输入框内提示文字颜色

　　::-webkit-input-placeholder { color: #999; }:-moz-placeholder { color: #999; }::-moz-placeholder { color: #999; }:-ms-input-placeholder { color: #999; }input:focus::-webkit-input-placeholder{ color:#999; }

　　25.消除transtration闪屏

　　消除transition闪屏.css { -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -webkit-perspective: 1000;}

　　26.开启硬件加速

　　.css { -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0);}

　　27. canvas和svg区别

　　1. 从图像类别区分，Canvas是基于像素的位图，而SVG却是基于矢量图形。可以简单的把两者的区别看成photoshop与illustrator的区别。

　　2. 从结构上说，Canvas没有图层的概念，所有的修改整个画布都要重新渲染，而SVG则可以对单独的标签进行修改。

　　3. 从操作对象上说，Canvas是基于HTML canvas标签，通过宿主提供的Javascript API对整个画布进行操作的，而SVG则是基于XML元素的。

　　4. 从功能上讲，SVG发布日期较早，所以功能相对Canvas比较完善。

　　5. 关于动画，Canvas更适合做基于位图的动画，而SVG则适合图表的展示。

　　6. 从搜索引擎角度分析，由于svg是有大量标签组成，所以可以通过给标签添加属性，便于爬虫搜索

　　28. 让页面里的字体变清晰，变细用CSS怎么做?

　　-webkit-font-smoothing: antialiased;

　　前端开发小技巧，对于开发前端将会有意想不到的便利更多内容在和盈前端开发培训机构课程，给你全面的知识体系和小技巧，做到企业级前端员工，毕业就能胜任上岗。