CSS知识点

CSS

1. text-align：行内块元素才能居中显示
2. vertical-align：解决图片底测有空白缝隙的问题
3. white-space：强制一行内显示
4. overflow：hidden：溢出隐藏
5. text-overflow：ellipsis：超出部分为省略号
6. box-sizing：border-box：加了边距也不会撑开盒子
7. transition：过渡效果
8. background:linear-gradient：颜色渐变
9. transform：旋转
10. transform-style：preserve-3d：让父盒子的外边框变成3D效果
11. perspective：透视
12. 父级元素：flex-direction：设置主轴的方向
13. justify-content：设置主轴上的子元素排列方式
14. flex-wrap：设置子元素是否换行
15. align-content：设置侧轴上的子元素的排列方式(多行)
16. align-items：设置侧轴上的子元素排列方式(单行)
17. flex-flow：复合属性，相当于同时设置了flex-diretion和flex-wrap
18. 子项常见属性：flex：子项目占的份数
19. align-self ：控制子项子级在侧轴的排列方式
20. order：属性定义子项的排列顺序（前后顺序）

BFC(float,overflow,display,position)：是一个隔离的容器

作用：块级格式化上下文，与区域外部无关

1. BFC可以清除浮动
2. 可以清除margin重叠部分
3. 制作右侧自适应盒子问题

属性前面加前缀,浏览器的兼容性

1. -webkit-: Goole Chrome, Safari, Android Browser
2. -moz-: Firefox
3. -o-: Opera
4. -ms-: Internet Explorer, Edge
5. -khtml-: Kouqueror

JavaScript

1. location.href：页面跳转
2. window.onload：页面加载时会触发
3. Math.random(): 随机数的获取,获取的结果是小数
4. Math.round(1.1)//1: 四舍五入取整
5. Math.abs()：绝对值方法
6. Math.floor(1.1)// 1：向下取整 往最小了取值
7. Math.ceil(1.1); // 2：向上取整 往最大了取值
8. indexOf(): 数据匹配返回对应的数据，空返回-1，返回该数组元素的索引号str.
9. replace(): 替换操作
10. getAttribute(‘class’)：获取类名
11. setAttribute(‘class’, ‘click’)：设置类型
12. document.body.offsetWidth：获取body的宽度
13. e.clientX：获取鼠标X的坐标
14. div.clientWidth：获取div盒子的宽度
15. array.push()：拼接数组
16. array.splice(下标, 1)：删除元素
17. div.removeChild(删除该元素DOM)：删除DOM元素
18. JSON.parse()：将字符串格式转化成json对象
19. offsetTop：一个元素到父级的顶部距离(父级必须有position属性)
20. date.getFullYear()); // 返回当前日期的年
21. date.getMonth() + 1); // 月份 返回的月份小1个月 记得月份+1 呦
22. date.getTime(); // 这里得到的是， 具体时间 即2021-01-09 距离 1970 年 1 月 1 日 到今的毫秒数
23. date.getDate()); // 返回的是 几号
24. date.getDay()); // 3 周一返回的是 1 周六返回的是 6 但是 周日返回的是 0
25. date.getHours()); // 时
26. date.getMinutes()); // 分
27. date.getSeconds()); // 秒
28. date.valueOf()); // 就是 我们现在时间 距离1970.1.1 总的毫秒数
29. date1 = +new Date(); // +new Date() 返回的就是总的毫秒数
30. arr instanceof Array：运算符 它可以用来检测是否为数组
31. Array.isArray(arr)：H5新增的方法 ie9以上版本支持
32. arr.flat(Infinity): 数组的扁平化，就是把多维数组变为一维数组
33. arr.map()方法将调用的数组的每个元素传递给指定的函数，并返回一个数组，它包含该函数的返回值
34. arr.push(4, ‘pink’)：数组的末尾 添加一个或者多个数组元素，返回的结果是 新数组的长度
35. arr.includes(): 检查元素是否在arr数组里。
36. arr.unshift(‘red’, ‘purple’)：在我们数组的开头 添加一个或者多个数组元素，返回的结果是 新数组的长度
37. arr.pop()：删除数组的最后一个元素，返回的结果是 删除的那个元素
38. arr.shift()：删除数组的第一个元素，返回的结果是 删除的那个元素
39. arr.reverse()：翻转数组
40. arr.lastIndexOf(‘green’)：作用就是返回该数组元素的索引号 从后面开始查找
41. arr.toString()：将我们的数组转换为字符串
42. arr.join(分隔符)：将数组以什么符号分割开来,变成字符串
43. arr.filter(函数)：筛选数组。返回存在的数组
44. arr1.some(函数) ：查找数组中是否有满足条件的元素，返回true、false。在some 里面 遇到 return true 就是终止遍历 迭代效率更高
45. arr.every(箭头函数): 遍历每一项是否都是一样
46. str.charAt(index) ：根据位置返回字符
47. str.charCodeAt(index) ： 返回相应索引号的字符ASCII值 目的： 判断用户按下了那个键
48. str.concat(‘red’,‘active’)：字符串操作方法。相当于字符串的拼接
49. str.substr(‘截取的起始位置’, ‘截取几个字符’)：字符串的截取
50. str.replace(‘被替换的字符’, ‘替换为的字符’) :它只会替换第一个字符
51. str2.split(‘分隔符’):字符转换为数组
52. Object.keys(obj)；用于获取对象自身所有的属性，把属性名变成数组。
53. Object.defineProperty() 定义新属性或修改原有的属性
54. ary.find(函数)：返回一个对象
55. ary.findIndex(箭头函数)：找到一个即返回对应的索引值
56. ary.includes(变量’)：存在返回true，否则false
57. console.log(“y”.repeat(5))：把y打印5次
58. str.startsWith(‘2015’)：匹配开始的字符串是否一样
59. str.endsWith(‘2015’)：匹配结尾的字符串是否一样

性能优化

一、优化原则

1. 尽量减少HTTP请求
2. 使用内容传送网络CDN
3. 避免空src或者是href值
4. gzip的组件
5. CSS放在顶部，JS放在底部
6. 减少DNS查找
7. 压缩资源
8. 避免3XX/4XX（避免重定向/避免404浏览器找不到资源的情况发生）
9. AJAX优化
10. Cookie优化
11. 利用缓存
12. 缩短服务器响应的时间

优化工具

1. Google Page Speed
2. JsPerf & Benchmark.js