×
13518219792

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

前端开发中不可忽视的知识点汇总（一）

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

创新互联主营巴南网站建设的网络公司,主营网站建设方案,app软件开发公司,巴南h5微信平台小程序开发搭建,巴南网站营销推广欢迎巴南等地区企业咨询

1.css禁用鼠标事件

 
 
 
 
    
  
  
  
  
  1. .disabled { 
    2.   
  
  
  
  2.     pointer-events: none; 
    3.   
  
  
  
  3.     cursor: default; 
    4.   
  
  
  
  4.     opacity: 0.6; 
    5.   
  
  
  
  5. }复制代码 
    6.

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

http

http方法：

 
 
 
 
    
  
  
  
  
  1. // 查询字符串（名称/值对）是在 POST 请求的 HTTP 消息主体中发送的 
    2.   
  
  
  
  2. POST /test/demo_form.asp HTTP/1.1 
    3.   
  
  
  
  3. Host: w3schools.com 
    4.   
  
  
  
  4. name1=value1&name2=value2 
    5.

GET和POST的区别

3.实现条纹网格的方式

 
 
 
 
    
  
  
  
  
  1. nth-child(even/odd) 
    2.  
 
 
 

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

 
 
 
 
    
  
  
  
  
  1. nth-of-type(odd) 
    2.  
 
 
 

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

 
 
 
 
    
  
  
  
  
  1. 渐变实现linear-gradient 
    2.  
 
 
 

 
 
 
 
    
  
  
  
  
  1. .stripe-bg{ 
    2.   
  
  
  
  2.   padding: .5em; 
    3.   
  
  
  
  3.   line-height: 1.5em; 
    4.   
  
  
  
  4.   background: beige; 
    5.   
  
  
  
  5.   background-size: auto 3em; 
    6.   
  
  
  
  6.   background-origin: content-box; 
    7.   
  
  
  
  7.   background-image: linear-gradient(rgba(0,0,0,.2) 50%, transparent 0); 
    8.   
  
  
  
  8. } 
    9.

4.js求平面两点之间的距离

 
 
 
 
    
  
  
  
  
  1. // 数据可以以数组方式存储，也可以是对象方式 
    2.   
  
  
  
  2. let a = {x:'6', y:10}, 
    3.   
  
  
  
  3.         b = {x: 8, y: 20}; 
    4.   
  
  
  
  4.     function distant(a,b){ 
    5.   
  
  
  
  5.         let dx = Number(a.x) - Number(b.x) 
    6.   
  
  
  
  6.         let dy = Number(a.y) - Number(b.y) 
    7.   
  
  
  
  7.         return Math.pow(dx*dx + dy*dy, .5) 
    8.   
  
  
  
  8.     } 
    9.

5.css禁止用户选择

 
 
 
 
    
  
  
  
  
  1. body{ 
    2.   
  
  
  
  2. -webkit-touch-callout: none; 
    3.   
  
  
  
  3. -webkit-user-select: none; 
    4.   
  
  
  
  4. -khtml-user-select: none; 
    5.   
  
  
  
  5. -moz-user-select: none; 
    6.   
  
  
  
  6. -ms-user-select: none; 
    7.   
  
  
  
  7. user-select: none; 
    8.   
  
  
  
  8. } 
    9.

