zhaolandelong
zhaolandelong

前端扫盲——浅析浏览器布局原理

写在前面

本文旨在帮助非前端技术同学，粗略掌握浏览器渲染原理，方便工作中的沟通。
本文假设读者已经有了前端的一些基本概念，比如知道 HTML、CSS、JS 分别负责布局、样式、逻辑。有了上述前提，阅读本文后会大致了解浏览器渲染页面的原理，有利于对浏览器渲染流程的抽象，在于前端配合上会抹平很大的 gap。

解析 HTML

首先，浏览器会将 HTML 文档解析成 DOM Tree

DOM Tree

DOM 是文档对象化模型（Document Object Model）的简称。DOM Tree 是指通过 DOM 将HTML 页面进行解析，并生成的 HTML tree 树状结构和对应访问方法。

举个例子


<html>
  <head>
    <title>文档标题title>
  head>
  <body>
    <h1>我的标题h1>
    <a href="">我的链接a>
  body>
html>

这段代码，会被解析成下面的结构
前端扫盲——浅析浏览器布局原理_第1张图片
每个 HTML 元素，就是一个 DOM；每个 DOM 会有很多属性；不同类型的 DOM 有不同的属性。
注：其实同步进行的还有 CSS 的解析，但是本文为了聚焦于 HTML 的渲染，暂不扩展 CSS 的内容。

画元素

我们先暂时放下「元素排列」不管，先来看看怎么画一个元素。实际上就是按照 DOM 的属性描述，把它画出来。关键的属性有哪些呢？

块元素与行内元素

块元素（Block）即自己占用一整行的元素。如 p 段落、h1~h6 标题、div 等
行内元素（Inline）顾名思义，可以排列在同一行的元素。如 a 链接、img 图片、input 输入框、其他表单元素等。
可以用 display 属性来改变元素的性质。
套用在本文的实例中，h1 是块元素，所以字数再少，也会占满一行；a 是行内元素，可以并排展示多个 a 标签。

盒子模型

每个元素都是一个「盒子模型」，包括内容（content）、内边距（padding）、边框（border）、外边距（margin）和宽（width）高（height）基本属性。
前端扫盲——浅析浏览器布局原理_第2张图片

当然实际上还要结合更多 CSS 的属性去呈现元素的样式。但是与「布局」相关的属性，基本上就这些，暂时只了解这些概念就行了。
有了以上概念，浏览器就可以画出一个元素的骨架了。

元素排列

接下来是绘画顺序，浏览器会按照一定顺序，一个一个的画元素。那么这个顺序是什么呢？

文档流（normal flow）

简单来说，把 DOM 元素「从左至右，从上到下」依次排列，像平时写文章的顺序一样，这样就形成了一个「文档流」。当然，DOM Tree 是有层级结构的，子元素在父元素内部，也按照文档流规则排列。

脱离文档流

脱离文档流一个典型的场景就是「弹窗」。整个弹窗是覆盖在整个页面上的。这时候不管你把它放在 DOM Tree 中的什么位置，只要它是脱离文档流的，在画它的时候就会先跳过。
如何脱离文档流？当一个元素有了 float、position: absolute、position: fixed 属性时，就会脱离文档流。
这部分比较复杂，本文不做展开。只需要了解到「弹窗」这类交互是如何实现的即可。

总结

我们简单梳理一下浏览器页面布局的流程：

  1. 将 HTML 解析成 DOM Tree
  2. 根据 DOM 元素的属性「画元素」
  3. 根据文档流排列元素

落实到跟业务相关的就是，后端返回的数据格式，做到如下要求即可：

  1. 结构模拟 DOM Tree
  2. DOM 属性足够表现布局信息（其实不用太多）

参考结构

interface Element {
    elementId?: string;
    type: enum; // 组件类型 text/input/grid/picture etc.
    property: { // 组件属性，字段不固定
        value?: any;
        // other properties
    },
    sub?: Element[]; // 组件内置子组件
}

