前端开发相关知识_非首屏css内容可以使用外部css,并且异步加载-CSDN博客

本文链接：https://blog.csdn.net/weixin_44121681/article/details/135322983

本文概述了Vue基础问题、支付宝JSAPI和AlipayJSSDK，探讨了前端this的理解、组件数据设计，介绍了离线包对提升用户体验的作用，涉及CSS性能优化、rem适配、CSS预处理器如Sass和Less，还讲解了Webpack配置、跨域处理、async/await和防抖节流技术，以及移动Hybrid开发和Kylin解决方案。

摘要由CSDN通过智能技术生成

vue基础相关问题参考
 前端面试题大全

支付宝JSAPI文档：JSAPI是支付宝客户端通过bridge机制，允许前端H5页面通过特定的JS方法，可以直接调用对应的支付、拍照、分享、弹出浮层之类的Native功能。相关原理请参照文档理解。（该文档非常重要）

Alipay JSSDK ：是统一 AlipayJSBridge 接口命名、入参、出参格式，处理 AlipayJSBridge 的历史性兼性问题，降低容器内开发成本和客服成本一套 API

移动开发平台 mPaaS

前端this的理解

前端的this，是会发生变化的。this主要四种常见方式有：

this 永远指向函数运行时所在的对象，而不是函数创建时所在的对象。
匿名函数和不处于任何对象中的函数，this指向window.
call,appply,with 指的this 是谁就是谁。
普通函数调用，函数被谁调用，this就指向谁。

为什么data需要是一个函数？

这个说法主要是在组件中出现，因为组件是可以复用的，js里对象是引用关系，如果组件data是一个对象，那么子组件中的data 属性值会相互污染，产生副作用。如果组件中 data 选项是一个函数，那么每个实例可以维护一份被返回对象的独立的拷贝，组件实例之间的 data 属性值不会互相影响；而 new Vue 的实例，是不会被复用的，因此不存在引用对象的问题。

离线包

定义：是将包括 HTML、JavaScript、CSS 等页面内静态资源打包到一个压缩包内。预先下载该离线包到本地，然后通过客户端打开，直接从本地加载离线包，从而最大程度地摆脱网络环境对 H5 页面的影响。

提升用户体验通过离线包的方式把页面内静态资源嵌入到应用中并发布，当用户第一次开启应用的时候，就无需依赖网络环境下载该资源，而是马上开始使用该应用
实现动态更新在推出新版本或是紧急发布的时候，您可以把修改的资源放入离线包，通过更新配置让应用自动下载更新。因此，您无需通过应用商店审核，就能让用户及早接收更新

css性能优化

优化CSS的性能，我们首先需要了解CSS的渲染规则，CSS选择器是从右向左进行匹配的
CSS的渲染规则：CSS中更多的选择器是不会匹配的，所以在考虑性能问题时，需要考虑的是如何在选择器不匹配时提升效率。从右向左匹配就是为了达成这一目的的，通过这一策略能够使得CSS选择器在不匹配的时候效率更高。

内联首屏关键CSS：首次有效绘制即指页面的首要内容。出现在屏幕上的时间。这一指标影响用户看到页面前所需等待的时间，而内联首屏关键CSS 能减少这一时间。内联CSS能够使浏览器开始页面渲染的时间提前，因为在HTML下载完成之后就能渲染了。
异步加载非首屏CSS：由于CSS会阻塞DOM的渲染，所以我们将首屏关键CSS内联后，剩余的非首屏CSS内容可以使用外部CSS，并且异步加载，防止非首屏CSS内容阻塞页面的渲染
CSS文件压缩：通过压缩CSS文件大小来提高页面加载速度。现在的构建工具，如webpack、gulp/grunt、rollup等也都支持CSS压缩功能。
CSS层级嵌套最好不要超过3层
删除无用CSS代码
不要在ID选择器前面进行嵌套其它选择器
慎用*通配符

三种css连接

内联：写在标签中的样式
内部：写在该文件的script标签中
外部：单独写一个css文件引入

苹果手机大小屏幕怎么适配？

其他H5移动端适配点击这里
rem单位：使用rem单位来设置元素的尺寸，通过在根元素设置基准字体大小，其他元素的尺寸将会相对于基准字体大小进行缩放。

rem（root em）是个相对单位，针对根元素（html）的font-size来计算大小的，他是用来移动端识别。
举例：根元素（html）font-size: 12px。非根元素设置为2rem；则换成px表示24px；
em是相同的原理，但是它是针对父元素来说的

// div1是根元素
<div class="div1">
	<div class="div2">
		<p class="p1">
		// 此时p的宽度是相对于div2来说的，也就是24px
		</p>
		<p class="p2">
		// 此时p的宽度是相对于div1（根元素）来说的，也就是16px
		</p>
	</div>
</div>

