一只京大
一只京大

高性能网站搭建-前端性能优化 (附Vue首屏加载时间优化详细方案)

前言

事实上, 只有10%-20%的最终用户响应时间是发在从Web服务器获取HTML文档并传送到浏览器中的。如果希望能够有效地减少页面的响应时间，就必须关注剩余80%-90%的最终用户体验。
–Steve Souders

在这篇博客中，我根据工作中的实际项目经验和一些测试的经验中总结出了前端页面在性能上优化方案。其中一些经验吸收自《高性能网站建设指南》Steve Souders 著 电子工业出版社。

一、 代码相关优化

1. 将样式表放在首部-使用link标签将样式表放在文档的HEAD中

  • 遵循HTML规范，将样式表放在头部，可以有效避免白屏和无样式内容的闪烁。

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>title>
  
  <link rel="stylesheet" href="example.css">
head>

<body>body>

html>

2. 将脚本放在底部

  • 将脚本放在顶部会造成的影响: 脚本阻塞对其后面内容的显示; 脚本会阻塞对其后面组件的下载;

  • 将脚本放在底部标签之前, 类似于document.body.appendChild(yourScript), 不会阻塞页面内容的呈现，而且页面中的可视组件可以尽早下载。


<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>title>
  <link rel="stylesheet" href="example.css">
head>

<body>
  
  <script src="example.js">script>
body>

html>

3. 减少HTTP请求

1) CSS Sprites (雪碧图)

将多个图片合成一张图片，通过background-position来定位所需要的图片。每次请求的话只需要请求一张图片减少http请求。(如果使用图标的话建议使用svg,也可以使用iconfont)

  • 合成雪碧图的工具有很多
  • 本地工具：https://github.com/iwangx/sprite（国人写的）
  • 在线工具https://www.toptal.com/developers/css/sprite-generator

本地工具：

高性能网站搭建-前端性能优化 (附Vue首屏加载时间优化详细方案)_第1张图片

在线工具：

高性能网站搭建-前端性能优化 (附Vue首屏加载时间优化详细方案)_第2张图片

2) 内联图片和脚本

  • 通过内联图片和脚本无需额外的HTTP请求，图片小于10K的可以设置内联为base64位。
<link rel="stylesheet" href="example.css">

<script src="example.js">script>

bad

<style>
// code
style>

<script>
// code
script>
  • 使用外部Javascript和Css的主要作用有: 可以配置缓存 有利于组件重用

5. 使用CDN (内容分发网络 Content Delivery Network)

CDN是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。–摘自百度百科

  • 通过CDN引入的资源目前基本都是使用目前最新的HTTP2协议，所以在性能上可以做到极致优化，感谢CDN。

  • BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

  • UNPKG

6. 代码压缩

1) Gzip 压缩

gzip压缩可以节省50%-70%的网络开销

浏览器支持的压缩类型可以通过network的Accept-Encoding: gzip, deflate来查看。支持deflate的浏览器也支持gzip，但很多浏览器支持gzip却不支持deflate，因此gzip是最理想的压缩方法

  • node端 使用compression如果是webpack项目可以看下面的Vue首屏加载时间优化方案里的gzip压缩
// npm install compression --save-dev
const compression = require('compression')

2) 代码压缩

前端打包压缩的有grunt，gulp，webpack，可以对HTML，CSS，Javascript代码压缩

二、 服务器相关优化

本文中使用nginx服务器进行相关配置，使用apache同样可以做到相关优化，具体操作请另Google

1. 开启gzip压缩

  • 服务端配置gzip压缩
gzip on; # 开启Gzip
gzip_static on; # 开启静态文件压缩
gzip_min_length  1k; # 不压缩临界值，大于1K的才压缩
gzip_buffers     4 16k;
gzip_http_version 1.1;
gzip_comp_level 2;
gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml application/xml+rss; # 进行压缩的文件类型
gzip_vary on;
gzip_proxied   expired no-cache no-store private auth;
gzip_disable   "MSIE [1-6]\.";
  • 我的服务器nginx相关的配置:

高性能网站搭建-前端性能优化 (附Vue首屏加载时间优化详细方案)_第3张图片

2. 开启HTTP2

HTTP2在前端性能上主要表现在：请求和响应的多路复用、头部压缩

  • 感受下多路复用

高性能网站搭建-前端性能优化 (附Vue首屏加载时间优化详细方案)_第4张图片

nginx服务器配置HTTP2

在这里插入图片描述

  • 使用http2需要配合https使用
  • 使用https需要ca证书 阿里云https证书购买 (有免费的ca证书)

3. 开启缓存

添加Expires头（强缓存）

个人站点相关配置

高性能网站搭建-前端性能优化 (附Vue首屏加载时间优化详细方案)_第5张图片

