【大白话】说JS的实际应用之跨域和性能优化

moocnanmo
87 阅读3分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第20天，点击查看活动详情

前言

大白话说JS内容包括：DOM的一些操作，Promise相关， 微任务宏任务，作用域，变量提升，闭包，变量类型，深浅拷贝，原型和作用域链，后续争取把js重点都记录上，深入浅出。

什么是跨域和为什么产生跨域

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。为什么产生跨域呢？因为浏览器的同源策略限制，当客户端向服务器请求数据时会产生跨域问题。

通过href，src请求下来的资源文件或图片视频文件不存在跨域，Ajax请求才产生跨域

解决方法有：(一般后端操作)

  • JSONP（不推荐，因为只能支持GET请求，POST不支持），在请求端设置传入函数，需要返回的数据作为调用函数，
  • 修改请求头，CrossOrigin（由spring-web包提供在接口处引入，即可解决，一般用于小程序，原理：在响应头加入允许跨域参数 response.addHeader("Access-Control-Allow-Origin","*")
  • Nginx代理或者网关：模拟一个服务器，发送数据时候，客户端->nginx->服务端；返回数据：服务端->nginx->客户端 ，过程(在模拟的服务器设置监听端口，location 接口，和 Access-Control-Allow-Origin *，然后客户端访问的是模拟服务器端口)
  • CORS：先判断请求，根据请求类型自定义请求头来让服务器和浏览器进行沟通
    • 简单请求（get，post，head），在前（Accept，ContentType）后端（Access-Control-Allow-Origin）设置请求头
    • 非简单：会发个header头为 option的请求进行预检（浏览器检查Origin、Access-Control-Allow-Method和Access-Control-Request-Header），预检验过后接下来的请求就相当于简单请求

实现方法参考：跨域问题解决。

性能优化：

一：包的大小

  1. 使用路由懒加载，分包
  2. 第三方库按需加载
  3. 使用compressionWebpackPlugin使用gizp压缩
  4. 使用uglifyJS或者terserWebpackPlugin去压缩js代码
  5. 打包的时候取消.map文件

二：请求速度

  1. 使用CDN
  2. 减少http请求(合并部分http请求)
  3. 合理使用缓存
  4. 对频繁触发的请求使用防抖节流

三：页面性能

  1. 多图的页面使用图片懒加载，骨架屏，优化首屏来加载速度
  2. 减少重排和重绘，使用transform去改变dom的位置
  3. 善用图片格式，比如png质量较高，可以用来做logo，jp(e)g 质量较低(有从上到下和模糊到清晰的两种模式)，webp虽好，但是不是所有浏览器都兼容，70%左右吧。
  4. 合理使用缓存

四：其他

  1. for循环先把length取出来，避免多次取值。同理的还有vue对data中某个数据频繁取值，可以缓存下来，避免重复添加依赖
  2. 去除一些绑定的事件，定时器等，或者
  3. HTML语义化
avatar
文章
阅读
粉丝