前端知识总结五

最新推荐文章于 2024-07-29 15:37:55 发布

FYH......

最新推荐文章于 2024-07-29 15:37:55 发布

阅读量66

点赞数 1

分类专栏：前端知识点总结文章标签：前端 javascript echarts vue.js webpack

本文链接：https://blog.csdn.net/YUZHOUWUDIZEI/article/details/127661749

版权

前端知识点总结专栏收录该内容

7 篇文章 0 订阅

订阅专栏

81. 防抖节流

防抖：

前面所有的触发都会被取消，最后一次执行在规定时间之后才会触发，也就是说如果连续快速触发，只会执行一次
节流：

在规定的时间间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发，可以给浏览器充分的时间解析回调函数内的代码

82. 外部js文件（没有onload）先加载还是onload先执行

当外部js文件放在head标签里，则先执行外部js文件，再执行onload
当外部js文件放在body标签里，则按照书写书写顺序执行

83. setTimeout时间为0，以及误差

setTimeout时间为0：

setTimeout(fun,0)

立即插入队列，但不是立即执行，等待前面的代码执行完毕

setTimeout出现误差

实际时间：等待时间+执行时间+响应时间

解决方案：误差时间累加、误差时间大于某个值时立即进入队列

let start =new Date().getTime()
let count = 0
let interval = 1000
let timer = setTimeout(fun,interval)
function fun(){
 count++
 //误差时间累加 +1 +2
 let errorTime = new Date().getTime()-(start+count*1000)
 console.log(errorTime)
 //误差时间大于某个值时立即进入队列，例如>1000,setTimeout(fun,0)
 if(count<10){
     timer=setTimeout(fun,interval)
 }

}

84. token存储地以及优缺点

存储地
localstorage：每次调用接口的时候将其放在HTTP请求头的Authorization字段传给后台
- 优点：存储空间大，较灵活
- 缺点：可以通过同域的js访问，容易受到xss攻击，特别是项目中引入很多第三方js类库的情况下。若js脚本被盗用，攻击者可以轻松的访问到网站，webStorage作为一种储存机制，在传输过程中不会执行任何的安全标准
cookie：让其自动发送，不过不能跨域；可以指定httponly，来防止JavaScript读取，可以指定secure，来保证token只在https下传输
- 优点：自动发送
- 缺点：不符合Restful接口最佳实践，容易受到CSRF攻击

85. Vue是怎么渲染模板的

渲染过程：

模板经过编译后生成render函数

执行render函数后，生成vnode

通过patch（container,vnode）将vnode渲染成真实DOM

86. 打包压缩，dist文件过大

避免打包生成.map文件，在配置文件vue.config.js中配置：productionSourceMap:false
使用组件和路由懒加载
常用插件，使用外部链接（CDN、<script src=''/>）引入
对于文件和图片尽量进行压缩
使用compression-webpack-plugin插件

导入：
- 最小化代码配置：minisize(true)
- 分隔代码：splitChunks
- 超过限定值的文件进行压缩：threshold：文件大小（字节为单位）

87. Echarts常用配置项

标题title：主标题text、子标题subtext、主标题样式textStyle、标题位置left
x轴xAxis：x轴数据data、是否显示x轴的线axisLine、是否显示x轴刻度axisTick、坐标轴的类型type
y轴yAxis：是否显示y轴的线axisLine、是否显示y轴刻度axisTick、坐标轴的类型type
提示组件tooltip：提示文字颜色textStyle
系列切换组件legend：图例的数据数组data
工具栏组件toolbox：是否显示show、各工具配置项feature
调整图标布局grid

系列series：图表类型的设置type、图表名称的设置name、图表的数据data

<script>
    //基于准备好的DOM初始化echarts实例
    let dom = document.querySelector('div');
    //创建echarts实例
    let mycharts = echarts.init(dom);
    //指定图表的配置项与数据
    mycharts.setOption({
        //图表的标题
        title: {
            //主标题的设置
            text: '数据可视化',
            //子标题
            subtext: "echarts基本使用",
            //主标题的颜色
            textStyle: {
                color: 'cyan'
            },
            //设置标题位置
            left: 'center'
        },
        //x轴的配置项
        xAxis: {
            //数据
            data: ["衣服", '直播', '游戏', '电影']
        },
        //y轴的配置项
        yAxis: {
            //显示Y轴的线
            axisLine: {
                show: true
            },
            //显示Y轴刻度
            axisTick: {
                show: true
            }
        },
         //提示组件
        tooltip: {
            //提示框文字的颜色
            textStyle: {
                color: 'red'
            }
        },
        //系列切换组件
        legend: {
            data: ['柱状图', '折线图']
        },
         //工具栏组件
        toolbox: {
            show: true,
            feature: {
                saveAsImage: {},
                dataZoom: {
                    yAxisIndex: "none"
                },
                dataView: {
                    readOnly: false
                },
                magicType: {
                    type: ["line", "bar"]
                },
                restore: {},

            }
        },
        //调整图标布局
        grid: {
            left: 30,
            right: 0,
        }
        //系列的设置：绘制什么样类型的图表、数据的展示在这里设置
        series: [
           {
                name: "柱状图",
                type: "bar",
                data: [20, 30, 40, 50]
            }
            ,
            {
                name: "折线图",
                type: 'line',
                data: [30, 40, 50, 60]
            }
        ]
    });
</script>

88. 前端工程化

定义

系统的、规范的、可定量的过程化方法去开发和维护软件
所解决的问题
项目难以维护的问题
- 到处使用的弹窗，需要修改业务的时候，要修改很多地方；
- 每个人都有自己的编码规范，项目代码混乱，难以阅读
- git命令、提交信息混乱
工作效率低下的问题
- 一个日期格式化函数，一个从url获取参数的函数，每个人都实现了一遍，不仅耗时，也增加项目体积
- 图片需要上传cdn，每个人都需要去自己手动上传，容易出错，也浪费时间
低级bug较多的问题
- 参数类型不对
- 不小心多打了一个字符
用工成本大
- 五花八门的技术栈和业务实现方式时，导致需要专门的人来进行维护，甚至需要比较有经验的人来进行维护
总结：维持稳定、提高效率、降低成本

89.TCP和UDP

二者都是通信协议，是传输层的协议，但他们的通信机制和应用场景不同
区别
1. udp是无连接的，发送数据前不需要建立连接，tcp是面向连接的，需要建立连接后传输数据，这个连接就是tcp的三次握手
2. udp是不可靠传输，tcp是可靠传输，因为tcp拥有拥塞控制等机制，能够保证数据无差错传递，而udp没有相关机制，不保证数据的可靠交付
3. udp是面向报文传输，tcp将数据看成一串无结构的字节流，是面向字节流传输的
4. udp支持一对一、一对多、多对多的交互通信，tcp是一对一的两点服务
应用场景
tcp是可靠的传输协议，但效率低；udp是不可靠的传输协议，效率高

tcp适用场景：
- 对通信数据的完整性和准确性要求较高的情况。例如：重要文件传输、邮件发送等
udp适用场景：
- 对通讯速度要求较高，对数据信息的安全性和完整性要求相对较低的情况。例如：网络电话、视频会议、直播等实时通信