nginx配置

location ~.*\.(svg|woff|js|css){
	root /yourFilePath;
	expires 1d;
}
  • Web服务器使用Expires头来告诉Web客户端它可以使用一个组件的当前副本，直到指定的时间为止 HTTP规范中简要地称该头为“在这一日期时间之后，响应将被认为是无效的”。它在HTTP响应中发送
expires: Thu, 30 May 2019 20:51:42 GMT
  • 上面的Expires头告诉浏览器该响应的有效性持续到2019年5月30日为止。如果为页面中的一个图片返回了这个头，浏览器在后续的页面浏览中会使用缓存的图片，将HTTP请求的数量减少一个

Max-Age和mod_expires

  • 个人站点的css文件使用强缓存cache-control: max-age

高性能网站搭建-前端性能优化 (附Vue首屏加载时间优化详细方案)_第6张图片

  • nginx配置
server {
    add_header Cache-Control max-age=72000;
}

  • 在解释缓存如何很好地改善传输性能之前，需要提及除了Expires 头之外的另一种选择。HTTP 1.1引入了Cache-Control头来克服Expires头的限制

  • 因为Expires头使用一个特定的时间，它要求服务器和客户端的时钟严格同步。另外，过期日期需要经常检查，并且一旦未来这天到来了，还需要在服务器配置中提供个新的日期。

  • Cache-Control使用max-age指令指定组件被缓存多久, 如果从组件被请求开始过去的秒数少于max-age,浏览器就使用缓存的版本，这就避免了额外的HTTP请求。一个长久的max-age头可以将刷新窗设置为未来10年。

Cache-Control: max-age=315360000

  • Expires 和Cache-Control max-age.如果两者同时出现，HTTP规范规定max-age指令将重写Expires头。

  • 建议使用Cache-Control max-age，如果使用expires你需要担心它带来的时钟同步和配置维护问题。

配置ETag（协商缓存）

Vue官方文档的Expires相关配置

高性能网站搭建-前端性能优化 (附Vue首屏加载时间优化详细方案)_第7张图片

浏览器必须产生这个HTTP请求，执行有效性检查, 但这仍比简单地下载所有已过期的组件效率要高(对比强缓存)。如果浏览器缓存中的组件是有效的(即它能够和原始服务器上的组件相匹配)，原始服务器不会返回整个内容，而是返回一个304 Not Modifed状态码。

附：Vue首屏加载时间过长详细优化方案

  • 首先附一张优化过后的图

  • 首屏加载时间从原来的10s到2s，测试的个人站点

高性能网站搭建-前端性能优化 (附Vue首屏加载时间优化详细方案)_第8张图片

高性能网站搭建-前端性能优化 (附Vue首屏加载时间优化详细方案)_第9张图片

注：我在优化vue项目的时候使用的是[email protected], [email protected]。 如果是cli2的项目影响也不大，优化的方案是结合服务端和webpack的。

vue-cli脚手架默认配置已经大幅度优化了前端整体的性能，在此基础上，我又使用了三个优化项增加了大幅度提升

1. gzip压缩

  • 结合服务器相关优化第一条：开启gzip压缩

  • 下面是前端项目中vue.config.js中的配置

// 需要 npm install compression-webpack-plugin --save-dev
const CompressionWebpackPlugin = require('compression-webpack-plugin')

// 定义当前环境
const ENV = process.env.NODE_ENV || 'development'

module.exports = {
	configureWebpack: config => {
		// 如果是生产环境的话，开启压缩
		if (ENV === 'production') {
			//  参数配置文档: https://www.webpackjs.com/plugins/compression-webpack-plugin/
			config.plugins.push(new CompressionWebpackPlugin({
				algorithm: 'gzip',
				test: /\.(js|css|html)$/,
				threshold: 10240,
				minRatio: 0.8
			}))
		}
	}
}

2. 使用CDN内容分发网络

在index.html文件中通过环境来判断是否引入cdn文件，在vue.config.js文件中webpack通过环境判断是否使用cdn引入文件的全局变量

  • 使用CDN需要在webpack和index.html进行相关配置

第一步 配置vue.config.js，只需要在刚才配置Gzip压缩的基础上再加一段代码：

const CompressionWebpackPlugin = require('compression-webpack-plugin')

const ENV = process.env.NODE_ENV || 'development'

module.exports = {
	configureWebpack: config => {
		if (ENV === 'production') {
			config.plugins.push(new CompressionWebpackPlugin({
				algorithm: 'gzip',
				test: /\.(js|css|html)$/,
				threshold: 10240,
				minRatio: 0.8
			}))
            // 配置externals就是当使用CDN进入的js文件在当前项目中可以引用
            // 比如在开发环境引入的vue是import Vue from 'vue', 这个大写的Vue就是对应的下面的大写的Vue
			config.externals = {
			  'vue': 'Vue',
			  'vue-router': 'VueRouter',
			  'axios': 'axios'
			}
		}
	}
}

