这篇文章主要介绍“前端开发中不可忽视的知识点有哪些”，在日常操作中，相信很多人在前端开发中不可忽视的知识点有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”前端开发中不可忽视的知识点有哪些”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
我们提供的服务有：网站建设、成都网站建设、微信公众号开发、网站优化、网站认证、克州ssl等。为上1000家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的克州网站制作公司
1.css禁用鼠标事件
.disabled { pointer-events: none; cursor: default; opacity: 0.6; }复制代码2.get/post的理解和他们之间的区别
http
http方法：
// 查询字符串（名称/值对）是在 POST 请求的 HTTP 消息主体中发送的 POST /test/demo_form.asp HTTP/1.1 Host: w3schools.com name1=value1&name2=value2
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%, 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的好处
好处：
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.如何提高首频加载速度
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.使用异步脚本，动态创建脚本
10.浏览器内核(渲染引擎)
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语义化的理解?
14. 请描述一下 cookies，sessionStorage 和 localStorage 的区别?
cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)。cookie数据始终在同源的http请求中携带(即使不需要)，记会在浏览器和服务器间来回传递。sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
存储大小：cookie数据大小不能超过4k。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
有期时间：localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据;sessionStorage 数据在当前浏览器窗口关闭后自动删除。cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
15. iframe有那些缺点?
16. 网页验证码是干嘛的，是为了解决什么安全问题?
17. 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的?
18. position的值relative和absolute定位原点是?
absolute 生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。fixed (老IE不支持) 生成绝对定位的元素，相对于浏览器窗口进行定位。relative 生成相对定位的元素，相对于其正常位置进行定位。static 默认值。没有定位，元素出现在正常的流中(忽略 top, bottom, left, right z-index 声明)。inherit 规定从父元素继承 position 属性的值。
19. 经常遇到的浏览器的兼容性有哪些?原因，解决方法是什么，常用hack的技巧 ?
png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.
浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}
这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)
渐进识别的方式，从总体中逐渐排除局部。
首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
css .bb{ background-color:red;/所有识别/ background-color:#00deff\9; /IE6、7、8识别/ +background-color:#a200ff;/IE6、7识别/ _background-color:#1e0bd1;/IE6识别/ }
IE下,可以使用获取常规属性的方法来获取自定义属性, 也可以使用getAttribute()获取自定义属性; Firefox下,只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。
IE下,even对象有x,y属性,但是没有pageX,pageY属性; Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。解决方法：(条件注释)缺点是在IE浏览器下可能会增加额外的HTTP请求数。
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
20. CSS优化、提高性能的方法有哪些?
21. 如何修改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); }到此，关于“前端开发中不可忽视的知识点有哪些”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！
分享名称：前端开发中不可忽视的知识点有哪些
标题链接：
http://cdkjz.cn/article/pegccp.html
