暗影刀客
暗影刀客

web常见性能优化总结（浏览器渲染过程详解）

文章目录

        • 一、什么是web的性能优化
        • 二、web性能优化的目的
        • 三、web性能优化的原理
          • 3.1 加载文档
          • 3.2 生成dom树
          • 3.3 加载css 和js
          • 3.4 生成CSS OM
          • 3.5 rending tree
          • 3.6 layout（flow 、reflow）
          • 3.7 paint（repaint）
          • 3.8 composite （合并）
        • 四、性能优化
          • 4.1 html的语义化编程
          • 4.2 资源的加速
          • 4.3 js的优化
          • 4.4 CSSOM 优化
          • 4.5 dom操作节流
          • 4.6 加载渲染分流
          • 4.7 避免repaint和reflow

一、什么是web的性能优化

web的性能指标有很多，大致可以分为三类：

  1. 首次访问速度。首次访问速度主要指首页的加载速度，这个在移动端显得尤为可贵，对于大厂的h5 app，这一块的优化一直都是头疼的问题，例如淘宝首页，手百首页等等，让用户多看几百毫秒的白屏，都会让pm逼死一帮程序猿。
  2. 持续访问速度。持续访问速度更多指对于CPU，GPU，内存等资源的使用，使用过程中的是否有卡顿，是否保持流畅等等。
  3. web的健壮性。健壮是指，对于对于并发，大量请求和访问，web安全等等极端情况下web的可用性。

这次我们要讲的是主要是第一点，首次加载时，web性能的优化，这也是一版前端面试会的常考点。之后的web 性能优化均指的是第一点。

二、web性能优化的目的

  1. 优化用户体验，提升用户留存率。有人研究过：2秒之内，95%以上的实验者保持良好的注意力，3秒之后注意力开始分散；当等待时间超过5秒，70%的实验者能保持良好的注意力；当等待时间超过9秒，仅剩下20%能保持良好的注意力，对于不同首屏加载等待时间对于用户的留存，每个大厂不尽相同，但是大家都不知觉的精确到毫秒级，重要性可想而知。
  2. 提升web的SEO排名。在17年10月，百度就推出了对于首评加载时长超过3秒的web，降低其权重的“闪电算法”

三、web性能优化的原理

web性能的优化的原理，不得不提到浏览器在加载web首页时做的工作了，我们搞清楚了他的工作步骤，才能知道优化的点在哪里。下图是浏览器渲染的几个步骤：
web常见性能优化总结（浏览器渲染过程详解）_第1张图片
上图中有几点需要我们注意一下：
3. DOM和CSS OM是有先后开始，但是在过程中是可以(注意是可以，不是一定，也不是不行)同步进行的
4. DOM和CSSOM 都和js的解析是互斥的，这个很好理解，js可以修改dom节点或者css样式，所以js会阻塞其他两个的进程，直至js执行完毕
那么他的执行顺序大致可以这么看
web常见性能优化总结（浏览器渲染过程详解）_第2张图片
下面我们结合chorme的新增功能performance(控制台>performance)来对于每一个步骤的工作进行分析：
web常见性能优化总结（浏览器渲染过程详解）_第3张图片

3.1 加载文档

常见的浏览器文档类型有，HTML、XHTML、SVG，XML，在用户打开浏览器的时候，首先要做的是解析域名和dns，找到对应的IP，然后通过校验之后，像服务器发起请求，服务器相应的内容就是要加载的文档。
web常见性能优化总结（浏览器渲染过程详解）_第4张图片

3.2 生成dom树

这个过程主要是把文档解析成DOCUMENT OBJECT，例如html的 ，这个结构的解析，浏览器内置的都可以直接解析这些文档，不用依赖任何其他的文件，所以这个过程会很快，最终生成表示能够表示整个文档和每个节点的类型，数据和节点关系的树形结构，简称dom树。
web常见性能优化总结（浏览器渲染过程详解）_第5张图片
需要注意一点：这里是全部的node节点，即使

该节点会依然在dom树中存在
web常见性能优化总结（浏览器渲染过程详解）_第6张图片

3.3 加载css 和js

这个之所以会算作一个过程，是因为随着web的发展，很多web越来越大，功能也越来越复杂，引入的css和js也越来越多，在整个页面中也慢慢的占据一定的位置。
5. 加载css包括 html中的css代码块，内联样式，和需要下载的外部样式
6. js 主要指下载外部引入的js文件

3.4 生成CSS OM