你可能感兴趣的:(html,浏览器,chrome,前端)

  • 【Pytest】基础到高级功能的理解使用 卜及中 Python基础pytest学习python开发语言python3.11
    文章目录第一部分：Pytest简介1.1什么是Pytest？1.2Pytest的历史1.3Pytest的核心概念1.4Pytest的特点1.5为什么选择Pytest？第二部分：Pytest的基本使用2.1安装Pytest2.2编写第一个测试用例2.2.1创建一个简单的测试函数2.2.2运行测试2.3测试报告和输出2.3.1简单输出2.3.2显示详细的失败信息2.3.3生成HTML报告2.4组织和运
  • fuadmin jcsx 开源学习djangovue.js
    fu-admin-web采用VUE3，TS开发。fu-admin-backend采用Python，Django和Django-Ninija开发。数据库支持MySql，SqlServer，Sqlite。‍‍前端采用VbenAdmin、Vue3、AntDesignVue。后端采用Python语言Django框架以及强大的DjangoNinja。支持加载动态权限菜单，多方式轻松权限控制。Vue2项目移步
  • 转帖-在Eclipse中开发JSF ren_z_q JSFEclipseBeanJSPOracle
    (转自http://www.blogjava.net/gaofeng/articles/127842.html作者:Java.net)Eclipse3.3刚刚发布,正在学习JSF,于是使用Eclipse3.3做了一个JSF的Demo,很简单,主要是页面的跳转、组件和Bean的绑定等基础...1、工具准备:Eclipse3.3WTP2.0(最好下载一个all-in-one的版本..省的麻烦)...依
  • docker容器基础入门 霉逝 docker容器运维
    docker容器技术基础入门文章目录docker容器技术基础入门@[toc]1.docker基本概念2.Docker的引擎的组成以及功能3.docker的架构4.docker安装、配置加速器以及常用指令4.1安装docker软件包4.2开启docker并查看状态4.3配置阿里云镜像加速器4.4docker常用命令1.docker基本概念docker是容器技术的一个前端工具，容器是内核的一项技术，d
  • 自动化测试--概念篇 .比奇堡派大星. 软件测试自动化测试selenium
    博主主页:码农派大星.数据结构专栏:Java数据结构数据库专栏:数据库JavaEE专栏:JavaEE软件测试专栏:软件测试关注博主带你了解更多知识目录1.⾃动化1.1自动化概念1.1.1回归测试1.2⾃动化分类接⼝⾃动化UI⾃动化1.3⾃动化测试⾦字塔2.web⾃动化测试安装驱动管理3.Selenium安装selenium库使⽤selenium编写代码selenium+驱动+浏览器的⼯作原理1.⾃
  • 深入理解 Vue 的 Diff 算法：从原理到实现的完整剖析 qq_39279448 vue.js算法前端
    Vue的Diff算法如何工作？如何将传统树的比较复杂度从O(n^3)降到O(n)？Vue3的优化策略如何显著提升性能？Vue源码中Diff算法的实现细节是什么？实际开发中Diff算法的使用及优化实践。1.Diff算法的基本原理1.1为什么需要Diff算法？在浏览器中，直接操作真实DOM会导致：性能成本高：DOM是浏览器中的重量级对象，频繁操作会触发页面的回流（reflow）和重绘（repaint）
  • 前端构建工具 光影少年 前端软件构建
    前端构建工具是开发现代Web应用时不可或缺的工具，用于优化代码、提升开发效率、以及实现高效的构建和部署。以下是常见的前端构建工具及其作用：1.模块打包工具Webpack特点：功能强大，插件与配置灵活。作用：将模块（JS、CSS、图片等）打包成浏览器可运行的文件。适用场景：中大型项目，需高度自定义。Vite特点：轻量、快速构建，基于ESModules。作用：适合现代框架如Vue、React，热更新速
  • Vue.js如何阻止事件冒泡 JhzDev vue.js前端javascriptVue.Js
    事件冒泡是指当一个元素上的事件被触发时，该事件会从该元素开始向上层元素逐级触发，直至到达文档根节点。在Vue.js中，我们可以使用事件修饰符来阻止事件冒泡。下面我将详细介绍如何在Vue.js中实现事件冒泡的阻止。首先，让我们创建一个简单的Vue.js应用程序，以便演示事件冒泡的问题和解决方案。在HTML中，我们将创建一个包含两个嵌套元素的div，每个元素都绑定了点击事件。当点击内部元素时，我们希望
  • Vue.js组件开发研究 清北互联木材 vue.js
    摘要随着前端技术的快速发展，Vue.js以其轻量级、高性能和组件化开发的优势，在前端开发领域占据了重要地位。本研究深入探讨了Vue.js组件开发的理论基础、开发方法以及实际应用。通过系统梳理Vue.js框架的核心特性、组件化思想及Vue.js组件的基本概念，本研究为Vue.js组件开发提供了全面的理论支撑。进一步地，本研究详细介绍了Vue.js组件的设计原则、组成要素及组件之间的关系，并阐述了组件
  • 什么是vue.js组件开发，我们需要做哪些准备工作？ 大懒猫软件 vue.js
    Vue.js是一个非常流行的前端框架，用于构建用户界面。组件开发是Vue.js的核心概念之一，通过将界面拆分为独立的组件，可以提高代码的可维护性和复用性。以下是一个详细的Vue.js组件开发指南，包括基础概念、开发流程和代码示例。一、Vue.js组件开发基础1.组件的基本结构Vue.js组件是一个独立的、可复用的UI元素。每个组件都有自己的模板、逻辑和样式。组件的基本结构如下：vue复制{{tit
  • 1.7K star！AI Cover：开源的红包封面[特殊字符]生成器，赶快收藏！ 前端后花园 前端热门开源项目人工智能githubjavascript开发语言前端代码片段
    欢迎来到前端后花园！我们专注分享前端开源项目，目标是探索分享精选100个高质量的开源项目。这是系列的第3篇文章，分享一个AI红包封面生成开源项目。大家好，我是小前！想要制作一款红包封面？却不懂PS，没关系，小前今天分享的开源项目-AI红包封面生成，输入提示词（eg.蛇年快乐）即可生成符合设计规范的红包封面，快来看看吧！简介AICover是一款开源的红包封面生成器，输入要生成的红包描述，即可快速生成
  • python实战项目34：基于flask的天气数据可视化系统1.0 wp_tao Python副业接单实战项目flask信息可视化python
    基于flask的天气数据可视化系统1.0一、效果展示二、flask简介三、图表绘制四、前端页面编写五、完整代码一、效果展示该flask项目相对简单入门，使用了flask框架、bootstrap前端技术，数据使用的是上一篇scrapy爬取城市天气数据中爬取到的数据。二、flask简介Flask是一个基于Python的Web开发框架，它以灵活、微框架著称，基于werkzeug的轻量级web框架，可提高
  • flask实现重启后需要重新输入用户名而避免浏览器使用之前已经记录的用户名 Channing Lewis Pythonflaskpython后端
    要实现重启后重新输入用户名的功能，关键是确保Flask在应用重启时不会保留之前的用户会话（即清除登录状态）。以下是一些可能的原因和解决方法：1.问题原因：Session数据没有清除Flask使用session来保存用户的登录状态（如用户名），默认存储在浏览器的Cookie中。如果Flask使用了持久化的secret_key，即使重启服务器，客户端的Cookie仍然有效，导致会话数据还存在。2.解决
  • Python爬虫技术 第12节 设置headers和cookies hummhumm python爬虫开发语言djangoflaskjavaspring
    在使用Python进行网络爬虫开发时，经常需要模拟浏览器行为，这包括设置请求头（headers）和处理cookies。下面我将详细介绍如何在Python中使用requests库来设置headers和处理cookies。设置HeadersHeaders包含了客户端发送给服务器的信息，比如用户代理（User-Agent）、接受的内容类型（Accept）、语言偏好（Accept-Language）等。设
  • Python爬虫技术 第16节 XPath hummhumm python爬虫开发语言flaskjavamavenjava-ee
    XPath是一种在XML文档中查找信息的语言，尽管XML和HTML在语法上有区别，但XPath同样适用于HTML文档的解析，尤其是在使用如lxml这样的库时。XPath提供了一种强大的方法来定位和提取XML/HTML文档中的元素和属性。XPath基础XPath表达式由路径表达式组成，它们指定了文档中的位置。下面是一些基本的XPath语法：根节点：/表示绝对路径的开始，指向文档的根节点。//表示从当
  • GB/T28181 全栈开发日记[6]：React 快速接入 jessibuca.js 播放器 gospace 从0到实现GB/T28181协议的完整实践javascriptreact.js前端golang音视频
    GB/T28181全栈开发日记[6]：React快速接入jessibuca.js播放器服务端源代码github.com/gowvp/gb28181前端源代码github.com/gowvp/gb28181_web介绍GoWVP(GolangWebVideoPlatfrom)是一个Go语言实现的，基于GB28181-2022标准实现的网络视频平台，负责实现核心信令与设备管理后台部分，支持海康、大华、
  • Python Web开发 twc829 Python
    Web开发介绍一、Web开发概述1C/S结构和B/S结构C/S—Client/Server，即客户机/服务器结构B/S—Browse/Server，即浏览器/服务器结构2B/S结构的优势2.1不用通知客户端安装某个软件2.2不用通知客户端升级2.3可轻松地实现跨平台3访问网站过程用户向服务器发起请求，服务器将HTML文件返回给用户，浏览器将HTML文件渲染成用户看到的网站；4分类4.1静态网站用户
  • DB项目前端分支思考 vue.js
    背景一般的项目基本是一个主分支持续的迭代开发。比如有一个master分支，这个分支是可以随时发布版本的。还有一个开发分支，比如develop，是从master检出的。当迭代开始的时候，从develop分支检出feature-xxx分支来做开发需求功能。当联调完成后，提MR合并到develop分支。以此类推，这里就不展开讲了。一般的项目往往只有一个环境，比如开发-测试-生产。但DB项目会存在各种各样
  • Nginx部署前端Vue项目的深度解析 egekm_sefg 前端vue.jsnginx
    目录一、准备工作1.1开发环境1.2服务器环境1.3Nginx安装二、构建Vue项目三、上传静态文件到服务器四、配置Nginx五、测试并重新加载Nginx六、访问Vue应用七、高级配置7.1启用HTTPS7.2启用Gzip压缩7.3缓存控制八、常见问题与解决方案8.1404错误8.2权限问题8.3跨域问题九、总结在现代Web开发中，Vue.js因其组件化、响应式数据绑定和易于上手的特点，成为了前端
  • 高清（200万像素）多灯红外防水枪型网络摄像机 DH-IPC-HFW5200-IRA weixin_30846599 php
    DH-IPC-HFW5200-IRA-0722Ahttp://download.dahuatech.com/instruction_download.php?classOne=3907&classTwo=3912&keyword=DH-IPC-HFW5200-IRA-0722Ahttp://www.dahuatech.com/product_detail-449.html转载于:https://w
  • 浏览器中实现3D全景浏览 snawy three.js全景图WebGL
    如果你用过网页版的百度地图，你大概3D全景图浏览是一种怎样的酷炫体验：在一个点可以360度环顾周围的建筑、景色，当然也可以四周移动，就像身临其境。科普全景图共分为三种：①球面全景图利用一张全景图围成一个球，自身位置位于球体内。由于图片是矩形，所以最上和最下的缝合处很明显就能够看得出来。球面全景图是最接近人眼的构建模式，若利用多个立面构建，拼接方法繁琐，性能消耗高。因此，本文介绍的是上述通过一张全景
  • Three.js学习笔记(一) hzxwonder three.jswebglthree.js
    Three.js学习笔记(一)1.四大组建1.场景任何要显示的东西，放在场景的任何位置一个页面可以有多个场景实现方式THREE.Scene=function()2.相机浏览器中所能看到的东西，就是由相机拍摄出来。即将相机能看到的内容显示在浏览器画面上分类1.透视相机近大远小+灭点2.正投影相机远处和近处一样大，也称正交相机参数THREE.PerspectiveCamera=function(fov
  • 70.在 Vue 3 中使用 OpenLayers 拖拽实现放大区域的效果（DragZoom） 吉檀迦俐 OpenLayersvue.js前端javascriptopenlayers
    引言在现代Web开发中，地图功能已经成为许多应用的重要组成部分。OpenLayers是一个功能强大的开源地图库，支持多种地图源和交互操作。Vue3是一个流行的前端框架，以其响应式数据和组件化开发著称。本文将介绍如何在Vue3中集成OpenLayers，并实现拖拽放大区域的效果（DragZoom）。实现效果按住Shift键，使用鼠标左键圈选区域，地图会自动放大到选中的区域。支持地图的拖拽、缩放等基本
  • 免费开源的后端API服务-supabase安装和使用-简直是前端学习者福音 前端三评 strapiAjax工具开源前端supabase
    文章目录它是什么安装和部署关于安装关于部署1、注册用户2、创建组织3、创建项目创建数据库表（填充内容）填充数据库表使用postman联调API它是什么一个开源免费的后端框架，firebase的替代品。可以简单理解类似于headlesscms，但是不仅仅只提供内容，它还集成了服务订阅、即时API，用户身份认证（包括第三方身份认证，比如使用github、Google等账号实现快速登录和注册）、边缘函数
  • xss靶场搭建 奶酪是小白 xss安全web安全
    1.xss靶场源码do0dl3/xss-labs:xss跨站漏洞平台2.将源码下载好后解压放入phpstudy的www下3.启动apache和mysql4.在浏览器中输入127.0.0.1/xss-labs-master进入xss-labs靶场注：xss-labs后续通关教程陆续更新
  • 2025年全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！ 白帽安全-黑客4148 网络安全web安全linux密码学CTFpythonddos
    基于入门网络安全/黑客打造的：黑客&网络安全入门&进阶学习资源包目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js（2-3天）2、apache+php（4-5天）3、mysql（2-3天）4、python(2-3天)5、burpsuite（1-2天）4.2、中期1、SQL注入（7-8天）2、文件上传（7-8天）3、其他漏洞（14-15
  • 前端新手如何用vite构建小程序中使用的模块（以AES加密模块crypto-js为例） warmbook 前端前端小程序javascript
    如果你只是想简单地把在vite项目中使用的模块引入到小程序中，不妨试试库模式。以crypto-js为例，你需要写两个JS文件：一个是构建脚本，类似于vite.config.js；//build.cjsconst{build}=require('vite'),path=require('path');build({publicDir:false,configFile:false,runtimeCom
  • 【原生JS】如何优雅地读、改location.search（queryString或GET参数） warmbook 前端javascript开发语言ecmascript
    应用场景location.search完全由JS脚本管理，并且需要不刷新页面地修改其内容。例如在Oauth2授权中，如果是前端取参提交给后端API向平台方请求accessToken，需要及时删除GET参数中的code，以防用户刷新浏览器导致用失效的code处理登录。实现思路将queryString转为对象并用ES6的Proxy代理，在set、delete钩子中调用history.replaceSt
  • 网页性能优化之懒加载与预加载：概念、原理、实现及对比 不在·· javascript前端
    1.什么是懒加载？懒加载也就是延迟加载。当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。2.为什么要使用懒加载？很多页面，内容很丰富，页面很长，图片较多。比如说各种商城页面。这些页面图片数量多，而且比较大，少说百来K，多
  • Axios 教程：Promise 基础的 HTTP 客户端 吉皎妃Frasier
    Axios教程：Promise基础的HTTP客户端axiosaxios/axios:Axios是一个基于Promise的HTTP客户端库，适用于浏览器和Node.js环境，用于在JavaScript应用中执行异步HTTP请求。相较于原生的XMLHttpRequest或FetchAPI，Axios提供了更简洁的API和更强大的功能。项目地址:https://gitcode.com/gh_mirror
  • 项目中 枚举与注解的结合使用 飞翔的马甲 javaenumannotation
    前言：版本兼容，一直是迭代开发头疼的事，最近新版本加上了支持新题型，如果新创建一份问卷包含了新题型，那旧版本客户端就不支持，如果新创建的问卷不包含新题型，那么新旧客户端都支持。这里面我们通过给问卷类型枚举增加自定义注解的方式完成。顺便巩固下枚举与注解。 一、枚举 1.在创建枚举类的时候，该类已继承java.lang.Enum类，所以自定义枚举类无法继承别的类，但可以实现接口。
  • 【Scala十七】Scala核心十一：下划线_的用法 bit1129 scala
    下划线_在Scala中广泛应用，_的基本含义是作为占位符使用。_在使用时是出问题非常多的地方，本文将不断完善_的使用场景以及所表达的含义   1. 在高阶函数中使用 scala> val list = List(-3,8,7,9) list: List[Int] = List(-3, 8, 7, 9) scala> list.filter(_ > 7) r
  • web缓存基础：术语、http报头和缓存策略 dalan_123 Web
    对于很多人来说，去访问某一个站点，若是该站点能够提供智能化的内容缓存来提高用户体验，那么最终该站点的访问者将络绎不绝。缓存或者对之前的请求临时存储，是http协议实现中最核心的内容分发策略之一。分发路径中的组件均可以缓存内容来加速后续的请求，这是受控于对该内容所声明的缓存策略。接下来将讨web内容缓存策略的基本概念，具体包括如如何选择缓存策略以保证互联网范围内的缓存能够正确处理的您的内容，并谈论下
  • crontab 问题 周凡杨 linuxcrontabunix
      一： 0481-079   Reached   a   symbol   that   is   not   expected.   背景： */5   *   *   *   *  /usr/IBMIHS/rsync.sh 
  • 让tomcat支持2级域名共享session g21121 session
    tomcat默认情况下是不支持2级域名共享session的，所有有些情况下登陆后从主域名跳转到子域名会发生链接session不相同的情况，但是只需修改几处配置就可以了。 打开tomcat下conf下context.xml文件 找到Context标签,修改为如下内容 如果你的域名是www.test.com <Context sessionCookiePath="/path&q
  • web报表工具FineReport常用函数的用法总结（数学和三角函数） 老A不折腾 Webfinereport总结
      ABS ABS(number):返回指定数字的绝对值。绝对值是指没有正负符号的数值。 Number:需要求出绝对值的任意实数。 示例: ABS(-1.5)等于1.5。 ABS(0)等于0。 ABS(2.5)等于2.5。   ACOS ACOS(number):返回指定数值的反余弦值。反余弦值为一个角度，返回角度以弧度形式表示。 Number:需要返回角
  • linux 启动java进程 sh文件 墙头上一根草 linuxshelljar
    #!/bin/bash #初始化服务器的进程PId变量 user_pid=0; robot_pid=0; loadlort_pid=0; gateway_pid=0; ######### #检查相关服务器是否启动成功 #说明： #使用JDK自带的JPS命令及grep命令组合，准确查找pid #jps 加 l 参数，表示显示java的完整包路径 #使用awk，分割出pid
  • 我的spring学习笔记5-如何使用ApplicationContext替换BeanFactory aijuans Spring 3 系列
    如何使用ApplicationContext替换BeanFactory？ package onlyfun.caterpillar.device; import org.springframework.beans.factory.BeanFactory; import org.springframework.beans.factory.xml.XmlBeanFactory; import
  • Linux 内存使用方法详细解析 annan211 linux内存Linux内存解析
    来源 http://blog.jobbole.com/45748/ 我是一名程序员，那么我在这里以一个程序员的角度来讲解Linux内存的使用。 一提到内存管理，我们头脑中闪出的两个概念，就是虚拟内存，与物理内存。这两个概念主要来自于linux内核的支持。 Linux在内存管理上份为两级，一级是线性区，类似于00c73000-00c88000，对应于虚拟内存，它实际上不占用
  • 数据库的单表查询常用命令及使用方法(-) 百合不是茶 oracle函数单表查询
        创建数据库;       --建表 create table bloguser(username varchar2(20),userage number(10),usersex char(2));       创建bloguser表,里面有三个字段     &nbs
  • 多线程基础知识 bijian1013 java多线程threadjava多线程
    一．进程和线程 进程就是一个在内存中独立运行的程序，有自己的地址空间。如正在运行的写字板程序就是一个进程。 “多任务”：指操作系统能同时运行多个进程（程序）。如WINDOWS系统可以同时运行写字板程序、画图程序、WORD、Eclipse等。 线程：是进程内部单一的一个顺序控制流。 线程和进程 a.       每个进程都有独立的
  • fastjson简单使用实例 bijian1013 fastjson
    一.简介         阿里巴巴fastjson是一个Java语言编写的高性能功能完善的JSON库。它采用一种“假定有序快速匹配”的算法，把JSON Parse的性能提升到极致，是目前Java语言中最快的JSON库；包括“序列化”和“反序列化”两部分，它具备如下特征：     
  • 【RPC框架Burlap】Spring集成Burlap bit1129 spring
    Burlap和Hessian同属于codehaus的RPC调用框架，但是Burlap已经几年不更新，所以Spring在4.0里已经将Burlap的支持置为Deprecated,所以在选择RPC框架时，不应该考虑Burlap了。 这篇文章还是记录下Burlap的用法吧，主要是复制粘贴了Hessian与Spring集成一文，【RPC框架Hessian四】Hessian与Spring集成  
  • 【Mahout一】基于Mahout 命令参数含义 bit1129 Mahout
    1. mahout seqdirectory   $ mahout seqdirectory --input (-i) input Path to job input directory(原始文本文件). --output (-o) output The directory pathna
  • linux使用flock文件锁解决脚本重复执行问题 ronin47 linux lock　重复执行
    linux的crontab命令，可以定时执行操作，最小周期是每分钟执行一次。关于crontab实现每秒执行可参考我之前的文章《linux crontab 实现每秒执行》现在有个问题，如果设定了任务每分钟执行一次，但有可能一分钟内任务并没有执行完成，这时系统会再执行任务。导致两个相同的任务在执行。 例如： <? //  test .php
  • java-74-数组中有一个数字出现的次数超过了数组长度的一半，找出这个数字 bylijinnan java
    public class OcuppyMoreThanHalf { /** * Q74 数组中有一个数字出现的次数超过了数组长度的一半，找出这个数字 * two solutions: * 1.O(n) * see <beauty of coding>--每次删除两个不同的数字，不改变数组的特性 * 2.O(nlogn) * 排序。中间
  • linux 系统相关命令 candiio linux
    系统参数 cat /proc/cpuinfo  cpu相关参数 cat /proc/meminfo 内存相关参数 cat /proc/loadavg 负载情况 性能参数 1）top M：按内存使用排序 P：按CPU占用排序 1：显示各CPU的使用情况 k：kill进程 o：更多排序规则 回车：刷新数据 2）ulimit ulimit -a：显示本用户的系统限制参
  • [经营与资产]保持独立性和稳定性对于软件开发的重要意义 comsci 软件开发
         一个软件的架构从诞生到成熟，中间要经过很多次的修正和改造       如果在这个过程中，外界的其它行业的资本不断的介入这种软件架构的升级过程中           那么软件开发者原有的设计思想和开发路线
  • 在CentOS5.5上编译OpenJDK6 Cwind linuxOpenJDK
    几番周折终于在自己的CentOS5.5上编译成功了OpenJDK6，将编译过程和遇到的问题作一简要记录，备查。 0. OpenJDK介绍 OpenJDK是Sun（现Oracle）公司发布的基于GPL许可的Java平台的实现。其优点： 1、它的核心代码与同时期Sun（-> Oracle）的产品版基本上是一样的，血统纯正，不用担心性能问题，也基本上没什么兼容性问题；（代码上最主要的差异是
  • java乱码问题 dashuaifu java乱码问题js中文乱码
    swfupload上传文件参数值为中文传递到后台接收中文乱码     在js中用setPostParams（{"tag" : encodeURI( document.getElementByIdx_x("filetag").value，"utf-8")}）; 然后在servlet中String t
  • cygwin很多命令显示command not found的解决办法 dcj3sjt126com cygwin
    cygwin很多命令显示command not found的解决办法   修改cygwin.BAT文件如下 @echo off D: set CYGWIN=tty notitle glob set PATH=%PATH%;d:\cygwin\bin;d:\cygwin\sbin;d:\cygwin\usr\bin;d:\cygwin\usr\sbin;d:\cygwin\us
  • [介绍]从 Yii 1.1 升级 dcj3sjt126com PHPyii2
    2.0 版框架是完全重写的，在 1.1 和 2.0 两个版本之间存在相当多差异。因此从 1.1 版升级并不像小版本间的跨越那么简单，通过本指南你将会了解两个版本间主要的不同之处。 如果你之前没有用过 Yii 1.1，可以跳过本章，直接从"入门篇"开始读起。 请注意，Yii 2.0 引入了很多本章并没有涉及到的新功能。强烈建议你通读整部权威指南来了解所有新特性。这样有可能会发
  • Linux SSH免登录配置总结 eksliang ssh-keygenLinux SSH免登录认证Linux SSH互信
    转载请出自出处：http://eksliang.iteye.com/blog/2187265 一、原理      我们使用ssh-keygen在ServerA上生成私钥跟公钥，将生成的公钥拷贝到远程机器ServerB上后,就可以使用ssh命令无需密码登录到另外一台机器ServerB上。      生成公钥与私钥有两种加密方式，第一种是
  • 手势滑动销毁Activity gundumw100 android
    老是效仿ios，做android的真悲催！ 有需求：需要手势滑动销毁一个Activity 怎么办尼？自己写？ 不用~，网上先问一下百度。 结果： http://blog.csdn.net/xiaanming/article/details/20934541 首先将你需要的Activity继承SwipeBackActivity，它会在你的布局根目录新增一层SwipeBackLay
  • JavaScript变换表格边框颜色 ini JavaScripthtmlWebhtml5css
    效果查看：http://hovertree.com/texiao/js/2.htm代码如下，保存到HTML文件也可以查看效果： <html> <head> <meta charset="utf-8"> <title>表格边框变换颜色代码-何问起</title> </head> <body&
  • Kafka Rest : Confluent kane_xie kafkaRESTconfluent
    最近拿到一个kafka rest的需求，但kafka暂时还没有提供rest api（应该是有在开发中，毕竟rest这么火），上网搜了一下，找到一个Confluent Platform，本文简单介绍一下安装。 这里插一句，给大家推荐一个九尾搜索，原名叫谷粉SOSO，不想fanqiang谷歌的可以用这个。以前在外企用谷歌用习惯了，出来之后用度娘搜技术问题，那匹配度简直感人。 环境声明：Ubu
  • Calender不是单例 men4661273 单例Calender
             在我们使用Calender的时候，使用过Calendar.getInstance()来获取一个日期类的对象，这种方式跟单例的获取方式一样，那么它到底是不是单例呢，如果是单例的话，一个对象修改内容之后，另外一个线程中的数据不久乱套了吗？从试验以及源码中可以得出，Calendar不是单例。 测试： Calendar c1 =
  • 线程内存和主内存之间联系 qifeifei java thread
    1， java多线程共享主内存中变量的时候，一共会经过几个阶段，    lock:将主内存中的变量锁定，为一个线程所独占。   unclock:将lock加的锁定解除，此时其它的线程可以有机会访问此变量。   read:将主内存中的变量值读到工作内存当中。   load:将read读取的值保存到工作内存中的变量副本中。  
  • schedule和scheduleAtFixedRate tangqi609567707 javatimerschedule
    原文地址：http://blog.csdn.net/weidan1121/article/details/527307 import java.util.Timer;import java.util.TimerTask;import java.util.Date; /** * @author vincent */public class TimerTest {  
  • erlang 部署 wudixiaotie erlang
    1.如果在启动节点的时候报这个错 ： {"init terminating in do_boot",{'cannot load',elf_format,get_files}} 则需要在reltool.config中加入 {app, hipe, [{incl_cond, exclude}]},     2.当generate时，遇到： ERROR
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他