暗影刀客
暗影刀客

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性能优化,渲染)

  • **[特殊字符] 计算机领域创作挑战赛，邀你共绘文字海洋！** 爱编程的Loren 活动文章活动文章
      亲爱的大学博主们：  大家好！  你是否热爱写作，渴望在文字的海洋中遨游，展示自己的创作才华？你是否对计算机领域充满热情，希望将你的知识和见解分享给更多人？如果你对这两点都给出了肯定的答案，那么这个创作活动就是为你量身定制的！  **创作挑战赛火热开启**  我们诚挚地邀请你参加为期14天的创作挑战赛！这是一个以写作博客为目的的创作活动，旨在鼓励大学生博主们挖掘自己的创作潜能，展现自己的写作才
  • vscode设置console.log的快捷输出方式 活宝小娜 vscodevscodeide编辑器
    vscode设置console.log的快捷输出方式编辑器中输入clg回车，可以直接输出console.log，并且同步输出变量的字符串和值1、打开vscode点击左上角的文件2、找到首选项3、点击用户代码配置4、在顶部输入框种输入javas，选择JavaScript选项5、打开里面注释的代码，写入如下内容{//Placeyoursnippetsforjavascripthere."Printto
  • GPT-4o mini TTS：OpenAI 推出轻量级文本转语音模型！情感操控+白菜价冲击配音圈 蚝油菜花 每日AI项目与应用实例开源人工智能
    ❤️如果你也关注AI的发展现状，且对AI应用开发感兴趣，我会每日分享大模型与AI领域的开源项目和应用，提供运行实例和实用教程，帮助你快速上手AI技术！AI在线答疑->智能检索历史文章和开源项目->丰富的AI工具库->每日更新->尽在微信公众号->搜一搜：蚝油菜花️“声优连夜转行送外卖！OpenAI新模型每分钟语音成本仅9分钱”大家好，我是蚝油菜花。当同行还在用机械音合成器折磨听众时，这个AI怪物已
  • Dify-Plus：企业级AI管理核弹！开源方案吊打SaaS，额度+密钥+鉴权系统全面集成 蚝油菜花 每日AI项目与应用实例人工智能开源开源人工智能
    ❤️如果你也关注AI的发展现状，且对AI应用开发感兴趣，我会每日分享大模型与AI领域的开源项目和应用，提供运行实例和实用教程，帮助你快速上手AI技术！AI在线答疑->智能检索历史文章和开源项目->丰富的AI工具库->每日更新->尽在微信公众号->搜一搜：蚝油菜花“CTO集体失眠！这个开源项目让企业AI管理进入上帝模式”大家好，我是蚝油菜花。当同行还在为API调用次数和预算超支扯皮时，这个国产神器已
  • 五个冷门的Adobe系列软件小技巧 reddingtons adobe
    在当今的数字时代，Adobe系列软件在设计、视频编辑和创意制作领域占据着重要地位。许多学校和教育机构为学生提供教育邮箱，允许他们免费使用Adobe全系列软件的教育订阅。这意味着无论是Photoshop、Illustrator还是PremierePro等热门软件，学生都能轻松获取。然而，本文将分享一些冷门的Adobe软件小技巧，这些技巧主要适用于付费用户，可能不适用于某些免费用户。小技巧一：使用Ad
  • 从“一壶浊酒”到“一份报告”，看永洪科技助力郎酒集团的数字化升级之旅 永洪科技 大数据数据分析数据可视化BI
    白酒在社交、庆祝和宴请活动中扮演着重要的角色，它与人们的生活密切相关。白酒的制作过程、酿造技艺、酒文化习俗等方面都体现了当地的历史、传统和价值观。同时它也是一种文化的载体，承载着人们对于生活、友谊、团聚的情感和期待。人们通过分享白酒来加强彼此之间的联系和沟通，它成为了社交场合中的重要元素。白酒还通过艺术、文学、电影等形式在文化领域中得到了表达和展示。郎酒庄园作为我国传统的白酒行业，郎酒在国内市场占
  • 手写promise ,实现 then ,catch,finally,resolve,reject,all,allSettled 会飞的鱼先生 前端javascript开发语言
    完整代码原生Promise的用法1.Promise是JavaScript中用于处理异步操作的重要工具。它代表了一个异步操作的最终完成或失败，并且使异步方法可以像同步方法那样返回值。resolve：当异步操作成功时调用的函数，用于将Promise的状态改为fulfilled，并将结果值传递给后续的.then()方法。reject：当异步操作失败时调用的函数，用于将Promise的状态改为reject
  • C#入门学习记录（五）轻松掌握条件分支与循环语句 FAREWELL00075 c#学习前端
    前言编程就像给计算机写一份"烹饪指南"，而条件分支和循环就是这份指南中的关键指令。想象你要教机器人做蛋糕：条件分支："如果没有鸡蛋了，就去超市买"（做决定）循环："重复搅拌面糊100次"（重复动作）本文会用简单易懂的语言和比喻，带你掌握C#中这两个核心概念。新手友好，放心食用！一、条件分支：让程序学会"做选择"1.if-else语句（基础版选择器）if(今天下雨){Console.WriteLin
  • [前端面试场景题]虚拟列表 GISer_Jinger 前端面试
    嗯，用户问的是“前端虚拟列表详解”，我需要详细回答这个问题。首先，我得先理解虚拟列表的概念和用途。根据搜索结果，虚拟列表主要用于优化长列表的渲染性能，特别是在处理大量数据时。用户可能想知道它的核心原理、实现方法以及实际应用场景。看网页1提到虚拟列表的定义和关键点，只渲染视口内的数据项，减少DOM节点。网页2和网页4都给出了具体的Vue和原生JS实现案例，比如动态计算起始和结束索引，使用transf
  • 侯捷 C++ 课程学习笔记：深入掌握 C++ 高阶特性 —— 实践与心得分享 清水白石008 C++学习笔记课程教程c++学习笔记
    侯捷C++课程学习笔记：深入掌握C++高阶特性——实践与心得分享自从开始接触侯捷C++系列精品课程以来，我对C++语言有了全新的认识与深入理解。这套课程不仅系统地梳理了C++的基础知识，更从实际案例中展示了许多高阶特性和工程实战技巧。作为一名长期从事C++开发的专业人士，我深深感受到侯捷老师讲解中那种由浅入深、逻辑严密的魅力，也正是这种教学风格让我在短时间内掌握了不少难以琢磨的知识点。今天，我将结
  • 深入理解 JSON.stringify：优雅输出 JSON 数据 天天进步2015 前端开发json
    在JavaScript开发中，JSON数据的处理是一项基础且关键的技能。JSON.stringify()方法作为将JavaScript对象转换为JSON字符串的标准工具，其功能远不止于简单的数据转换。本文将深入探讨JSON.stringify()的使用技巧、参数配置以及常见陷阱，帮助开发者更优雅地处理JSON数据输出。基础用法JSON.stringify()的基本语法如下：JSON.stringi
  • JavaScript的函数拦截技术详解 天天进步2015 前端开发javascript开发语言ecmascript
    引言在JavaScript的世界里，函数是一等公民。它们可以被赋值给变量，作为参数传递，甚至可以被动态修改。函数拦截（FunctionInterception）是一种强大的技术，允许开发者在不修改原始函数代码的情况下，拦截、监控和修改函数的行为。本文将深入探讨JavaScript函数拦截的各种技术、应用场景以及最佳实践。什么是函数拦截？函数拦截是指在函数执行前、执行中或执行后插入自定义逻辑的过程。
  • JavaScript常用函数测试demo sunny05296 JavaScriptjavascript开发语言ecmascript
    JavaScript常用函数测试demovimJavaScriptTestDemo.html内容如下：JavaScriptfunctionstestdemoEnterF12toviewtheconsoleoutputmessageofconsole.log()EnterF5torefresh//JavaScriptint2string/string2inttestfunctiontest01(){
  • 使用Python和Django构建支持多语言的博客网站 程序员～小强 pythondjangosqlite
    随着互联网的发展,博客已经成为人们获取信息和分享想法的重要平台。但是不同国家和地区的用户语言各异,这给博客的国际化带来了挑战。本文将介绍如何使用Python和Django这两个强大的Web开发框架,来构建一个支持多语言的博客网站。Django框架概述Django是一个开源的Web应用框架,由Python写成。它鼓励快速开发和干净的设计。通过提供大量常用组件,Django可以更快地构建高质量的Web
  • 显卡（Graphics Processing Unit，GPU）架构详细解读 m0_74824112 面试学习路线阿里巴巴架构大数据网络
    显卡架构主要分为两大类：GPU核心架构（也称为图形处理单元架构）和显卡的其他组件（如内存、控制器、输出接口等）。本篇文章将对显卡架构进行详细分析，重点介绍GPU核心架构、显卡计算单元、显存结构、显卡管线、以及显卡与主机系统的协同工作等。1.显卡架构的基本组成显卡架构可以分为以下几个主要部分：1.1GPU核心（计算单元）GPU核心是显卡的核心部分，负责执行图形渲染和计算任务。GPU核心通常由多个流处
  • GPU架构分类 大明者省 架构
    一、NVIDIA的GPU架构NVIDIA是全球领先的GPU生产商，其GPU架构在图形渲染、高性能计算和人工智能等领域具有广泛应用。NVIDIA的GPU架构经历了多次迭代，以下是一些重要的架构：1.Tesla（特斯拉）架构（2006年发布）特点：NVIDIA推出的首个通用GPU计算架构，支持使用C语言进行GPU编程，标志着GPU开始从专用图形处理器转变为通用数据并行处理器。性能：具有128个流处理器
  • DMDDM文档数据库学习分享 合作愉快：） 数据库学习
    达梦新云文档数据库（简称DMDDM），是一款由达梦公司独立研发的分布式原生文档数据库产品。一、关键特性1、高性能、高可用性：DMDDM文档数据库支持快速的数据读写操作，能够满足高性能应用的需求。支持主备集群和分布式集群部署方式，单个节点故障不影响整个系统的正常运行。提供DDM-Meta、DDM-Store和DDM-Engine三个核心组件，分别负责存储数据库元数据和集群调度、存储实际的数据库数据以
  • nginx性能优化及使用方面技巧 智慧源点 nginx性能优化linux
    优化Nginx进程数量配置参数如下：代码语言：javascript复制worker_processes1;#指定Nginx要开启的进程数，结尾的数字就是进程的个数，可以为auto这个参数调整的是Nginx服务的worker进程数，Nginx有Master进程和worker进程之分，Master为管理进程、真正接待“顾客”的是worker进程。进程个数的策略：worker进程数可以设置为等于CPU的
  • 轻松帮你搞清楚Python爬虫数据可视化的流程 liuhaoran___ python
    Python爬虫数据可视化的流程主要是通过网络爬取所需的数据，并利用相关的库将数据分析结果以图形化的方式展示出来，帮助用户更直观地理解数据背后的信息。Python爬虫+数据可视化步骤1.获取目标网站的数据使用`requests`或者`selenium`库从网页上抓取信息。对于动态加载内容的页面可以考虑结合JavaScript渲染引擎。2.解析HTML内容提取有用信息常见工具如BeautifulSo
  • STM32F103C8T6点灯/流水灯（指定IO，正向反向） BDXiaotianYA stm32嵌入式硬件单片机
    参加2023年电赛后，到现在上班一年多，长达两年时间内，几乎没有再碰过单片机，由于现在工作中需要接触到一些代码，先退回来复习下32单片机。本人在此做一件事情，傻瓜式代码，让代码足够简洁，足够规范，让你复制我的代码百分百能够使用。此账号仅作为分享本人复习过程中记录使用，如果无法使用，或者或者有优化的地方，欢迎留言，看到后第一时间给予回复。有空会将2023激光打靶代码开源出来。在使用本程序的时候，默认
  • Python 爬虫实战：社交媒体品牌反馈数据抓取与舆情分析 西攻城狮北 python爬虫媒体
    一、引言在当今数字化时代，社交媒体已成为公众表达意见、分享信息的重要渠道。品牌的声誉和市场表现往往受到消费者在社交平台上的反馈和评价的影响，因此品牌舆情分析变得至关重要。本文将介绍如何使用爬虫技术爬取社交媒体上的品牌反馈数据，并通过数据分析技术，分析品牌的舆情动态。二、环境准备在开始之前，确保你的开发环境已经安装了以下必要的Python库：requests:用于发送HTTP请求。beautiful
  • js在html有几种存在方式,JavaScript输出方式有哪些？ 王若琳 js在html有几种存在方式
    JavaScript输出方式有哪些？下面本篇文章给大家介绍一下JavaScript常见的输出方式。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。1.通过弹窗的形式来输出alert(需要输出的内容);alert("helloworld");confirm(需要输出的内容);confirm("你好吗?");prompt(需要输出的内容);prompt("请输入内容：");注意点:如果
  • 判断html标签是否存在,jquery怎么判断标签元素是否存在？ BugHunter666 判断html标签是否存在
    jquery怎么判断标签元素是否存在？下面本篇文章给大家介绍一下在jquery中判断页面标签元素是否存在的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。jquery判断页面标签元素是否存在在传统的Javascript里，当我们对某个页面元素进行某种操作前，最好先判断这个元素是否存在。原因是对一个不存在的元素进行操作是不允许的。例如：document.getElementBy
  • 学习记录之游标翻页实现 sjsjsbbsbsn Java学习之路项目实战技巧javamysqlredis
    游标翻页本方案参考mallchat实现一.深翻页问题普通翻页前端一般会有个分页条。能够指定一页的条数，以及任意选择查看第几页,假设我们想查询第11页的内容传递过来的参数为:pageNo=11，pageSize=10对应的sql查询为:select*fromtablelimit100,10其中100代表需要跳过的条数，10代表跳过指定条数后，往后需要再取的条数。假设翻页到1w条,那我们要先扫描到这1
  • JavaScript数组-遍历数组 咖啡の猫 javascript开发语言
    在JavaScript开发过程中，数组是一种非常常见且强大的数据结构，用于存储一系列有序的数据项。遍历数组是处理这些数据项的基础操作之一，无论是为了显示、转换还是过滤数据。本文将详细介绍几种常见的遍历数组的方法及其应用场景，帮助你选择最适合当前任务的方式。一、为什么需要遍历数组？遍历数组意味着逐一访问数组中的每个元素，以便执行特定的操作，如打印输出、修改值或基于条件筛选数据。不同的场景可能需要不同
  • Vision mamba(mamba_ssm)安装踩坑指南 ggitjcg 深度学习python
    在这篇博客中，我将分享我在linux环境安装和使用VisionMamba（mamba_ssm）过程中遇到的一些问题和解决方法。前置检查：PyTorch和Python版本在安装mamba_ssm前，请确保你的PyTorch和Python环境版本正确。以下代码可用来检查环境信息：importtorchprint("PyTorchVersion:{}".format(torch.__version__)
  • gamma软件在linux,GAMMA软件的InSAR处理流程 森见灯笼 gamma软件在linux
    《GAMMA软件的InSAR处理流程》由会员分享，可在线阅读，更多相关《GAMMA软件的InSAR处理流程(27页珍藏版)》请在人人文库网上搜索。1、基于GAMMA软件的InSAR处理流程,大纲,GAMMA简介InSAR干涉处理流程-步骤-示例差分干涉测量及地理编码流程-步骤-示例,GAMMA简介,Source:Swisscorporation(Aktiengesellschaft-AG)foun
  • Angular 编译前的脚本执行 t0_54manong 编程问题解决手册angular.js前端javascript个人开发
    在使用Angular开发项目时，有时候我们需要在每次编译之前执行特定的脚本或JavaScript函数。这在开发环境中非常有用，比如运行某些预处理、清理或其他自定义逻辑。今天我们将探讨如何在Angularv17结合esbuild实现这个功能。问题背景假设你正在使用Angularv17进行开发，并且已经配置了esbuild作为构建工具。现在你需要在每次Angular编译之前（特别是使用ngwatch时
  • JavaScript基础-API 和 Web API 難釋懷 前端javascript开发语言
    在现代Web开发中，API（应用程序接口）是连接不同软件组件或系统之间的桥梁。对于前端开发者来说，JavaScript与WebAPI的结合使用尤为重要，它使得我们可以访问浏览器提供的各种功能和服务，从而构建出交互性更强、用户体验更好的网页应用。本文将介绍API的基本概念，重点探讨WebAPI及其在JavaScript中的应用。一、什么是API？API全称为“ApplicationProgrammi
  • LINUX PCIe架构详解 吕喜曦
    LINUXPCIe架构详解【下载地址】LINUXPCIe架构详解分享LINUXPCIe架构详解欢迎阅读《LINUXPCIe架构详解》文档项目地址:https://gitcode.com/Open-source-documentation-tutorial/cb0cf欢迎阅读《LINUXPCIe架构详解》文档。本指南深入浅出地介绍了在Linux操作系统环境下，针对PCIExpress（PCIe）设备
  • 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、一个词的索引由=分割的三部分组成：        第一部分是词        第二部分是这个词在多少