关于页面优化

news2024/11/15 20:31:52

一、 js优化

js文件内部

1、减少重复代码的使用,精简代码
2、减少请求次数,如果不是需要实时的数据,可以将请求结果缓存在js变量中,后续直接使用变量的值
3、减少不必要的dom操作,例如:用innerHTMl代替dom操作,减少dom操作的次数

js引入

1、不影响页面初次渲染的js文件可以放到最后引入
2、对于不需要提前执行的js文件,可以使用异步加载的方式,async、defer、动态创建script标签
同步加载

<script async src="script.js"></script>

在这里插入图片描述

异步加载
async

<script async src="script.js"></script>

在这里插入图片描述

defer

<script defer src="script.js"></script>

在这里插入图片描述

动态创建

//tools.js
function test()
{    
    console.log('hello world')
}
//页面中的代码
<script script type = 'text/javascript'>
	const script = document.createElement('script');
	script.type = 'text/javascript';
	script.src = 'tools.js';
	document.head.appendChild(script);
	test () 
</script>

对于不使用一部标签的script,浏览器同步加载,并阻塞,等待 js 加载完成并执行该脚本,然后继续解析文档。如果文档很大的话,加载解析时间很长,那么就会造成页面空白阻塞,非常不友好。
使用异步加载的方式就可以很好的避免这一点

3、压缩js文件
全局安装 uglifyjs

npm install uglifyjs -g

使用
win+R cmd
输入命令

uglifyjs main.js -c -m -o main-min.js

css优化

1、减少内嵌的css使用
2、css文件压缩
下载

npm install clean-css-cli -g

使用

cleancss -o main.min.css main.css

html

1、压缩html

下载

npm install html-minifier

使用
创建html.js

var fs = require('fs');
var minify = require('html-minifier').minify;
fs.readFile('./doc/doc6.html(需要压缩的文件)', 'utf8', function (err, data) {
    if (err) {
        throw err;
    }
    fs.writeFile('./doc/doc6_mini.html(压缩后的文件存储位置和名称)', minify(data,{removeComments: true,collapseWhitespace: true,minifyJS:true, minifyCSS:true}),function(){
        console.log('success');
    });
});

压缩

node ./html.js

2、a标签
对于a标签,应该在#后应该存在一个含义命名,如#menu,否则会影响seo,报错链接不可识别。
如果加上之后,seo还是存在问题,应该加上aria-label=“xxxxxxx”',描述该链接的作用。

3、title和description
每个页面的title和description都应该不一样

nginx

1、使用gzip压缩文本文件,减少带宽(具体参数详情,参照 Nginx服务器中的gzip配置参数详解 )

server{
        listen  80;
        
        gzip on; 
        gzip_buffers 32 4k;
        gzip_comp_level 2;
        gzip_min_length 24k;
        gzip_types application/javascript text/css application/octet-stream image/webp;
        gzip_disable "MSIE [1-6]\.";
        gzip_vary on;

        location / {
                root /opt/xxx/xxx/html;
                index index.html index.htm;
        }
}

