jad_design
jad_design

前端性能优化那些事

本文原创：gaoruixia

一. 开篇

提起前端性能优化，大家会想到哪些内容呢？

相信不同的人给出的答案不同，关于性能优化没有标准答案，它更像是一个摸索的过程，本篇文章给出从页面加载的各个过程分析可优化的点

二. 常用性能优化指标

下面这张图是一个页面从打开到加载完成经历的各个阶段

webLoadTiming.png

  • 浏览器获得各个阶段的时间耗时的API

    - Timing标准：window.performance.timing
- Timing2标准: window.performance.getEntriesByType('navigation')[0]。

    Timing目前浏览器已不再提供维护支持，Timing2获取的精度更加准确（比飞秒还精确，为10的-17次方秒)，但兼容性尚且没有那么好（主要是iOS11才开始支持，其他浏览器都基本没问题了，IE9我们就让它见鬼去吧）。在京麦插件性能统计中，我们优先判断是否支持后者，除非后者不支持才使用前者。

  • 白屏时间

    从navigatorStart到responseEnd这段时间算作服务器时间
    从浏览器开始加载页面到首次出现内容之前的这段时间（从页面发送一个页面URL请求出去，到服务器返回这个HTML的文本内容）

    计算方式
- Timing: performance.timing.responseEnd - performance.timing.navigationStart
- Timing2: performance.getEntriesByType('navigation')[0].responseStart

  • 浏览器渲染时间

    从responseEnd到loadEventEnd这段时间，包括CSS、JavaScript、Image等资源的加载耗时

    计算方式
- Timing: performance.timing.loadEventEnd - performance.timing.responseEnd
- Timing2: performance.getEntriesByType('navigation')[0].loadEventEnd - performance.getEntriesByType('navigation')[0].responseStart

  • 整页时间

    从浏览器开始加载页面到整个页面加载完毕（最明显的标识就是移动端浏览器进度条读完了，pc端浏览器就是当前页签前面的loading消失了）

    计算方式
 - Timing: performance.timing.loadEventEnd - performance.timing.navigationStart
 - Timing2: performance.getEntriesByType('navigation')[0].loadEventEnd

使用Chrome调试工具performance查看浏览器请求一个页面到渲染完成的过程

可以打开浏览器控制台，切换到Performance，点击刷新按钮，等页面加载完成

webLoad03.jpg

三. 影响整页时间的因素

先了解下得到html文本内容后页面的加载渲染流程（以webkit主流程为例）

webLoad01.jpg

  • 渲染流程有四个主要步骤

    1. 解析HTML生成DOM树 - 渲染引擎首先解析HTML文档，生成DOM树
    2. 构建Render树 - 接下来不管是内联式，外联式还是嵌入式引入的CSS样式会被解析生成CSSOM树，根据DOM树与CSSOM树生成另外一棵用于渲染的树-渲染树(Render tree)，
    3. 布局Render树 - 然后对渲染树的每个节点进行布局处理，确定其在屏幕上的显示位置
    4. 绘制Render树 - 最后遍历渲染树并用UI后端层将每一个节点绘制出来

    以上步骤是一个渐进的过程，为了提高用户体验，渲染引擎试图尽可能快的把结果显示给最终用户。它不会等到所有HTML都被解析完才创建并布局渲染树。它会在从网络层获取文档内容的同时把已经接收到的局部内容先展示出来。

  • 阻塞渲染的因素

    没有js的理想情况下，html与css会并行解析，分别生成DOM与CSSOM，然后合并成Render Tree，进入Rendering Pipeline；
    但如果有js，css加载会阻塞后面js语句的执行，而（同步）js脚本执行会阻塞其后的DOM解析（所以通常会把css放在头部，js放在body尾）

    • CSS的阻塞情况

      • css不会阻塞DOM树的解析
      • css会阻塞DOM树的渲染
      • css会阻塞后面js语句的执行

    • JS的阻塞情况

      • JS阻塞DOM解析，但浏览器会"偷看"DOM，预先下载相关资源
      • 浏览器遇到script且没有defer或async属性的标签时，会触发页面渲染，因而如果前面CSS资源尚未加载完毕时，浏览器会等待它加载完毕在执行脚本
webLoad02.jpg 
    蓝色线代表网络读取，红色线代表执行时间，这俩都是针对脚本的；绿色线代表HTML解析

  • 由上可以得出影响整页时间的因素

    1. CSS、JS、图片等资源加载
    2. CSS、JS文件放置位置，避免阻塞DOM解析和渲染
    3. ajax同步请求
    4. jsonp请求
    5. 页面加载过程中JS发送图片请求

四. 优化分析

使用Chrome调试工具performance

下图中，在NetWork资源加载瀑布图中我们可以查看是主要是哪些资源卡住了页面的整页时间，发送结束时间都可以观察到。之后再根据哪个请求是瓶颈，对那个请求进行分析

