提供了编程的基础技术教程

zl程序教程

web性能优化

  • Web性能优化之Worker线程(上).md

    Web性能优化之Worker线程(上).md

    前言大家好，我是柒八九。因为，最近有一个需求中，用到了Worker技术，然后经过一些调研和调试，成功的在项目中应用。虽然，有部分原因是出于「技术尝鲜」的角度才选择Worker进行性能优化。但是，「看懂了，会用了，领悟了」。这是不同的技术层面。所以，打算做一个Worker科普和实际生产应用的文章。那我们就闲话少叙，开车走起。文章概要Worker 线程简介专用工作线程Dedicated Worker

    日期 2023-06-12 10:48:40     
  • Web性能优化之Worker线程(下)

    Web性能优化之Worker线程(下)

    大家好，我是柒八九。前天在Web性能优化之Worker线程(上)中针对Worker中的专用工作线程Dedicated Worker做了简单介绍和描述了如何配合webpack在项目中使用。今天，我们就着重对服务工作线程Service Worker进行介绍。由于，在实际项目中，还未做实践，所以有些东西更偏向于概念和API的描述。但是，我感觉针对「服务工作线程」在项目优化方面还是有很大的可探索的空间的

    日期 2023-06-12 10:48:40     
  • Web前端性能优化解决方案

    Web前端性能优化解决方案

    大家好，又见面了，我是你们的朋友全栈君。 **1、请减少HTTP请求基本原理：**在浏览器(客户端)和服务器发生通信时，就已经消耗了大量的时间，尤其是在网络情况比较糟糕的时候，这个问题尤其的突出。一个正常HTTP请求的流程简述：如在浏览器中输入”www.xxxxxx.com“并按下回车，浏览器再与这个URL指向的服务器建立连接，然后浏览器才能向服务器发送请求信息，服务器在接受到请求的信息后再返

    日期 2023-06-12 10:48:40     
  • Web页面全链路性能优化指南

    Web页面全链路性能优化指南

    性能优化不单指优化一个页面的打开速度，在开发环境将一个项目的启动时间缩短使开发体验更好也属于性能优化，大文件上传时为其添加分片上传、断点续传也属于性能优化。在项目开发以及用户使用的过程中，能够让任何一个链路快一点，都可以被叫做性能优化。本文会对web页面的全链路进行完整的讲解并针对每一步找到能做的性能优化点，本文的目标是极致的性能优化。本文的大致流程为先讲理论知识，比如如何评价一个页面的性能好与不

    日期 2023-06-12 10:48:40     
  • webpack性能优化(1):分隔/分包/异步加载+组件与路由懒加载

    webpack性能优化(1):分隔/分包/异步加载+组件与路由懒加载

    webpack ensure相信大家都听过。有人称它为异步加载，也有人说做代码切割，那这个家伙到底是用来干嘛的？其实说白了，它就是把js模块给独立导出一个.js文件的，然后使用这个模块的时候，webpack会构造script dom元素，由浏览器发起异步请求这个js文件。这样解决整个项目打包成同一个非常大js、css，首屏加载慢。其实和我们加载百度统计代码类似， 把一些js模块给独立出一个个js文

    日期 2023-06-12 10:48:40     
  • web 页面在浏览器运行eval性能分析和优化

    web 页面在浏览器运行eval性能分析和优化

    公司有个低代码老项目，里面有一些自定义脚本运行使用了大量的eval 动态运行。分析网上对eval 的争论也非常激烈，大部分不建议使用，一些人观点是用不好才导致问题。eval 是否真的存在效率问题？ eval is evil我们知道new Function 也可以实现动态运行代码，但是这样就产生了作用域问题。eval是没有作用域的。mdn文档 对于安全方面，使用eval 存在漏洞不在分析范围。试

    日期 2023-06-12 10:48:40     
  • web应用程序性能优化详解编程语言

    web应用程序性能优化详解编程语言

    web应用程序基本上都是在浏览器地址栏输入一段网站，然后进入，最后浏览器显示你想要的东西。 这就是用户所能体会到的东西。那作为程序员我们看到了什么呢？ 一次HTTP 请求主要的流程是：  1、DNS服务器解析域名（浏览器地址栏的地址）获取相应的IP地址、端口号、 服务名。  2、客户端根据解析后的地址向服务啊发送请求(建立与服务器的联接)。 &n

    日期 2023-06-12 10:48:40     
  • web页面性能优化之接口前置

    web页面性能优化之接口前置

    上个Q做了一波web性能优化,积累了一点点经验 记录分享一下。 先分享一个比较常用的接口前置 的优化方案吧 优化前首屏秒开大约在40%左右 首屏秒开大约提高了25% 先发一张优化成果图 前置原因 对于前后端分离的页面来说,一般的加载方式都是如下: 请求html页面 -> 浏览器解析html -> 请求css js  -&

    日期 2023-06-12 10:48:40     
  • Web前端性能优化，应该怎么做?

    Web前端性能优化，应该怎么做?

    本文将分享一些前端性能优化的常用手段，包括减少请求次数、减小资源大小、各种缓存、预处理和长连接机制，以及代码方面的性能优化等方面。 base64：尤其是在移动端，小图标可以base64（webpack），大图片慎用（如果加载速度过于慢的

    日期 2023-06-12 10:48:40     
  • web开发性能优化---项目架构篇

    web开发性能优化---项目架构篇

    项目技术架构层级规划和介绍 简称四横两纵 四横即四大层次。分别为： 1、用户渠道层：用户渠道层是直接面向终于用户。通过站点的形式向用户提供产品展示、企业市场宣传、对产品的订购、互动分享、客户关怀以及用户中心入口等功能。并提供后期扩展移动终端接入； 2、应用业务层：该层面向的是系统管理人员。 为系统管理人员提供系统的总体管理，包含产品管理、企业管理、栏目管理、交易管理、信息管理、用户

    日期 2023-06-12 10:48:40     
  • web开发性能优化---扩展性能篇

    web开发性能优化---扩展性能篇

    1、实现代码分离 一个成熟的软件开发团队一般都不会全然手写代码。这里讲的代码分离仅仅要是开发中用到的小技巧，通过底层框架+手工代码方式结合实现高速开发和高速扩展。 Code目录内文件不同意改动，目录主要存放系统自己主动生成代码；同一DAL层下执行两个类名同样，採用partial合并类，可是两个类不同意有同名同參数方法。 利用partialkeyword合并两个同名类小技巧，code存放

    日期 2023-06-12 10:48:40     
  • Web前端性能优化——高频触发事件的防抖

    Web前端性能优化——高频触发事件的防抖

    JS 提供了行为层的支持，为用户提供了交互的操作性。然而，部分事件却常常有意无意的被频繁触发。比方浏览器窗体的 resize 事件。某个元素的 mouseover 事件，假设处理触发事件的回调函数过重，那么最后的结果就是浏览器死掉。 为此，怎样提供一种对此类事件的高频触发的防抖是相当重要的。 所谓的防抖，就是在一定时间内。规定事件被触发的最多次数。 參考：http://www.gbtags.

    日期 2023-06-12 10:48:40     
  • Web系统性能优化系列-Web系统性能指标

    Web系统性能优化系列-Web系统性能指标

    引言 性能评估是进行系统设计以及系统优化的重要事项，进行正确地性能评估才能有效地规划系统容量，保证系统地稳定运行。 性能指标 在性能评估过程中常见的性能指标有以下几种： TP

    日期 2023-06-12 10:48:40     
  • [转] webpack折腾记（四）：性能优化

    [转] webpack折腾记（四）：性能优化

    之前接手的一个旧项目，使用的是roadhog + dva + antd等技术，里面大概有上百个路由文件，其他model、组件等文件也不少，导致整个项目的模块文件非常多，热更新和打包都速度都比较慢，输出代码体积也很大。基于这个问题，本文整理webpack常用的一些优化手段。 <!--more--> 参考： 使用webpack4提升180%编译速度 Webpack优化——将你的构建效率

    日期 2023-06-12 10:48:40     
  • webpack前端性能优化

    webpack前端性能优化

      开发环境下：  1.每次修改不用全部重新打包(HMR功能)： 在devServer里,加 hot ：true   index.html： index.js：   source-map,构建源代码和构建后代码的映射，如果构建后的代码出问题

    日期 2023-06-12 10:48:40     
  • 《响应式Web设计性能优化》一2.2　追踪Web性能的工具

    《响应式Web设计性能优化》一2.2　追踪Web性能的工具

    本节书摘来异步社区《响应式Web设计性能优化》一书中的第2章，第2.2节，作者： 【美】Tom Barker 译者： 余绍亮 , 丁一 , 叶磊 责编： 赵轩，更多章节内容可以访问云栖社区“异步社区”公众号查看。 2.2 追踪Web性能的工具 追踪Web性能最常用和最有用的工具非瀑布图莫属了。瀑布图非常直观，可以展示构成Web页面的所有资源、加载这些资源所需的所有HTTP事务，以及每个HTTP

    日期 2023-06-12 10:48:40     
  • 《响应式Web设计性能优化》一导读

    《响应式Web设计性能优化》一导读

    现如今，虽然响应式设计已经成为一个热门话题，但它仍然被当作一门前端技术。在大多数开发人员的印象中，响应式设计通常都与媒体查询有着紧密的关系。在本书中，我更愿意把响应式设计称为一种哲学，而不仅仅是一门技术：一个可以从传统单一的前端处理转变为从多方位考虑的理想解决方案，因为每个HTTP请求中都携带了许多信息到Web服务器，这样Web服务器就可以根据信息做相应的响应。 响应式Web设计性能优

    日期 2023-06-12 10:48:40     
  • webpack 性能优化，（系列二十）

    webpack 性能优化，（系列二十）

      module chunk bundle的区别 module 各个源码文件，webpack一切皆模块 chunk 多模块合并成的， 如entry import()异步加载 splitChunk代码分割 bundle 最终的输出文件，有可能好多个打包文件   1.优化babel-loader 尽可能少的应用loader, excllude(不包含)   &nb

    日期 2023-06-12 10:48:40     
  • Web 性能优化：Preload与Prefetch的使用及在 Chrome 中的优先级

    Web 性能优化：Preload与Prefetch的使用及在 Chrome 中的优先级

    摘要： 理解Preload与Prefetch。 原文：Web 性能优化：Preload,Prefetch的使用及在 Chrome 中的优先级 作者：前端小智 Fundebug经授权转载，版权归原作者所有。 这是 Web 性能优化的第 6 篇，上一篇在下面看点击查看： Web 性能优化：使用 Webpack 分离数据的正确方法 Web 性能优化：图片优化让网站大小减少 62% Web 性能优

    日期 2023-06-12 10:48:40     
  • Web 性能优化：21 种优化 CSS 和加快网站速度的方法

    Web 性能优化：21 种优化 CSS 和加快网站速度的方法

    这是 Web 性能优化的第 4 篇，上一篇在下面看点击查看： Web 性能优化：使用 Webpack 分离数据的正确方法 Web 性能优化：图片优化让网站大小减少 62% Web 性能优化：缓存 React 事件来提高性能 CSS 必须通过一个相对复杂的管道，就像 HTML 和 JavaScript 一样，浏览器必须从服务器下载文件，然后进行解析并将其应用于 DOM。由于优化程度极高，这个过

    日期 2023-06-12 10:48:40     
  • web开发性能优化---安全篇

    web开发性能优化---安全篇

    1、权限管理 从模块、表单、数据审核、功能button全面数据安全验证及管理。 2、ip验证 数据接口訪问进行IP校验 3、登录、操作日志、程序安全日志  系统所实用户登录、操作所有日志记录。 程序安全日志操作可查看我之前写过[LogHelper 日志记录帮助类 ]。 4、SQL注入校验过滤 a、表单控件js前端校验。特殊字符过滤 b、採用Global.

    日期 2023-06-12 10:48:40