w499198977
w499198977

前端学习(一) 浏览器渲染原理

前言

浏览器的内核是指支持浏览器运行的最核心的程序,分为两个部分,一是渲染引擎,另一个是JS引擎,渲染引擎在不同的浏览器中也不是都相同的.目前市面上常见的浏览器内核可以分为4种: Trident( IE ), Gecko( FireFox ), Blink( Chrome,Opera ), Webkit( Safari ),以 Webkit 为例,对现代浏览器的渲染过程进行一个深度的剖析

页面加载过程

简介要点如下:

  • 浏览器根据 DNS 服务器得到域名的 IP 地址
  • 向这个 IP 的机器发送 HTTP 请求
  • 服务器收到,处理并返回 HTTP 请求
  • 浏览器得到返回内容

浏览器渲染过程

大体上分为如下三部分

  1. 浏览器会解析三个东西:

    1.1 一是HTML/SVG/XHTML, HTML 字符串描述了一个页面的结构,浏览器会把 HTML 结构字符串解析转换 DOM 树形结构

    1.2 二是CSS,解析 CSS 会产生 CSS 规则树,它和 DOM 结构比较像

    1.3 三是 JavaScript 脚本,等到 JavaScript 脚本文件加载后, 通过 DOM API 和 CSSOM API 来操作 DOM Tree 和 CSS Rule Tree

  2. 解析完成后,浏览器引擎会通过 DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree

    2.1 Rendering Tree 渲染树并不等同于 DOM树,渲染树只会包括需要显示的节点和这些节点的样式信息

    2.2 CSS 的Rule Tree 主要是为了完成匹配并把 CSS Rule 附加上 Rrendering Tree 上的每个 Element(也就是每个 Frame)

    2.3 然后,计算每个 Frame 的位置,又叫做 layout 和 reflow 过程

  3. 最后通过调用操作系统 Native GUI 的 API 绘制

构建DOM

浏览器会遵循一套步骤将文件转换为 DOM 树:
前端学习(一) 浏览器渲染原理_第1张图片

  • 浏览器从磁盘或网络读取 HTML 的原始字节,并根据文件的指定编码将它们转换成字符串
  • 将字符串转换为Token,例如 等. Token 中会标志出当前 Token 是"开始标签"或是"结束标签"或"文本"等信息,以维护节点与节点间的关系
  • 生成节点对象并构建DOM.构建 DOM 的过程中,不是等所有 Token 都转换完成后再去生成节点对象,而是一边生成 Token 一边消耗 Token 来生成节点对象,即每个Token被生成后,会立刻消耗这个 Token 创建出节点对象.带有结束标签标志的 Token 不会创建节点对象

假设有段 HTML 文本:

<html>
<head>
    <title>Web page parsingtitle>
head>
<body>
    <div>
        <h1>Web page parsingh1>
        <p>This is an example Web page.p>
    div>
body>
html>

上面这段HTML会解析成这样:
前端学习(一) 浏览器渲染原理_第2张图片

构建CSSOM

DOM 会捕获页面的内容,但浏览器还需要知道页面如何展示, 所以需要构建CSSOM

构建CSSOM的过程和构建DOM的过程非常相似,当浏览器接收到一段CSS,浏览器首先要做的是识别出Token,然后构建节点并生成CSSOM
前端学习(一) 浏览器渲染原理_第3张图片
假设有这一段CSS:

body {font-size: 16px;}
p {color: red;}
p span {display:none;}
span {font-size: 14px;}
img {float: right;}

在经过一系列步骤后生成的CSSOM:
前端学习(一) 浏览器渲染原理_第4张图片
从图中还可以看出.body节点的子节点继承了 body 的样式规则(font-size: 16px).这就是层叠规则以及CSS为什么叫CSS(层叠样式表)

注意:CSS 匹配 HTML 元素是一个相当复杂和有性能问题的事情,所以,DOM树要小,CSS要尽量用id和class,不要过度层叠下去

构建渲染树

生成 DOM 树和 CSSOM 树之后,就要将这两棵树组合为渲染树.

渲染树只会包括需要显示的节点和这些节点的样式信息,如果某个节点是 display: none ,n那么就不会再渲染树中显示

渲染过程中,如果遇到

