▲侃侃前端性能优化

　　前言

　　在上一篇文章《我的css架构理念》中，承蒙园内的朋友们抬爱，竟然一路被推荐，让我这小小一枚前端攻城狮既意外又兴奋进而惶恐。惶恐的是资历实在有限，知识实在匮乏，相当害怕误人子弟。此真心话！但接下来我依然会坚持有时间就写写文章，既能总结，又能学到新知识，还能分享给诸位，我认为，分享---是件功德无量的事，互联网不就是因此而绚丽多彩嘛！

　　上篇文章的留言里有好多朋友是对我css架构就http请求的问题提出质疑，我本想回答的，但不知道从何说起。前端性能方面的知识我了解得并不深入，囫囵吞枣地看过一两本重构的书、喜欢查查资料，看看一些大牛写的文章，觉得人家那么做有道理了，就搬过来用，林林总总的做些总结，于是有了此文。都不是什么新东西，但是因为小知识点太多，希望这里面的东西有你想要的答案吧。

　　前端性能优化--前端工程师不得不说的痛

  1. html、css、js三者相分离。分离得彻底点！为什么这三者要分离，相信大家都明白，不多说。
  2. css的导入方式。css用link而不用@import，因为在 IE 中 @import 指令等同于把 link 标记写在 HTML 的底部，延长css的载入时间，还可能出现文件下载次序被更改的情况。
  3. 理性对待jquery。jquery让我们“write less,do more”，它有太多优势：强大的选择器、DOM操作的完美封装、完善的Ajax、良好的兼容性处理。但是，我们是否就此离不开它呢？我觉得应该根据需求，根据业务逻辑来。一个页面如果只需要几行或几十行js代码可以搞定的效果，为什么要用jquery？让页面先加载个jquery.js，再书写自己的代码？没必要吧。
  4. 合理布局页面的内容。DOM的加载顺序是由上而下的，遇到css，加载css，遇到js，停滞下来，加载并解析js。在布局页面的时候，把主体内容优先显示，把重要内容靠上布局，让浏览器优先解析，是种较好的方案。　
  5. js的导入方式。《javascript王者归来》里有对js的导入方式进行优劣对比。我个人认为，在不考虑js代码重用及维护的前提下(但是往往这点成为我最重要的衡量指标)，把具有重要业务模块的js代码置于title里，把次要的具有操作效果的js代码置于DOM相对应的对象之后。而这样做的理论依据即DOM的加载顺序。上面那话不好理解，举例来说：

    　▲侃侃前端性能优化

    　　上图是QQ音乐首页的导航，主导航的重要作用不言而喻，如下是两段相应的代码：

    　　　　

    <!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">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>test--js导入方式1</title>

        <script type="text/javascript">

            

        </script>

    </head>

    

    <body>

        <ul>

            <li><a href="">首页</a></li>

            <li><a href="">乐库</a></li>

            <li>

                <a href="" id="mv">MV</a>

                <div class="">

                    <a href="">MV推荐</a>

                    <a href="">MV库</a>

                    <a href="">音乐现场</a>

                    <a href="">MV专题</a>

                </div>

            </li>

            <li><a href="">我的音乐</a></li>

            <li><a href="">下载客户端</a></li>

        </ul>

    </body>

</html>
    <!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">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>test--js导入方式1</title>

    </head>

    

    <body>

        <ul>

            <li><a href="">首页</a></li>

            <li><a href="">乐库</a></li>

            <li>

                <a href="" id="mv">MV</a>

                <div class="">

                    <a href="">MV推荐</a>

                    <a href="">MV库</a>

                    <a href="">音乐现场</a>

                    <a href="">MV专题</a>

                </div>

            </li>

            <li><a href="">我的音乐</a></li>

            <li><a href="">下载客户端</a></li>

        </ul>

        <script type="text/javascript">

            

        </script>

    </body>

