精华内容
下载资源
问答
  • 前端性能优化
    千次阅读
    2021-08-28 23:54:00

    本文将详细介绍前端性能优化的七大手段,包括减少请求数量、减小资源大小、优化网络连接、优化资源加载、减少重绘回流、使用性能更好的API和构建优化

    减少请求数量

    【合并】

      如果不进行文件合并,有如下3个隐患

      1、文件与文件之间有插入的上行请求,增加了N-1个网络延迟

      2、受丢包问题影响更严重

      3、经过代理服务器时可能会被断开

      但是,文件合并本身也有自己的问题

      1、首屏渲染问题

      2、缓存失效问题

      所以,对于文件合并,有如下改进建议

      1、公共库合并

      2、不同页面单独合并

    【图片处理】

      1、雪碧图

      CSS雪碧图是以前非常流行的技术,把网站上的一些图片整合到一张单独的图片中,可以减少网站的HTTP请求数量,但是当整合图片比较大时,一次加载比较慢。随着字体图片、SVG图片的流行,该技术渐渐退出了历史舞台

      2、Base64

      将图片的内容以Base64格式内嵌到HTML中,可以减少HTTP请求数量。但是,由于Base64编码用8位字符表示信息中的6个位,所以编码后大小大约比原始值扩大了 33%

      3、使用字体图标来代替图片

    【减少重定向】

      尽量避免使用重定向,当页面发生了重定向,就会延迟整个HTML文档的传输。在HTML文档到达之前,页面中不会呈现任何东西,也没有任何组件会被下载,降低了用户体验

      如果一定要使用重定向,如http重定向到https,要使用301永久重定向,而不是302临时重定向。因为,如果使用302,则每一次访问http,都会被重定向到https的页面。而永久重定向,在第一次从http重定向到https之后 ,每次访问http,会直接返回https的页面

    【使用缓存】

      使用cach-control或expires这类强缓存时,缓存不过期的情况下,不向服务器发送请求。强缓存过期时,会使用last-modified或etag这类协商缓存,向服务器发送请求,如果资源没有变化,则服务器返回304响应,浏览器继续从本地缓存加载资源;如果资源更新了,则服务器将更新后的资源发送到浏览器,并返回200响应

    【不使用CSS @import】

      CSS的@import会造成额外的请求

    【避免使用空的src和href】

      a标签设置空的href,会重定向到当前的页面地址

      form设置空的method,会提交表单到当前的页面地址

    减小资源大小

    【压缩】

      1、HTML压缩

      HTML代码压缩就是压缩在文本文件中有意义,但是在HTML中不显示的字符,包括空格,制表符,换行符等

      2、CSS压缩

      CSS压缩包括无效代码删除与CSS语义合并

      3、JS压缩与混乱

      JS压缩与混乱包括无效字符及注释的删除、代码语义的缩减和优化、降低代码可读性,实现代码保护

      4、图片压缩

      针对真实图片情况,舍弃一些相对无关紧要的色彩信息

    【webp】

      在安卓下可以使用webp格式的图片,它具有更优的图像数据压缩算法,能带来更小的图片体积,同等画面质量下,体积比jpg、png少了25%以上,而且同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性

    【开启gzip】

      HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术。大流量的WEB站点常常使用GZIP压缩技术来让用户感受更快的速度。这一般是指WWW服务器中安装的一个功能,当有人来访问这个服务器中的网站时,服务器中的这个功能就将网页内容压缩后传输到来访的电脑浏览器中显示出来。一般对纯文本内容可压缩到原大小的40%

    优化网络连接

    【使用CDN】

      CDN全称是Content Delivery Network,即内容分发网络,它能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容,解决 Internet网络拥挤的状况,提高用户访问网站的响应速度

    【使用DNS预解析】

      当浏览器访问一个域名的时候,需要解析一次DNS,获得对应域名的ip地址。在解析过程中,按照浏览器缓存系统缓存路由器缓存ISP(运营商)DNS缓存根域名服务器顶级域名服务器主域名服务器的顺序,逐步读取缓存,直到拿到IP地址

      DNS Prefetch,即DNS预解析就是根据浏览器定义的规则,提前解析之后可能会用到的域名,使解析结果缓存到系统缓存中,缩短DNS解析时间,来提高网站的访问速度

      方法是在 head 标签里面写上几个 link 标签

    <link rel="dns-prefecth" href="https://www.google.com">
    <link rel="dns-prefecth" href="https://www.google-analytics.com">

      对以上几个网站提前解析 DNS,由于它是并行的,不会堵塞页面渲染,这样可以缩短资源加载的时间

    【并行连接】

      由于在HTTP1.1协议下,chrome每个域名的最大并发数是6个。使用多个域名,可以增加并发数

    【持久连接】

      使用keep-alive或presistent来建立持久连接,持久连接降低了时延和连接建立的开销,将连接保持在已调谐状态,而且减少了打开连接的潜在数量

    【管道化连接】

      在HTTP2协议中,可以开启管道化连接,即单条连接的多路复用,每条连接中并发传输多个资源,这里就不需要添加域名来增加并发数了

    优化资源加载

    【资源加载位置】

      通过优化资源加载位置,更改资源加载时机,使尽可能快地展示出页面内容,尽可能快地使功能可用

      1、CSS文件放在head中,先外链,后本页

      2、JS文件放在body底部,先外链,后本页

      3、处理页面、处理页面布局的JS文件放在head中,如babel-polyfill.js文件、flexible.js文件

      4、body中间尽量不写style标签和script标签

    【资源加载时机】

      1、异步script标签

      defer:  异步加载,在HTML解析完成后执行。defer的实际效果与将代码放在body底部类似

      async: 异步加载,加载完成后立即执行

      2、模块按需加载

      在SPA等业务逻辑比较复杂的系统中,需要根据路由来加载当前页面需要的业务模块

      按需加载,是一种很好的优化网页或应用的方式。这种方式实际上是先把代码在一些逻辑断点处分离开,然后在一些代码块中完成某些操作后,立即引用或即将引用另外一些新的代码块。这样加快了应用的初始加载速度,减轻了它的总体体积,因为某些代码块可能永远不会被加载

      webpack 提供了两个类似的技术,优先选择的方式是使用符合 ECMAScript 提案 的 import() 语法。第二种则是使用 webpack 特定的 require.ensure

      3、使用资源预加载preload和资源预读取prefetch

      preload让浏览器提前加载指定资源,需要执行时再执行,可以加速本页面的加载速度

      prefetch告诉浏览器加载下一页面可能会用到的资源,可以加速下一个页面的加载速度

      4、资源懒加载与资源预加载

      资源延迟加载也称为懒加载,延迟加载资源或符合某些条件时才加载某些资源

      资源预加载是提前加载用户所需的资源,保证良好的用户体验

      资源懒加载和资源预加载都是一种错峰操作,在浏览器忙碌的时候不做操作,浏览器空间时,再加载资源,优化了网络性能

      

    减少重绘回流

    【样式设置】

      1、避免使用层级较深的选择器,或其他一些复杂的选择器,以提高CSS渲染效率

      2、避免使用CSS表达式,CSS表达式是动态设置CSS属性的强大但危险方法,它的问题就在于计算频率很快。不仅仅是在页面显示和缩放时,就是在页面滚动、乃至移动鼠标时都会要重新计算一次

      3、元素适当地定义高度或最小高度,否则元素的动态内容载入时,会出现页面元素的晃动或位置,造成回流

      4、给图片设置尺寸。如果图片不设置尺寸,首次载入时,占据空间会从0到完全出现,上下左右都可能位移,发生回流

      5、不要使用table布局,因为一个小改动可能会造成整个table重新布局。而且table渲染通常要3倍于同等元素时间

      6、能够使用CSS实现的效果,尽量使用CSS而不使用JS实现

    【渲染层】

      1、此外,将需要多次重绘的元素独立为render layer渲染层,如设置absolute,可以减少重绘范围

      2、对于一些进行动画的元素,使用硬件渲染,从而避免重绘和回流

    【DOM优化】

      1、缓存DOM

    const div = document.getElementById('div')

      由于查询DOM比较耗时,在同一个节点无需多次查询的情况下,可以缓存DOM

      2、减少DOM深度及DOM数量

      HTML 中标签元素越多,标签的层级越深,浏览器解析DOM并绘制到浏览器中所花的时间就越长,所以应尽可能保持 DOM 元素简洁和层级较少。

      3、批量操作DOM

      由于DOM操作比较耗时,且可能会造成回流,因此要避免频繁操作DOM,可以批量操作DOM,先用字符串拼接完毕,再用innerHTML更新DOM

      4、批量操作CSS样式

      通过切换class或者使用元素的style.csstext属性去批量操作元素样式

      5、在内存中操作DOM

      使用DocumentFragment对象,让DOM操作发生在内存中,而不是页面上

      6、DOM元素离线更新

      对DOM进行相关操作时,例、appendChild等都可以使用Document Fragment对象进行离线操作,带元素“组装”完成后再一次插入页面,或者使用display:none 对元素隐藏,在元素“消失”后进行相关操作

      7、DOM读写分离

      浏览器具有惰性渲染机制,连接多次修改DOM可能只触发浏览器的一次渲染。而如果修改DOM后,立即读取DOM。为了保证读取到正确的DOM值,会触发浏览器的一次渲染。因此,修改DOM的操作要与访问DOM分开进行

      8、事件代理

      事件代理是指将事件监听器注册在父级元素上,由于子元素的事件会通过事件冒泡的方式向上传播到父节点,因此,可以由父节点的监听函数统一处理多个子元素的事件

      利用事件代理,可以减少内存使用,提高性能及降低代码复杂度

      9、防抖和节流

      使用函数节流(throttle)或函数去抖(debounce),限制某一个方法的频繁触发

      10、及时清理环境

      及时消除对象引用,清除定时器,清除事件监听器,创建最小作用域变量,可以及时回收内存

    性能更好的API

      1、用对选择器

      选择器的性能排序如下所示,尽量选择性能更好的选择器

    id选择器(#myid)
    类选择器(.myclassname)
    标签选择器(div,h1,p)
    相邻选择器(h1+p)
    子选择器(ul > li)
    后代选择器(li a)
    通配符选择器(*)
    属性选择器(a[rel="external"])
    伪类选择器(a:hover,li:nth-child)

      2、使用requestAnimationFrame来替代setTimeout和setInterval

      希望在每一帧刚开始的时候对页面进行更改,目前只有使用 requestAnimationFrame 能够保证这一点。使用 setTimeout 或者 setInterval 来触发更新页面的函数,该函数可能在一帧的中间或者结束的时间点上调用,进而导致该帧后面需要进行的事情没有完成,引发丢帧

      3、使用IntersectionObserver来实现图片可视区域的懒加载

      传统的做法中,需要使用scroll事件,并调用getBoundingClientRect方法,来实现可视区域的判断,即使使用了函数节流,也会造成页面回流。使用IntersectionObserver,则没有上述问题

      4、使用web worker

      客户端javascript一个基本的特性是单线程:比如,浏览器无法同时运行两个事件处理程序,它也无法在一个事件处理程序运行的时候触发一个计时器。Web Worker是HTML5提供的一个javascript多线程解决方案,可以将一些大计算量的代码交由web Worker运行,从而避免阻塞用户界面,在执行复杂计算和数据处理时,这个API非常有用

      但是,使用一些新的API的同时,也要注意其浏览器兼容性

    webpack优化

    【打包公共代码】

      使用CommonsChunkPlugin插件,将公共模块拆出来,最终合成的文件能够在最开始的时候加载一次,便存到缓存中供后续使用。这会带来速度上的提升,因为浏览器会迅速将公共的代码从缓存中取出来,而不是每次访问一个新页面时,再去加载一个更大的文件

      webpack 4 将移除 CommonsChunkPlugin, 取而代之的是两个新的配置项 optimization.splitChunks 和 optimization.runtimeChunk

      通过设置 optimization.splitChunks.chunks: "all" 来启动默认的代码分割配置项

    【动态导入和按需加载】

      webpack提供了两种技术通过模块的内联函数调用来分离代码,优先选择的方式是,使用符合 ECMAScript 提案 的 import() 语法。第二种,则是使用 webpack 特定的 require.ensure

    【剔除无用代码】

      tree shaking 是一个术语,通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性,例如 import 和 export。这个术语和概念实际上是兴起于 ES2015 模块打包工具 rollup

      JS的tree shaking主要通过uglifyjs插件来完成,CSS的tree shaking主要通过purify CSS来实现的

    【长缓存优化】

      1、将hash替换为chunkhash,这样当chunk不变时,缓存依然有效

      2、使用Name而不是id

      每个 module.id 会基于默认的解析顺序(resolve order)进行增量。也就是说,当解析顺序发生变化,ID 也会随之改变

      下面来使用两个插件解决这个问题。第一个插件是 NamedModulesPlugin,将使用模块的路径,而不是数字标识符。虽然此插件有助于在开发过程中输出结果的可读性,然而执行时间会长一些。第二个选择是使用 HashedModuleIdsPlugin,推荐用于生产环境构建

    【公用代码内联】

      使用html-webpack-inline-chunk-plugin插件将mainfest.js内联到html文件中

    更多相关内容
  • Web前端性能优化WPO:性能优化的三个阶段!Web前端性能优化WPO,相信大多数前端同学都不会陌生,在各自所负责的站点页面中,也都会或多或少的有过一定的技术实践。可以说,这个领域并不缺乏成熟技术理论和技术牛人:...
  • Web前端性能优化WPO,相信大多数前端同学都不会陌生,在各自所负责的站点页面中,也都会或多或少的有过一定的技术实践。可以说,这个领域并不缺乏成熟技术理论和技术牛人:例如Yahoo的web站点性能优化黄金法则,以及...
  • 前端性能优化建议

    2021-01-18 17:35:25
    一说到性能优化,大家都不约而同的想起了雅虎的军规,2-5-8原则,3秒的首屏准则等等,这些规则在开发中虽然不是强制要求的,但是为了追求页面性能的完美体验,就不得不对代码进行修改和优化。 下面就与大家一同分享...
  • 前端性能优化

    2019-01-10 23:17:02
    web前端性能优化,非常适合技术到了一定瓶颈又有linux基础的伙伴们
  • 前端性能优化全面汇总图.zip
  • 前端性能优化与实践.zip
  • 让你页面速度飞起来 Web前端性能优化 让你页面速度飞起来 Web前端性能优化
  • 前端性能优化.pptx

    2019-07-31 13:52:39
    代码级别的优化,例如 Javascript中的DOM 操作优化、CSS选择符优化、图片优化以及 HTML结构优化等等来讲述前端性能优化的多个方式。 目录结构如下: 一、WEB性能优化相关理论 ...三、前端性能优化的方式
  • 之前看过Yahoo团队写的一篇关于网站性能优化的文章,文章是2010年左右写的,虽然有点老,但是很多方面还是很有借鉴意义的。关于css的性能优化,他提到了如下几点
  • 针对前端页面的一系列的优化, 前端性能优化原理与实践 · 小册
  • 移动Web前端性能优化方案的应用,申冬,陈萍,随着信息化技术快速发展,移动互联网得到迅猛普及,但是移动设备性能参差不齐,移动互联网速度普遍低下,所以移动Web前端性能优化
  • 减少请求数量 合并 如果不进行文件合并,有如下3个隐患 1、文件与文件之间有插入的上行请求,增加了N-1个网络延迟 2、受丢包问题影响更严重 3、经过代理服务器时可能会被断开 但是,文件合并本身也有自己的问题 ...
  • 前端性能优化:掌握解决方案.zip,前端性能优化:掌握解决方案.txt
  • 让你页面速度飞起来,Web前端性能优化。 让你页面速度飞起来,Web前端性能优化。百度云盘视频资料,下载直接看
  • 机票双程性能优化;机票双程性能优化;机票双程性能优化;机票双程性能优化;机票双程性能优化;机票双程性能优化;机票双程性能优化;机票双程性能优化;机票双程性能优化;机票双程性能优化;Part 2. Tools;开发/部署: qzz;...
  • web前端性能优化

    2018-06-16 08:31:27
    一本讲述web前端性能优化以及实践经验分享的书籍,非常不错,值得学习
  • 摘要:前端性能优化是一个很宽泛的概念,本书前面的部分也多多少少提到一些前端优化方法,这也是我们一直在关注的一件重要事情。配合各种方式、手段、辅助系统,前端优化的最终目的都是提升用户体验,改善页面性能,...
  • optimus 是一个采用 Clojure 开发的前端性能优化环中间件。 为你的静态资源提供: 产品环境:优化绑定包 开发环境:不做任何改变 特性: 合并 JavaScript 和 CSS 文件到一个包中 使用 UglifyJS 2 来...
  • 前端性能优化CDN

    2022-04-23 10:02:47
    CDN、前端优化

    就是将源站的静态资源(图片视频、html/css/js安装包apk等)缓存到位于不同区域的CDN节点服务器上,通常是终端网络提供商的机房,当用户访问网站时,会去离用户距离最近的CDN服务器上获取,从而避免了网络拥塞,提高了访问速度,缓解了源站压力。

    具体流程:

    1.用 户 输 入 要 访 问 的u r l ,浏 览 器 通 过 域名解析(本地DNS系统和CDN专用DNS服务器)得到CDN负载均衡设备的IP地址。

    2.浏览器向CDN负载均衡发出访问醺黑CDN负载均衡根据用户IP地址及URL,判断距离、有无内容、负载情况后返回用户所属区域的最佳cdn缓存服务器IP。

    3.用户向cdn缓存服务器发起请求,服务器响应用户请求。

    4.如果这台缓存服务器上没有用户想要的内容,再由缓存服务器向源服务器请求。

    5.缓存服务器从源服务器得到内容后,一方面在本地进行缓存,另一方面将获取的数据返回给客户端

    在这里插入图片描述

    展开全文
  • 前端性能优化及技巧

    2021-01-19 15:43:21
     在行业内有句话不知道大家有没有听说过,‘懂得性能优化并且研究过jquery源代码的人和不懂得性能优化写出来的代码对于性能的消耗会相差上百倍甚至上千倍’,现在的javascript属于从ECMAscript3到ECMAscript5以及...
  • 前端性能优化方法(一)

    千次阅读 2021-12-12 19:24:44
    在打开一个网页时,我们希望网页显示出来的越快越好。那么我们怎样做才能优化页面性能,提高页面加载速度呢——前端性能优化方法

    在打开一个网页时,我们希望网页显示出来的越快越好。那么我们怎样做才能优化页面性能,提高页面加载速度呢?

    前端性能优化

    页面加载缓慢的原因

    浏览器加载缓慢的原因,可能由以下几种因素造成:js的阻塞、html代码的多少、元素的css样式造成的重排和重绘等
    在这里插入图片描述
    浏览器的所有数据都来自服务端,服务端需要计算客户端请求的数据(数据库数据的查询,传输等),都是需要消耗时间的。

    所以,不仅需要优化客户端,还要优化服务端,这样页面的性能才能得到提升。

    浏览器部分

    (1)网络层面

    • 过多的HTTP请求

    打开一个网页的时候,后台程序的响应并不需要太多时间,等待的时间主要花费在下载网页元素上了,即 HTML、CSS、JavaScript、Flash、图片等。据统计,每增加一个元素,网页载入的时间就会增加25-40毫秒(具体取决于用户的带宽情况)。

    • 资源访问带宽小
    • 网页元素(图片、视频、样式)太大

    (2)浏览器渲染层面

    • 渲染阻塞(jS阻塞与CSS阻塞)
    • 重复渲染(频繁操作元素,造成的重排重绘)
    • DNS解析(DNS解析找出IP地址越快,响应的越快)

    (3)服务端层面

    • 硬件配置低:这个是双向的
    • 服务器软件,比如防火墙、内网策略等
    • 未对Nginx这类web服务器进行配置优化
    • CPU占满,数据库未优化
    • 代码问题,代码效率,代码性能
    • 包含了过多的分析类工具

    代码部分

    • 构建层面

      未对代码进行打包、压缩、兼容性优化(webpack打包优化)

      未合并重复的请求、代码

    • 编码层面

      错误的编排JS与CSS

      for循环,迭代、同步、重定向、阻塞请求(JS代码阻塞)

      未删除重复、无用的代码

      未对逻辑业务复杂的代码进行重构,了解设计模式,对业务进行梳理

    • 机制(SSR,英文Server Side Render:服务器端渲染)

      未加入Async异步机制

      未思考页面加载、用户体验(可以使用页面懒加载,快要滚动到页面的时候,图片等显示出来)

    • 规范

      CSS规范

      HTML规范/HTML5规范

      Airbnb代码规范

    优化原则

    1、尽量减少HTTP请求

    一个正常的HTTP请求的流程简述:如在浏览器输入“www.xxx.com”并按下回车键,浏览器再与这个URL所指向的服务器建立连接,然后浏览器才能向服务器发送请求信息,服务器在接收到请求信息后再返回相应的信息,浏览器接收到来自服务器的应答信息后,对这些数据解释执行。

    而当我们请求的网页文件中有很多图片、CSS、JS甚至音乐等信息时,将会频繁的与服务器建立连接与释放连接,这必定会造成资源的浪费,且每个HTTP都会对服务器和浏览器产生性能负担。

    方法:

    (1)组合文件、优化图片,使用sprites设计风格:将背景图片合并成一个文件,通过background-imagebackground-position控制显示;

    使用CSS sprites在网站上经常使用的图像创建模板,如按钮和图标。CSS sprites将你的图像组合成一个大图像,一次加载所有(这意味着更少的HTTP请求),然后只显示你想要显示的部分。这意味着你通过不让用户等待加载多个图像来节省加载时间。

    (2)内联图片(data URI scheme)

    <img src="http://www.edu.cn/yinghua.png">
    

    上述代码中,图片是独立于HTML而存在于另一个URL的,这就意味着要多一次HTTP请求。

    内联图片写法:

    <img src="data:image/png;base64,iVAGRw0KGDCFGNSUhEUgACBBQAVGAD CAIATYJ7ljmRGGAAGElEVQQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPACCCTElFTEVBQmGA" />
    
    • 说明:

    ​ image/png - 数据类型名称

    ​ base64 - 数据的编码方法

    ​ iVAGRw0KG… - 编码后的数据

    ​ : ; , - data URI scheme 指定的分隔符号

    2、资源压缩与合并

    主要包括:html压缩、css压缩、js的压缩和混乱、文件合并。

    (1)html压缩

    压缩在文本文件中有意义,但是在HTML中不显示的字符(空格,制表符,换行符等),还有一些其他意义的字符,如HTML注释也可以被压缩。

    方法:

    • 使用在线网站进行压缩
    • node.js提供了html-minifier工具
    • 后端模板引擎渲染压缩

    (2)css代码压缩

    即无效代码删除和css语义合并。

    方法:

    • 使用在线网站进行压缩(开发过程中一般不用)
    • 使用html-minifier工具
    • 使用clean-css对css进行压缩
      在这里插入图片描述
      (3)js的压缩和混乱

    主要包括:无效字符的删除、剔除注释、代码语义化的缩减和优化、代码保护(代码逻辑变得混乱,从而降低代码的可读性)

    方法:

    • 使用在线网站进行压缩
    • 使用html-minifier工具
    • 使用uglifyjs2对js进行压缩

    (4)文件合并
    在这里插入图片描述

    从图中可以看出,keep-alive方式可能会出现状况,经过代理服务器时可能会被断开,也就是不能一直保持keep-alive状态,并且伴有网络延迟,受丢包问题影响严重。

    压缩合并css和js可以减少网站http请求的次数,但文件合并可能会带来首屏渲染和缓存失效问题。处理——公共库合并和不同页面的合并。

    (5)其他方法

    • 删除重复的脚本
    • 使用合适大小的图片,而不是使用过大的图片然后设置宽高
    • 减少DOM元素的数量

    3、使用内容传送网络CDN

    内容分发网络(CDN),也称为内容传送网络,是用于分发传送内容的负载的服务器网络。从本质上讲,网站的副本存储在多个地理位置不同的数据中心,以便用户可以更快,更可靠地访问你的网站。(选择距离用户最近的服务器,给用户提供静态资源的访问)

    可以使用公共CDN网络上的资源,使用CDN加速,例如:

    //google
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/juery.min.js"></script>
    

    4、避免空src或者href值

    空的src和href都会导致多余的HTTP请求,虽然不影响加载时间,但会对服务器产生不必要的流量和压力。浏览器仍然会向服务器发起一个HTTP请求。

    有两种形式:

    1、html形式:

    <img src="">
    <a href=""></a>
    

    2、JavaScript的形式:

    var img=new Image();
    img.src="";
    

    解决办法:

    1、删除空的src和href标签;

    2、给a标签的href属性连接到实际的页面:

    例如:

    <a href="#"></a>
    <a href="void(0)" ></a> //阻止默认行为的发生
    

    3、禁止跳转,添加cursor:pointer样式(保留了点击小手的样式,又不会跳转)

    <style>
        a{
            cursor:pointer
        }
    </style>
    <a>点击</a>
    

    4、给a标签创建一个带有描述信息的href属性,并监控click事件调用preventDefault()函数

    <a href="" id="my_id">点击</a>
    <script>
    	$("#my_id").click(function(e){
            e.preventDefault();   //取消单击事件的默认动作以阻止链接的跳转
        })
    </script>
    
    展开全文
  • 前端性能优化指南

    2017-03-20 09:38:08
    前端性能优化指南

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 191,491
精华内容 76,596
关键字:

前端性能优化