前端知识点学习笔记

文章目录

1.px、em和rem的区别？
2.css的position属性？
3.块级元素和行级元素分别怎么垂直居中和水平居中？
4.清除浮动，什么时候需要清除浮动？清除浮动的方法有哪些？
5.理解CSS中[BFC]？
6.如何优化前端的性能，可以从哪些方面入手?
7.如何解决跨域问题**?
8.XML和JSON的区别?
9.说说你对作用域链的理解?
10.HTTP和HTTPS?为什么HTTPS安全?
11.什么是css预处理器|后处理器?
12.display:none和visibility:hidden的区别
13.cookie，session的概念与区别，另外说出你知道的浏览器缓存方式
14.VUE——v-if和v-show的区别
15.VUE——vue的双向绑定数据的原理
16.VUE——vue生命周期理解
17.VUE——vue父子通信
18.虚拟 DOM 的优缺点
19.JavaScript——浏览器的重绘与回流
20.CSS——css中的@media用法总结

1.px、em和rem的区别？

px:绝对尺寸,设置字体大小及元素宽高等比较稳定(考虑其兼容性)

em:相对尺寸,适应相应设备屏幕尺寸的变化(考虑最新浏览器)(继承父元素)(设置当前对象和父元素对象)

rem:相对尺寸,其参考对象是为根元素的font-size

2.css的position属性？

absolute:绝对定位,生成绝对定位元素(相对于最近一级的定位不是 static 的父元素来进行定位)

relative:相对定位,相对于正常位置偏移(相对于其在普通流中的位置进行定位)

fixed:固定定位,相对于浏览器窗口定位

static:默认值，没有定位，元素出现在元素流中

inherit:父元素继承position属性

3.块级元素和行级元素分别怎么垂直居中和水平居中？

块级元素

 display:block  //设置成 块级元素:“ <p> <div> <li> <h> ”