你可能感兴趣的:(vue.js,javascript,typescript)

  • element实现动态路由+面包屑 软件技术NINI vue案例vue.js前端
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
    在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
  • 博客网站制作教程 2401_85194651 javamaven
    首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
  • JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
    在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
  • 切换淘宝最新npm镜像源是 hai40587 npm前端node.js
    切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
  • 详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因 hw_happy 开发语言前端vue.jsjavascript
    前情提要在一个vue文件中需要引入定义的b.vue文件，但是提示b文件没有默认导出，对于vue2文件来说有exportdefault，在中，所有定义的变量、函数和组件都会自动被视为默认导出的组件内容。因此，不需要显式地使用exportdefault来导出组件。但是在我引用这个文件的时候还是提示了这个错误，原来是我的项目使用了ts和vite\webpack，因为TypeScript和Vue的默认导出
  • 高性能javascript--算法和流程控制 海淀萌狗
    -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • vant-element-ts一起使用存在的问题 flynn_ 问题总结vue
    由于vant-ui与element-ui部分组件存在冲突，导致在vue-typescript中出现错误:Subsequentpropertydeclarationsmusthavethesametype.Property'$notify'mustbeoftype'ElNotification',butherehastype'Notify'.方案：一个全局导入，一个按需导入,避免冲突的组件同时使用，
  • JavaScript中秋快乐！ Q_w7742 javascript开发语言ecmascript
    我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
  • Nginx从入门到实践(三) 听你讲故事啊
    动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
  • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
    Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
  • 前端知识点 ZhangTao_zata 前端javascriptcss
    下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
  • 【JS】前端文件读取FileReader操作总结 程序员-张师傅 前端前端javascript开发语言
    前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi
  • 【前端】vue 报错:The template root requires exactly one element 程序员-张师傅 前端前端vue.jsjavascript
    【前端】vue报错:Thetemplaterootrequiresexactlyoneelement在Vue.js中，当你遇到错误“Thetemplaterootrequiresexactlyoneelement”时，这通常意味着你的Vue组件的模板（template）根节点不是单一的元素。Vue要求每个组件的模板必须有一个根元素来包裹所有的子元素。这个错误通常出现在以下几种情况：模板中有多个并行
  • webstorm报错TypeError: this.cliEngine is not a constructor Blue_Color
    点击Details在控制台会显示报错的位置TypeError:this.cliEngineisnotaconstructoratESLintPlugin.invokeESLint(/Applications/RubyMine.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint-plugin.js:97:
  • 创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端ui服务器
    前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
  • 了解 UNPKG：前端开发者的包管理利器 小于负无穷 前端javascripttypescriptcsshtml5node.js
    在现代前端开发中，JavaScript包管理和模块化是至关重要的，而npm则是最流行的JavaScript包管理器之一。不过，随着前端项目复杂性的增加，有时候我们希望快速引入外部依赖，而无需本地安装和构建。此时，CDN（内容分发网络）成为了一种方便快捷的解决方案，而UNPKG就是这种方式中的佼佼者。什么是UNPKG？UNPKG是一个基于npm的内容分发网络（CDN），它允许开发者直接通过URL从n
  • 说说在 Vue.js 中如何实现组件间通信 deniro
    1用法假设父组件的模板包含子组件，我们可以通过props来正向地把数据从父组件传递给子组件。props可以是字符串数组，也可以是对象。html：js：Vue.component('deniro-component',{props:['message'],template:'{{message}}'});varapp=newVue({el:'#app',data:{}});渲染结果：＂嫦娥四号＂成功
  • 2019-05-29 vue-router的两种模式的区别 Kason晨
    1、大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容优点:良好的交互体验,用户不需要刷新页面,页面显示流畅,良好的前后端工作分离模式,减轻服务器压力,缺点:不利于SEO,初次加载耗时比较多2、hash模式vue-router默认的是hash
  • electron多标签页模式更像客户端 diygwcom electronjavascript前端
    Electron多标签页模式是指在Electron框架中实现的类似Web浏览器的多标签页功能。Electron是一个使用Web技术（HTML、CSS和JavaScript）来创建跨平台桌面应用程序的框架。在Electron中实现多标签页模式，通常需要借助一些特定的库或组件，如BrowserView或electron-tabs，或者通过自定义实现。实现方式1.使用BrowserViewBrowser
  • 外卖霸王餐返利外卖会员卡小程序开发 闹小艾 good506070微信小程序小程序
    外卖霸王餐返利外卖会员卡小程序开发"社交电商赋能下的外卖返利小程序"是专为商家与用户双赢而设计的创新平台。以下是其开发方案的详细步骤：一、需求梳理：首先，我们需要明确小程序的核心功能和特色。包括设定活动类型、返利策略，以及用户体验友好的界面设计。二、技术决策：技术选型是关键。我们采用小程序的开发框架，利用JavaScript作为前端开发语言，并结合微信提供的API进行后端接口调用与数据处理。三、账
  • Axure设计之全屏与退出全屏交互实现 招风的黑耳 Axureaxure交互
    在AxureRP中，设计全屏与退出全屏的交互功能可以极大地提升用户体验，尤其是在展示产品原型或进行演示时。本文将详细介绍如何在AxureRP中通过结合JavaScript代码实现全屏与退出全屏的交互效果。Axure原型设计web端交互元件库：https://1zvcwx.axshare.com一、设计思路全屏与退出全屏的交互设计主要依赖于JavaScript代码来控制浏览器的全屏模式。在Axure
  • 终于搞懂TS中的泛型啦! | typescript 入门指南 04 程序员王天 TypeScript实践指南前端javascripttypescript
    大家好，我是王天~今天分享的是《ts入门指南》系列中第四篇，主要讲解ts中的泛型应用泛型在ts中是比较重要的概念，我花挺长时间才搞明白，整理输出这篇文章，希望能帮助到大家~《ts入门指南》系列，点击下方蓝色字体即可访问TsvsJs谁适合前端开发？|TypeScript入门指南01详解tsconfig.json配置文件|TypeScript入门指南02必学！TypeScript语法类型基础|Type
  • 全面指南：用户行为从前端数据采集到实时处理的最佳实践 数字沉思 营销流量运营系统架构前端内容运营大数据
    引言在当今的数据驱动世界，实时数据采集和处理已经成为企业做出及时决策的重要手段。本文将详细介绍如何通过前端JavaScript代码采集用户行为数据、利用API和Kafka进行数据传输、通过Flink实时处理数据的完整流程。无论你是想提升产品体验还是做用户行为分析，这篇文章都将为你提供全面的解决方案。设计一个通用的ClickHouse表来存储用户事件时，需要考虑多种因素，包括事件类型、时间戳、用户信
  • sql统计相同项个数并按名次显示 朱辉辉33 javaoracle
    现在有如下这样一个表： A表 ID Name time ------------------------------ 0001 aaa 2006-11-18 0002 ccc 2006-11-18 0003 eee 2006-11-18 0004 aaa 2006-11-18 0005 eee 2006-11-18 0004 aaa 2006-11-18 0002 ccc 20
  • Android+Jquery Mobile学习系列-目录 白糖_ JQuery Mobile
    最近在研究学习基于Android的移动应用开发，准备给家里人做一个应用程序用用。向公司手机移动团队咨询了下，觉得使用Android的WebView上手最快，因为WebView等于是一个内置浏览器，可以基于html页面开发，不用去学习Android自带的七七八八的控件。然后加上Jquery mobile的样式渲染和事件等，就能非常方便的做动态应用了。   从现在起，往后一段时间，我打算
  • 如何给线程池命名 daysinsun 线程池
            在系统运行后，在线程快照里总是看到线程池的名字为pool-xx，这样导致很不好定位，怎么给线程池一个有意义的名字呢。参照ThreadPoolExecutor类的ThreadFactory，自己实现ThreadFactory接口，重写newThread方法即可。参考代码如下：     public class Named
  • IE 中"HTML Parsing Error:Unable to modify the parent container element before the 周凡杨 html解析errorreadyState
      错误： IE 中"HTML Parsing Error:Unable to modify the parent container element before the child element is closed"     现象： 同事之间几个IE 测试情况下，有的报这个错，有的不报。经查询资料后，可归纳以下原因。
  • java上传 g21121 java
    我们在做web项目中通常会遇到上传文件的情况，用struts等框架的会直接用的自带的标签和组件，今天说的是利用servlet来完成上传。 我们这里利用到commons-fileupload组件，相关jar包可以取apache官网下载：http://commons.apache.org/ 下面是servlet的代码： //定义一个磁盘文件工厂 DiskFileItemFactory fact
  • SpringMVC配置学习 510888780 springmvc
    spring MVC配置详解 现在主流的Web MVC框架除了Struts这个主力 外，其次就是Spring MVC了，因此这也是作为一名程序员需要掌握的主流框架，框架选择多了，应对多变的需求和业务时，可实行的方案自然就多了。不过要想灵活运用Spring MVC来应对大多数的Web开发，就必须要掌握它的配置及原理。 　　一、Spring MVC环境搭建：（Spring 2.5.6 + Hi
  • spring mvc-jfreeChart 柱图(1) 布衣凌宇 jfreechart
    第一步：下载jfreeChart包，注意是jfreeChart文件lib目录下的，jcommon-1.0.23.jar和jfreechart-1.0.19.jar两个包即可； 第二步：配置web.xml; web.xml代码如下 <servlet>     <servlet-name>jfreechart</servlet-nam
  • 我的spring学习笔记13-容器扩展点之PropertyPlaceholderConfigurer aijuans Spring3
    PropertyPlaceholderConfigurer是个bean工厂后置处理器的实现，也就是BeanFactoryPostProcessor接口的一个实现。关于BeanFactoryPostProcessor和BeanPostProcessor类似。我会在其他地方介绍。PropertyPlaceholderConfigurer可以将上下文（配置文件）中的属性值放在另一个单独的标准java P
  • java 线程池使用 Runnable&Callable&Future antlove javathreadRunnablecallablefuture
    1. 创建线程池 ExecutorService executorService = Executors.newCachedThreadPool();   2. 执行一次线程，调用Runnable接口实现 Future<?> future = executorService.submit(new DefaultRunnable()); System.out.prin
  • XML语法元素结构的总结 百合不是茶 xml树结构
    1.XML介绍1969年   gml (主要目的是要在不同的机器进行通信的数据规范)1985年   sgml  standard generralized markup language1993年   html(www网)1998年  xml   extensible markup language
  • 改变eclipse编码格式 bijian1013 eclipse编码格式
    1.改变整个工作空间的编码格式         改变整个工作空间的编码格式，这样以后新建的文件也是新设置的编码格式。         Eclipse->window->preferences->General->workspace-
  • javascript中return的设计缺陷 bijian1013 JavaScriptAngularJS
    代码1： <script> var gisService = (function(window) { return { name:function () { alert(1); } }; })(this); gisService.name(); &l
  • 【持久化框架MyBatis3八】Spring集成MyBatis3 bit1129 Mybatis3
    pom.xml配置 Maven的pom中主要包括： MyBatis MyBatis-Spring Spring MySQL-Connector-Java Druid applicationContext.xml配置   <?xml version="1.0" encoding="UTF-8"?> &
  • java web项目启动时自动加载自定义properties文件 bitray javaWeb监听器相对路径
    创建一个类 public class ContextInitListener implements ServletContextListener 使得该类成为一个监听器。用于监听整个容器生命周期的，主要是初始化和销毁的。 类创建后要在web.xml配置文件中增加一个简单的监听器配置，即刚才我们定义的类。 <listener> <des
  • 用nginx区分文件大小做出不同响应 ronin47
    昨晚和前21v的同事聊天，说到我离职后一些技术上的更新。其中有个给某大客户(游戏下载类)的特殊需求设计，因为文件大小差距很大——估计是大版本和补丁的区别——又走的是同一个域名，而squid在响应比较大的文件时，尤其是初次下载的时候，性能比较差，所以拆成两组服务器，squid服务于较小的文件，通过pull方式从peer层获取，nginx服务于较大的文件，通过push方式由peer层分发同步。外部发布
  • java-67-扑克牌的顺子.从扑克牌中随机抽5张牌，判断是不是一个顺子，即这5张牌是不是连续的.2-10为数字本身，A为1，J为11，Q为12，K为13，而大 bylijinnan java
    package com.ljn.base; import java.util.Arrays; import java.util.Random; public class ContinuousPoker { /** * Q67 扑克牌的顺子 从扑克牌中随机抽5张牌，判断是不是一个顺子，即这5张牌是不是连续的。 * 2-10为数字本身，A为1，J为1
  • 翟鸿燊老师语录 ccii 翟鸿燊
    一、国学应用智慧TAT之亮剑精神A 1. 角色就是人格     就像你一回家的时候，你一进屋里面，你已经是儿子，是姑娘啦，给老爸老妈倒怀水吧，你还觉得你是老总呢？还拿派呢？就像今天一样，你们往这儿一坐，你们之间是什么，同学，是朋友。     还有下属最忌讳的就是领导向他询问情况的时候，什么我不知道，我不清楚，该你知道的你凭什么不知道
  • [光速与宇宙]进行光速飞行的一些问题 comsci 问题
         在人类整体进入宇宙时代，即将开展深空宇宙探索之前，我有几个猜想想告诉大家     仅仅是猜想。。。未经官方证实      1：要在宇宙中进行光速飞行，必须首先获得宇宙中的航行通行证，而这个航行通行证并不是我们平常认为的那种带钢印的证书，是什么呢？ 下面我来告诉
  • oracle undo解析 cwqcwqmax9 oracle
    oracle undo解析2012-09-24 09:02:01     我来说两句       作者：虫师收藏    我要投稿 Undo是干嘛用的？         &nb
  • java中各种集合的详细介绍 dashuaifu java集合
    一，java中各种集合的关系图 Collection       接口的接口     对象的集合  ├ List           子接口   &n
  • 卸载windows服务的方法 dcj3sjt126com windowsservice
    卸载Windows服务的方法 在Windows中，有一类程序称为服务，在操作系统内核加载完成后就开始加载。这里程序往往运行在操作系统的底层，因此资源占用比较大、执行效率比较高，比较有代表性的就是杀毒软件。但是一旦因为特殊原因不能正确卸载这些程序了，其加载在Windows内的服务就不容易删除了。即便是删除注册表中的相 应项目，虽然不启动了，但是系统中仍然存在此项服务，只是没有加载而已。如果安装其他
  • Warning: The Copy Bundle Resources build phase contains this target's Info.plist dcj3sjt126com iosxcode
        http://developer.apple.com/iphone/library/qa/qa2009/qa1649.html Excerpt: You are getting this warning because you probably added your Info.plist file to your Copy Bundle
  • 2014之C++学习笔记（一） Etwo C++EtwoEtwoiterator迭代器
            已经有很长一段时间没有写博客了，可能大家已经淡忘了Etwo这个人的存在，这一年多以来，本人从事了AS的相关开发工作，但最近一段时间，AS在天朝的没落，相信有很多码农也都清楚，现在的页游基本上达到饱和，手机上的游戏基本被unity3D与cocos占据，AS基本没有容身之处。so。。。最近我并不打算直接转型
  • js跨越获取数据问题记录 haifengwuch jsonpjsonAjax
    js的跨越问题，普通的ajax无法获取服务器返回的值。   第一种解决方案，通过getson，后台配合方式，实现。 Java后台代码： protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String ca
  • 蓝色jQuery导航条 ini JavaScripthtmljqueryWebhtml5
    效果体验：http://keleyi.com/keleyi/phtml/jqtexiao/39.htmHTML文件代码： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery鼠标悬停上下滑动导航条 - 柯乐义<
  • linux部署jdk,tomcat,mysql kerryg jdktomcatlinuxmysql
    1、安装java环境jdk:     一般系统都会默认自带的JDK,但是不太好用，都会卸载了，然后重新安装。    1.1）、卸载：      （rpm -qa :查询已经安装哪些软件包；        rmp -q 软件包：查询指定包是否已
  • DOMContentLoaded VS onload VS onreadystatechange mutongwu jqueryjs
    1. DOMContentLoaded 在页面html、script、style加载完毕即可触发，无需等待所有资源（image/iframe）加载完毕。（IE9+） 2. onload是最早支持的事件，要求所有资源加载完毕触发。 3. onreadystatechange 开始在IE引入，后来其它浏览器也有一定的实现。涉及以下 document , applet, embed, fra
  • sql批量插入数据 qifeifei 批量插入
    hi，   自己在做工程的时候，遇到批量插入数据的数据修复场景。我的思路是在插入前准备一个临时表，临时表的整理就看当时的选择条件了，临时表就是要插入的数据集，最后再批量插入到数据库中。    WITH tempT AS ( SELECT item_id AS combo_id, item_id, now() AS create_date FROM a
  • log4j打印日志文件 如何实现相对路径到 项目工程下 thinkfreer Weblog4j应用服务器日志
    最近为了实现统计一个网站的访问量，记录用户的登录信息，以方便站长实时了解自己网站的访问情况，选择了Apache 的log4j,但是在选择相对路径那块 卡主了，X度了好多方法(其实大多都是一样的内用，还一个字都不差的)，都没有能解决问题，无奈搞了2天终于解决了，与大家分享一下 需求： 用户登录该网站时，把用户的登录名,ip,时间。统计到一个txt文档里，以方便其他系统调用此txt。项目名
  • linux下mysql-5.6.23.tar.gz安装与配置 笑我痴狂 mysqllinuxunix
    1.卸载系统默认的mysql [root@localhost ~]# rpm -qa | grep mysql mysql-libs-5.1.66-2.el6_3.x86_64 mysql-devel-5.1.66-2.el6_3.x86_64 mysql-5.1.66-2.el6_3.x86_64 [root@localhost ~]# rpm -e mysql-libs-5.1