web前端包括哪些内容，前端性能优化总结

于 2020-11-25 09:06:41 发布
阅读量1k 收藏 1
点赞数
文章标签： javascript css vue.js html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/icktpxcls/article/details/110109631
版权

转眼间2020年就要结束了，有些人已经成为前端界的大神，也有人还在学习的路上，曾经分享过很多关于前端知识的文章，从简单知识到复杂代码，不知道你们是否从中获得收获，如今前端开发工程师已经是企业中不可缺少的部分，前端的知识也需要我们不断总结学习，接下来介绍下前端性能优化总结。

在这里插入图片描述

1.原则

多使用内存，缓存或者其他方法

减少CPU计算，减少网络请求

减少IO操作（硬盘读写）

2.加载资源优化

静态资源的合并和压缩。

静态资源缓存（浏览器缓存策略）。

使用CDN让静态资源加载更快。

3.渲染优化

CSS放head中，JS放body后

图片懒加载

减少DOM操作，对DOM操作做缓存

减少DOM操作，多个操作尽量合并在一起执行

事件节流

尽早执行操作 DOMContentLoaded

4.示例

4.1 资源合并

a.js b.js c.js — abc.js

4.2 缓存

通过连接名称控制缓存

只有改变内容的时候，链接名称才会改变。

4.3 懒加载
在这里插入图片描述

4.4 缓存dom查询

在这里插入图片描述

4.5 合并dom插入
在这里插入图片描述

4.6 事件节流

监听文字改变事件，无操作100毫秒后执行操作，不用每次触发。
在这里插入图片描述

事件节流主要用于触发频率较高的事件，设定一个缓冲触发事件。

补充

异步加载

非核心代码异步加载 – 异步加载的方式 – 区别

1.动态脚本加载

用js创建

2.defer

3.async

在这里插入图片描述

关于 defer，我们还要记住的是它是按照加载顺序执行脚本的

标记为async的脚本并不保证按照指定它们的先后顺序执行。对它来说脚本的加载和执行是紧紧挨着的，所以不管你声明的顺序如何，只要它加载完了就会立刻执行。

浏览器缓存

浏览器缓存 – 缓存的分类 – 缓存的原理

缓存就是html文件在本地存在的副本，

强缓存

发现有缓存直接用。

在这里插入图片描述

Expires: 绝对时间，判断客户端日期是否超过这个时间

Cache-Control：相对时间，判断访问间隔是否大于3600秒

//在设定时间之前不会和服务端进行通信了

//如果两个都下发以后者为准

协商缓存

询问服务器缓存是否可以用，在进行判断是否用。

Last-Modified/If-Modified-Since

第一次请求，respone的header加上Last-Modified（最后修改时间）

再次请求，在request的header上加上If-Modified-Since

和服务端的最后修改时间对比，如果没有变化则返回304 Not Modified，但是不会返回资源内容；如果有变化，就正常返回资源内容。

浏览器收到304的响应后，就会从缓存中加载资源

如果协商缓存没有命中，浏览器直接从服务器加载资源时，Last-Modified的Header在重新加载的时候会被更新

Etag/If-None-Match

这两个值是由服务器生成的每个资源的唯一标识字符串，只要资源有变化就这个值就会改变；其判断过程与Last-Modified/If-Modified-Since类似，他可以精确到秒的更高级别。

最后

如何学好前端开发是关键：

前端技术每年都会不断更新，自学前端容易学不到最前沿的课程，学习前端开发建议大家还是要选择培训为好，推荐爱创课堂，是一家专门做前端教育的学校，爱创课堂是一家以就业为导向的前端培训学校，所学习的就是企业所需要的，培养企业最需要的前端工程师为企业理念，授课以实战课程为主，更多的学习大项目对以后工作有帮助，毕业后轻松就业！