//方法一 加padding减height
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body {
         margin: 0; padding: 0; 
        }   
        .box1 {
            width: 200px;
            height: 150px;
            background-color: #aaa;
            padding-top: 50px; /* 加padding减height*/
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: orange;
            margin: 0 auto;
 
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

//方法二 父相子绝,绝对居中(也使用于行级元素:多行元素)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body {
         margin: 0; padding: 0; 
        }   
        .box1 {
            width: 200px;
            height: 200px;
            background-color: #aaa;
            position: relative;
 
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: orange;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

行级元素:

 display:inline 	 //<a> <span> <laber> <b>

text-align:center  //水平居中

//垂直居中:仅适合应用在文本和图片上，并且这种方法，当你文本不是单行时，效果极差 
height：20px;   
line-height:20px;

4.清除浮动，什么时候需要清除浮动？清除浮动的方法有哪些？

<div class="pic-box">
    <div class="container">
        <img class="pic-1" src="images/system_correct.jpg">
        <img class="pic-2" src="images/system_practice.jpg">
        <img class="pic-3" src="images/system_learn.jpg">
    </div>
</div>

（1）当子元素设置了float属性之后，父元素的高度和宽度没有设置，子元素撑起来，导致父元素的高度塌陷

当包含框(父元素)的高度小于浮动框(子元素)的时候，即脱离了文档流。此时就会出现“高度塌陷”，这时候需要清除浮动

（2）清除浮动的方法

通过加入 **.clearfix:after **清除浮动

.clearfix:after{
   display: block;
   content:'';
   clear: both;
   height:0;
}

在父元素中设置属性overflow:hidden

.containe{
    overflow:hidden;
}

5.理解CSS中[BFC]？

https://www.w3cplus.com/css/understanding-block-formatting-contexts-in-css.html

（1）BFC(Block Formatting Context)是Web页面中盒模型布局的CSS渲染模式。它的定位体系属于常规文档流
（2）一个BFC是一个HTML盒子并且因满足
（3）应用

使用BFC来包含浮动
使用BFC来防止文字环绕
使用BFC来防止外边距折叠

6.如何优化前端的性能，可以从哪些方面入手?

（1）页面级别优化

减小http请求数
- 合理的设置http缓存，恰当的缓存设置可以大大减少http请求。要尽可能地让资源能够在缓存中待得更久
- 从设计实现层面简化页面，保持页面简洁、减少资源的使用时是最直接的
- 资源合并与压缩，尽可能的将外部的脚本、样式进行合并，多个合为一个
- CSS Sprites，通过合并 CSS图片，这是减少请求数的一个好办法
内联脚本的位置

浏览器是并发请求的，而外链脚本在加载时却常常阻塞其他资源，例如在脚本加载完成之前，它后面的图片、样式以及其他脚本都处于阻塞状态，直到脚本加载完成后才会开始加载。如果将脚本放在比较靠前的位置，则会影响整个页面的加载速度从而影响用户体验。所以说尽可能的将脚本往后挪，减少对并发下载的影响

（2）代码级别优化

DOM操作优化

要避免在document上直接进行频繁的DOM操作，可以使用classname代替大量的内联样式修改，对于复杂的UI元素，设置position为absolute或fixed，尽量使用css动画，适当使用canvas尽量减少css表达式的使用，使用事件代理
图片优化（通过对图片的压缩来起到优化前端性能的作用）
CSS选择符（大多数人认为，浏览器对CSS的解析是从左往右的，事实上从右往左解析的效率更高，因为第一个id选择基本上就把查找的范围限定了）

7.如何解决跨域问题**?

(1) JSONP：动态插入script标签，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入
(2) CORS: 服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问
(3) 代理

8.XML和JSON的区别?

(1) 数据体积方面 (JSON相对于XML来讲，数据的体积小，传递的速度更快些)

(2) 数据交互方面 (JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互)

(3) 数据描述方面 (JSON对数据的描述性比XML较差)

(4) 传输速度方面 (JSON的速度要远远快于XML)

9.说说你对作用域链的理解?

作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到window对象即被终止，作用域链向下访问变量是不被允许的

10.HTTP和HTTPS?为什么HTTPS安全?

HTTP协议通常承载于TCP协议之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了我们常说的HTTPS。默认HTTP的端口号为80，HTTPS的端口号为443。因为网络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息，而如果使用HTTPS，密钥在你和终点站才有。https之所以比http安全，是因为他利用ssl/tls协议传输。它包含证书，卸载，流量转发，负载均衡，页面适配，浏览器适配，refer传递等。保障了传输过程的安全性。

11.什么是css预处理器|后处理器?

CSS预处理器定义了一种新的语言，用一种专门的编程语言，为CSS增加了一些编程的特性，进行Web页面样式设计，再编译成正常的CSS文件。CSS 后处理器是对 CSS 进行处理，并最终生成 CSS 的预处理器，它属于广义上的 CSS 预处理器。

12.display:none和visibility:hidden的区别

display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）
visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

13.cookie，session的概念与区别，另外说出你知道的浏览器缓存方式

cookie是客户端记录保存用户身份信息
session是服务器记录用户信息的
缓存方式：
1.http缓存是基于HTTP协议的浏览器文件级缓存机制。即针对文件的重复请求情况下，浏览器可以根据协议头判断从服务器端请求文件还是从本地读取文件，chrome控制台下的Frames即展示的是浏览器的http文件级缓存
2.localStorage缓存是html5的一种新的本地缓存方案，目前用的比较多，一般用来存储ajax返回的数据，加快下次页面打开时的渲染速度
3.sessionStorage和localstorage类似，但是浏览器关闭则会全部删除，api和localstorage相同，实际项目中使用较少

14.VUE——v-if和v-show的区别

1.v-if 的话就得说到 Vue 底层的编译，是VUE的条件渲染，有着更高的切换开销，少量判断使用
2.v-show 是CSS的display属性的切换（none和block），有着跟高的初始化渲染开销，频繁使用

15.VUE——vue的双向绑定数据的原理

vue 实现数据双向绑定主要是：采用数据劫持结合“发布者 - 订阅者”模式的方式，通过 Object.defineProperty() 来劫持各个属性的 setter、 getter，在数据变动时发布消息给订阅者，触发相应监听回调

16.VUE——vue生命周期理解

1.beforeCreate: 组件实例被创建之初，组件的属性生效之前
2.created: 组件实例已经完全创建，属性也绑定，但真实 dom 还没有生成
3.beforeMount: 在挂载开始之前被调用：相关的 render 函数首次被调用
4.mounted：挂载到实例上去之后调用该钩子
5.beforeUpdate: 组件数据更新之前调用，发生在虚拟 DOM 打补丁之前
6.update: 组件数据更新之后
7.activated: keep-alive 专属，组件被激活时调用
8.deadctivated: keep-alive 专属，组件被销毁时调用
9.beforeDestory: 组件销毁前调用
10.destroyed: 组件销毁后调用

17.VUE——vue父子通信

https://www.jianshu.com/p/91416e11f012

通过props来传值：子组件的props选项能够接收来自父组件数据。没错，仅仅只能接收，props是单向绑定的，即只能父组件向子组件传递，不能反向。而传递的方式也分为两种
（1）静态传递
（2）动态传递：我们已经知道了可以像上面那样给 props 传入一个静态的值，但是我们更多的情况需要动态的数据。这时候就可以用 v-bind 来实现。通过v-bind绑定props的自定义的属性，传递去过的就不是静态的字符串了，它可以是一个表达式、布尔值、对象等等任何类型的值。

通过ref来传值：在父组件引用的子组件中采用ref=’要传递的值的key
emit是子组件向父组件的传值方式：子组件可以使用 $emit 触发父组件的自定义事件

prop 着重于数据的传递，它并不能调用子组件里的属性和方法。像创建文章组件时，自定义标题和内容这样的使用场景，最适合使用prop。
$ref 着重于索引，主要用来调用子组件里的属性和方法，其实并不擅长数据传递。而且ref用在dom元素的时候，能使到选择器的作用，这个功能比作为索引更常有用到。

通过$emit 实现通信

18.虚拟 DOM 的优缺点

主要为了兼顾开发效率与性能，后来其卓越的开发性能也赢得了越来越多的开发者的认可。继react之后，Vue2.0也在其核心上面引入了虚拟DOM的概念。
优点：
1.保证性能
2.跨平台

19.JavaScript——浏览器的重绘与回流

https://blog.csdn.net/qq_42269433/article/details/81133772?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1

1.当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流。每个页面至少需要一次回流，就是在页面第一次加载的时候
2.当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color,则就叫称为重绘
回流必将引起重绘，而重绘不一定会引起回流
1.className是预先定义好的样式，不是动态的，如果你要动态改变一些样式，则使用cssText来改变

var left = 1;  
var top = 1; 

el.style.cssText += "; left: " + left + "px; top: " + top + "px;";

2.display:none（隐藏元素，应用修改，重新显示）

var list = document.getElementById("list");
list.style.display = 'none’;
appendDataToElement(list,data);
list.style.display = 'block';

3.cloneNode （将原始元素拷贝到一个脱离文档的节点中,修改副本,完成后再替换回去）

var old = document.getElementById("list");
var clone = old.cloneNode(true);
appendDataToElement(clone,data);
old.parentNode.replaceChild(clone,old);

20.CSS——css中的@media用法总结

https://blog.csdn.net/u010510187/article/details/82790963?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1

针对不同的媒体使用不同的stylesheets

thirteen@hao

原创文章 6 获赞 7 访问量 1345

关注私信