![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web性能
文章平均质量分 86
编程轨迹_
修罗社区 | 掘金优秀创作者 | 清华大学出版社签约作者 | Web3 开发者 | CSDN 银牌讲师 | 蓝桥云课2021年度人气作者Top2 | 工信部蓝桥认证命题人 | CSDN 博客专家 | 腾讯云2022 年度优秀作者 | 阿里云专家博主 | 华为云享专家 | 著作:《前端面试复习笔记》|《Web3 开发系列教程》|《ThreeJS 在网页中创建动画》|《ElementUI 详解与实战》|《PWA 渐进式Web应用开发》
展开
-
瞒不住了,Prefetch 就是一个大谎言
我们知道,现在的应用程序已经发展到可以拆分为多个 JavaScript包了,为了获得更好的用户体验,这些 bundle 包通常需要预获取,即。但是由于请求是不完整的,浏览器不知道缓存头是什么,所以它不知道重用请求是否安全。我觉得真正的 prefetch 是一种提示,告诉浏览器你将需要一些东西,因此浏览器应该在下载时有一个良好的开端,但我们想要的是用。例如,为了让应用程序拆解成多个包,在你的代码的某些地方,你会进行动态导入,比如。你也不太确定,因此接着,你在 Chrome 中测试它,发现一切都能正常工作。原创 2023-04-03 19:31:03 · 1021 阅读 · 0 评论 -
你的应用太慢了,给我司带来了巨额损失,该怎么办
记得很久之前看过谷歌官方有这么样的声明:如果一个页面的加载时间从 1 秒增加到3 秒,那么用户跳出的概率将增加 32%。但是早在 2012 年,亚马逊就计算出了,页面加载速度一旦下降一秒钟,每年就会损失 16 亿美元的销售额。于是,这篇文章就想聊聊有没有方法来解决这种问题。原创 2023-03-25 15:08:41 · 7713 阅读 · 9 评论 -
页面首屏渲染性能指南
我们知道渲染页面是一个将服务器的响应内容翻译成图片的过程。但是,如果你页面的渲染性能比较糟糕的话,可能会带来相对较高的跳出率。在本文中,我将重点关注网页的初始渲染,即它从解析 HTML 开始。 我将探索可能导致高渲染时间的问题,以及如何解决它们。关键渲染路径(CRP)关键渲染路径 (CRP) 是浏览器将代码转换为屏幕上可显示像素的过程。 它有几个阶段,其中一些可以并行执行以节省时间,但有些部分必须依次完成。 如下图所示:首先,一旦浏览器得到响应,它就会开始解析它。 当它遇到依赖项时,它会尝试下载它原创 2022-05-31 08:18:52 · 686 阅读 · 9 评论 -
前端技能树,面试复习第 11 天 —— Lighthouse 有听说过吗,如何根据 Lighthouse 的测评指标提升应用性能
Lighthouse 是用于测试网页性能工具最有用的技术之一。 它具备了自动化,并可以测量网站的可访问性和 SEO。 更重要的是,它目前是开源的并且可以免费使用。 同时,它可以用来测试渐进式 Web 应用程序。今天,性能不仅仅是渲染应用程序所需的时间。 一些不良的体验带来的多米诺骨牌效应更会损害你的应用程序。速度如何影响您的应用程序的性能?你是否知道自 2010 年以来 Google 一直在关注网站的访问网络速度排名吗?2010 年,Google 宣布将在桌面设备上的用户搜索排名算法中考虑页面访原创 2022-05-27 07:52:24 · 351 阅读 · 6 评论 -
2022 年最流行的 Webpack 插件,你用上了吗
如果我们有合适的工具,开发就会变得更容易。在这篇文章中,我将讨论一些流行的webpack插件。原创 2022-04-18 10:45:00 · 392 阅读 · 0 评论 -
高阶函数:让你的 JS 代码更牛更有范
什么是高阶函数?首先,高阶函数的确切含义是:比典型函数更高的抽象级别。它是对其他函数执行操作的函数。在此定义中,操作可能意味着将一个或多个函数作为参数,或者将一个函数作为结果返回。 你不必同时做这两个事情。进行一项或多项操作即可将功能视为高阶功能。示例如果没有高阶函数,要在数组中的每个数字上加1 并在控制台中显示它,则可以执行以下操作:const numbers = [1, 2, 3, 4, 5];function addOne(array) { for (let i = 0; i <原创 2021-03-19 22:01:22 · 294 阅读 · 0 评论 -
8种方法帮助你写出高效的 React 组件
ES6中的JavaScript已添加了许多功能。 这些更改有助于开发人员编写简短,易于理解和维护的代码。当您使用create-react-app创建React App时,您已经支持这些更改。 这是因为它使用Babel.js将ES6 +代码转换为所有浏览器都能理解的ES5代码。在本文中,我们将探索各种方法来编写更短,更简单和更易于理解的React代码。看看下面的代码:import React from "react";import "./styles.css";export default cla原创 2021-02-24 11:09:06 · 667 阅读 · 0 评论 -
写一个高效的Javascript循环语句
当涉及到循环性能时,争论始终是关于使用哪个循环。 哪个是最快,最高效的? 事实是,在JavaScript提供的四种循环类型中,只有一种比for-in循环要慢得多。 循环类型的选择应基于您的要求而不是性能方面的考虑。在开始之前,让我们对不同类型的循环结构进行回顾。While循环:最简单的循环机制。 只要给定表达式的计算结果为true,就会执行while循环。for循环:for循环的声明包含三个部分:变量的初始化,确定循环是否结束的表达式以及在每次迭代结束时执行的语句。forEach:数组类的一种方法原创 2021-02-23 18:24:45 · 304 阅读 · 0 评论 -
【Web性能】Javascript 代码性能优化条目31条
1.脚本1.1 脚本数量每个<script>标签初始下载时都会阻塞页面渲染,减少页面包含的<script>标签数量有助于改善这一情况。同时,不仅是针对外链脚本,内嵌脚本的数量同样也要限制。浏览器在解析HTML页面的过程中每遇到一个script标签,都会因执行脚本而导致一定的延时,因此最小化延迟时间将会明显改善页面的总体性能。考虑到HTTP请求会带来额外的性能开销,因此......原创 2019-05-14 15:14:07 · 680 阅读 · 0 评论 -
【Webpack】Webpack4.x 常用操作 | 案例 | 相关构建工具
参考:中文文档:https://www.webpackjs.com/一、入门 | Demo当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要(依赖)的每个模块(modules),然后将所有这些模块打包成一个或多个 assets。操作 - 创建package.json文件1、创建一个webpack的项目根目录(如wp......原创 2018-11-16 17:05:52 · 1063 阅读 · 0 评论 -
【网页特性】geolocation | video | Web Workers | 拖拽 | FileReader | canvas操作 | 弧度与角度转换
Web Workers我们知道,js是单线程运行的,这个特点可能会造成当某个操作特别耗时的时候,页面出现崩溃或无响应的状态。Web Workers 能够赋予js多线程的能力,实质上是开启一个Web Workers线程,用于处理这些耗时的计算。下面,通过一个示例说明——计算斐波那契数列:知识:斐波那契数列指的是这样一个数列 1, 1, 2, 3, 5, 8, 13, 21, 34, 55,......原创 2018-10-17 11:00:23 · 689 阅读 · 0 评论 -
【调试】ChromeDevTool高级调式
前端修罗场提供全网最专业的前端优质文章与社区服务,为应届生,初中级前端工程师提供全面、优质的面试服务、技能提升、职场解惑服务!内容包含:前端面试辅导,前端面试题,前端交流,前端答疑,前端基础知识,前端知识体系,技能树搭建,Javascript,CSS,CSS3,HTML,React,Vue,小程序,前端简历,职业交流,远程工作,英文交流,英文提升,外企,互联网,国企,大厂,牛客面试题,掘金面试题,面经,优质前端文章分享...原创 2016-03-12 09:50:19 · 4953 阅读 · 0 评论 -
关于web性能的思考与分享[02]——静态资源
现代互联网企业,为了进一步提升网站性能,会把静态资源和动态网页分集群部署,静态资源会被部署到CDN节点上,网页中引用的资源也会变成对应的部署路径:用文件的摘要信息来对资源文件进行重命名,把摘要信息放到资源文件发布路径中,这样,内容有修改的资源就变成了一个新的文件发布到线上,不会覆盖已有的资源文件。上线过程中,先全量部署静态资源,再灰度部署页面,整个问题就比较完美的解决了。大公司的静态资源优......原创 2015-10-18 21:42:45 · 798 阅读 · 0 评论 -
关于 web 性能的思考与分享[04]——页面 SEO 优化方案
唉,最近公司在研发分布式高性能的云计算平台,其中涉及到了 AI 方面的处理。所以我也在自学 Python,发现没啥门槛😂。不过在 AI 方面的知识却是需要花功夫花时间学习的。在学习的过程中我发现了一个不错的学习教程,推荐给大伙😋,我个人觉得这个教程讲解的通俗易懂,帮我省去了自己苦苦专研的时间,能够得到快速的进步。下一阶段,我也会在这里和大家分享我的学习笔记。上周因为要做SEO页面优化这事,所以就收集了一些关于页面优化的方案,发现SEO真是一门学问,得长期学习。尽管如今SEO的职位已不如从前那样如火如荼了..原创 2015-11-07 20:08:32 · 1278 阅读 · 0 评论 -
关于web性能的思考与分享[03]——常用性能分析工具
今天,我们来介绍几款分析Web性能的工具,这对我们的优化很有帮助。 谷歌是个大家伙,在搜索引擎优化上也推出了自己的工具——PageSpeed Insights1. PageSpeed Insights(有chrome的插件版和在线版) 在线版地址: https://developers.google.com/speed/pagespeed/insights/在这款工具......原创 2015-10-25 15:49:36 · 663 阅读 · 0 评论 -
【工具】gulp自动化构建工具入门教程
gulp 是基于流(stream)的自动化构建工具,能帮助前端节省很多资源。OK,直接进入主题——本篇中将主要介绍怎么用gulp。1 . 先到nodeJs的官网(https://nodejs.org/en/)下载安装nodejs,因为gulp是基于node环境;然后再cmd命令行工具中你可以检测node的版本以此判断node是否安装成功;2.安装 npm ,使用 npm 可以方便的安装 gulp;然后再 cmd 命令行工具中你也可以检测 npm 的版本以此判断 node 是否安装成功;3.根据你的项目路原创 2015-11-14 21:15:08 · 1520 阅读 · 0 评论 -
【工具】fis3 - 使用教程(01)
构建发布到项目根目录下的output(该文件夹名称任意)目录中;当然,你也可以发布到其他盘符中(windows系统下);4. 成功之后,你变output目录下方看到一个经过构建之后的项目了~5. 通过diffMerge这个文件比较工具,可以发现其中的一些改动,即构建之前和构建之后的变化:注意:fis有一个“资源定位”的功能,它能方便的把资源的相对路径在发布之后变换为绝对路径(部署路径),这极大节省了我们在发布项目上线时更改资源路径的工作。6. 同时,我们可以将静态资源统一发布到一个目录下,比如o原创 2015-11-29 00:55:27 · 6074 阅读 · 1 评论 -
【工具】fis3 - 使用教程(02)
前提回顾OK,在本篇中我们将介绍如何调式和发布前面我们已经构建好的项目。由于我们将项目进行构建之后,发现构建之后项目中的资源文件的路径从“相对路径”——>变成了“绝对路径”。这样一来,不方便我们的调式。所以,fis3为了解决这个问题,就在fis3中内置了web server 以方便调式查看我们的构建结果。那问题是我们该如何使用呢?往下看~ 打开web server根目录(1)在使用该命令的时候,有一个前提————即,我们在构建项目时,不指定输出目录,即fis3 release -d ./output 变原创 2015-12-05 17:46:27 · 3763 阅读 · 2 评论 -
【工具】fis3 - 语法教程(1)之资源嵌入
开发fis的这个团队,经过艰辛的探索之后发现,前端开发所需的编译能力只有3种:于是,为了解决这3项功能,fis团队开发出了内置的语法对其进行操作。内置语法主要针对的是 html\css\js 等三种语言提供的编译语法。有了这项能力,在减少http请求数方面将大大提升。需要注意的是,在组件化开发方面,fis是不建议使用“资源嵌入”的方式作为组件化拆分的手段,后面讲到的“声明依赖”能力会更适合组件化开发。例如:在html中嵌入base64图片编译前,针对logo这张图进行处理:编译后:例如:在html中原创 2015-12-27 14:17:03 · 1437 阅读 · 0 评论 -
【工具】fis3 - 语法教程(2)之定位资源
我们在第一篇中就曾经指出,资源定位是fis3中很重要的特性之一。它使得资源的部署问题具备很强的可移植性,不用担心路径的错误啦~同样,它有3种定位方式:##(1)在html中定位资源针对html,我们可以对script\link\style\video\audio\embed等标签的src或href属性进行分析。资源定位的结果(如,资源输出路径)可以通过fis.config这个配置文件进行配置。配置如下:编译之后,资源文件的路径将变化:还有一个好用的地方,它可以做到发布目录和访问的url不一致:在fis原创 2015-12-27 17:25:16 · 1219 阅读 · 0 评论 -
【缓存】HTML5缓存的那些事
前端修罗场提供全网最专业的前端优质文章与社区服务,为应届生,初中级前端工程师提供全面、优质的面试服务、技能提升、职场解惑服务!内容包含:前端面试辅导,前端面试题,前端交流,前端答疑,前端基础知识,Javascript,CSS,CSS3,HTML,React,Vue,小程序,前端简历,职业交流,远程工作,英文交流,英文提升,外企,互联网,国企,大厂,牛客面试题,掘金面试题,面经,优质前端文章分享...原创 2016-04-04 10:31:58 · 12859 阅读 · 0 评论 -
关于web性能的思考与分享[01]——http性能
HTTP性能的关键在于低延迟而不是高带宽! 大多数HTTP 连接的时间都很短,而且是突发性的,但TCP 只在长时间连接传输大块数据时效率才最高。 HTTP 2.0 通过让所有数据流共用同一个连接,可以更有效地使用TCP 连接,让高带宽也能真正的服务于HTTP的性能提升。 同时,单链接多资源的方式,使到至上而下的层面都得到了好处: 1.可以减少服务链接压力,内存占用少了,连接吞吐量大了......原创 2015-10-18 21:22:30 · 536 阅读 · 0 评论