一位好的Web前端开发工程师在知识体系上既要有广度，又要有深度，所以很多大公司即使出高薪也很难招聘到理想的前端开发工程师。
那么如何系统的学习企业实用的web前端技术呢，视频教程、学习路线、
前端学习培训，可以添加威信：kaixin666haoyun 分享给大家前端学习资料。
相信从中会受到启发，找到学习的方向和目标。如大家对前端还有不了解的问题，可以持续关注我。

尽管有年月日的划分，但日子毕竟是连在一起过的，所以今年未完成的学习安排并不会在2021年到来的那一刻戛然而止。2021年，想必会是忙碌的一年。预祝大家2021年，加班少点，工资多点！

爱创乐育知识速递
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
博客
11 个 ES2022（ES13)中惊人的 JavaScript 新特性
08-08 222
11 个 ES2022（ES13)中惊人的 JavaScript 新特性
博客
Web前端VS后端那个好一点
04-11 1318
作为一个从事IT培训行业多年的人，被问及最多的三个问题就是，前端和后端哪个更好学？前端和后端哪个就业前景好？哪个薪资更高？众所周知，最近几年互联网发展迅速，想要从事互联网的同学也越来越多。那对于新手来说，选择一个自己喜欢的方向非常重要。有兴趣才能坚持，坚持才能成功。Java和Web前端，是当前热门职业之中之二，两者在关注度和热度上不分伯仲，也经常被拿来比较。那么，Java和Web前端，IT新人该如何选择呢？从发展层面来说，Java作为一门老牌编程语言，在国内的发展已经非常完善，目前，大部分的企业都使用
博客
web前端培训 - JavaScript 扩展运算符
03-21 301
JavaScript 扩展运算符简介ES6 提供了一个名为扩展运算符的新运算符，它由三个点 (…) 组成。扩展运算符允许我们扩展可迭代对象的元素，例如数组、映射或集合。例如：const odd = [1,3,5];const combined = [2,4,6, …odd];console.log(combined);输出：[ 2, 4, 6, 1, 3, 5 ]在此示例中，奇数数组前面的三个点 (…) 是展开运算符。扩展运算符 (…) 解包奇数数组的元素。请注意，ES6 还具有三个点 (…
博客
web前端培训 - 八进制和二进制字面量
03-18 1050
ES5 提供了八进制（前缀 0）、十进制（无前缀）和十六进制 (0x) 的数字文字。ES6 增加了对二进制字面量的支持并改变了它表示八进制字面量的方式。八进制要在 ES5 中表示八进制文字，我们使用零前缀 (0) 后跟八进制数字序列（从 0 到 7）。例如：let a = 051;console.log(a); // 41如果八进制文字包含超出范围的数字，JavaScript 会忽略前导 0 并将八进制文字视为十进制，如下例所示：let b = 058; // invalid octalcon
博客
web前端培训 - 12个有用的 JavaScript 代码片段
03-14 2487
1、数值排序 | 升序 [⇣⁰₉]const arr = [40, 100, 1, 5, 25, 10];arr.sort(function(a, b){return a-b;});之前：[40,100,1,5,25,10]之后：[1,5,10,25,40,100]说明：对于数字排序，必须创建一个 Comparator 实体或比较函数。在上面的代码片段中，这相当于const compare = function(a, b){return a-b;};排序结果是arr.sort(com
博客
web前端培训 - 使用const 关键字定义常量
03-08 360
JavaScript const 关键字简介ES6 提供了一种使用 const 关键字声明常量的新方法。const 关键字创建对值的只读引用。const CONSTANT_NAME = value;按照惯例，常量标识符是大写的。与 let 关键字一样， const 关键字声明块作用域变量。但是，由 const 关键字声明的块范围变量不能重新分配。let 关键字声明的变量是可变的。这意味着我们可以随时更改它们的值，如以下示例所示：let a = 10;a = 20;a = a + 5;con
博客
web前端培训 - let关键字声明块范围的变量
03-03 776
JavaScript let 关键字简介在 ES5 中，当我们使用 var 关键字声明一个变量时，变量的作用域要么是全局的，要么是局部的。如果在函数之外声明变量，则变量的范围是全局的。在函数内声明变量时，变量的作用域是局部的。ES6 提供了一种使用 let 关键字声明变量的新方法。let 关键字类似于 var 关键字，只是这些变量是块作用域的。例如：let variable_name;在 JavaScript 中，块用花括号 {} 表示，例如 if else、for、do while、while、t
博客
web前端 - 6 个可以在 CSS 代码中使用的CSS 函数
02-21 206
CSS 是每个 Web 开发人员必备的样式表语言。 它允许我们设置网页样式并使其具有响应性。 此外，借助 flexbox 和 grid 等新的 CSS 功能，我们可以轻松地为我们的网页创建复杂的布局。CSS与所有其他不同的语言一样，CSS 也有自己可以使用的功能。 这些函数可以放置在您要放置属性值的位置。在某些情况下，它们可以伴随另一个值声明。 一些 CSS 函数甚至可以嵌套到其他函数中，让您一次完成许多事情。在本文中，我将与您分享一些作为 Web 开发人员应该知道的有用的 CSS 函数。 现在，让我
博客
web前端 - 写出漂亮JavaScript代码的实用技巧
02-15 354
1、按强类型风格写代码js是弱类型的，但是写代码的时候不能太随意，写得太随意也体现了编码风格不好。下面分点说明：（1）定义变量的时候要指明类型，告诉JS解释器这个变量是什么数据类型的，而不要让解释器去猜，例如不好的写法：var num,str,obj;声明了三个变量，但其实没什么用，因为解释器不知道它们是什么类型的，好的写法应该是这样的：var num =0,str =’’,obj =null;定义变量的时候就给他一个默认值，这样不仅方便了解释器，也方便了阅读代码的人，他会在心里有数——
博客
web前端培训好处及前端成长路线
02-11 539
当今IT行业盛行，从事IT行业人员越来越多，从前端到后端职业中，更多的人喜欢前端开发，因为前端入门简单，学习起来容易，并且现在市场需求逐渐加大，只要拥有好的技术，会深受企业亲睐！今天就为各位分享web前端起步阶段、提升阶段、成型阶段都应该学习哪些知识？如何去学习这些知识？起步阶段1、基本知识的掌握在梳理的知识架构中，按照分析的两个维度里最前置的、最浅显的部分，作为打基础的阶段，必须要在这个过程中更多投入到实践中去，通常做的多了、熟练了，就认为这部分知识和内容掌握了。2、常用工具的掌握对于常用工具的
博客
web前端 - CSS快速开发技巧
01-19 397
使用CSS重置（reset）css重置库如normalize.css已经被使用很多年了，它们可以为你的网站样式提供一个比较清晰的标准，来确保跨浏览器之间的一致性。大多数项目并不需要这些库包含的所有规则，可以通过一条简单的规则来应用于布局中的所有元素，删除所有的margin、padding改变浏览器默认的盒模型。*{ box-sizing:border-box; margin:0; padding:0 }使用box-sizing声明是可选择，如果你使用下面继承的盒模型形式可以跳过它。继承盒模型让盒
博客
web前端 - JS中的4个for循环
01-17 624
在 ECMAScript5（简称 ES5）中，有三个循环。在 2015 年 6 月发布的 ECMAScript6（简称 ES6）中，新增了一种循环类型。他们是：forfor infor eachfor of今天，就让我们一起来看看这4个 for 循环。1、简单的for循环我们来看看最常见的写法：const arr = [1, 2, 3];for(let i = 0; i < arr.length; i++) {console.log(arr[i]);}当循环中数组的长度没有变化
博客
web前端 - 5个常见的JavaScript内存错误
01-10 202
JavaScript 不提供任何内存管理操作。相反，内存由 JavaScript VM 通过内存回收过程管理，该过程称为垃圾收集。既然我们不能强制的垃圾回收，那我们怎么知道它能正常工作？我们对它又了解多少呢？脚本执行在此过程中暂停它为不可访问的资源释放内存它是不确定的它不会一次检查整个内存，而是在多个周期中运行它是不可预测的，但它会在必要时执行这是否意味着无需担心资源和内存分配问题?当然不是。如果我们一不小心，可能会产生一些内存泄漏。什么是内存泄漏？内存泄漏是软件无法回收的已分配的内存块。
博客
web前端 -关于this的面试题
01-05 263
1、默认绑定默认绑定通常是指函数独立调用，不涉及其他绑定规则。非严格模式下，this指向window，严格模式下，this指向undefined。01、题目1.1：非严格模式var foo = 123;function print(){this.foo = 234;console.log(this); // windowconsole.log(foo); // 234}print();非严格模式，print()为默认绑定，this指向window，所以打印window和234。这个fo
博客
JavaScript数组函数整理汇总
12-30 769
1、Array.isArray()我们列表中的第一项是 JavaScript 中的 isArray 方法，它确定传递的输入是否为数组。语法：在下面的代码中， arr 将是我们要检查的输入，是否为数组。isArray() 函数的结果将是一个布尔值。Array.isArray(arr)示例：Array.isArray([1, ‘something’, true]);// trueArray.isArray({anything: 123});// falseArray.isArray(‘som
博客
web前端 - JavaScript 中一流函数的日常用例
12-22 179
什么是“一流函数”？维基百科的定义：在计算机科学中，如果一种编程语言将函数视为一等公民，那么它就被称为具有一等函数。这意味着该语言支持将函数作为参数传递给其他函数，将它们作为其他函数的值返回，并将它们分配给变量或将它们存储在数据结构中。例如，在 JavaScript 中，我们可以将一个函数分配给一个变量。var sum = function(a, b) {return a + b;}var total = sum(10, 1);如果我们是第一次阅读，这个定义会有点混乱。然而，事实是我们在不知
博客
web前端 - 10 个很酷、很实用JavaScript特性
12-16 1468
1、空运算符如果左侧为空或未定义，则此运算符返回右侧值。const data= null ?? ‘data’;console.log(data);// expected output: “data”const data1 = 1 ?? 4;console.log(data1);// expected output: 1逻辑 OR (||) 运算符执行相同的操作，但是，当将 0 作为值传递时，它将视为 false，这使得它容易用于数字。function add(a, b) {val1 =
博客
web前端 - Vue常见问题汇总及解决方案
12-08 1035
Q1：安装超时(install timeout)方案有这么些:cnpm : 国内对npm的镜像版本/*cnpm website: https://npm.taobao.org/*/npm install -g cnpm --registry=https://registry.npm.taobao.org// cnpm 的大多命令跟 npm 的是一致的,比如安装,卸载这些yarn 和 npm 改源大法//使用 nrm 模块 : www.npmjs.com/package/nrmnpm co
博客
web前端 - 6 种在 JavaScript 中清理代码的方法
12-01 940
1、删除不必要的 return 语句：检查函数内部是否需要存在。可以简化为一行代码吗？如果是这样，JavaScript 允许使用隐式返回来简化代码。从下面检查代码。在那里，我删除了额外的变量声明 usersFound，让我可以选择删除未使用的 return 语句。// This function receives as arguments an array of objects,// [{ firstName: ‘Test’ }, { firstName: ‘Ignacio’ }, …]// Th
博客
web前端 - 正则表达式的整理汇总
11-25 927
很多不太懂正则的朋友，在遇到需要用正则校验数据时，往往是在网上去找很久，结果找来的还是不很符合要求。所以我最近把开发中常用的一些正则表达式整理了一下，在这里分享一下。给自己留个底，也给朋友们做个参考。01、手机机身码(IMEI)/^\d{15,17}$/02、必须带端口号的网址(或ip)/^((ht|f)tps?????/)?[\w-]+(.[\w-]+)+:\d{1,5}/?$/03、网址(url,支持端口和"?+参数"和"#+参数)/(((ht|f)tps?)????/)?[\w-]+(.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值