性能优化

本文主要是在我读《高性能Javascript》之后，想要记录下一些有用的优化方案，并且就我本身的一些经验，来大家一起分享下 ， Javascript的加载与执行 大家都知道，浏览器在解析DOM树的时候，当解析到script标签的时候，会阻塞其他的所有任务，直到该js文件下载、解析执行完成后，才会继续往下执行。因此，这个时候浏览器就会被阻塞在这里，如果将script标签放在head里的话，那么在该js文件加载执行前，用户只能看到空白的页面，这样的用户体验肯定是特别烂。对此，常用的方法有以下： 将所有的script标签都放到body最底部，这样可以保证js文件是最后加载并执行的，可以先将页面展现给用户。但是，你首先得清楚，页面的首屏渲染是否依赖于你的部分js文件，如果是的话，则需要将这一部分js文件放到head上。 使用defer,比如下面这种写法。使用defer这种写法时，虽然浏览器解析到该标签的时候，也会下载对应的js文件，不过它并不会马上执行，而是会等到DOM解析完后（DomContentLoader之前)才会执行这些js文件。因此，就不会阻塞到浏览器。 <script src="test.js" type="text/javascript" defer></script> 动态加载js文件,通过这种方式，可以在页面加载完成后，再去加载所需要的代码

为什么要优化? 系统的吞吐量瓶颈往往出现在数据库的访问速度上 随着应用程序的运行，数据库的中的数据会越来越多，处理时间会相应变慢 数据是存放在磁盘上的，读写速度无法和内存相比 Memcached/Redis（缓存）+Mysql+垂直拆分 这种做法可以将你的数据库的数据从开始的一个数据库分成了3个，比如第一个数据库复制保存用户信息，第二个保存商品信息，第三个保存 缺点： 当你的 数据库1 炸了，整合项目就运行不起来了（不安全） Mysql主从复制+读写分离 1、什么是主从复制 多搞几个数据库来存储数据，假设有三台服务器，一主二仆，即以太主服务器，二台从服务器 把你的主服务器的数据复制在你的二个从服务器里，复制是为了容错备份，缓存备份，保证数据的完整性，也为读写分离创建条件 2、什么是读写分离 增删改是写，查是读 写去主服务器去写 读取二个从服务器通过负载均衡去读 分工明确，结合缓存实现性能的一大提升 分库分表＋＋Mysql集群 承接主从复制，读写分离，以及Memcached的使用，这时MySQL主库的写压力开始出现瓶颈 而数据量的持续猛增，由于数据量的指数级增长，单单表表上上的的记记录录条条数数增增长长到到千千万万 级，只能继续对架构进行演变。 这个演变，就是使用分库分表来缓解写压力和数据记录条数增长的问题。 3、什么是分库分表 从字面上简单理解