第二步 配置index.html,在body里使用EJS语法判断是否为生产环境

<body>
  <div id="app">div>
  <% if (NODE_ENV === 'production') { %>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js">script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js">script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js">script>
  <% } %>
body>

3. 配置sourceMap

  • devtool | webpack中文网 你可以根据官网来对开发环境和生产环境进行详细配置

  • 当然也可以像我一样直接productionSourceMap: false干掉生产环境的sourceMap

const CompressionWebpackPlugin = require('compression-webpack-plugin')

const ENV = process.env.NODE_ENV || 'development'

module.exports = {
	configureWebpack: config => {
		if (ENV === 'production') {
			config.plugins.push(new CompressionWebpackPlugin({
				algorithm: 'gzip',
				test: /\.(js|css|html)$/,
				threshold: 10240,
				minRatio: 0.8
			}))
			config.externals = {
			  'vue': 'Vue',
			  'vue-router': 'VueRouter',
			  'axios': 'axios'
			}
		}
	},
    // 禁用生产环境的sourceMap
    productionSourceMap: false
}

4. 使用HTTP2

请参考服务端优化第二条

结语

前端性能优化至关重要，文中提及的是我认为比较重要的几点，以后遇到更好的方案会补充进来。当然你也可以在评论区留言我们一起探讨，有错误的地方欢迎指出。