webLoad04.jpg

使用Chrome插件pagespeed和Lighthouse

  • 使用插件pagespeed

    首先去安装，安装完pagespeed之后，打开你要调试的网页，打开控制台的pagespeed，然后点击左上角的ANALYZE按钮，开始分析页面性能情况

pageSpeed.jpg

  • 插件Lighthouse类似，这里不详细介绍了

  • 对于整页时间较长的情况，需要分析具体是在哪个阶段导致整页时间比较长，可以从上面整页时间的说明里的各个阶段去分析

  • 整页时间主要在dom解析耗时上，这段时间是从HTML开始解析，到JS全部执行完毕，这之中包含了CSS、JS等资源的加载，需要去优化HTML解析这段时间。

五. 各阶段优化手段

从常用性能优化指标我们知道了页面加载总共分成下面这几个阶段：

重定向时间 -> DNS缓存查询时间 -> DNS查询时间 -> TCP连接时间 -> Request请求时间 -> Response请求响应时间 -> DOM解析时间 -> DOM渲染时间 -> Load事件执行时间

下面来看下各阶段的优化手段

1. 重定向时间

这个很简单，就是请求到正确的地址上即可。
经常会出现的情况是：

  • 将index.html的文件地址请求写成这样：https://xx.com/xx，这样会导致浏览器重定向到https://xx.com/xx/
  • 将http请求重定向到https上
    这种情况注意下即可

2. DNS缓存查询时间

这个是浏览器做的处理，如Chrome浏览器对DNS的缓存时间是1分钟。

这个阶段我们无法优化。

3. DNS查询时间

HTML的请求的DNS查询时间我们无法缩短，但对于里面的其他域名的请求，我们可以提前进行DNS查询，减少资源或者接口的请求时间。

在HTMl的头部head中加上DNS预查询即可

一般对CDN需要用到的域名做解析即可。以下是CDN的各个域名：

4. TCP连接时间

TCP连接时间主要在3次握手中，缩短这个时间就是拉近用户和服务器机房的距离，对于接口的请求这个很难做到，但对于静态资源的TCP连接时间，我们可以通过CDN全国节点缩短用户与服务器之间的距离。

另外，我们还可以用HTTP2的keep-alive来保持长连接，这个CDN服务器默认是开启的，对于接口服务器也可以进行开启，虽然异步Ajax请求并不影响整页时间，但能让用户早点看到内容，何乐而不为。

5. Request请求时间 和 Response请求响应时间

在Request请求中，请求返回的时间取决于服务器的处理时间。

对于前后端耦合的项目或者SSR的项目，因为需要处理逻辑，拿出数据再动态构建HTML文本，之后再将HTML文本返回给浏览器，那这段时间主要在于处理逻辑上。

对于前后端分离的项目，因为返回的是一个空的HTML文本，数据都是等JS调用Ajax获取的，所以HTML的Request请求时间很短。但这样我们得处理Ajax请求，它也有Request请求的时间，这个也得看怎么在服务端进行性能提升。

虽然Ajax请求不计算在整页时间中，但也别为了缩短整页时间而选择前后端分离，这个并不是它的优势所在。用户关心的是页面什么时候加载完，这其中包含数据什么时候展现，所以别为了整页时间的优化而优化，而应该关心用户体验，就算是Ajax接口也应该考虑怎么提升性能。

而且使用前后端分离其实会加长页面的白屏时间，这个也是一个衡量页面性能的一个重要指标，白屏时间可以通过添加骨架屏来优化。

对于静态资源的请求，一般资源越小，请求越快（也受服务器带宽的影响）。可以通过减小静态资源（JS、CSS、图片等）请求的大小从而来缩短请求响应时间。

6. DOM解析时间

这段时间从服务器响应返回HTML文本，浏览器开始按照从上到下的执行顺序解析HTML文本，到执行完HTML中的所有JS，这段时间我们将其称为DOM解析时间。所以优化这段时间在于缩短HTML中的CSS文件和JS文件的请求时间和执行时间，以及缩短HTML的解析时间。

缩短CSS文件和JS文件的请求时间

可以从以下几方面来做

  • 静态资源放在CDN上
  • 压缩文件（代码混淆压缩，Gzip）
  • js文件拆分按需加载(webpack合理配置, 可使用webpack-bundle-analyzer来分析打包)

缩短HTML的解析时间

  • 从前面影响整页时间的因素中我们可以知道，CSS会阻塞HTMl的渲染和JS的执行，JS会阻塞HTML的解析和渲染，因此为了避免阻塞，要严格遵守CSS文件放在head头部，JS文件放在body尾部
  • 减少DOM树的嵌套深度，这个属于代码层次的细节优化，一般在于代码书写习惯上，这个不好优化
  • 优化JS代码执行逻辑，避免耗时处理，必要时可以使用Web Worker开启多线程

7. DOM渲染时间