.div1{
	font-size: 8px;
}
.div2{
	font-size: 12px;
}
.p1{
	width: 2em;
}
.p1{
	width: 2rem;
}

现在知道了rem怎么工作的，我们需要对css中的px进行换算为对应的rem，所以咱们引入less去动态的帮我们计算。当然还需要获取到设备的信息。不同设备的宽高。

css预处理器

由来：CSS，我们知道它并不是一种编程语言，我们可以用它开发网页样式，但却不能用它进行编程，它不能写变量，也不能写条件语句，只是一行行单纯的样式描述，在大型项目中写起来显得尤为复杂。开始为CSS加入编程元素，这就是CSS预处理器

Sass：sass可以允许我们使用变量，在sass中所有变量都必须以$开头，如果值后面加上!default则表示默认值
Sass (Syntactically Awesome Stylesheets):通过提供变量、嵌套规则、Mixin（混入）、继承等功能，简化了CSS的编写。
支持使用函数进行数学运算和逻辑操作。
提供了模块化的方式来组织样式表。
Less:Less也提供了类似Sass的功能，包括变量、Mixin等。
与Sass相比，语法较为简洁，易于上手。
尽管在功能上与Sass相似，但在某些方面语法有所不同。
Stylus: Stylus具有非常灵活的语法，允许用户在编写样式时更自由地表达想法。与Sass和Less相比，Stylus的语法更加简洁和紧凑。

这些预处理器的共同作用包括：

提供变量和嵌套，使得样式表更易于维护和修改。
支持Mixin和继承，可以减少代码重复，增强可重用性。
允许进行数学运算、逻辑判断和函数调用，使得样式表的编写更加灵活和强大。
通过引入模块化的概念，提高了样式表的组织和管理能力。

关于Webpack，你可以了解以下知识点：

WebPack详细方案点击这里
基本概念：学习Webpack的基本概念，包括入口（entry）、输出（output）、加载器（loaders）、插件（plugins）等。

模块化：理解Webpack如何处理模块化，包括支持CommonJS、ES6 模块等，并且能够进行相应的配置。
加载器：深入了解Webpack加载器的作用和使用，比如处理各种文件类型（例如 CSS、图片、字体等）的加载器配置。
插件：掌握Webpack插件的使用，以优化代码、资源管理、环境变量注入等为主要目的的插件。
代码拆分：学习Webpack中的代码拆分技术，包括同步/异步代码拆分，减少初始加载时间等。
性能优化：了解Webpack的性能优化技巧，包括缓存、并行构建、Tree Shaking 等。
模式与环境：理解Webpack中的不同模式（development、production 等）和如何应用环境变量。
DevServer：学习如何使用Webpack DevServer 进行开发过程中的热重载、代理等功能。

这些知识点的具体内容包括：

对Webpack核心概念的详细解释和实际应用。
各种加载器和插件的配置方法和实际应用场景
Webpack的高级特性和性能优化策略的实现方式。
实际案例和最佳实践，以及如何在项目中应用Webpack来组织和构建前端代码。

跨域：浏览器是禁止跨域的，但是服务端不禁止

相关跨域知识点点击这里
指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的（所谓同源是指，域名，协议，端口均相同，只要有一个不同，就是跨域），是浏览器施加的安全限制。请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。同源策略是浏览器的安全策略，不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议，不会执行JS脚本，不需要同源策略，也就不存在跨越问题。

跨域之后，同源策略限制了以下几点

Cookie、LocalStorage 和 IndexDB 无法读取
DOM 和 JS 对象无法获取
Ajax请求发送不出去

解决方法：

JSONP跨域:在HTML标签里，一些标签比如script、img这样的获取资源的标签是没有跨域限制的。是只支持 GET 请求，不支持 POST 请求。
跨域资源共享(CORS):只服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求，则前后端都需要设置。由于同源策略的限制，所读取的cookie为跨域请求接口所在域的cookie，而非当前页。如果想实现当前页cookie的写入，可参考下文：nginx反向代理和 NodeJs中间件代理

ES6中的async/await

总结：async和await基本是组合使用的，async用来声明一个异步方法，返回的是一个promise对象，如果要获取到对应的返回值，就需要使用.then方法；await只能在async方面的里面使用，让后面的执行语句或方法要等待当前await方法的结果后才能再执行。

async的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思，异步函数也就意味着该函数的执行不会阻塞后面代码的执行。
awite后面可以放任何表达式，不过我们更多的是放一个返回promise 对象的表达式。注意await 关键字只能放到async 函数里面

// 现在写一个函数，让它返回promise 对象，该函数的作用是2s 之后让数值乘以2
function doubleAfter2seconds(num) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(2 * num)
        }, 2000);
    } )
}

  async function testResult() {
       let result = await doubleAfter2seconds(30);
       console.log(result);
  }