你可能感兴趣的:(Javascript,HTML,CSS)

  • 《恐龙餐厅菜单页面代码说明文档》 欣然～ html5
    一、整体概述此HTML文件构建了一个恐龙餐厅的菜单页面，用户能够浏览菜品、将菜品添加到购物车，并进行支付操作。页面运用HTML搭建结构，CSS进行样式设计，JavaScript实现交互功能。二、HTML结构1.文档头部（）html恐龙餐厅菜单/*CSS样式代码*/：声明文档类型为HTML5。：指定文档语言为中文（中国大陆）。：设置字符编码为UTF-8，确保中文等字符能正确显示。：让页面在不同设备上
  • 基于html5QrCode实现的H5扫码功能（uni-app v2版本） _虾仁不眨眼_ 移动端H5uni-apphtml5
    1.安装（选择一种方式）使用npmHtml5Qrcodenpm链接npmihtml5-qrcode直接引入html5-qrcode.min.js文件（本例使用此方法）2.扫码组件代码（先引入Html5Qrcode资源）exportdefault{name:'Scan',model:{props:'value',event:'close'},props:{value:{type:Boolean,de
  • el-upload 禁用且隐藏上传按钮 _虾仁不眨眼_ Vue2elementui
    1.现象el-upload上传图片组件禁用时，仍然显示上传按钮，不美观。2.解决方案el-upload组件上，动态添加禁用时的类名(如：hide)，通过css隐藏上传按钮。代码实现如下：::v-deep.hide.el-upload--picture-card{display:none;}3.实现效果只有查看的样式拉(#^.^#)
  • input限制只能输入正整数 _虾仁不眨眼_ javascripthtml5
    要限制input元素只能输入正整数，可以使用以下几种方法：1.使用HTML5的type="number"属性这种方式可以限制输入框只接受数字输入，并且可以通过min和step属性设置最小值和步长。2.使用正则表达式进行输入验证使用@input事件监听输入框的输入事件，并在validateInput方法中使用正则表达式过滤掉非数字和非正整数的字符。//html//jsmethods:{validat
  • 前端大屏触摸签名实现 风无雨 前端前端
    参考：JavaScript实现手写签名，可触屏手写，支持移动端与PC端双端保存_js手写签名-CSDN博客https://www.cnblogs.com/smileZAZ/p/17219400.html1.新建一个canvas元素获取canvas上下文，绘制初始矩形，设置高度宽度，初始绘制位置0,0//创建上下文constctx=canvas.getContext('2d')2.监听touchst
  • 华为OD机试 - 最长回文字符串（C++ Java JavaScript Python） YOLO大师 华为c++java算法华为od
    题目描述如果一个字符串正读和反渎都一样（大小写敏感），则称它为一个「[回文串]，例如：leVel是一个「回文串」，因为它的正读和反读都是leVel；同理a也是「回文串」art不是一个「回文串」，因为它的反读tra与正读不同Level不是一个「回文串」，因为它的反读leveL与正读不同（因大小写敏感）给你一个仅包含大小写字母的字符串，请用这些字母构造出一个最长的回文串，若有多个最长的，返回其中字典序
  • 移动端Canvas实现手写签名 不知名靓仔 canvas
    引言在移动应用开发中，手写签名功能的集成已经成为许多业务场景的标配，比如电子合同签署、医疗记录确认或是物流配送签收等。本文将详细阐述如何在移动端实现手写签名，包括技术选型、具体实现步骤以及优化建议，帮助开发者快速上手并构建高质量的手写签名体验。技术选型1.使用CanvasAPIHTML5的CanvasAPI提供了在网页上绘制图形的能力，包括路径、文本、图像等，非常适合用来捕捉和展示手写签名。在移动
  • 最新微信小程序面试题集结 江湖二哥 微信小程序前端面试小程序
    1、微信小程序与H5的区别?第一条是运行环境的不同传统的HTML5的运行环境是浏览器，包括webview，而微信小程序的运行环境并非完整的浏览器，是微信开发团队基于浏览器内核完全重构的一个内置解析器，针对小程序专门做了优化，配合自己定义的开发语言标准，提升了小程序的性能。第二条是开发成本的不同只在微信中运行，所以不用再去顾虑浏览器兼容性，不用担心生产环境中出现不可预料的奇妙BuG第三条是获取系统级
  • 2021-05-25 张辣鸡 爬虫记录python爬虫
    解决12306抢票系统弹出来的弹窗问题应为疫情原因进入12306网站登陆界面弹出来这样一个界面进入登陆界面的网站，把鼠标放在确定的位置右键点击检查，找到#我把它放在另一个函数中，这样调用就可以了defclick_ok1(self):bounce_button=driver.find_element_by_css_selector(".btn.btn-primary.ok")bounce_butto
  • 使用yolov8+flask实现精美登录界面+图片视频摄像头检测系统 FL1623863129 深度学习YOLOflaskpython
    这个是使用flask实现好看登录界面和友好的检测界面实现yolov8推理和展示，代码仅仅有2个html文件和一个python文件，真正做到了用最简洁的代码实现复杂功能。测试通过环境：windowsx64anaconda3+python3.8ultralytics==8.3.81flask==1.1.2torch==2.3.0运行步骤：安装好环境执行pythonlogin.py后端实现代码：from
  • 第四章：高级特性与最佳实践 - 第五节 - Tailwind CSS 代码组织和维护技巧
    在大型项目中，良好的代码组织和维护策略对于项目的可持续发展至关重要。本节将介绍如何在使用TailwindCSS的项目中组织和维护代码，以提高开发效率和代码质量。目录结构规范推荐的项目结构src/├──styles/│├──base/││├──typography.css││├──colors.css││└──reset.css│├──components/││├──button.css││├──c
  • 第四章：高级特性与最佳实践 - 第三节 - Tailwind CSS 性能优化策略
    在使用TailwindCSS开发大型项目时，性能优化是一个不可忽视的话题。本节将从构建性能、运行时性能、文件体积等多个维度，详细介绍TailwindCSS的性能优化策略。构建优化优化扫描范围//tailwind.config.jsmodule.exports={content:[//只扫描实际使用的文件'./src/pages/**/*.{js,jsx,ts,tsx}','./src/compon
  • 第四章：高级特性与最佳实践 - 第五节 - Tailwind CSS 代码组织和维护技巧
    在大型项目中，良好的代码组织和维护策略对于项目的可持续发展至关重要。本节将介绍如何在使用TailwindCSS的项目中组织和维护代码，以提高开发效率和代码质量。目录结构规范推荐的项目结构src/├──styles/│├──base/││├──typography.css││├──colors.css││└──reset.css│├──components/││├──button.css││├──c
  • 第四章：高级特性与最佳实践 - 第四节 - Tailwind CSS CSS 提取和打包优化
    在现代前端工程中，CSS的提取和打包优化对于项目性能至关重要。本节将详细介绍如何在使用TailwindCSS的项目中实现CSS的高效提取和打包优化。CSS提取策略MiniCssExtractPlugin配置//webpack.config.jsconstMiniCssExtractPlugin=require('mini-css-extract-plugin')module.exports={mo
  • 订单管理系统 大学生数据库大作业/数据库实践MYSQL 陌路物是人非 数据库课程设计
    订单管理系统从入门到入土下载Maven，Nodejs创建一个数据库sql_end，创建四个数据库表，并确保用户名为root用户密码为123456再IDEA中加载Springboot依赖（可以直接新建一个任意名称的文件夹，项目导入spring的框架），启动spring项目打开index.html输入用户名和密码，点击注册，再点击登录点击个人中心，点击修改用户信息，修改自己的余额点击逛店铺，选择一个商
  • python xpath定位元素方法_关于python中的xpath解析定位 weixin_39975366 pythonxpath定位元素方法
    爬取的网站：http://jbk.39.net/chancegz/这里只针对个别属性值：#例如：'别名'下的span标签文本，‘发病部位'下的span标签文本以及‘挂号科室‘下的span标签文本#defdisease(url):text=get_html(url)tree=etree.HTML(text)bm=tree.xpath('//ul[@class="information_ul"]/li
  • XPath简介——完整入门和详解 葡萄架子 网络协议前端
    XPath简介——完整入门和详解**XPath的用法场景****XPath的基本语法****1.树型结构概念****2.XPath基本路径语法****定位方式及详细语法讲解**示例HTML结构：**1.路径选择****基础语法：层级表示法****查询所有匹配的节点****2.位置选取语法****单个节点索引选择****结合多个位置过滤****3.属性条件过滤**属性查询示例：含动态匹配：**4.文
  • 什么是遍历？ dengjuanshou7445 javascriptViewUI
    jQuery遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。下图展示了一个家族树。通过jQuery遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对DOM进行遍历。图示解释：元素是的父元素，同时是其中所有内容的祖先。元素是元素的
  • html-to-image的使用及图片变形和无图问题修复 庸懒 前端
    html-to-image的使用及图片变形和无图问题修复最近迭代的时候因为新增了一个需求，需要前端提供素材及样式给后端，后端同步渲染，但是因为部分样式问题后端无法实现所以决定前端将页面生成图片然后传递给后端使用，本文记录一下使用的过程及遇到的部分问题。技术调研现在将页面元素转换成图片的插件有很多，普遍使用的技术原理都是利用canvas或者SVG将页面元素转换成画布或者svg元素，然后再转成图片。这
  • css3+Grid 一一代码 css3css
    CSSGrid的核心概念有哪些如下1.网格容器（GridContainer）：-通过将元素的`display`属性设置为`grid`或`inline-grid`，可以将其定义为网格容器。-网格容器内的直接子元素会自动成为网格项（GridItems）。```css.container{display:grid;}```2.网格项（GridItems）：-网格容器内的直接子元素称为网格项。-网格项可以
  • Node.js--exports 对象详解：用法、示例与最佳实践 还是鼠鼠 node.jsnode.jswebjavascript前端vscode
    目录1.exports对象介绍2.基础示例：使用exports导出对象文件名：math.js（JavaScript）3.在另一个文件中使用require进行导入文件名：app.js（JavaScript）4.运行程序5.exports的限制6.其他exports使用方式示例1：导出单个函数示例2：导出类7.结论1.exports对象介绍在Node.js中，exports是module.export
  • JavaScript语言的游戏开发 凌嘉遥 包罗万象golang开发语言后端
    JavaScript游戏开发入门指南在互联网迅速发展的今天，游戏已经成为了我们日常生活中不可或缺的一部分。无论是手机游戏、网页游戏，还是大型的3D游戏，它们的背后都离不开强大的编程技术。JavaScript作为一种广泛应用的编程语言，使得游戏开发变得更加灵活和高效。本文将深入探讨JavaScript在游戏开发中的应用，带领读者了解如何使用JavaScript开发自己的游戏。1.JavaScript
  • JavaScript 中 Map 数据结构的使用 前端javascript
    解释Map是一种js数据结构，与数组的map方法并非一种，要区分开来Map数据结构来管理数据，能提高代码的可读性Map相比较对象格式存储速度要更快Map数据结构//创建一个Map对象constformData=newMap();//添加表单元素的值到Map中formData.set('username','Tom');formData.set('password','123456');//获取表单
  • canvas绘制和数字签名 前端
    关键是要把存放绘制的信息放到一个二维数组中：绘制时最好不要用定时器进行定时绘制，因为会卡顿，最好使用requestAnimationFrame这个原生js的api方法，因为是以帧的间隔绘制，所以会看起来流畅Documenthtml,body{height:100%;margin:0;padding:0;}.container{width:100%;padding:20px0;display:fle
  • 【Node.js】模块分类与 `require` 用法详解 Peter-Lu #NodeJSnode.jsjavascript前端
    文章目录一、Node.js模块概述1.模块的定义2.模块的作用二、Node.js模块的分类1.核心模块2.文件模块3.第三方模块4.全局模块三、`require`的用法详解1.`require`的基本用法2.模块导出机制3.模块的缓存机制4.`require`的动态引入四、模块的实际应用场景1.项目结构优化2.复用代码五、总结Node.js是一个强大的JavaScript运行环境，广泛应用于服务器
  • Web三要素：CSS之Flex/Grid布局(4) 双囍菜菜 前端随记前端css
    CSS布局革命：Flex与Grid的双子星战法文章目录CSS布局革命：Flex与Grid的双子星战法一、布局进化史：从洪荒时代到现代文明二、Flex布局：一维空间的舞蹈家2.1核心概念深度解析容器属性详解：2.2典型应用场景实战导航栏布局（React示例）垂直居中（Vue示例）三、Grid布局：二维空间的指挥官3.1网格系统深度解析核心概念图解：3.2高级布局技巧实战响应式网格（React示例）复
  • UI自动化测试之CSS Selector 定位秘籍：解锁 WEB UI 自动化测试的高效之道 做测试的小薄 测试进阶cssseleniumUI自动化测试元素定位方式
    在WebUI自动化测试中，元素定位是实现自动化操作的核心步骤。SeleniumWebDriver提供了多种元素定位方式，其中CSSSelector是一种功能强大且灵活的定位方法。它基于CSS选择器语法，能够快速、精准地定位目标元素，尤其适用于复杂的DOM结构。本文将深入解析CSSSelector的工作原理、使用技巧以及需要注意的事项，帮助你在自动化测试中更高效地运用这一工具。一、CSSSelect
  • python flask 分页_Python的Flask框架中实现分页功能的教程 weixin_39959126 pythonflask分页
    BlogPosts的提交让我们从简单的开始。首页上必须有一张用户提交新的post的表单。首先我们定义一个单域表单对象(fileapp/forms.py)：classPostForm(Form):post=TextField('post',validators=[Required()])下面，我们把这个表单添加到template中(fileapp/templates/index.html)：{%ex
  • Tailwindcss开启黑夜模式 巴巴博一 vue.jscss
    本篇讲述如何使用tailwindcss切换白天黑夜主题tailwindcss自带的暗夜切换会比css自带的theme主体切换来得方便很多，学习成本也很低，只要求会用tailiwndcss1，tailwindcss.config有两种暗夜模式切换，媒体查询和手动类切换。手动控制需要开启类模式//tailwind.config.jsexportdefault{...darkMode:'class',/
  • 【CSS 面经】元素的层叠顺序 Peter-Lu #CSS面经css前端htmlecmascriptjavascript
    文章目录一、层叠顺序的基本概念1.视觉层叠2.默认层叠顺序二、如何控制元素的层叠顺序？1.`z-index`属性示例：使用`z-index`控制元素层叠顺序2.`position`属性与层叠顺序示例：不同`position`设置下的层叠顺序3.`z-index`和堆叠上下文示例：堆叠上下文三、总结在网页设计中，元素的层叠顺序（StackingOrder）是指在同一页面上，多个元素如何相互叠加的规则
  • 多线程编程之存钱与取钱 周凡杨 javathread多线程存钱取钱
      生活费问题是这样的：学生每月都需要生活费，家长一次预存一段时间的生活费，家长和学生使用统一的一个帐号，在学生每次取帐号中一部分钱，直到帐号中没钱时 通知家长存钱，而家长看到帐户还有钱则不存钱，直到帐户没钱时才存钱。   问题分析：首先问题中有三个实体，学生、家长、银行账户，所以设计程序时就要设计三个类。其中银行账户只有一个，学生和家长操作的是同一个银行账户，学生的行为是
  • java中数组与List相互转换的方法 征客丶 JavaScriptjavajsonp
    1.List转换成为数组。（这里的List是实体是ArrayList) 　　调用ArrayList的toArray方法。 　　toArray 　　public T[] toArray(T[] a)返回一个按照正确的顺序包含此列表中所有元素的数组；返回数组的运行时类型就是指定数组的运行时类型。如果列表能放入指定的数组，则返回放入此列表元素的数组。否则，将根据指定数组的运行时类型和此列表的大小分
  • Shell 流程控制 daizj 流程控制if elsewhilecaseshell
    Shell 流程控制 和Java、PHP等语言不一样，sh的流程控制不可为空，如(以下为PHP流程控制写法)： <?php if(isset($_GET["q"])){ search(q);}else{// 不做任何事情} 在sh/bash里可不能这么写，如果else分支没有语句执行，就不要写这个else，就像这样 if else if if 语句语
  • Linux服务器新手操作之二 周凡杨 Linux 简单 操作
    1.利用关键字搜寻Man Pages    man -k keyword  其中-k 是选项，keyword是要搜寻的关键字 如果现在想使用whoami命令，但是只记住了前3个字符who，就可以使用 man -k who来搜寻关键字who的man命令       [haself@HA5-DZ26 ~]$ man -k
  • socket聊天室之服务器搭建 朱辉辉33 socket
    因为我们做的是聊天室，所以会有多个客户端，每个客户端我们用一个线程去实现，通过搭建一个服务器来实现从每个客户端来读取信息和发送信息。    我们先写客户端的线程。 public class ChatSocket extends Thread{ Socket socket; public ChatSocket(Socket socket){ this.sock
  • 利用finereport建设保险公司决策分析系统的思路和方法 老A不折腾 finereport金融保险分析系统报表系统项目开发
    决策分析系统呈现的是数据页面，也就是俗称的报表，报表与报表间、数据与数据间都按照一定的逻辑设定，是业务人员查看、分析数据的平台，更是辅助领导们运营决策的平台。底层数据决定上层分析，所以建设决策分析系统一般包括数据层处理（数据仓库建设）。   项目背景介绍 通常，保险公司信息化程度很高，基本上都有业务处理系统（像集团业务处理系统、老业务处理系统、个人代理人系统等）、数据服务系统（通过
  • 始终要页面在ifream的最顶层 林鹤霄
    index.jsp中有ifream，但是session消失后要让login.jsp始终显示到ifream的最顶层。。。始终没搞定，后来反复琢磨之后，得到了解决办法，在这儿给大家分享下。。 index.jsp--->主要是加了颜色的那一句 <html> <iframe name="top" ></iframe> <ifram
  • MySQL binlog恢复数据 aigo mysql
    1，先确保my.ini已经配置了binlog：   # binlog log_bin = D:/mysql-5.6.21-winx64/log/binlog/mysql-bin.log log_bin_index = D:/mysql-5.6.21-winx64/log/binlog/mysql-bin.index log_error = D:/mysql-5.6.21-win
  • OCX打成CBA包并实现自动安装与自动升级 alxw4616 ocxcab
    近来手上有个项目,需要使用ocx控件 (ocx是什么? http://baike.baidu.com/view/393671.htm) 在生产过程中我遇到了如下问题. 1. 如何让 ocx 自动安装?     a) 如何签名?     b) 如何打包?     c) 如何安装到指定目录? 2.
  • Hashmap队列和PriorityQueue队列的应用 百合不是茶 Hashmap队列PriorityQueue队列
      HashMap队列已经是学过了的,但是最近在用的时候不是很熟悉,刚刚重新看以一次,   HashMap是K,v键 ,值     put()添加元素      //下面试HashMap去掉重复的 package com.hashMapandPriorityQueue; import java.util.H
  • JDK1.5 returnvalue实例 bijian1013 javathreadjava多线程returnvalue
    Callable接口： 返回结果并且可能抛出异常的任务。实现者定义了一个不带任何参数的叫做 call 的方法。 Callable 接口类似于 Runnable，两者都是为那些其实例可能被另一个线程执行的类设计的。但是 Runnable 不会返回结果，并且无法抛出经过检查的异常。        ExecutorService接口方
  • angularjs指令中动态编译的方法(适用于有异步请求的情况) 内嵌指令无效 bijian1013 JavaScriptAngularJS
            在directive的link中有一个$http请求，当请求完成后根据返回的值动态做element.append('......');这个操作，能显示没问题，可问题是我动态组的HTML里面有ng-click，发现显示出来的内容根本不执行ng-click绑定的方法！     
  • 【Java范型二】Java范型详解之extend限定范型参数的类型 bit1129 extend
    在第一篇中，定义范型类时，使用如下的方式：   public class Generics<M, S, N> { //M,S,N是范型参数 }  这种方式定义的范型类有两个基本的问题：   1. 范型参数定义的实例字段，如private M m = null;由于M的类型在运行时才能确定，那么我们在类的方法中，无法使用m，这跟定义pri
  • 【HBase十三】HBase知识点总结 bit1129 hbase
    1. 数据从MemStore flush到磁盘的触发条件有哪些？    a.显式调用flush，比如flush 'mytable'    b.MemStore中的数据容量超过flush的指定容量，hbase.hregion.memstore.flush.size,默认值是64M 2. Region的构成是怎么样？ 1个Region由若干个Store组成
  • 服务器被DDOS攻击防御的SHELL脚本 ronin47
    mkdir /root/bin vi /root/bin/dropip.sh #!/bin/bash/bin/netstat -na|grep ESTABLISHED|awk ‘{print $5}’|awk -F:‘{print $1}’|sort|uniq -c|sort -rn|head -10|grep -v -E ’192.168|127.0′|awk ‘{if($2!=null&a
  • java程序员生存手册-craps 游戏-一个简单的游戏 bylijinnan java
    import java.util.Random; public class CrapsGame { /** * *一个简单的赌*博游戏，游戏规则如下： *玩家掷两个骰子，点数为1到6，如果第一次点数和为7或11，则玩家胜， *如果点数和为2、3或12，则玩家输， *如果和为其它点数，则记录第一次的点数和，然后继续掷骰，直至点数和等于第一次掷出的点
  • TOMCAT启动提示NB: JAVA_HOME should point to a JDK not a JRE解决 开窍的石头 JAVA_HOME
    当tomcat是解压的时候，用eclipse启动正常，点击startup.bat的时候启动报错; 报错如下：   The JAVA_HOME environment variable is not defined correctly This environment variable is needed to run this program NB: JAVA_HOME shou
  • [操作系统内核]操作系统与互联网 comsci 操作系统
         我首先申明：我这里所说的问题并不是针对哪个厂商的，仅仅是描述我对操作系统技术的一些看法       操作系统是一种与硬件层关系非常密切的系统软件，按理说，这种系统软件应该是由设计CPU和硬件板卡的厂商开发的，和软件公司没有直接的关系，也就是说，操作系统应该由做硬件的厂商来设计和开发
  • 富文本框ckeditor_4.4.7 文本框的简单使用 支持IE11 cuityang 富文本框
    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>知识库内容编辑</tit
  • Property null not found darrenzhu datagridFlexAdvancedpropery null
    When you got error message like "Property null not found ***", try to fix it by the following way: 1)if you are using AdvancedDatagrid, make sure you only update the data in the data prov
  • MySQl数据库字符串替换函数使用 dcj3sjt126com mysql函数替换
    需求：需要将数据表中一个字段的值里面的所有的  .   替换成  _   原来的数据是  site.title  site.keywords  .... 替换后要为     site_title  site_keywords   使用的SQL语句如下：   updat
  • mac上终端起动MySQL的方法 dcj3sjt126com mysqlmac
    首先去官网下载: http://www.mysql.com/downloads/ 我下载了5.6.11的dmg然后安装,安装完成之后..如果要用终端去玩SQL.那么一开始要输入很长的:/usr/local/mysql/bin/mysql 这不方便啊,好想像windows下的cmd里面一样输入mysql -uroot -p1这样...上网查了下..可以实现滴. 打开终端,输入: 1
  • Gson使用一（Gson） eksliang jsongson
    转载请出自出处：http://eksliang.iteye.com/blog/2175401 一.概述 从结构上看Json，所有的数据（data）最终都可以分解成三种类型： 第一种类型是标量（scalar），也就是一个单独的字符串（string）或数字（numbers），比如"ickes"这个字符串。 第二种类型是序列（sequence），又叫做数组（array）
  • android点滴4 gundumw100 android
    Android 47个小知识 http://www.open-open.com/lib/view/open1422676091314.html Android实用代码七段（一） http://www.cnblogs.com/over140/archive/2012/09/26/2611999.html http://www.cnblogs.com/over140/arch
  • JavaWeb之JSP基本语法 ihuning javaweb
      目录   JSP模版元素  JSP表达式  JSP脚本片断  EL表达式  JSP注释  特殊字符序列的转义处理  如何查找JSP页面中的错误   JSP模版元素    JSP页面中的静态HTML内容称之为JSP模版元素，在静态的HTML内容之中可以嵌套JSP
  • App Extension编程指南（iOS8/OS X v10.10）中文版 啸笑天 ext
             当iOS 8.0和OS X v10.10发布后，一个全新的概念出现在我们眼前，那就是应用扩展。顾名思义，应用扩展允许开发者扩展应用的自定义功能和内容，能够让用户在使用其他app时使用该项功能。你可以开发一个应用扩展来执行某些特定的任务，用户使用该扩展后就可以在多个上下文环境中执行该任务。比如说，你提供了一个能让用户把内容分
  • SQLServer实现无限级树结构 macroli oraclesqlSQL Server
    表结构如下： 数据库id path titlesort 排序 1 0 首页 0 2 0,1 新闻 1 3 0,2 JAVA 2 4 0,3 JSP 3 5 0,2,3 业界动态 2 6 0,2,3 国内新闻 1 创建一个存储过程来实现，如果要在页面上使用可以设置一个返回变量将至传过去   create procedure test as begin decla
  • Css居中div，Css居中img，Css居中文本，Css垂直居中div qiaolevip 众观千象学习永无止境每天进步一点点css
    /**********Css居中Div**********/ div.center { width: 100px; margin: 0 auto; } /**********Css居中img**********/ img.center { display: block; margin-left: auto; margin-right: auto; }
  • Oracle 常用操作(实用) 吃猫的鱼 oracle
    SQL>select text from all_source where owner=user and name=upper('&plsql_name');  SQL>select * from user_ind_columns where index_name=upper('&index_name');  将表记录恢复到指定时间段以前
  • iOS中使用RSA对数据进行加密解密 witcheryne iosrsaiPhoneobjective c
      RSA算法是一种非对称加密算法,常被用于加密数据传输.如果配合上数字摘要算法, 也可以用于文件签名. 本文将讨论如何在iOS中使用RSA传输加密数据. 本文环境 mac os  openssl-1.0.1j, openssl需要使用1.x版本, 推荐使用[homebrew](http://brew.sh/)安装. Java 8 RSA基本原理 RS
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他