这个时间就在于减少重排（页面布局变动）和重绘（页面重新渲染元素样式）

减少重排和重绘的手段

  • JS 中 CSS 属性读写分离
  • 切换 class 或者 style.csstext 属性来批量修改样式
  • 将没用的元素设为不可见
  • 压缩 Dom 的深度，多使用伪元素或者 box-shadow
  • 指定 img 标签的大小
  • 使用独立渲染层（触发新的渲染层的方式或元素：Video元素，WebGL，Canvas，CSS3 3D，CSS滤镜，z-index大于相邻节点）
  • DOM 元素离线更新（使用appendChild和Document Fragment）

8. Load事件执行时间

这个时间的压缩就是减少onload回调函数的耗时处理

很多人习惯将事件绑定放在onload事件中，其实是可以将其提前，放在尾部JS中直接执行或者DOMContentLoaded事件中，这时候DOM解析完成了，已经可以获取到DOM节点了

总结

本文从页面加载的各个阶段分析影响因素，简单的给出了可优化的方向，具体实施还需要在工作中结合团队现状来进行

你可能感兴趣的:(前端性能优化那些事)

  • 儿子开学报道第一天：我和公公一起送他去学校 文又又
    儿子今天是开学报道的的时光，儿子对于是谁送他去学校非常在意，他也想着自己一个人去学校，不要家长送，我们告诉他，可以等到他再大一点的话，就让他自己去学校。我还是一如既往的早起，5点闹钟响起，我的头还昏昏的，就窝在被子里看手机。看爆款文，看热点内容。还看了一会《明朝那些事》，看着看着，就觉得眼皮打架想要睡觉。可是我的潜意识还是提醒自己，起床吧，今天要6点钟起床，说好要叫儿子早起，今天他是8点钟要到学校
  • 补充元象二面 Redstone Monstrosity 前端面试
    1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
  • 孕妈必备：怀孕第一周孕妈和准爸爸需要知道的那些事儿 张女子育儿
    对于新婚夫妻来说，怀孕第一周准妈妈和准爸爸都会感觉到既惊喜又有点不知所措吧！怀孕第一周孕妈有什么反应，怀孕第一周孕妈需要注意的事情有哪些呢？准爸爸又该如何照顾孕妇及其为孩子做些什么呢？今日小编就和大家说说怀孕第一周的诸多问题，让孕妈和准爸爸做好准备。怀孕第一周该如何计算呢？人们通常都说准妈妈要“怀胎10月”，但实际上按照阳历计算的话，胎儿在妈妈子宫内生活的时间是没有10个月的。准妈妈得知自己怀孕，
  • 左手向娱，右手专精，永远年轻永远收割健身小白 每天学点经济学
    “来源于《互联网那些事》（ID：hlw0823)"不知道从什么时候开始，身边的人都像住进了健身房，朋友圈的人不是在健身房，就是在去健身房的路上。《2022国民健身趋势报告》显示：我国7岁及以上年龄人群中，每周至少参加1次体育锻炼的人数比例为67.5%。在有意识主动参与健身的人群中，平均每周进行1-3天健身人群占经常参加体育健身人群总数的75%，平均每周进行3天以上体育健身的人群占比25%。现在年轻
  • 和大家聊聊跨境电子商务网购保税进口的那些事。 万一我爱上你了呢
    怎么知道自己购买的商品是否如商家宣传的那样，属于“正规方式”进口的跨境商品？可以通过查询个人跨境电商年度消费额度的方式进行验证：1.登录中国国际贸易单一窗口，进行用户注册或登录。2.找到相应入口，进入“公共服务”页面。如图所示，选择对应年份进行个人额度查询。3.在“已消费金额”一栏中，如果存在消费金额，还可以点击消费金额从而打开消费明细，列出消费者在跨境电商渠道购买，并正式向海关申报的跨境电商零售
  • 丁俊贵之《“女人和男人”那些事》 兴时态_198812
    【“女人和男人”那些事】生活中，我们经常用性别来给很多现象和问题贴标签。比如：女性发脾气是常见的事情，所以不要跟她们讲道理，要让着她们；女性考虑问题总是比较感性，不如男性那么理性、严谨、全面；女生的数学成绩普遍比较差，因此选文科的女生更多；……许许多多像这样的认知，已经成为我们根深蒂固的信念。我们在生活中哪怕不会直接这样讲，但多多少少都会有类似的想法和感受，并且用这些信念去理解和认知他人。一、人世
  • 关于乡村中的邻里关系 芝麻开门_f101
    今天的思绪有点乱，好些话想说，却又说不清楚。关于田地宅基地那些事儿，好像是乡村乡里乡亲之间绕不开的矛盾和焦点。很多年前在大学时候，我就写过一篇愤愤不平的小文章，若一个家的家庭成员在领居之间不够优秀、不够强势、好说话，无论他的好说话是因为顾及邻居亲情还是真的比较弱，在别人看来本质都是弱，那么他家的田地、屋基都是能被别人惦记的，而且有了第一次，就会有第二次、第三次。家里做房子被邻居各种为难，我当时就想
  • 无题 辉姑娘吉将范身做女王
    图片发自App今天，又如往常一样到了每周作业雨时间，我却从两三天前就不知道该写些什么，刚刚跟母上大人视频通话了近俩小时，细数自己毕业后两年来的变化，总是觉着缺点什么还是慢半拍的感觉，总是没有在该做什么事儿的年龄去做那些事儿，总是到事后才惊觉自己为什么不能早点开始……这一年来，我不断的尝试跟母亲尽可能多的沟通我工作及生活上的一些琐事和我对待这些的态度，想让她一点一点的走进我的生活和工作中，一方面是因
  • 前端性能优化 EdmundChen
    要做性能优化，首先我们得知道用户从开始访问站点到看结果的这一段时间到底后花在了哪些地方。这就设计到一个经典问题。在游览器输入地址按下回车键之后到用户看到结果经历了哪些过程，这里简单说一下大的几个过程。（假设是输入的一个域名而非IP）1.通过DNS解析获得网址的对应IP地址2.浏览器拿到IP地址与远程web服务器通过TCP三次握手协商来建立一个TCP/IP连接3.浏览器通过HTTP接发送请求4.服务
  • 画画那些事｜钢笔画之小品练习(12) 木子阿来
    青色烟雨朦胧于空壮志豪情澎湃在胸图片发自App我背上梦想的行囊请不要问我去何方有翅膀不一定能飞有梦想就大胆去追没有忧伤没有彷徨带上梦想一起流浪翻山越岭飘过海洋天涯海角我陪你闯一路看遍美丽风光就像世界唱歌一样每个音符统统唱响拥抱自由快乐飞翔只因我那坚定信仰图片发自App多年后我白发苍苍穿过生命雨打风霜愿坚持的梦想初衷最后都会收获感动
  • 固定家具定制化那些事 CrazyLiu生活提案
    设计：收口，电源线，可调整空间量尺：安装位置上中下三处，给出更多的弹性空间可调整空间，预留缝给出下单尺寸：给出足够的尺寸，宁大勿小，现场安装交底记录的完备性，家具与墙面收口的合理化处理
  • 听我说，咱家二宝的那些事儿 甦醒
    小孙女两岁零两个月了，家里人都叫她二宝，感谢政府的二孩政策，不然这世上哪会有她？二宝其实是我外孙女，在咱家，外字没了，就是孙女，外公就叫爷爷。小二宝和我这个爷爷前世有缘。长得虽然没有姐姐那样清秀，肉嘟嘟挺可爱，像我，一脸憨厚。每次来，一进门先找爷爷，见我就笑，我看得岀她是打心里笑出来，她一笑，我就醉了。二宝开口说话有点晚，一心数，不会说，刚开口总是把爷爷叫成“丢丢”，丢丢！丢丢！一时间，家里人也跟
  • 参加完行动营的那些事儿 向阳小女孩
    飓风二连31于小星—北京—风一般的女纸那是春节假期的一天，我还在悠闲地躺在床上，吃着瓜果，看着电视剧。然后手机蹬蹬蹬响了起来，看见一位老师给我发来行动营招募的信息，老师之前就推荐过行动营这个活动，我想，是时候改变一下自己了，于是我毫不犹豫的投了简历，当我看到有这么一项问题：“过去的这一年有什么成就事件么？”我顿时就慌了，左思右想，完了，可能没有。于是，暗下决心，今年不要再碌碌无为了。当看到邮箱发来
  • kubernetes里面那些事————控制器 背锅攻城师 kuberneteskubernetes容器云原生
    资源-控制器一，控制器作用二，控制器类型2.1，Deployment：无状态应用部署2.2，DaemonSet：确保所有Node运行同一个pod2.3，StatefulSet：有状态应用部署2.4，Job：一次性任务2.5，CronJob：定时任务2.6，pod2.7，service2.8，replicaset2.9，endpoints三，控制器yaml应用3.1，Deployment3.2，Da
  • kubernetes里面那些事—————存储 背锅攻城师 kubernetes容器云原生
    常用数据卷类型一，emptyDir1.1，emptyDir概念1.2，应用场景1.3，yaml示例二，hostPath2.1，hostPath概念2.2，应用场景2.3，yaml示例三，congfigmap3.1，configmap的作用3.2，注意事项：3.3，使用configmap创建java项目配置文件3.4，subPath应用3.5，configmap作为环境变量四，secret4.1，s
  • 生活点滴5.班级里的那些事 Mint思
    每次快到期末考试的时候班里就总得发生一些事。今天我们这里下雪了，本来我还挺高兴的，今年冬天我们这李就下了两场雪。但是到了下午我的信心就一直跌落谷底，因为雪下的太大了，导致我们得主席台伤全都是雪，我们班同学去扫雪，扫了两节课也都是无动于衷，还是很光滑。这让我们无法排练，而且老师说周末也不让我们排练了，这让我更加紧张。我不知道为什么，最近我们老师好像对我们很放纵，连作业都懒得跟我们留。语文老师的想法是
  • 十七岁，对我来说并不美好的字眼 青雨成竹
    我从没给任何人包括我的父母谈过我在高三发生的那些事，那些曾经让我感到无比痛苦、烦躁、压抑的事。仅以此文，献给我的十七岁。图片发自App暑假提前结束，我们搬到了新教室。偌大的校园里，只有高三的孩子们还有老师。我们似乎就在无声中被推上了战场，告别了从前对未来的懵懂。每个人心中都或多或少有着对理想大学生活的憧憬，就在这样的憧憬下，每天都过得很充实，没有什么大的烦恼，学习就是唯一的任务，高三就这样说快也不
  • vue前端性能优化之cdn的使用 不cong明的亚子 性能优化vue+elementui前端javascriptvue
    优化原因项目中首页加载过慢，原因是js,css静态资源第一次加载的时间长vue.config.js'usestrict'......constcdn={js_cdn:['https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js','https://unpkg.com/[email protected]/dist/vue.js','https://unpkg
  • K8s也面向对象？学会这三要素，用K8s就跟编程一样 技术栈
    今天我们来聊一聊关于K8s对象的那些事。是的，K8s也面向对象K8s这个体系也是面向对象的，听起来有没有那么一点点那么颤抖，天天上班、回家都得面向"对象”了，到头来学学云原生基建，结果还得面向对象。不过你反过来想一想，既然都有多年的面向对象经验了，学学面向对象的K8s不还得手拿把攥啊。在K8s中，对象是系统中持久化的实体，K8s使用对象来表示集群中各种资源，以及跟踪他们在集群中的状态。K8s中有很
  • 兼职赚钱平台一单一结不用投资正规吗 手机在家兼职赚钱平台有哪些 一起高省
    大家好，我是来自高省的Daisy导师，今天跟大家讲讲兼职赚钱平台的那些事。找个靠谱的兼职真的很难，更不用说还要赚到钱。我曾经也和大家一样，为了找到一份既简单又赚钱的兼职而苦苦寻觅，却屡次被骗。经过多次的尝试和失败，我总结出一条重要的经验：所有那些声称能够快速赚到钱的兼职，大多数都是骗子。但是，我相信只要我们用心挑选，还是能够找到一些靠谱的兼职。在这里，我分享几个适合上班族操作的兼职，它们需要我们长
  • 那些令人心动的世界名著中的经典句子 曲小虎
    1，过去都是假的，回忆是一条没有归途的路，以往的一切春天都无法复原，即使最狂热最坚贞的爱情，归根结底也不过是一种瞬息即逝的现实，唯有孤独永恒。2，生命中真正重要的不是你遭遇了什么，而是你记住了那些事，又是如何铭记的。3，我们趋行在人生这个亘古的旅途，在坎坷中奔跑，在挫折里涅槃，忧愁缠满全身，痛苦飘洒一地。我们累，却无从止歇；我们苦，却无法回避。4，所有人都显得很寂寞，用自己的方式想尽办法排遣寂寞，
  • 信创那些事儿——Spring Boot中集成东方通中间件（TongWeb） 北欧人写代码 tomcat安全
    在SpringBoot中集成东方通中间件（如TongWeb作为Servlet容器）通常涉及几个步骤，但需要注意的是，TongWeb本身是一个独立的JavaEE应用服务器，而不是像Tomcat那样可以直接嵌入到SpringBoot应用中的中间件。因此，集成通常意味着将SpringBoot应用打包为WAR文件并部署到TongWeb服务器上。以下是在SpringBoot中集成东方通中间件（以TongWe
  • 《明朝那些事儿》手抄版（8） 孙丹丹86400
    朱重八在投军之前去问了一个人，帮着给出个主意，这个人叫周德兴，他帮朱兄算了一卦。卦象显示，只有去投军才有可能活下来，于是，1352年，朱兄投向了郭子兴的军队，却被当作奸细抓了起来。1352年，朱兄去投了军此时的郭子兴正在因军队被云军包围而苦恼，手下报说抓到一名自称来投军的奸细。郭子兴觉得很好笑，这个时候竟然还有人来投军，于是就去见了被抓住的朱重八。图片发自App当郭子兴说要把朱重八拉出去杀了的时候
  • 总是说“我忘了”，结果我毁了 林幺
    人越长越大，记性却越来越差，以前让人刻骨铭心的宏图壮志，就像是三分钟热度一样，现在再也感受不到它的温暖。以前念书的时候，总是答应父母要好好念书，少玩手机，多去逛逛图书馆，和身边的人好好相处……结果书念完了，仔细梳理一下父母给自己说的那些事情，好像什么都没有做，又好像什么都做了。问问自己得到了什么？拿的出手的，实在是少得可怜。前几天朋友A给我打电话，说老朋友好久不见想聚一聚，到饭馆之后，看到另一个消
  • 我想和你做的那些事 贝公子最美
    你知道我想和你做哪些事情吗？我想你做饭的时候从后面抱着，看你做西红柿炒鸡蛋，说真棒，我想这个圣诞节终于可以一起看我要看的那个电影了，我想终于可以一起手牵手出去旅游了，我想终于可以晚上去你那边的河边散步了，我想你终于不用隔着屏幕在刮我的鼻子了，我想我终于实现你要喝的水了，终于可以满足你给你买一辈子的衣服了。谢谢你了，终于不用做梦了。
  • 追星那些事儿 丫丫__y
    小时候挺喜欢周慧敏，青春美丽无敌，那时候会买一些喜欢的明星的贴纸，呈各种花式贴在歌本、日记本上，家里的床头、桌子上、墙上也必须贴上几张才觉着好看、舒服。随着年龄的增长，度过了那段如花如梦的时光，追星的感觉也渐渐消失了。近几年看电视剧或电影时，因为喜欢剧中人物，爱屋及乌，也会对演员萌生好感，会继续搜她们的作品来看，这种喜欢是淡淡的，不疯狂、不偏激，普通人的普通“追星”，挺好！今天在家干活，打开电视，
  • 真正的沟通建立在同理心上 何不可
    这是菡萏萏的第432篇7:26-7:33用时7分钟字数360为什么总是不太能够做到拥有同理心，或者总是在沟通上没办法到点上，那是因为没有抓住一点，没有完全的站在对方的角度和位置去情景演练过。如果你在那个位置你会怎么说，是不是对方所做的那些事情都变得可以理解并且甚至乎能够体谅到哪些地方最能够打动或者说牵动对方。真正站在对方的立场也是需要一定的准备工作的，提前去了解对方那边的情况，发生了什么，事情的经
  • 关于勇气的那些事儿…… 我是雪山飞狐
    图片发自App1、用勇敢，解读宇宙浩瀚。布鲁诺，意大利文艺复兴时期伟大的科学家。勇敢的捍卫和发展了哥白尼的太阳中心说，面对火刑，毫不退缩，为真理献出了宝贵的生命。是捍卫真理的殉道者。2、用勇敢，发出华丽之声。贝多芬在27岁患上耳疾，45岁以后，耳朵完全丧失了听力，任何助听器都无济于事。但他勇敢面对这一残酷现实，创作出了《第三交响曲》、《费德里奥》等传世之作，发出了自己人生的最强音：“我要扼住命运的
  • 【支教那些事儿】（二十七）把童年还给孩子 苏杭一叶
    沿着坡地下去有几户人家，有一家的门前是一大块空地。这块圆形的空地是这一片区的“文化广场”，每个寨子都有。遇上苗族人的节日，盛装的百姓就聚集在这里唱歌跳舞，银饰清脆的碰撞，芦笙悠长的呼吸，终日不息。——没有活动的广场是孩子们的天下。三个“抢”鸡的孩子常常能遇见五六个年龄相仿的小孩相聚此处。吃了午饭的周末，他们各抱一只鸡，雄赳赳，气昂昂，活像佩剑出战的勇士，一脸神气，志在必得。相比之下，怀中长着彩色羽
  • 2019-11-22 苅琞
    夏天的飞鸟,飞到我的窗前唱歌,又飞去了。秋天的黄叶,它们没什么可唱,只叹息一声。冬天的雪花，飘落在我的手上，瞬间即逝。穿过一片森林，看着枯黄的落叶，萦绕我的那些事又开始一幕幕出现在眼前，仿佛发生在昨天。一段感情，它带给了我很多，让我学会了爱，体会到了嫉妒，感受到了恨的力量，体会到了被爱，学会了给予，学会了索取……它让我知道，有感情就会收到伤害。很多人会说，把它交给时间吧，时间会冲淡一切，但我从来都
  • 基本数据类型和引用类型的初始值 3213213333332132 java基础
    package com.array; /** * @Description 测试初始值 * @author FuJianyong * 2015-1-22上午10:31:53 */ public class ArrayTest { ArrayTest at; String str; byte bt; short s; int i; long
  • 摘抄笔记--《编写高质量代码：改善Java程序的151个建议》 白糖_ 高质量代码
            记得3年前刚到公司，同桌同事见我无事可做就借我看《编写高质量代码：改善Java程序的151个建议》这本书，当时看了几页没上心就没研究了。到上个月在公司偶然看到，于是乎又找来看看，我的天，真是非常多的干货，对于我这种静不下心的人真是帮助莫大呀。           看完整本书，也记了不少笔记
  • 【备忘】Django 常用命令及最佳实践 dongwei_6688 django
    注意：本文基于 Django 1.8.2 版本   生成数据库迁移脚本（python 脚本） python manage.py makemigrations polls  说明：polls 是你的应用名字，运行该命令时需要根据你的应用名字进行调整   查看该次迁移需要执行的 SQL 语句（只查看语句，并不应用到数据库上）： python manage.p
  • 阶乘算法之一N! 末尾有多少个零 周凡杨 java算法阶乘面试效率
                                     &n
  • spring注入servlet g21121 Spring注入
    传统的配置方法是无法将bean或属性直接注入到servlet中的，配置代理servlet亦比较麻烦，这里其实有比较简单的方法，其实就是在servlet的init()方法中加入要注入的内容： ServletContext application = getServletContext(); WebApplicationContext wac = WebApplicationContextUtil
  • Jenkins 命令行操作说明文档 510888780 centos
    假设Jenkins的URL为http://22.11.140.38:9080/jenkins/ 基本的格式为 java 基本的格式为 java -jar jenkins-cli.jar [-s JENKINS_URL] command [options][args] 下面具体介绍各个命令的作用及基本使用方法 1. &nb
  • UnicodeBlock检测中文用法 布衣凌宇 UnicodeBlock
    /**  * 判断输入的是汉字  */ public static boolean isChinese(char c) {        Character.UnicodeBlock ub = Character.UnicodeBlock.of(c);    
  • java下实现调用oracle的存储过程和函数 aijuans javaorale
    1.创建表：STOCK_PRICES     2.插入测试数据：     3.建立一个返回游标：  PKG_PUB_UTILS   4.创建和存储过程：P_GET_PRICE     5.创建函数：   6.JAVA调用存储过程返回结果集 JDBCoracle10G_INVO
  • Velocity Toolbox antlove 模板toolboxvelocity
    velocity.VelocityUtil package velocity; import org.apache.velocity.Template; import org.apache.velocity.app.Velocity; import org.apache.velocity.app.VelocityEngine; import org.apache.velocity.c
  • JAVA正则表达式匹配基础 百合不是茶 java正则表达式的匹配
      正则表达式;提高程序的性能,简化代码,提高代码的可读性,简化对字符串的操作   正则表达式的用途; 字符串的匹配 字符串的分割 字符串的查找 字符串的替换       正则表达式的验证语法     [a] //[]表示这个字符只出现一次 ,[a] 表示a只出现一
  • 是否使用EL表达式的配置 bijian1013 jspweb.xmlELEasyTemplate
            今天在开发过程中发现一个细节问题，由于前端采用EasyTemplate模板方法实现数据展示，但老是不能正常显示出来。后来发现竟是EL将我的EasyTemplate的${...}解释执行了，导致我的模板不能正常展示后台数据。         网
  • 精通Oracle10编程SQL(1-3)PLSQL基础 bijian1013 oracle数据库plsql
    --只包含执行部分的PL/SQL块 --set serveroutput off begin dbms_output.put_line('Hello,everyone!'); end; select * from emp; --包含定义部分和执行部分的PL/SQL块 declare v_ename varchar2(5); begin select
  • 【Nginx三】Nginx作为反向代理服务器 bit1129 nginx
    Nginx一个常用的功能是作为代理服务器。代理服务器通常完成如下的功能：   接受客户端请求 将请求转发给被代理的服务器 从被代理的服务器获得响应结果 把响应结果返回给客户端 实例 本文把Nginx配置成一个简单的代理服务器 对于静态的html和图片，直接从Nginx获取 对于动态的页面，例如JSP或者Servlet，Nginx则将请求转发给Res
  • Plugin execution not covered by lifecycle configuration: org.apache.maven.plugin blackproof maven报错
    转：http://stackoverflow.com/questions/6352208/how-to-solve-plugin-execution-not-covered-by-lifecycle-configuration-for-sprin   maven报错： Plugin execution not covered by lifecycle configuration:
  • 发布docker程序到marathon ronin47 docker 发布应用
    1 发布docker程序到marathon 1.1 搭建私有docker registry 1.1.1 安装docker regisry docker pull docker-registry docker run -t -p 5000:5000 docker-registry 下载docker镜像并发布到私有registry docker pull consol/tomcat-8.0
  • java-57-用两个栈实现队列&&用两个队列实现一个栈 bylijinnan java
    import java.util.ArrayList; import java.util.List; import java.util.Stack; /* * Q 57 用两个栈实现队列 */ public class QueueImplementByTwoStacks { private Stack<Integer> stack1; pr
  • Nginx配置性能优化 cfyme nginx
    转载地址：http://blog.csdn.net/xifeijian/article/details/20956605   大多数的Nginx安装指南告诉你如下基础知识——通过apt-get安装，修改这里或那里的几行配置，好了，你已经有了一个Web服务器了。而且，在大多数情况下，一个常规安装的nginx对你的网站来说已经能很好地工作了。然而，如果你真的想挤压出Nginx的性能，你必
  • [JAVA图形图像]JAVA体系需要稳扎稳打,逐步推进图像图形处理技术 comsci java
         对图形图像进行精确处理，需要大量的数学工具，即使是从底层硬件模拟层开始设计，也离不开大量的数学工具包，因为我认为，JAVA语言体系在图形图像处理模块上面的研发工作，需要从开发一些基础的，类似实时数学函数构造器和解析器的软件包入手，而不是急于利用第三方代码工具来实现一个不严格的图形图像处理软件......   &nb
  • MonkeyRunner的使用 dai_lm androidMonkeyRunner
    要使用MonkeyRunner，就要学习使用Python，哎 先抄一段官方doc里的代码 作用是启动一个程序（应该是启动程序默认的Activity），然后按MENU键，并截屏 # Imports the monkeyrunner modules used by this program from com.android.monkeyrunner import MonkeyRun
  • Hadoop-- 海量文件的分布式计算处理方案 datamachine mapreducehadoop分布式计算
    csdn的一个关于hadoop的分布式处理方案，存档。 原帖：http://blog.csdn.net/calvinxiu/article/details/1506112。     Hadoop 是Google MapReduce的一个Java实现。MapReduce是一种简化的分布式编程模式，让程序自动分布到一个由普通机器组成的超大集群上并发执行。就如同ja
  • 以資料庫驗證登入 dcj3sjt126com yii
    以資料庫驗證登入 由於 Yii 內定的原始框架程式, 採用綁定在UserIdentity.php 的 demo 與 admin 帳號密碼:    public function authenticate()    {        $users=array( &nbs
  • github做webhooks：[2]php版本自动触发更新 dcj3sjt126com githubgitwebhooks
    上次已经说过了如何在github控制面板做查看url的返回信息了。这次就到了直接贴钩子代码的时候了。 工具/原料 git github 方法/步骤   在github的setting里面的webhooks里把我们的url地址填进去。   钩子更新的代码如下： error_reportin
  • Eos开发常用表达式 蕃薯耀 Eos开发Eos入门Eos开发常用表达式
    Eos开发常用表达式 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2014年8月18日 15:03:35 星期一     &
  • SpringSecurity3.X--SpEL 表达式 hanqunfeng SpringSecurity
    使用 Spring 表达式语言配置访问控制，要实现这一功能的直接方式是在<http>配置元素上添加 use-expressions 属性：   <http auto-config="true" use-expressions="true"> 这样就会在投票器中自动增加一个投票器：org.springframework
  • Redis vs Memcache IXHONG redis
    1. Redis中，并不是所有的数据都一直存储在内存中的，这是和Memcached相比一个最大的区别。 2. Redis不仅仅支持简单的k/v类型的数据，同时还提供list，set，hash等数据结构的存储。 3. Redis支持数据的备份，即master-slave模式的数据备份。 4. Redis支持数据的持久化，可以将内存中的数据保持在磁盘中，重启的时候可以再次加载进行使用。 Red
  • Python - 装饰器使用过程中的误区解读 kvhur JavaScriptjqueryhtml5css
    大家都知道装饰器是一个很著名的设计模式，经常被用于AOP(面向切面编程)的场景，较为经典的有插入日志，性能测试，事务处理，Web权限校验， Cache等。 原文链接：http://www.gbtags.com/gb/share/5563.htm Python语言本身提供了装饰器语法（@），典型的装饰器实现如下：   @function_wrapper de
  • 架构师之mybatis-----update 带case when 针对多种情况更新 nannan408 case when
    1.前言.    如题. 2. 代码.   <update id="batchUpdate" parameterType="java.util.List"> <foreach collection="list" item="list" index=&
  • Algorithm算法视频教程 栏目记者 Algorithm算法
    课程：Algorithm算法视频教程 百度网盘下载地址： http://pan.baidu.com/s/1qWFjjQW 密码: 2mji 程序写的好不好,还得看算法屌不屌！Algorithm算法博大精深。 一、课程内容： 课时1、算法的基本概念 + Sequential search 课时2、Binary search 课时3、Hash table 课时4、Algor
  • C语言算法之冒泡排序 qiufeihu c算法
    任意输入10个数字由小到大进行排序。 代码： #include <stdio.h> int main() { int i,j,t,a[11]; /*定义变量及数组为基本类型*/ for(i = 1;i < 11;i++){ scanf("%d",&a[i]); /*从键盘中输入10个数*/ } for
  • JSP异常处理 wyzuomumu Webjsp
    1.在可能发生异常的网页中通过指令将HTTP请求转发给另一个专门处理异常的网页中: <%@ page errorPage="errors.jsp"%>   2.在处理异常的网页中做如下声明： errors.jsp: <%@ page isErrorPage="true"%>，这样设置完后就可以在网页中直接访问exc
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他