1.选用适合的ORACLE优化器 　ORACLE的优化器共有3种 A、RULE (基于规则) b、COST (基于成本) c、CHOOSE (选择性) 设置缺省的优化器，可以通过对init.ora文件中OPTIMIZER_MODE参数的各种声明，如RULE，COST，CHOOSE，ALL_ROWS，FIRST_ROWS 。 你当然也在SQL句级或是会话(session)级对其进行覆盖。 为了使用基于成本的优化器(CBO， Cost-Based Optimizer) ， 你必须经常运行analyze 命令，以增加数据库中的对象统计信息(object statistics)的准确性。 如果数据库的优化器模式设置为选择性(CHOOSE)，那么实际的优化器模式将和是否运行过analyze命令有关。 如果table已经被analyze过， 优化器模式将自动成为CBO ， 反之，数据库将采用RULE形式的优化器。 在缺省情况下，ORACLE采用CHOOSE优化器， 为了避免那些不必要的全表扫描(full table scan) ， 你必须尽量避免使用CHOOSE优化器，而直接采用基于规则或者基于成本的优化器。 2.访问Table的方式 　ORACLE 采用两种访问表中记录的方式： A、 全表扫描 全表扫描就是顺序地访问表中每条记录。ORACLE采用一次读入多个数据块(database

1.尽量使用缩写 使用缩写语句，如下面所示的 margin 声明，可以从根本上减小 CSS 文件的大小。在 google 上搜索 CSS Shorthand 可以找到许多其他的速记形式。 p { margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 4px; } p { margin: 1px 2px 3px 4px; } 2.查找并删除未使用的 CSS 删除不必要的部分 CSS，j显然会加快网页的加载速度。谷歌的Chrome浏览器有这种开箱即用的功能。只需F12然后打开Sources选项卡，然后打开命令菜单（Ctrl+shift+P）。然后，选择Show Coverage，在Coverage analysis窗口中高亮显示当前页面上未使用的代码。 打开谷歌浏览器开发都工具，在 Conlse 旁边更多选择 Coverage，就可以看到未使用的 CSS, 点击对应的项，高亮显示当前页面上未使用的代码。 3.分析工具 谷歌浏览器的 Audits 就可以快速帮我们分析，使用方式，打开开发者工具，点击 Audits 栏位，点击 Run audits 后就开始分析结果。 http://yui.github.io/yuicompressor 对 CSS 的自动分析总是会导致错误。用压缩后的 CSS 文件替换

JSX的背后 这个过程一般在前端会称为“转译”，但其实“汇编”将是一个更精确的术语。 React开发人员敦促你在编写组件时使用一种称为JSX的语法，混合了HTML和JavaScript。但浏览器对JSX及其语法毫无头绪，浏览器只能理解纯碎的JavaScript，所以JSX必须转换成JavaScript。这里是一个div的JSX代码，它有一个class name和一些内容： <div className='cn'> Content!</div> 以上的代码，被转换成“正经”的JavaScript代码，其实是一个带有一些参数的函数调用： React.createElement('div',{className:'cn'},'Content!'); 让我们仔细看看这些参数。 第一个是元素的 type 。对于HTML标签，它将是一个带有 标签名称 的字符串。 第二个参数是一个包含所有元素属性（ attributes ）的对象。如果没有，它也可以是空的对象。 剩下的参数都可以认为是元素的子元素（ children ）。元素中的文本也算作一个child，是个字符串’Content！’ 作为函数调用的第三个参数放置。 你应该可以想象，当我们有更多的children时会发生什么： <div className='cn'> Content 1! <br /> Content 2!</div

module:{ rules:[ //规则 { //.js文件或者.jsx文件处理 test:/\.(js|jsx)/, loader:"babel-loader", exclude:path.join(__dirname,"../node_modules") //排除 node_modules中的内容 }, { //图片处理 test:/\.(jpg|gif|png|svg)$/, //正则， exclude:path.join(__dirname,"../node_modules"), //排除 node_modules中的内容 use:{ loader:"url-loader", options:{ limit:2048, name:"img/[name].[hash:8].[ext]" } } }, { // test:/\.(eot|svg|ttf|woff|woff2)$/, exclude:path.join(__dirname,"../node_modules"), //排除 node_modules中的内容 use:{ loader:"url-loader", options:{ name:"iconfont/[name]:[hash:8].[ext]" } } } ] } 　　 来源： https://www.cnblogs.com/yuanjili666/p

最近在学习性能优化，学习了 雅虎军规 ，可是觉着有点云里雾里的，因为里面有些东西虽然自己也一直在使用，但是感觉不太明白所以然，比如减少DNS查询，css和js文件的顺序。所以就花了时间去了解浏览器的工作，有一篇经典的文章 《how browsers work》 ，讲的很详细，也有 中文译本 。不过就是文章有点太长，也讲了一堆东西，还是自己总结一下。 为什么要了解浏览器加载、解析、渲染这个过程？ 好，我们先说一下，为什么要了解这些呢？如果想写出一个最佳实践的页面，就要好好了解。 了解浏览器如何进行加载，可以在引用外部样式文件，外部js时，将他们放到合适的位置，使浏览器以最快的速度将文件加载完毕。 了解浏览器如何进行解析，可以在构建DOM结构，组织css选择器时，选择最优的写法，提高浏览器的解析速率。 了解浏览器如何进行渲染，明白渲染的过程，在设置元素属性，编写js文件时，可以减少”reflow“”repaint“的消耗。 正文开始 一、浏览器的主要功能 　　 浏览器的主要功能 是将用户选择的web资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是HTML，也包括PDF、image及其他格式。用户用URI（Uniform Resource Identifier统一资源标识符）来指定所请求资源的位置，通过DNS查询，将网址转换为IP地址。整个浏览器工作的流程

本文转载于: 猿2048 网站➣ https://www.mk2048.com/blog/blog.php?id=icbihjk0bb 前端性能优化是一个很宽泛的概念，有很多教程都有前端性能优化的方法，这也是我们一直在关注的一件重要事情。配合各种方式、手段、辅助系统，前端优化的最终目的都是提升用户体验，改善页面性能，我们常常竭尽全力进行前端页面优化，但却忽略了这样做的效果和意义。先不急于探究前端优化具体可以怎样去做，先看看什么是前端性能，应该怎样去了解和评价前端页面的性能。 通常前端性能可以认为是用户获取所需要页面数据或执行某个页面动作的一个实时性指标，一般以用户希望获取数据的操作到用户实际获得数据的时间间隔来衡量。例如用户希望获取数据的操作是打开某个页面，那么这个操作的前端性能就可以用该用户操作开始到屏幕展示页面内容给用户的这段时间间隔来评判。用户的等待延时可以分成两部分： 可控 等待延时和 不可控 等待延时。 可控 等待延时可以理解为能通过技术手段和优化来改进缩短时间的部分，例如减小图片大小让请求加载更快、减少 HTTP 请求数等。 不可控 等待延时则是不能或很难通过前后端技术手段来改进优化的，例如鼠标点击延时、 CPU 计算时间延时、 ISP(Internet Service Provider，互联网服务提供商) 网络传输延时等。所以要知道的是，前端中的所有优化都是针对

前端代码优化 前端标准html、js，查这里mozilla标准（w3c给的是纸面标准，这里是业界实际使用的标准） developer.mozilla.org/zh-CN/ 》作用域链越长，执行性能越差 当函数执行时，会形成自己的执行环境，执行环境会与函数的作用域链进行链接，并创建与之关联的活动对象（activation object）。执行环境中定义的所有变量和函数都保存在这个对象中。当函数执行完成后，这个对象会被系统销毁。 》避免函数内部多次逐级向上查找变量，使用局部变量存储一下 例如在函数开头var doc=document 》避免使用with with关键字指定其内部未指明作用域的变量都使用它声明的作用域 with(document){ var bd=body; // 相当于使用document.body } 带来的性能问题是，with会使作用域链变长，降低内部本地变量的查找（会先从with指定的作用域查找，然后再查找本地作用域），建议不要使用。 》减少DOM操作 浏览器执行分两个引擎：ECMAScript引擎和DOM引擎，前者执行js代码，非常快，后者操作UI，无论是读还是写代价都很高。例如Chrome使用V8引擎来驱动ECMAScript，使用Webkit中的WebCore来驱动DOM。 显著提高性能的策略就是增加JS操作，减少DOM操作。 》DOM操作优化

Java 代码性能优化总结 1 . 尽量减少对变量的重复计算 明确一个概念，对方法的调用，即使方法中只有一句语句，也是有消耗的，包括创建栈帧、调用方法时保护现场、调用方法完毕时恢复现场等。所以例如下面的操作： for (int i = 0; i < list.size(); i++) {...} 建议替换为： for (int i = 0, int length = list.size(); i < length; i++) {...} 这样，在list.size()很大的时候，就减少了很多的消耗 2 . 尽量采用懒加载的策略，即在需要的时候才创建 例如： String str = "aaa";if (i == 1) { list.add(str); } 建议替换为： if (i == 1) { String str = "aaa"; list.add(str); } 3 . 不要在循环中使用try…catch…，应该把其放在最外层 除非不得已。如果毫无理由地这么写了，只要你的领导资深一点、有强迫症一点，八成就要骂你为什么写出这种垃圾代码来了 4 . 循环内不要不断创建对象引用 例如： for (int i = 1; i <= count; i++) { Object obj = new Object(); } 这种做法会导致内存中有count份Object对象引用存在