</html>

    　　两段代码的js效果为鼠标移到MV菜单项时显示子菜单选项。第一段代码中，当浏览器解析到<script>标签时，会停滞下来，直到都解析完了，再继续往下，当MV显示时，我们鼠标一移上去，子菜单就会显示出来；而第二段代码中，浏览器解析到MV时，再到<script>，得先加载js，直到完成，子菜单才会显示。显然，对于这种重要功能模块，更适合采用第一段代码。关于这个原理，我理解的方向不知道有没有偏差或者错误，园中朋友有深入研究的请纠错。

  6. 图片文件格式的选择。关于这点，淘宝UED的图片格式与设计那点事儿有很深入地探讨，我个人觉得受益匪浅，但是文章太长，写得太深入，没耐心还真看不下去，所以后来我又自己总结了下，可以参考下三种图像文件格式的选择。当时总结完这篇文章后，工作的时候就严格按照这上面的来执行了。
  7. sprites贴图技术。这是一项从一出现就备受争议的技术，第一、我们需要打开ps，把许多小图标有规则地排放在一起；第二、我们需要打开ps，最好再放大5倍，再水平垂直拉下两条参考线，然后对到标尺，记下left/top值，写到css文件里；第三、sprites贴图技术与height、line-height关系紧密，因为它们，第二点中定位的left/top又将变得不准确，这时你应该给图标之间留出一定的间隙，不然当心显示出来的都是一半的图标哦。我实在没精力再去截图写代码来证明我是对的，这个自己可以有。我似乎把这项技术说得一文不值，让Dave Shea情何以堪！贴图技术之所以到现在还在被广泛使用，我想最主要的原因就是它大大减少了请求数并在一定程度上减少了图片的总体积的缘故。跟这两点比起来，我前面所说的那些缺点似乎不值一提了。
  8. 让页面渐进增强。将分辨率、操作系统、浏览器、项目针对的用户目标群相结合，在页面制作的过程中采用渐进增强的原则。如果项目的用户目标群普遍采用的是1024*768、Mac os x、ie7+浏览器，那么在设计页面的时候，宽度要做相应的限制，最好水平不出现滚动条；字体也不再选择宋体，采用其他web安全字体；接下来我们开心了，因为可以不考虑ie6，是不是觉得工作忽然间变得很幸福？渐进增强不单单可以应用到大的方向上，还可以具体到单页面模块中：▲侃侃前端性能优化（图1)▲侃侃前端性能优化 （图2）

    图1和图2是截取自一列表中的一个li，图2为鼠标移到li上的效果--显示“取消关注”。 我将在这模块中应用渐进增强原则：第一、需要考虑ie6，那么由于ie6不支持除了a标签以外的其他标签的hover效果，且“取消关注”又是个重要的功能，不要不行，所以只能采用js代码来实现鼠标移入移出效果；第二、如果不考虑ie6，那么假设“取消关注”的标签为span，就可以在css样式表里这么书写：li:hover span{display:block;}；第三、如果“取消关注”功能换成无关紧要文字显示，如时间显示，那么一样可以采用第二点写法，让其他浏览器显示、ie6不显示影响也不大。

  9. 少用滤镜、表达式和hack。这在很多重构书上都会被提到，项目中有对滤镜进行过测试，一堵照片墙过去，全用上滤镜，浏览器加载页面速度那个慢啊，亲眼见到了！表达式不晓得。hack打一开始就在规避，几乎没用过，所以不发表意见。
  10. 借助一些外在的应用来减少css、js文件的请求数。php程序的可以考虑用minify来把每个页面的css和js整合到一起，再在页面中进行调用，这样页面就只请求一次css和js，性能会优化许多。

　　我暂时能想到的就先写到这里了。关于前端性能的优化应该还有很多，这些都是皮毛而已，慢慢再深入了。好吧，再侃点其他的！

　　前端与美工人员

　　前端工程师上衔美工、下接后端、背靠产品，缺一不可。职责分工要明确，前端要告诉美工能少用图片尽量少用、合理地选择图片的文件格式、网站页面风格尽量同一、给出网站主业务链接色、辅链接色、主文本颜色和其他文字颜色等等。美工都是单一页面做出来的，往往没办法考虑到整个网站最终的效果，这个时候前端就应该起到一个提示的作用，如果这个环节没把该确定的东西确定下来，到时候改版起来会相当痛苦。

　　前端与后端人员

　　把命名方式沟通清楚、跟后端人员解释前端css、js、image目录结构定义的想法、了解后端的工作原理。

　　前端与产品经理

　　每个职位的人员都不容易，产品经理更是，最终对产品负责的还是产品经理。不知是否是这样的原因，我所遇到的产品经理都格外细致，有的甚至细致到跟原型效果图差2、3px他都能看得出来！产品经理如果过于追求细节，前端会很悲催。怎么处理这样的情况？和产品经理一样站在产品和用户的角度去思考问题，千万不要站在个人的职位上去想问题，不然永远无法说服他。当然，这有点难度...