CSSOM是将对应的样式绑定到对应的节点上，为什么会有树的概念，个人理解，cssom tree有点像树上开的花，来表示节点的属性，而且树的根节点和子节点，也很好的表示了css的优先级，比如父布局的一些样式对于子样式的影响，但是在css om tree中并不是最终的样式。

  1. 是用户代理样式的重新计算
  2. 不包含所有的dom节点

web常见性能优化总结（浏览器渲染过程详解）_第7张图片
web常见性能优化总结（浏览器渲染过程详解）_第8张图片

3.5 rending tree

这个过程是DOM和CSS OM合并的过程，这个过程中主要做：

  1. 去除dom树中和页面渲染无关的节点，比如head 、mate等
  2. 计算和合并cssOm，并应用到dom树上
  3. 从dom树上去除display：none的节点，visiable：false的不会移除

这样就生成了rend tree。

3.6 layout（flow 、reflow）

这个过程成为layout或者flow，布局，主要是来计算每个node的尺寸，位置和颜色等信息，为了下一步的绘制作准备，因为这个过程并不是只执行一次，比如js解析的时候，调整某一个node节点的尺寸或者位置，就会导致重新计算，所以也可以成为reflow。
影响重新布局的原因如下：

  1. 节点的增改
  2. 节点样式的修改（不是全部，比如背景色就不会导致重新布局）
  3. 用户发起的事件，鼠标事件等等

web常见性能优化总结（浏览器渲染过程详解）_第9张图片

3.7 paint（repaint）

绘制，原因和上方相同，都不止一次，会应为reflow，导致repaint。这里需要注意一点，paint的绘制是多线程分块进行的，可以在下图的三 看到，多个绘制并发进行。
web常见性能优化总结（浏览器渲染过程详解）_第10张图片

3.8 composite （合并）

从3.7可以看到，分层绘制，带来了并行，提升了效率，但是最后需要将绘制的结果合并成一个页面，呈现给用户。

讲到这里渲染的原理基本差不多了，接下来，才进入正题，我想，你如果看到这里，应该也能想到很多可以优化的点了。

四、性能优化

我们的性能也是会结果上面的步骤，进行阐述，对应这个阶段的优化点哦。

4.1 html的语义化编程

语义化标签是浏览器内置就能解析识别的标签，最终的实现也会dom的结构简洁话，所以就会减少时间消耗哦

4.2 资源的加速
  1. 静态资源的cnd加速
  2. 图片资源的压缩
  3. 合并资源请求，虽然会增加单个请求的时间，但是发起请求，关闭请求的操作，很耗费资源。
  4. css资源的分片加载，最常见的就是

media属性可以接受一个或多个媒体值表，浏览器会根据当前的媒体值，来加载对应的样式表，这样就要比把所有的样式放在同一个样式文件中要来的好

  1. js的异步加载
    js文件的异步加载，一个页面的初始化中，因为很多时候外部的js文件相对大小还是不小的，如果这些文件不着急执行，可以添加这个属性，表示异步加载，不会阻塞其他的操作