6.数组去重

 
 
 
 
    
  
  
  
  
  1. // indexOf实现 
    2.   
  
  
  
  2. var array = [1, 1, '1']; 
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4. function unique(array) { 
    5.   
  
  
  
  5.     var res = []; 
    6.   
  
  
  
  6.     for (var i = 0, len = array.length; i < len; i++) { 
    7.   
  
  
  
  7.         var current = array[i]; 
    8.   
  
  
  
  8.         if (res.indexOf(current) === -1) { 
    9.   
  
  
  
  9.             res.push(current) 
    10.   
  
  
  
  10.         } 
    11.   
  
  
  
  11.     } 
    12.   
  
  
  
  12.     return res; 
    13.   
  
  
  
  13. } 
    14.   
  
  
  
  14.  
    15.   
  
  
  
  15. console.log(unique(array)); 
    16.   
  
  
  
  16.  
    17.   
  
  
  
  17. // 排序后去重 
    18.   
  
  
  
  18. var array = [1, 1, '1']; 
    19.   
  
  
  
  19.  
    20.   
  
  
  
  20. function unique(array) { 
    21.   
  
  
  
  21.     var res = []; 
    22.   
  
  
  
  22.     var sortedArray = array.concat().sort(); 
    23.   
  
  
  
  23.     var seen; 
    24.   
  
  
  
  24.     for (var i = 0, len = sortedArray.length; i < len; i++) { 
    25.   
  
  
  
  25.         // 如果是第一个元素或者相邻的元素不相同 
    26.   
  
  
  
  26.         if (!i || seen !== sortedArray[i]) { 
    27.   
  
  
  
  27.             res.push(sortedArray[i]) 
    28.   
  
  
  
  28.         } 
    29.   
  
  
  
  29.         seen = sortedArray[i]; 
    30.   
  
  
  
  30.     } 
    31.   
  
  
  
  31.     return res; 
    32.   
  
  
  
  32. } 
    33.   
  
  
  
  33.  
    34.   
  
  
  
  34. console.log(unique(array)); 
    35.   
  
  
  
  35.  
    36.   
  
  
  
  36. // filter实现 
    37.   
  
  
  
  37. var array = [1, 2, 1, 1, '1']; 
    38.   
  
  
  
  38. function unique(array) { 
    39.   
  
  
  
  39.     var res = array.filter(function(item, index, array){ 
    40.   
  
  
  
  40.         return array.indexOf(item) === index; 
    41.   
  
  
  
  41.     }) 
    42.   
  
  
  
  42.     return res; 
    43.   
  
  
  
  43. } 
    44.   
  
  
  
  44. console.log(unique(array)); 
    45.   
  
  
  
  45.  
    46.   
  
  
  
  46. // 排序去重 
    47.   
  
  
  
  47. var array = [1, 2, 1, 1, '1']; 
    48.   
  
  
  
  48. function unique(array) { 
    49.   
  
  
  
  49.     return array.concat().sort().filter(function(item, index, array){ 
    50.   
  
  
  
  50.         return !index || item !== array[index - 1] 
    51.   
  
  
  
  51.     }) 
    52.   
  
  
  
  52. } 
    53.   
  
  
  
  53. console.log(unique(array)); 
    54.   
  
  
  
  54.  
    55.   
  
  
  
  55. // Object键值对 
    56.   
  
  
  
  56. var array = [{value: 1}, {value: 1}, {value: 2}]; 
    57.   
  
  
  
  57.  
    58.   
  
  
  
  58. function unique(array) { 
    59.   
  
  
  
  59.     var obj = {}; 
    60.   
  
  
  
  60.     return array.filter(function(item, index, array){ 
    61.   
  
  
  
  61.         console.log(typeof item + JSON.stringify(item)) 
    62.   
  
  
  
  62.         return obj.hasOwnProperty(typeof item + JSON.stringify(item)) ? false : (obj[typeof item + JSON.stringify(item)] = true) 
    63.   
  
  
  
  63.     }) 
    64.   
  
  
  
  64. } 
    65.   
  
  
  
  65.  
    66.   
  
  
  
  66. console.log(unique(array)); // [{value: 1}, {value: 2}] 
    67.   
  
  
  
  67.  
    68.   
  
  
  
  68. // ES6 Set实现 
    69.   
  
  
  
  69. var unique = (a) => [...new Set(a)] 
    70.

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.正则表达式匹配手机号

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

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

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

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

浏览器渲染过程

优化建议

减少reflow和repaint

12. 页面导入样式时，使用link和@import有什么区别?

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

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

15. iframe有那些缺点?

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

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

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

19. 经常遇到的浏览器的兼容性有哪些?原因，解决方法是什么，常用hack的技巧 ?

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

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

 
 
 
 
    
  
  
  
  
  1. input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { 
    2.   
  
  
  
  2.    background-color: rgb(250, 255, 189); /* #FAFFBD; */ 
    3.   
  
  
  
  3.    background-image: none; 
    4.   
  
  
  
  4.    color: rgb(0, 0, 0); 
    5.   
  
  
  
  5.  } 
    6.

当前文章：前端开发中不可忽视的知识点汇总（一）
文章起源：http://cdbrznjsb.com/article/cceesjg.html

其他资讯

让你的专属顾问为你服务