2、为静态资源提供缓存策略
为静态资源添加缓存策略后,将会加快用户首次加载后的加载速度

      server{
        listen  80;

        location / {
                root /opt/mutenet/website/html;
                index index_1.html index_1.htm;

                add_header Cache-Control "public";
                expires 30d;  #缓存30}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1106974.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

小魔推短视频裂变工具,如何帮助实体行业降本增效?

在如今的互联网时代&#xff0c;大多数的实体老板都在寻找不同的宣传方法来吸引客户&#xff0c;现在短视频平台已经成为重中之重的获客渠道之一&#xff0c;而如何在这个日活用户超7亿的平台获取客户&#xff0c;让更多人知道自己的门店、自己的品牌&#xff0c;泽成为了不少老…

uniapp vue3 使用pinia存储数据

import { defineStore } from pinia;export const userInfo defineStore(userInfo, {state: () > {return {userToken: uni.getStorageSync(token) || ,};},actions: {// 添加tokenupdateToken(token: string) {uni.setStorageSync(token, token);this.userToken token}} …

Apache Doris (四十三): Doris数据更新与删除 - Update数据更新

🏡 个人主页:IT贫道_大数据OLAP体系技术栈,Apache Doris,Clickhouse 技术-CSDN博客 🚩 私聊博主:加入大数据技术讨论群聊,获取更多大数据资料。 🔔 博主个人B栈地址:豹哥教你大数据的个人空间-豹哥教你大数据个人主页-哔哩哔哩视频 目录 1. Update数据更新原理

全面解决找不到vcruntime140_1.dll无法执行此代码问题的5方法

vcruntime140_1.dll是一个动态链接库文件&#xff0c;它是Microsoft Visual C 2015 Redistributable的一部分。当计算机中缺少这个文件时&#xff0c;可能会导致一些应用程序无法正常运行&#xff0c;从而影响我们的工作和生活。 一、问题场景 1. 在使用Windows操作系统的过程…

QTday02(常用类、UI界面下的开发、信号与槽)

今日任务 1. 使用手动连接&#xff0c;将登录框中的取消按钮使用qt4版本的连接到自定义的槽函数中&#xff0c;在自定义的槽函数中调用关闭函数 将登录按钮使用qt5版本的连接到自定义的槽函数中&#xff0c;在槽函数中判断ui界面上输入的账号是否为"admin"&#x…

出差学小白知识No5:ubuntu连接开发板|上传源码包|板端运行的环境部署

1、ubuntu连接开发板&#xff1a; 在ubuntu终端通过ssh协议来连接开发板&#xff0c;例如&#xff1a; ssh root<IP_address> 即可 这篇文章中也有关于如何连接开发板的介绍&#xff0c;可以参考SOC侧跨域实现DDS通信总结 2、源码包上传 通过scp指令&#xff0c;在ub…

1018hw

#include "mainwindow.h" #include "ui_mainwindow.h"MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow) {ui->setupUi(this);//窗口名this->setWindowTitle("QQ");this->setWindowIcon(QIcon(&q…

位段——(详细图解,保姆宗师级教程,包会,从基础概念到精通实战应用)

位段——大项目中结构体节省空间之手段 学习目标&#xff1a; 位段是什么 位段的内存分配 位段的平台局限性和应用 学习内容&#xff1a; 1.位段是什么 C中的位段&#xff08;Bit fields&#xff09;是一种用于有效利用内存的特性&#xff0c;可以在结构体中定义成员变量的…

朴素贝叶斯(基于概率论)

释义 贝叶斯定理是“由果溯因”的推断&#xff0c;所以计算的是"后验概率" 其中&#xff1a; P(A|B) 表示在事件 B 已经发生的条件下&#xff0c;事件 A 发生的概率。 P(B|A) 表示在事件 A 已经发生的条件下&#xff0c;事件 B 发生的概率。 P(A) 和 P(B) 分别表示事…

贴片电阻材质:了解电子元件的核心构成 | 百能云芯

在现代电子设备中&#xff0c;贴片电阻是一类至关重要的 passives 元件&#xff0c;广泛用于各种电路和应用中。贴片电阻的性能取决于多个因素&#xff0c;其中材质是其中之一。云芯将带您深入探讨贴片电阻的不同材质&#xff0c;探讨不同材质对电子元件性能的影响&#xff0c;…

深入理解算法:从基础到实践

深入理解算法&#xff1a;从基础到实践 1. 算法的定义2. 算法的特性3. 算法的分类按解决问题的性质分类&#xff1a;按算法的设计思路分类&#xff1a; 4. 算法分析5. 算法示例a. 搜索算法示例&#xff1a;二分搜索b. 排序算法示例&#xff1a;快速排序c. 动态规划示例&#xf…

【考研数学】概率论与数理统计 —— 第六章 | 数理统计基本概念(1,基本概念)

文章目录 引言一、基本概念1.1 总体1.2 样本1.3 统计量1.4 顺序统计量 写在最后 引言 以前学概率论的时候&#xff0c;不知道后面的数理统计是什么&#xff0c;所以简称都把后面的省略掉了。现在接触的学科知识多了&#xff0c;慢慢就对数理统计有了直观印象。 尤其是第一次参…

刷题日记1

最近在用JavaScript刷动态规划的题组&#xff0c;刷了一半感觉只刷题不写笔记的话印象没那么深刻&#xff0c;所以从今天开始来记录一下刷题情况。 力扣T300 300. 最长递增子序列 给你一个整数数组 nums &#xff0c;找到其中最长严格递增子序列的长度。 子序列 是由数组派生而…

超实用!了解github的热门趋势和star排行是必须得!

在当今的技术领域中&#xff0c;GitHub 已经成为了开发者们分享和探索代码的重要平台。作为全球最大的开源社区&#xff0c;GitHub上托管了数以亿计的项目&#xff0c;其中包括了各种各样的技术栈和应用。对于开发者来说&#xff0c;了解GitHub上的热门趋势和star排行是非常重要…

Java10年技术架构演进

一、前言 又快到了1024&#xff0c;现代人都喜欢以日期的特殊含义来纪念属于自己的节日。虽然有点牵强&#xff0c;但是做件事情&#xff0c;中国人总喜欢找个节日来纪念&#xff0c;程序员也是一样。甚至连1111被定义成光棍节&#xff0c;这也算再无聊不过了。不过作为程序员…

基于百度API的车牌识别计费系统

1&#xff0c;车牌识别API 介绍&#xff1a; 百度车牌识别API是一款基于人工智能算法的车牌识别服务&#xff0c;可以识别包括普通车牌、新能源车牌在内的多种车牌类型&#xff0c;并支持高精度的识别结果输出。其主要功能特点包括&#xff1a; 普通车牌和新能源车牌的识别&a…

首发AI原生应用开发平台——千帆AI原生应用开发工作台,加速企业AI应用落地

为了满足企业对于敏捷和高效地进行AI原生应用开发与运维的需求&#xff0c;并降低相关开发的门槛&#xff0c;百度智能云最新发布了“千帆AI原生应用开发工作台”。该工作台将开发大型模型应用程序的常见模式、工具和流程进行了整合&#xff0c;使得开发者可以聚焦于自身业务&a…

深度学习 | Pytorch深度学习实践

一、overview 基于pytorch的深度学习的四个步骤基本如下&#xff1a; 二、线性模型 Linear Model 基本概念 数据集分为测试集和训练集&#xff08;训练集、开发集&#xff09;训练集&#xff08;x&#xff0c;y&#xff09;测试集只给&#xff08;x&#xff09;过拟合&#xf…

【网络安全 --- xss-labs通关】xss-labs靶场通关,让你巩固对xss漏洞的理解及绕过技巧和方法(提供资源)

一&#xff0c;资源下载准备 1-1 VMware 16.0 安装请参考以下博客&#xff0c;若已经安装请忽略&#xff1a; 【网络安全 --- 工具安装】VMware 16.0 详细安装过程&#xff08;提供资源&#xff09;-CSDN博客【网络安全 --- 工具安装】VMware 16.0 详细安装过程&#xff08;…

IPIDEA代理IP如何帮助企业采集市场信息

在当今数字化的时代&#xff0c;市场信息对于企业的发展至关重要。然而&#xff0c;如何高效地收集市场信息成为了每个企业都需要面对的问题。爬虫技术的出现为企业提供了一种高效、便捷的信息采集方式。然而&#xff0c;由于爬虫的请求频率较高&#xff0c;目标网站可能会将频…