你可能感兴趣的:(学习记录,分享,javascript,web性能优化,渲染)

  • JavaScript基础-对象的相关概念 難釋懷 javascript开发语言
    在JavaScript编程中，对象（Object）是一个核心的概念，它几乎无处不在。无论是简单的键值对存储还是复杂的自定义数据结构，对象都提供了强大的功能来组织和操作数据。本文将介绍JavaScript中对象的基本概念、创建方法以及一些常见的操作技巧。一、什么是对象？在JavaScript中，对象是一种复合数据类型，它可以包含属性（properties），每个属性由一个键（key）和一个值（val
  • Godot引擎开发：UI和用户交互_用户界面性能优化 chenlz2007 游戏开发godotui交互游戏引擎microsoft性能优化
    用户界面性能优化在开发动作游戏时，用户界面（UI）的性能优化是至关重要的。一个流畅的UI不仅能够提升玩家的体验，还能确保游戏在不同设备上运行顺畅。本节将详细介绍如何在Godot引擎中优化UI性能，包括减少渲染负担、优化资源管理和提高响应速度等方面。1.减少渲染负担1.1使用精灵图（SpriteSheets）精灵图（SpriteSheets）是一种将多个小图合并成一张大图的技术，可以显著减少纹理切换
  • 网页制作12-html,css,javascript初认识のJavascipt脚本基础 Ama_tor 网页制作专栏javascript开发语言ecmascript
    一、JavaScript的三种基本使用方法:body|head|外部网页效果：运行代码：.html无标题文档functionn1(){document.getElementById("ama01").innerHTML="NO.3这是head中的JavaScript函数";}document.write("NO.1HELLOWORLD")//Document要小写NO.2这是body中的JavaS
  • 【Godot】Window类 Octopus2077 godot游戏引擎
    （参考自deepseek回答）在Godot引擎中，Window是一个用于管理应用程序窗口的类。它是Godot4.0引入的新特性，取代了旧版本中的OS类对窗口的管理功能。Window提供了对窗口大小、位置、标题、模式等属性的控制，使开发者能够更灵活地管理应用程序的窗口。1.Window的定义Window继承自Viewport，因此它也是一个渲染容器。它代表应用程序的一个窗口，可以包含2D或3D场景。
  • Linux 命令学习记录 hxung 面试学习使用linux学习运维
    Linux命令详解与进阶指南Linux是一种广泛使用的开源操作系统，掌握Linux命令是开发者和系统管理员的必备技能。本文将详细介绍Linux的常用命令，并涵盖一些高级进阶技巧，帮助你更高效地使用Linux。目录基础命令文件与目录操作文本处理系统信息权限管理进阶命令进程管理网络操作磁盘管理Shell脚本高级技巧管道与重定向正则表达式任务调度性能监控案例实战日志分析自动化部署服务器监控基础命令文件与
  • 如何进行OceanBase 运维工具的部署和表性能优化! oceanbase
    随着OceanBase数据库应用的日益深入，数据量不断攀升，单个表中存储数百万乃至数千万条数据的情况变得愈发普遍。因此，部署专门的运维工具、实施针对性的表性能优化策略，以及加强指标监测工作，都变得更为重要。以下为基于我们的使用场景，所采取的一些部署和优化措施分享。一、OCP部署升级1．OCP升级（1）4.2.1BP1升级到4.2.2，本来以为毫无波澜但是下载完毕一键包并完成前期准备工作启动后发现无
  • Python开发合并多个PDF文件 互联网搬砖老肖 AIPython原力计划pythonpdfjava
    前言在我们的工作中，可能有以下场景需要用到合并多个PDF：文档归档：在企业或组织中，常常需要将相关的文档（如合同、报告、发票等）合并为一个PDF文件，以便于归档和管理。报告生成：在学术研究或项目管理中，研究人员或项目经理可能需要将多个研究报告、数据分析或项目进展文档合并为一个完整的报告，以便于分享和展示。电子书制作：作者或出版商在制作电子书时，可能需要将多个章节或部分合并为一个PDF文件，以便于读
  • C# 通过chrome插件将HTML网页转换为PDF Eiceblue C#.NETPDFc#chromehtml
    将HTML网页内容转换为PDF格式能方便文档的后续打印、存档和分享等。之前介绍过如何通过QT插件将HTML转为PDF文件，本文将介绍另一个新的转换方法，通过谷歌浏览器Chrome插件将HTML网页转PDF文件。首先需要安装Spire.PDFfor.NET库（10.7.21版本及以上）。可以通过此链接下载产品包后手动添加引用，或者直接通过NuGet安装。https://www.e-iceblue.c
  • 数据结构与算法-图（绪论 图论基本概念） 可爱的野指针 数据结构图论算法数据结构有向图欧拉回路
    昨天我的的树就分享完了，树的概念很多吧，二叉树，满二叉树，完全二叉树，赫夫曼树，孩子，双亲……多不？哈哈哈，这算不了什么，我们接下来要看到的图的概念才叫多，没关系，勤奋和时间会让你记住他们，内心只需要告诉自己，加油，我能行，就一定能学会图。不知道有没有看过或者学过离散数学，如果学过，那么恭喜啦，离散数学里的图论就是这一章的基础，图论学的还不错的话，压力就小了。先介绍的是图的定义，图-V个顶点和E条
  • 算法篇——二分查找 古月方源1.0版 算法算法
    二分查找：从理论到实践前言今天无聊，决定在CSDN上发布我的第一篇文章，与大家分享一下二分查找算法。二分查找是一种高效的在有序数组中查找特定元素的算法，其核心思想是通过反复将查找范围减半来快速定位目标元素。二分查找的基本原理二分查找的基本思想非常简单。每次查找时，将数组的中间元素与目标值进行比较：如果中间元素等于目标值，则查找成功。如果中间元素小于目标值，则目标值只可能在右半部分，查找范围缩小为右
  • 基于python+mysql+vue的医院门诊管理系统 自不量力的A同学 mysql
    主要使用技术环境需要1.运行环境：python3.82.IDE环境：pycharm+mysql5.73.数据库工具：Navicat154.硬件环境：windows10/118G内存以上；或者MacOS；5.数据库：MySql5.7版本；技术栈后端：python+django前端：vue+CSS+JavaScript+jQuery+antdesign代码结构server目录是后端代码web目录是前端
  • Next：mui:client.ts:59 The pseudo class “:nth-child“ is potentially unsafe when doing server-side ren dingcho 前端前端reactmui
    client.ts:59Thepseudoclass":nth-child"ispotentiallyunsafewhendoingserver-siderendering.Trychangingitto":nth-of-type"这个警告是因为在服务器端渲染（SSR）中使用:nth-child伪类可能会导致一些问题，因为服务器和客户端的渲染顺序可能不同，从而导致样式不一致。建议将:nth-chi
  • QML界面卡死分析--01 --Canvas与QRasterPaintEngine 香油哥 Qmlqt
    QML界面卡死分析--01现象—Canvas与QRasterPaintEngine相关前置条件：渲染循环使用多线程方式；发现界面假死，无响应;拷贝dump分析，主线程堆栈如下：#0SyncSemWait()#10x000000007b4f8784inQMutexPrivate::wait(int)()fromqt_engine/qt-engine/lib/libQt6Core.so.6.5.0#2
  • vue2和vue3的diff算法有什么区别？ 浮生无聊 vue.jsjavascript前端面试
    1、diff算法是什么？diff算法是一种通过同层的树节点进行比较的高效算法。其有两个特点：只会在同层进行比较，不会跨层比较在diff比较过程中，循环从两边向中间比较diff算法在很多场景下都有应用，在vue中，作用于虚拟dom渲染成真实dom的新旧虚拟节点比较。diff整体策略为：深度优先，同层比较。Vue2和Vue3中的diff算法的主要区别：1、vue2的diff算法vue2使用了经典的di
  • Java 大视界 -- Java 大数据在智慧交通自动驾驶仿真与测试数据处理中的应用（136） 青云交 大数据新视界Java大视界java大数据自动驾驶智慧交通仿真测试数据处理数据存储
    亲爱的朋友们，热烈欢迎来到青云交的博客！能与诸位在此相逢，我倍感荣幸。在这飞速更迭的时代，我们都渴望一方心灵净土，而我的博客正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识，也期待你毫无保留地分享独特见解，愿我们于此携手成长，共赴新程！一、欢迎加入【福利社群】点击快速加入：青云交灵犀技韵交响盛汇福利社群点击快速加入2：2024CSDN博客之星创作交流营（NEW)二、本博客的精华专栏：大数据新视
  • “震惊！这个小小改变，竟让无数人生活大不同！你绝对想不到！” 山峰999 人工智能计算机视觉
    在这个快节奏的时代，每一天都有无数的信息冲击着我们的眼球，但真正能让我们眼前一亮、心头一动的却寥寥无几。今天，我要揭秘的，正是一个看似微不足道，实则威力无穷的“生活小妙招”。它不仅在网络上引起了轩然大波，更让无数实践者惊叹：“原来，幸福和便捷，真的可以如此触手可及！”你准备好迎接这份惊喜，让自己的生活也来个大变身了吗？那就继续往下读，保证让你大开眼界！在数字时代，照片已成为我们记录生活、分享美好瞬
  • 一键解锁压缩烦恼！高效安全免费解压缩神器全面深度剖析 山峰999 安全编辑器microsoft算法大数据推荐算法
    ❤亲爱的小伙伴们，我不定期分享好玩有趣的软件！部分小伙伴有这个需求，为了不错过我们的每一次分享，请大家记得回复互动留言，及时联系就能找到你需要的宝贝，这样大家每天都可以接收和享受到好玩有趣的推送了！❤❤❤你无需担心试用过期或反复提示购买的问题，解压缩神器国际版本承诺永久免费，让你可以无负担地享受压缩服务。在数据压缩与解压领域，一款高效、安全且易用的工具无疑是每位用户的首选。解压缩神器，作为一款的免
  • 8、基于osg引擎实现读取vtk数据通过着色器实现简单体渲染(2) 不收藏找不到我 着色器着色器c++开发语言
    #include#include#include#include#include#include#include#include#include#include#include#include#include#include#include#include#include#include#include#include#includeconststd::stringDATA_PATH=R"(..\
  • COMP 315: Cloud Computing 后端
    Assignment1:JavascriptCOMP315:CloudComputingforE-CommerceFebruary20251IntroductionAcommontaskwhenbackendprogrammingisdatacleaning,whichistheprocessoftakinganinitialdatasetthatmaycontainerroneousorinco
  • Python模块详解：定义、操作方法与高级特性 编程咕咕gu- python数据库开发语言学习路线数据分析
    如果你正在学习Python，那么你需要的话可以点击这里Python重磅福利：入门&进阶全套学习资料、电子书、软件包、项目源码等等免费分享！在Python中，模块是一个包含Python定义和语句的文件。模块可以定义函数、类和变量。模块也可以包含可执行的代码。你可以通过import语句将一个模块中的函数、类等导入到当前的程序中，以便能够重复使用代码，提高代码的可维护性。模块定义一个Python文件（.
  • 7、基于osg引擎实现读取vtk数据通过着色器实现简单体渲染(1) 不收藏找不到我 着色器着色器
    1、顶点着色器代码#version110/*GLSL1.10需要显式声明精度(OpenGLES要求)*/#ifdefGL_ESprecisionhighpfloat;#endif//体数据采样步长uniformfloatxStepSize,yStepSize,zStepSize;//体数据纹理和颜色纹理uniformsampler3DbaseTexture;uniformsampler1DtfTe
  • 【数据分享】我国分省份的七普乡镇（街道）人口数据 小鲨鱼-立方数据学社 数据分享立方数据学社人口普查七普数据乡镇人口人口数据
    人口数据是我们在各项研究中都经常使用的数据！人口数据的主要来源是人口普查，全国性的人口普查每十年进行一次。最近一次的人口普查是第七次全国人口普查，简称七普。七普统计的是2020年的人口数据。之前我们分享过省市县三个层级的七普的人口数据（可查看之前的文章获悉详情），很多小伙伴在咨询有没有到乡镇（城市地区对应街道）层级的七普人口数据！本次我们为大家分享的就是来自七普的乡镇（街道）人口数据，包括地区；总
  • COMP 315: Cloud Computing 后端
    Assignment1:JavascriptCOMP315:CloudComputingforE-CommerceFebruary20251IntroductionAcommontaskwhenbackendprogrammingisdatacleaning,whichistheprocessoftakinganinitialdatasetthatmaycontainerroneousorinco
  • 【数据分享】1999—2023年地级市地方一般公共预算收支状况数据（科学技术支出/教育支出等） 小鲨鱼-立方数据学社 数据分享中国城市统计年鉴地方一般公共预算收支状况立方数据学社
    在之前的文章中，我们分享过基于2000-2024年《中国城市统计年鉴》整理的1999-2023年地级市的人口相关数据、染物排放和环境治理相关数据、房地产投资情况和商品房销售面积相关指标数据和社会消费品零售总额和年末金融机构存贷款余额（均可查看之前的文章获悉详情）！本次我们分享的是从2000—2024年《中国城市统计年鉴》整理的地级市一般公共预算收支状况！数据年份为1999-2023年，对于数据年份
  • # Manim学习记录（2） 鼠鼠emo了捏 pythonnumpyvscode数学建模
    第一个案例GraphingMovement这个开始再坐标轴上画函数图像以及移动frommanimimport*classGraphingMovement(Scene):defconstruct(self):axes=Axes(x_range=[0,5,1],#x轴范围：从0到5，刻度间隔为1y_range=[0,3,1],#y轴范围：从0到3，刻度间隔为1x_length=5,#x轴长度为5（单位
  • Chitu：清华核弹级开源！推理引擎3倍提速+50%省卡，国产芯片告别英伟达绑架 蚝油菜花 每日AI项目与应用实例开源开源人工智能
    ❤️如果你也关注AI的发展现状，且对AI应用开发感兴趣，我会每日分享大模型与AI领域的开源项目和应用，提供运行实例和实用教程，帮助你快速上手AI技术！AI在线答疑->智能检索历史文章和开源项目->丰富的AI工具库->每日更新->尽在微信公众号->搜一搜：蚝油菜花“还在为天价H100排队？清华让国产芯片跑出3倍英伟达性能！”大家好，我是蚝油菜花。当科技巨头用天价H100显卡筑起算力高墙时，中国团队用
  • nodejs 010:Webpack 可视化分析插件 webpack-bundle-analyzer的使用 FakeOccupational 服务化&架构webpack前端node.js
    安装yarnadd--devwebpack-bundle-analyzer原始webpack.config.jswebpack.config.js代码定义了Webpack的配置，主要任务是将JavaScript和CSS文件打包，并将CSS提取到单独的文件中，配置了对Electron应用的支持，同时还将React相关的模块映射到Preact，以减小打包体积。//引入Node.js的path模块，用于
  • （一）响应式编程理论 糖心何包蛋爱编程 响应式编程java响应式框架经验分享
    小编大学毕业后面试的第一家公司问我会响应式吗，我当时觉得好陌生呀，完全没有听说过的名词，还在那里胡编乱造说一堆，但是也不是完全没有沾边，提到了Java8的新特性，现在想想也是印象很深，但好在成功拿到offer,入职后我就很努力的恶补很多相关知识，现在纯纯就是干货拿来分享，让你少走弯路。在了解响应式编程之后，发现响应式编程在行业内还没有普及，因为这对程序员有比较高的要求，不比传统编程好调试，但是当我
  • MySQL理论八股的学习记录 不吃元西 好记性不如烂笔头mysql学习数据库
    什么是MySQLMySQL是一种关系型数据管理系统数据库三大范式是什么？第一范式（1NF）：要求数据库表的每一列都是不可分割的原子数据项。第二范式（2NF）：在1NF的基础上，非码属性必须完全依赖于候选码（在1NF基础上消除非主属性对主码的部分函数依赖）第二范式需要确保数据库表中的每一列都和主键相关，而不能只与主键的某一部分相关（主要针对联合主键而言）。第三范式（3NF）：在2NF基础上，任何非主
  • Web 开发都需要学什么？ Duiz33237 前端html5css3web
    Web开发是指开发和构建用于互联网的网站和应用程序的过程。它涉及使用各种编程语言、框架和技术来创建功能丰富、用户友好的网站和应用程序。常见的web开发技术包括HTML、CSS和JavaScript。HTML用于创建网页的结构，CSS用于样式和布局，而JavaScript用于实现交互和动态效果。此外，还有许多其他的编程语言和框架，如Python、PHP、Ruby、React、Angular等，用于开
  • scala的option和some 矮蛋蛋 编程scala
    原文地址： http://blog.sina.com.cn/s/blog_68af3f090100qkt8.html 对于学习 Scala 的 Java™ 开发人员来说，对象是一个比较自然、简单的入口点。在 本系列 前几期文章中，我介绍了 Scala 中一些面向对象的编程方法，这些方法实际上与 Java 编程的区别不是很大。我还向您展示了 Scala 如何重新应用传统的面向对象概念，找到其缺点
  • NullPointerException Cb123456 androidBaseAdapter
        java.lang.NullPointerException: Attempt to invoke virtual method 'int android.view.View.getImportantForAccessibility()' on a null object reference     出现以上异常.然后就在baidu上
  • PHP使用文件和目录 天子之骄 php文件和目录读取和写入php验证文件php锁定文件
    PHP使用文件和目录 1.使用include()包含文件 (1)：使用include()从一个被包含文档返回一个值 (2)：在控制结构中使用include()   include_once()函数需要一个包含文件的路径，此外，第一次调用它的情况和include()一样，如果在脚本执行中再次对同一个文件调用，那么这个文件不会再次包含。   在php.ini文件中设置
  • SQL SELECT DISTINCT 语句 何必如此 sql
    SELECT DISTINCT 语句用于返回唯一不同的值。 SQL SELECT DISTINCT 语句 在表中，一个列可能会包含多个重复值，有时您也许希望仅仅列出不同（distinct）的值。 DISTINCT 关键词用于返回唯一不同的值。 SQL SELECT DISTINCT 语法 SELECT DISTINCT column_name,column_name F
  • java冒泡排序 3213213333332132 java冒泡排序
    package com.algorithm; /** * @Description 冒泡 * @author FuJianyong * 2015-1-22上午09:58:39 */ public class MaoPao { public static void main(String[] args) { int[] mao = {17,50,26,18,9,10
  • struts2.18 +json,struts2-json-plugin-2.1.8.1.jar配置及问题！ 7454103 DAOspringAjaxjsonqq
    struts2.18  出来有段时间了！ （貌似是 稳定版）   闲时研究下下！  貌似 sruts2 搭配 json 做 ajax 很吃香！   实践了下下！ 不当之处请绕过！ 呵呵   网上一大堆 struts2+json  不过大多的json 插件 都是 jsonplugin.34.jar   strut
  • struts2 数据标签说明 darkranger jspbeanstrutsservletScheme
    数据标签主要用于提供各种数据访问相关的功能，包括显示一个Action里的属性，以及生成国际化输出等功能 数据标签主要包括： action ：该标签用于在JSP页面中直接调用一个Action，通过指定executeResult参数，还可将该Action的处理结果包含到本页面来。 bean ：该标签用于创建一个javabean实例。如果指定了id属性，则可以将创建的javabean实例放入Sta
  • 链表.简单的链表节点构建 aijuans 编程技巧
    /*编程环境WIN-TC*/ #include "stdio.h" #include "conio.h" #define NODE(name, key_word, help) \  Node name[1]={{NULL, NULL, NULL, key_word, help}} typedef struct node {  &nbs
  • tomcat下jndi的三种配置方式 avords tomcat
    jndi(Java Naming and Directory Interface，Java命名和目录接口)是一组在Java应用中访问命名和目录服务的API。命名服务将名称和对象联系起来，使得我们可以用名称 访问对象。目录服务是一种命名服务，在这种服务里，对象不但有名称，还有属性。          tomcat配置
  • 关于敏捷的一些想法 houxinyou 敏捷
    从网上看到这样一句话：“敏捷开发的最重要目标就是：满足用户多变的需求，说白了就是最大程度的让客户满意。” 感觉表达的不太清楚。 感觉容易被人误解的地方主要在“用户多变的需求”上。 第一种多变，实际上就是没有从根本上了解了用户的需求。用户的需求实际是稳定的，只是比较多，也比较混乱，用户一般只能了解自己的那一小部分，所以没有用户能清楚的表达出整体需求。而由于各种条件的，用户表达自己那一部分时也有
  • 富养还是穷养，决定孩子的一生 bijian1013 教育人生
    是什么决定孩子未来物质能否丰盛？为什么说寒门很难出贵子，三代才能出贵族？真的是父母必须有钱，才能大概率保证孩子未来富有吗？-----作者：@李雪爱与自由 事实并非由物质决定，而是由心灵决定。一朋友富有而且修养气质很好，兄弟姐妹也都如此。她的童年时代，物质上大家都很贫乏，但妈妈总是保持生活中的美感，时不时给孩子们带回一些美好小玩意，从来不对孩子传递生活艰辛、金钱来之不易、要懂得珍惜
  • oracle 日期时间格式转化 征客丶 oracle
    oracle 系统时间有 SYSDATE 与 SYSTIMESTAMP； SYSDATE：不支持毫秒，取的是系统时间； SYSTIMESTAMP：支持毫秒，日期，时间是给时区转换的，秒和毫秒是取的系统的。 日期转字符窜： 一、不取毫秒： TO_CHAR(SYSDATE, 'YYYY-MM-DD HH24:MI:SS') 简要说明， YYYY 年 MM   月
  • 【Scala六】分析Spark源代码总结的Scala语法四 bit1129 scala
    1. apply语法   FileShuffleBlockManager中定义的类ShuffleFileGroup，定义：   private class ShuffleFileGroup(val shuffleId: Int, val fileId: Int, val files: Array[File]) { ... def apply(bucketId
  • Erlang中有意思的bug bookjovi erlang
      代码中常有一些很搞笑的bug，如下面的一行代码被调用两次（Erlang beam） commit f667e4a47b07b07ed035073b94d699ff5fe0ba9b Author: Jovi Zhang <[email protected]> Date: Fri Dec 2 16:19:22 2011 +0100 erts:
  • 移位打印10进制数转16进制-2008-08-18 ljy325 java基础
    /** * Description 移位打印10进制的16进制形式 * Creation Date 15-08-2008 9:00 * @author 卢俊宇 * @version 1.0 * */ public class PrintHex { // 备选字符 static final char di
  • 读《研磨设计模式》-代码笔记-组合模式 bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.List; abstract class Component { public abstract void printStruct(Str
  • 利用cmd命令将.class文件打包成jar chenyu19891124 cmdjar
    cmd命令打jar是如下实现： 在运行里输入cmd，利用cmd命令进入到本地的工作盘符。(如我的是D盘下的文件有此路径 D:\workspace\prpall\WEB-INF\classes) 现在是想把D:\workspace\prpall\WEB-INF\classes路径下所有的文件打包成prpall.jar。然后继续如下操作： cd D: 回车 cd workspace/prpal
  • [原创]JWFD v0.96 工作流系统二次开发包 for Eclipse 简要说明 comsci eclipse设计模式算法工作swing
                           JWFD v0.96 工作流系统二次开发包 for Eclipse 简要说明     &nb
  • SecureCRT右键粘贴的设置 daizj secureCRT右键粘贴
    一般都习惯鼠标右键自动粘贴的功能，对于SecureCRT6.7.5 ，这个功能也已经是默认配置了。 老版本的SecureCRT其实也有这个功能，只是不是默认设置，很多人不知道罢了。 菜单： Options->Global Options ...->Terminal 右边有个Mouse的选项块。 Copy on Select Paste on Right/Middle
  • Linux 软链接和硬链接 dongwei_6688 linux
    1.Linux链接概念Linux链接分两种，一种被称为硬链接（Hard Link），另一种被称为符号链接（Symbolic Link）。默认情况下，ln命令产生硬链接。 【硬连接】硬连接指通过索引节点来进行连接。在Linux的文件系统中，保存在磁盘分区中的文件不管是什么类型都给它分配一个编号，称为索引节点号(Inode Index)。在Linux中，多个文件名指向同一索引节点是存在的。一般这种连
  • DIV底部自适应 dcj3sjt126com JavaScript
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&q
  • Centos6.5使用yum安装mysql——快速上手必备 dcj3sjt126com mysql
    第1步、yum安装mysql [root@stonex ~]#  yum -y install mysql-server 安装结果： Installed:     mysql-server.x86_64 0:5.1.73-3.el6_5                   &nb
  • 如何调试JDK源码 frank1234 jdk
    相信各位小伙伴们跟我一样，想通过JDK源码来学习Java，比如collections包，java.util.concurrent包。 可惜的是sun提供的jdk并不能查看运行中的局部变量，需要重新编译一下rt.jar。 下面是编译jdk的具体步骤：         1.把C:\java\jdk1.6.0_26\sr
  • Maximal Rectangle hcx2013 max
    Given a 2D binary matrix filled with 0's and 1's, find the largest rectangle containing all ones and return its area.   public class Solution { public int maximalRectangle(char[][] matrix)
  • Spring MVC测试框架详解——服务端测试 jinnianshilongnian spring mvc test
    随着RESTful Web Service的流行，测试对外的Service是否满足期望也变的必要的。从Spring 3.2开始Spring了Spring Web测试框架，如果版本低于3.2，请使用spring-test-mvc项目（合并到spring3.2中了）。   Spring MVC测试框架提供了对服务器端和客户端（基于RestTemplate的客户端）提供了支持。 &nbs
  • Linux64位操作系统（CentOS6.6）上如何编译hadoop2.4.0 liyong0802 hadoop
    一、准备编译软件   1.在官网下载jdk1.7、maven3.2.1、ant1.9.4，解压设置好环境变量就可以用。     环境变量设置如下：   （1）执行vim /etc/profile （2）在文件尾部加入: export JAVA_HOME=/home/spark/jdk1.7 export MAVEN_HOME=/ho
  • StatusBar 字体白色 pangyulei status
    [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent]; /*you'll also need to set UIViewControllerBasedStatusBarAppearance to NO in the plist file if you use this method
  • 如何分析Java虚拟机死锁 sesame javathreadoracle虚拟机jdbc
    英文资料： Thread Dump and Concurrency Locks   Thread dumps are very useful for diagnosing synchronization related problems such as deadlocks on object monitors. Ctrl-\ on Solaris/Linux or Ctrl-B
  • 位运算简介及实用技巧（一）：基础篇 tw_wangzhengquan 位运算
    http://www.matrix67.com/blog/archives/263    去年年底写的关于位运算的日志是这个Blog里少数大受欢迎的文章之一，很多人都希望我能不断完善那篇文章。后来我看到了不少其它的资料，学习到了更多关于位运算的知识，有了重新整理位运算技巧的想法。从今天起我就开始写这一系列位运算讲解文章，与其说是原来那篇文章的follow-up，不如说是一个r
  • jsearch的索引文件结构 yangshangchuan 搜索引擎jsearch全文检索信息检索word分词
    jsearch是一个高性能的全文检索工具包，基于倒排索引，基于java8，类似于lucene，但更轻量级。   jsearch的索引文件结构定义如下：     1、一个词的索引由=分割的三部分组成：        第一部分是词        第二部分是这个词在多少