　　终于侃完了，做个总结吧，关于程序设计的些许想法：程序跟人生一样，有的时候需要妥协，不能说为了减少请求数，就不注重代码维护，对待使用2M的用户和10M的用户是不能使用同样的处理方式的，网站访问量的多少也应该考虑在内，多个方面综合考虑、权衡，给出一个最优化方案。我想这才是最合理的。

　　　

 

　　

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

  • element ui 中 Cascader 级联选择器实现 动态加载 动态禁用 入门_cascader动态加载(2) 2401_84619606 程序员前端面试学习
    专业技能一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。简单列一下我自己遇到的一些题HTML+CSSJavaScript前端框架前端性能优化前端监控模块化+项目构建代码管理信息安全网络协议浏览器算法与数据结构团队管理开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】最近得空把之前遇到的面试题做了一个整理，包括我本人自己
  • 工程化与框架系列（22）--前端性能优化（中） 一进制ᅟᅠ        ‌‍‎‏  前端工程化与框架前端性能优化状态模式
    前端性能优化（运行）引言运行时性能直接影响用户交互体验和应用流畅度。本文将深入探讨前端运行时性能优化的各种策略和技术，包括渲染优化、内存管理、计算优化等关键主题，帮助开发者构建高性能的Web应用。运行时性能概述运行时性能优化主要关注以下方面：渲染性能：减少重排重绘，优化动画效果内存管理：防止内存泄漏，优化内存使用计算优化：提升JavaScript执行效率事件处理：优化事件监听和响应异步操作：合理使
  • 前端性能优化:页面加载速度慢怎么办？ 好运连连女士 面试题性能优化前端
    文章目录前端性能优化如何识别页面加载速度慢的原因性能优化的方式提高资源的请求速度http缓存--提升二次访问的响应速度CDN缓存静态资源缓存webpack的hash策略-文件资源缓存减少资源请求量图片懒加载代码构建优化webpack资源压缩treesharking-js代码的精简分包按需加载浏览器渲染优化webworkerGPU加速前端性能优化如何识别页面加载速度慢的原因方式1:lighthous
  • 前端性能优化——如何提高页面加载速度？ 忘川... 前端性能优化html
    1.将样式表放在头部首先说明一下，将样式表放在头部对于实际页面加载的时间并不能造成太大影响，但是这会减少页面首屏出现的时间，使页面内容逐步呈现，改善用户体验，防止“白屏”。我们总是希望页面能够尽快显示内容，为用户提供可视化的回馈，这对网速慢的用户来说是很重要的。将样式表放在文档底部会阻止浏览器中的内容逐步出现。为了避免当样式变化时重绘页面元素，浏览器会阻塞内容逐步呈现，造成“白屏”。这源自浏览器的
  • 前端性能优化 - 提升 FID（First Input Delay） 码农巧克零 程序员前端开发编程前端性能优化
    导读FID(FirstInputDelay)是评估用户与网页互动时响应速度的关键性能指标之一。它主要衡量用户首次与页面互动（如点击按钮、链接或输入框）到浏览器实际响应这一互动之间的时间差。良好的FID能够为用户提供流畅的体验，而较差的FID会让用户觉得页面卡顿，从而影响用户体验和留存率。优化FID是提升前端性能的重要部分。本文将介绍优化FID的一些有效策略和方法。什么是FID？FID是CoreWe
  • 前端性能优化常见的误区 前端码趣逗士 前端性能优化
    前端性能优化过程中存在一些常见误区，了解并避免这些误区对于实现高效的性能优化至关重要。一、过度追求极致的加载速度误区表现：有些开发者可能会陷入过度追求页面加载速度达到极致的误区，认为加载时间越短越好，不惜花费大量时间和精力进行各种复杂的优化，甚至在一些边际效益很低的地方投入过多。例如，为了节省几毫秒的加载时间，对一些已经优化得较好的资源进行反复压缩和调整，或者过度使用一些不太成熟的优化技术，导致代
  • JavaScript前端性能优化技巧分享 代码旅人博客 前端javascript性能优化
    在前端开发中，性能优化是一个持续不断的追求。随着Web应用的日益复杂，如何确保应用的流畅性和响应速度，成为了每个前端开发者必须面对的问题。JavaScript作为前端的核心语言，其性能优化更是至关重要。本文将分享一些JavaScript前端性能优化的技巧，帮助开发者提升Web应用的性能。一、减少DOM操作DOM（文档对象模型）操作是JavaScript中常见的性能瓶颈之一。频繁的DOM操作会导致浏
  • AI赋能前端性能优化：效率与体验的完美平衡 2401_89760565 需求分析人工智能前端
    在当今快节奏的互联网世界中，用户体验至关重要。一个加载缓慢、反应迟钝的网站或应用，很容易导致用户流失。而前端性能优化，作为提升用户体验的关键环节，却常常面临着诸多挑战。复杂的代码逻辑、庞大的资源文件、以及难以捉摸的性能瓶颈，都让前端开发者倍感压力。幸运的是，人工智能（AI）技术的兴起为我们提供了解决这些问题的全新途径，特别是AI代码生成器的出现，为前端性能优化带来了革命性的变革。……AI辅助前端性
  • 前端性能优化全面指南：从基础到进阶 尤山海 前端性能优化
    前端性能优化全面指南：从基础到进阶欢迎来到前端性能优化的全面指南！本文将带你深入了解从基础到进阶的各种优化策略，帮助你全面提升网页的加载速度和用户体验。1.关键渲染路径（CriticalRenderingPath）优化最小化关键资源：确保页面加载的初始请求尽可能少，合并CSS和JavaScript文件，使用内联CSS和JavaScript（对于非常小的脚本和样式）。异步/延迟加载非关键资源：使用a
  • 深入探究前端性能优化：从理论到实践 lozhyf 学习工作面试前端性能优化
    一、引言在当今数字化时代，用户对于网页的加载速度和响应性能有着极高的要求。前端性能不仅直接影响用户体验，还与业务指标息息相关，如转化率、用户留存率等。因此，掌握前端性能优化技术成为了前端开发者必备的技能。本文将深入探讨前端性能优化的多个方面，并提供实际可操作的优化技巧。二、前端性能优化的关键指标（一）加载时间这是最直观的指标，指从用户请求网页到页面完全加载并可交互的时间。加载时间过长会导致用户流失
  • 前端 Vue 性能提升策略 随风九天 Vue六脉神剑性能九阴白骨爪前端前端vue.js性能
    一、引言前端性能优化是确保Web应用快速响应和流畅用户体验的关键。对于使用Vue.js构建的应用，性能优化不仅涉及通用的前端技术，还包括针对Vue特性的特定优化措施。本文将从多个方面探讨如何全面提升前端和Vue应用的性能。二、前端性能优化基础1.减少初始加载时间代码分割（CodeSplitting）：通过动态导入（import()）按需加载模块，减少初次加载的资源量。constHome=()=>i
  • 【自学笔记】Web前端的重点知识点-持续更新 Long_poem 笔记前端
    提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录Web前端知识点一、HTML基础二、CSS样式三、JavaScript基础四、前端框架与库五、前端工具与构建六、前端性能优化七、响应式设计与适配八、前端安全总结Web前端知识点一、HTML基础常用标签超链接(标签)图片(标签)表格(、、等标签)列表(无序列表、有序列表、定义列表)HTML5新特性语义化标签(、、等)音频视频(、
  • 【面试】【前端】【性能优化】前端性能优化总结 患得患失949 面试考题专栏（前后端）面试前端性能优化
    一、前端性能优化总结前端性能优化是提升用户体验的重要手段，面试中涉及的问题往往从理论到实践全面考察候选人对优化的理解。以下从性能优化的原则、方法、工具和常见问题解答入手，提供全面的总结。（一）性能优化的基本原则用户体验：少于0.1秒：用户不会注意到延迟。少于1秒：用户感知延迟但不会中断操作。少于10秒：用户会继续等待响应。超过10秒：用户将放弃等待。优化目标：首屏加载时间≤3秒。用户操作响应时间≤
  • 前端性能优化：HMR热更新和预获取加载 疯狂小料 前端面试
    最近发现项目开发，有点加载快，有点却是卡机式，甚至刷新导致白屏情况。于是，我找开发和性能优化的方法，找到下面几种。本文将深入探讨预获取（Prefetch）、动态导入（DynamicImport）和热模块替换（HMR）这三个关键技术1.预获取（Prefetch）：加速后续页面加载1.1什么是预获取？预获取（Prefetch）是一种性能优化技术，允许浏览器在空闲时提前加载后续页面或功能所需的资源（如J
  • 补充元象二面 Redstone Monstrosity 前端面试
    1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
  • 前端性能优化 EdmundChen
    要做性能优化，首先我们得知道用户从开始访问站点到看结果的这一段时间到底后花在了哪些地方。这就设计到一个经典问题。在游览器输入地址按下回车键之后到用户看到结果经历了哪些过程，这里简单说一下大的几个过程。（假设是输入的一个域名而非IP）1.通过DNS解析获得网址的对应IP地址2.浏览器拿到IP地址与远程web服务器通过TCP三次握手协商来建立一个TCP/IP连接3.浏览器通过HTTP接发送请求4.服务
  • 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
  • 前端性能优化-CSS性能优化 LYFlied css前端css性能优化面试
    文章目录一、内联首屏关键CSS二、异步加载CSS异步加载的几种方式1.js动态创建样式表link元素，并插入到DOM中。2.设置media属性3.设置rel属性4.rel="preload"三、文件压缩四、去除无用CSS五、有选择地使用选择器六、减少使用昂贵的属性七、优化重排与重绘1.减少重排2.避免不必要的重绘八、让元素及其内容尽可能独立于文档树的其余部分九、避免使用@import十、开启GPU
  • 浏览器缓存机制 开发小途 前端
    浏览器缓存机制是前端性能优化中至关重要的一环，它通过缓存之前请求过的文件，以提高页面再次访问时的加载速度。一、浏览器缓存的作用减少数据传输：缓存减少了不必要的数据传输，节省了带宽。减轻服务器负担：通过缓存，服务器不需要处理重复的请求，从而减轻了负担。提升访问速度：缓存使得页面加载更加迅速，提升了用户体验。二、浏览器缓存的类别浏览器缓存主要分为两类：强制缓存（也称为强缓存）和协商缓存（也称为弱缓存）
  • 前端性能优化(三)——浏览器九大缓存方法 2401_84097658 程序员前端性能优化缓存
    4、cookiecookie指的就是会话跟踪技术。一般指网站为了辨别用户身份，进行session跟踪而而存储在用户本地终端上的数据，cookie一般通过http请求头发送到服务器。cookie主要特点有：跨域限制，同一个域名下可多个网页内使用。cookie可以设置有效期，超出有效期自动清除。cookie存储大小在4K以内。cookie的存储不能超过50个cookie。只能存储字符串类型。cooki
  • 面试前端性能优化八股文十问十答第二期 程序员小白条 面试八股文系列面试前端性能优化八股文面试必备职场和发展项目实战
    面试前端性能优化八股文十问十答第二期作者：程序员小白条，个人博客相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！⭐点赞⭐收藏⭐不迷路！⭐1）如何优化动画？优化动画可以通过以下几个方面进行：使用CSS动画：利用CSS3提供的transition和animation属性来实现动画效果，因为CSS动画是由浏览器来执行的，通常比JavaScript动画性能更高。使用硬件加速：通过CS
  • 面试前端性能优化八股文十问十答第一期 程序员小白条 面试八股文系列面试前端性能优化项目实战职场和发展八股文前端性能优化
    面试前端性能优化八股文十问十答第一期作者：程序员小白条，个人博客相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！⭐点赞⭐收藏⭐不迷路！⭐1）CDN的概念CDN（ContentDeliveryNetwork，内容分发网络）是一种分布式的网络架构，旨在提高网站内容传输的效率和性能。它通过将内容分发到全球各地的多个节点，使用户能够从距离更近的服务器获取所需的内容，从而加快内容加载速
  • 前端性能优化笔记1 第一章 沿着路走到底 性能优化前端
    1.HelloWorldHelloWorldwindow.LOAD_DATA=(data)=>{const{title,url}=datadocument.body.innerHTML=`${title}`}consttag=document.createElement('script')tag.src='https://cdn.jsdelivr.net/gh/xcodebuild/perfdem
  • 前端工程化面试题 | 07.精选前端工程化高频面试题 ai_todo 前端javascripttypescript开发语言
    前端开发工程师、技术日更博主、已过CET6阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》蓝桥云课签约作者、上架课程《Vue.js和Egg.js开发企业级健康管理项目》、《带你从入门到实战全面掌握uni-app》文章目录请解释一下前端中的持续集成和持续交付。你熟悉的持续集成工具或持续交付工具有哪些？前端性能优化是
  • 前端性能优化 - Gzip压缩
    什么是Gzip压缩？gzip是GNUzip的缩写，是一种文件的压缩格式（也可以说是若干种文件压缩程序），类似的压缩格式还有compress，deflate等。web上使用gzip编码格式传输有几个要点：浏览器和服务器都需要支持gzip编码采用LZ77算法与Huffman编码来压缩文件，是一种无损压缩算法压缩比率在3-10倍左右（纯文本），可以大大节省服务器的网络带宽是否前端所有资源都需要Gzip压
  • 2021-10-04 前端性能优化方法 weixin_43160044 前端javascript前端
    文章目录前言1、GZIP1.1、使用步骤2、CDN2.1、使用步骤3、缓存3.1、使用步骤4.组件4.1、注意事项5.其它5.1、减少HTTP请求5.2、懒加载总结前言随着代码数量越来越多，如何加快项目浏览器中的运行速度，减少用户的等待时间便成为了很重要的一个方面，以下是我经过实践后的几个方法1、GZIPGZIP可以对文件进行压缩，压缩比例到3到10左右，是很实用的压缩方法1.1、使用步骤因为我们
  • 前端性能优化：提升网站加载速度的终极指南 喔的嘛呀 前端
    目录一、引言二、问题分析三、优化方案1.减少HTTP请求次数：方法一：合并文件方法二：CSSSprites方法三：使用CSS和JavaScript工具2.使用CDN加速：方法：示例：引入CDN提供的jQuery库：引入CDN提供的BootstrapCSS文件：引入CDN提供的FontAwesome图标库：图片资源使用CDN加速：3.设置缓存策略：通过设置合适的缓存方法：示例：使用Cache-Con
  • next项目页面性能调优 sasaraku. 前端js
    next项目页面性能调优一般来说性能优化可以分为加载时、运行时两部分的优化。扩展参考链接：前端性能优化24条建议Webpack4进阶–从前的日色变得慢，一下午只够打一次包Webpack分包优化首屏加载参考指标FCP（FirstContentfulPaint）：首次内容绘制时间，白屏时间LCP（LargestContentfulPaint）：最大内容绘制时间，即网站渲染占比最多的元素绘制所花费的时间
  • 前端性能优化 润清 前端性能优化
    一、速度为什么很重要？1.效果关乎留存用户BBC发现其网站的加载速度每增加一秒，就会额外损失10%的用户。2.效果关乎转化次数的增加速度较快的网站可以提高转化率并改善业务成果。3.性能关乎用户体验对网页加载速度延迟的压力反应类似于观看恐怖电影或解决数学问题，并且比在零售店排队等候的压力更大。二、HTML性能的一般注意事项该HTML的初始请求需要经历多个步骤，每一步都需要一些时间。减少在每个步骤上花
  • 前端性能优化 - 首屏渲染优化实现及其必要性 叶叶叶同学
    前端性能优化，不得不提的就是这个首屏渲染优化首屏渲染优化其实更具体点，应该是：首次加载首屏渲染优化，原因是某些应用，比如微信有缓存机制，首次加载了，第二次进入都会先加载本地缓存。言归正传，首屏渲染加载优化，其实通俗说起来就是：“刚进页面加载快点”。其实这话也很笼统，专业点来说，其实是有如下几个指标的：FP（全称“FirstPaint”，翻译为“首次绘制”）FCP（全称“FirstContentfu
  • PHP如何实现二维数组排序？ IT独行者 二维数组PHP排序　
    二维数组在PHP开发中经常遇到，但是他的排序就不如一维数组那样用内置函数来的方便了，（一维数组排序可以参考本站另一篇文章【PHP中数组排序函数详解汇总】）。二维数组的排序需要我们自己写函数处理了，这里UncleToo给大家分享一个PHP二维数组排序的函数： 代码： functionarray_sort($arr,$keys,$type='asc'){ $keysvalue= $new_arr
  • 【Hadoop十七】HDFS HA配置 bit1129 hadoop
    基于Zookeeper的HDFS HA配置主要涉及两个文件,core-site和hdfs-site.xml。   测试环境有三台 hadoop.master hadoop.slave1 hadoop.slave2   hadoop.master包含的组件NameNode, JournalNode, Zookeeper，DFSZKFailoverController
  • 由wsdl生成的java vo类不适合做普通java vo darrenzhu VOwsdlwebservicerpc
    开发java webservice项目时，如果我们通过SOAP协议来输入输出，我们会利用工具从wsdl文件生成webservice的client端类，但是这里面生成的java data model类却不适合做为项目中的普通java vo类来使用，当然有一中情况例外，如果这个自动生成的类里面的properties都是基本数据类型，就没问题，但是如果有集合类，就不行。原因如下： 1)使用了集合如Li
  • JAVA海量数据处理之二（BitMap） 周凡杨 java算法bitmapbitset数据
           路漫漫其修远兮，吾将上下而求索。想要更快，就要深入挖掘 JAVA 基础的数据结构，从来分析出所编写的 JAVA 代码为什么把内存耗尽，思考有什么办法可以节省内存呢？ 啊哈！算法。这里采用了 BitMap 思想。   首先来看一个实验： 指定 VM 参数大小： -Xms256m -Xmx540m
  • java类型与数据库类型 g21121 java
    很多时候我们用hibernate的时候往往并不是十分关心数据库类型和java类型的对应关心，因为大多数hbm文件是自动生成的，但有些时候诸如：数据库设计、没有生成工具、使用原始JDBC、使用mybatis(ibatIS)等等情况，就会手动的去对应数据库与java的数据类型关心，当然比较简单的数据类型即使配置错了也会很快发现问题，但有些数据类型却并不是十分常见，这就给程序员带来了很多麻烦。 &nb
  • Linux命令 510888780 linux命令
    系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIOS / DMI) hdparm -i /dev/hda 罗列一个磁盘的架构特性 hdparm -tT /dev/sda 在磁盘上执行测试性读取操作 cat /proc/cpuinfo 显示C
  • java常用JVM参数 墙头上一根草 javajvm参数
    -Xms：初始堆大小，默认为物理内存的1/64(<1GB)；默认(MinHeapFreeRatio参数可以调整)空余堆内存小于40%时，JVM就会增大堆直到-Xmx的最大限制 -Xmx：最大堆大小，默认(MaxHeapFreeRatio参数可以调整)空余堆内存大于70%时，JVM会减少堆直到 -Xms的最小限制 -Xmn：新生代的内存空间大小，注意：此处的大小是（eden+ 2
  • 我的spring学习笔记9-Spring使用工厂方法实例化Bean的注意点 aijuans Spring 3
    方法一： <bean id="musicBox" class="onlyfun.caterpillar.factory.MusicBoxFactory" factory-method="createMusicBoxStatic"></bean> 方法二：
  • mysql查询性能优化之二 annan211 UNIONmysql查询优化索引优化
    1 union的限制 有时mysql无法将限制条件从外层下推到内层，这使得原本能够限制部分返回结果的条件无法应用到内层 查询的优化上。 如果希望union的各个子句能够根据limit只取部分结果集，或者希望能够先排好序在 合并结果集的话，就需要在union的各个子句中分别使用这些子句。 例如 想将两个子查询结果联合起来，然后再取前20条记录，那么mys
  • 数据的备份与恢复 百合不是茶 oraclesql数据恢复数据备份
     数据的备份与恢复的方式有: 表,方案 ,数据库;     数据的备份: 导出到的常见命令; 参数 说明 USERID 确定执行导出实用程序的用户名和口令 BUFFER 确定导出数据时所使用的缓冲区大小，其大小用字节表示 FILE 指定导出的二进制文
  • 线程组 bijian1013 java多线程threadjava多线程线程组
    有些程序包含了相当数量的线程。这时，如果按照线程的功能将他们分成不同的类别将很有用。        线程组可以用来同时对一组线程进行操作。        创建线程组：ThreadGroup g = new ThreadGroup(groupName);  &nbs
  • top命令找到占用CPU最高的java线程 bijian1013 javalinuxtop
    上次分析系统中占用CPU高的问题，得到一些使用Java自身调试工具的经验，与大家分享。 (1)使用top命令找出占用cpu最高的JAVA进程PID:28174 (2)如下命令找出占用cpu最高的线程 top -Hp 28174 -d 1 -n 1 32694 root 20 0 3249m 2.0g 11m S 2 6.4 3:31.12 java
  • 【持久化框架MyBatis3四】MyBatis3一对一关联查询 bit1129 Mybatis3
      当两个实体具有1对1的对应关系时，可以使用One-To-One的进行映射关联查询   One-To-One示例数据 以学生表Student和地址信息表为例，每个学生都有都有1个唯一的地址(现实中，这种对应关系是不合适的，因为人和地址是多对一的关系)，这里只是演示目的   学生表   CREATE TABLE STUDENTS (
  • C/C++图片或文件的读写 bitcarter 写图片
    先看代码： /*strTmpResult是文件或图片字符串 * filePath文件需要写入的地址或路径 */ int writeFile(std::string &strTmpResult,std::string &filePath) { int i,len = strTmpResult.length(); unsigned cha
  • nginx自定义指定加载配置 ronin47
    进入 /usr/local/nginx/conf/include 目录，创建 nginx.node.conf 文件，在里面输入如下代码： upstream nodejs { server 127.0.0.1:3000; #server 127.0.0.1:3001; keepalive 64; } server { liste
  • java-71-数值的整数次方.实现函数double Power(double base, int exponent)，求base的exponent次方 bylijinnan double
    public class Power { /** *Q71-数值的整数次方 *实现函数double Power(double base, int exponent)，求base的exponent次方。不需要考虑溢出。 */ private static boolean InvalidInput=false; public static void main(
  • Android四大组件的理解 Cb123456 android四大组件的理解
     分享一下，今天在Android开发文档-开发者指南中看到的:                            App components are the essential building blocks of an Android
  • [宇宙与计算]涡旋场计算与拓扑分析 comsci 计算
         怎么阐述我这个理论呢？ 。。。。。。。。。       首先： 宇宙是一个非线性的拓扑结构与涡旋轨道时空的统一体。。。。       我们要在宇宙中寻找到一个适合人类居住的行星，时间非常重要，早一个刻度和晚一个刻度，这颗行星的
  • 同一个Tomcat不同Web应用之间共享会话Session cwqcwqmax9 session
    实现两个WEB之间通过session 共享数据 查看tomcat 关于 HTTP Connector 中有个emptySessionPath 其解释如下： If set to true, all paths for session cookies will be set to /. This can be useful for portlet specification impleme
  • springmvc Spring3 MVC，ajax，乱码 dashuaifu springjquerymvcAjax
      springmvc Spring3 MVC @ResponseBody返回，jquery ajax调用中文乱码问题解决   Spring3.0 MVC @ResponseBody 的作用是把返回值直接写到HTTP response body里。具体实现AnnotationMethodHandlerAdapter类handleResponseBody方法，具体实
  • 搭建WAMP环境 dcj3sjt126com wamp
    这里先解释一下WAMP是什么意思。W:windows，A：Apache，M：MYSQL，P：PHP。也就是说本文说明的是在windows系统下搭建以apache做服务器、MYSQL为数据库的PHP开发环境。      工欲善其事，必须先利其器。因为笔者的系统是WinXP，所以下文指的系统均为此系统。笔者所使用的Apache版本为apache_2.2.11-
  • yii2 使用raw http request dcj3sjt126com http
    Parses a raw HTTP request using yii\helpers\Json::decode()   To enable parsing for JSON requests you can configure yii\web\Request::$parsers using this class: 'request' =&g
  • Quartz-1.8.6 理论部分 eksliang quartz
    转载请出自出处：http://eksliang.iteye.com/blog/2207691 一.概述 基于Quartz-1.8.6进行学习，因为Quartz2.0以后的API发生的非常大的变化，统一采用了build模式进行构建； 什么是quartz?   答：简单的说他是一个开源的java作业调度框架，为在 Java 应用程序中进行作业调度提供了简单却强大的机制。并且还能和Sp
  • 什么是POJO？ gupeng_ie javaPOJO框架Hibernate
    POJO--Plain Old Java Objects(简单的java对象)   POJO是一个简单的、正规Java对象，它不包含业务逻辑处理或持久化逻辑等，也不是JavaBean、EntityBean等，不具有任何特殊角色和不继承或不实现任何其它Java框架的类或接口。   POJO对象有时也被称为Data对象，大量应用于表现现实中的对象。如果项目中使用了Hiber
  • jQuery网站顶部定时折叠广告 ini JavaScripthtmljqueryWebcss
    效果体验：http://hovertree.com/texiao/jquery/4.htmHTML文件代码： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>网页顶部定时收起广告jQuery特效 - HoverTree<
  • Spring boot内嵌的tomcat启动失败 kane_xie spring boot
    根据这篇guide创建了一个简单的spring boot应用，能运行且成功的访问。但移植到现有项目（基于hbase）中的时候，却报出以下错误：     SEVERE: A child container failed during start java.util.concurrent.ExecutionException: org.apache.catalina.Lif
  • leetcode: sort list michelle_0916 Algorithmlinked listsort
    Sort a linked list in O(n log n) time using constant space complexity. ====analysis======= mergeSort for singly-linked list  ====code=======   /** * Definition for sin
  • nginx的安装与配置,中途遇到问题的解决 qifeifei nginx
    我使用的是ubuntu13.04系统，在安装nginx的时候遇到如下几个问题，然后找思路解决的，nginx 的下载与安装   wget http://nginx.org/download/nginx-1.0.11.tar.gz tar zxvf nginx-1.0.11.tar.gz ./configure make make install   安装的时候出现
  • 用枚举来处理java自定义异常 tcrct javaenumexception
    在系统开发过程中，总少不免要自己处理一些异常信息，然后将异常信息变成友好的提示返回到客户端的这样一个过程，之前都是new一个自定义的异常，当然这个所谓的自定义异常也是继承RuntimeException的，但这样往往会造成异常信息说明不一致的情况，所以就想到了用枚举来解决的办法。 1，先创建一个接口，里面有两个方法，一个是getCode, 一个是getMessage public
  • erlang supervisor分析 wudixiaotie erlang
    当我们给supervisor指定需要创建的子进程的时候，会指定M,F,A,如果是simple_one_for_one的策略的话，启动子进程的方式是supervisor:start_child(SupName, OtherArgs),这种方式可以根据调用者的需求传不同的参数给需要启动的子进程的方法。和最初的参数合并成一个数组，A ++ OtherArgs。那么这个时候就有个问题了，既然参数不一致，那
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他