前言 最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作.本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动.因为本文涉及了很多很多基础,是我自己学习记录的一个过程,如果上面列出的知识点都了然于胸了,就可以不必往下看了. 滚动优化的由来 滚动优化其实也不仅仅指滚动(scroll 事件),还包括了例如 resize 这类会频繁触发的事件.简单的看看…

最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动.因为本文涉及了很多很多基础,可以对照上面的知识点,选择性跳到相应地方阅读.    滚动优化的由来 滚动优化其实也不仅仅指滚动(scroll 事件),还包括了例如 resize 这类会频繁触发的事件.简单的看看: var i = 0; wind…

本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动.因为本文涉及了很多很多基础,可以对照上面的知识点,选择性跳到相应地方阅读.    滚动优化的由来 滚动优化其实也不仅仅指滚动(scroll 事件),还包括了例如 resize 这类会频繁触发的事件.简单的看看: 1 2 3 4 var i = 0; window.addEventListener('scroll',function(){   …

最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动.因为本文涉及了很多很多基础,可以对照上面的知识点,选择性跳到相应地方阅读. 滚动优化的由来 滚动优化其实也不仅仅指滚动(scroll 事件),还包括了例如 resize 这类会频繁触发的事件.简单的看看:     1 2 3 4 var i…

前面的话   当我们通过某些行为(点击.移动或滚动)触发页面进行大面积绘制的时候,浏览器往往是没有准备的,只能被动使用CPU去计算与重绘,由于没有事先准备,应付渲染够呛,于是掉帧卡顿.而CSS属性will-change为web开发者提供了一种告知浏览器该元素会有哪些变化的方法,这样浏览器可以在元素属性真正发生变化之前提前做好对应的优化准备工作.这种优化可以将一部分复杂的计算工作提前准备好,使页面的反应更为快速灵敏.本文将介绍CSS属性will-change 准备知识   GPU是图形处理器,专门…

内容方面: 1.减少 HTTP 请求 (Make Fewer HTTP Requests) 2.减少 DOM 元素数量 (Reduce the Number of DOM Elements) 3.使得 Ajax 可缓存 (Make Ajax Cacheable) 针对CSS: 1.把 CSS 放到代码页上端 (Put Stylesheets at the Top) 2.从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External) 3.精简…

一.DOM操作影响页面性能的核心问题 通过js操作DOM的代价很高,影响页面性能的主要问题有如下几点: 访问和修改DOM元素 修改DOM元素的样式,导致重绘或重排 通过对DOM元素的事件处理,完成与用户的交互功能 DOM的修改会导致重绘和重排. 重绘是指一些样式的修改,元素的位置和大小都没有改变: 重排是指元素的位置或尺寸发生了变化,浏览器需要重新计算渲染树,而新的渲染树建立后,浏览器会重新绘制受影响的元素. 页面重绘的速度要比页面重排的速度快,在页面交互中要尽量避免页面的重排操作.浏览器不会在…

作者:gxt19940130 原文:https://feclub.cn/post/content/dom 一.DOM操作影响页面性能的核心问题 通过js操作DOM的代价很高,影响页面性能的主要问题有如下几点: 访问和修改DOM元素 修改DOM元素的样式,导致重绘或重排 通过对DOM元素的事件处理,完成与用户的交互功能 DOM的修改会导致重绘和重排. 重绘是指一些样式的修改,元素的位置和大小都没有改变: 重排是指元素的位置或尺寸发生了变化,浏览器需要重新计算渲染树,而新的渲染树建立后,浏览器会重新…

加载html中的静态资源 其中,加载静态资源的过程,一般为浏览器根据DNS服务器得到域名的IP地址,然后向这个IP的机器发送http请求,服务器收到.处理并返回http请求,浏览器得到返回http请求. 浏览器渲染页面的过程 根据HTML 结构生成DOM Tree 根据CSS 生成 CSSOM 将DOM和CSSOM结合生成RenderTree 浏览器根据RenderTree开始渲染和展示 遇到<script> 时,会执行并阻塞渲染 window.onload // 页面的全部资源全部渲染完 d…

一.上文回顾 上回我们主要从图片的合并.压缩等方面介绍前端性能优化问题(详见Java Web 前端高性能优化(一)) 本次我们主要从图像BASE64 编码.GZIP压缩.懒加载与预加载以及 OneAPM Browser Insight 的定位分析功能四个方面介绍前端优化方法 二.图像的 BASE64 编码 不管如何,图片的下载始终都要向服务器发出请求,要是图片的下载不用向服务器发出请求,而可以随着 HTML 的下载同时下载到本地那就太好了.而目前,浏览器已经支持了该特性,我们可以将图片数据编码成…

前言 上周我与阿里的宇果有一次技术的交流,然后对天猫H5站点做了一些浅层次的分析,后面点时间基本天天都会有联系,中途聊了一些技术细节.聊了双方团队在干什么,最后聊到了前端优化.因为我本身参与了几次携程H5站点的优化,在这方面有一些心得,但是与宇果交流的过程中发现我们在优化的时候忽略了一些细节. 携程做优化的时候整个重心基本放到了尺寸的缩减,和宇果的交流过程中他提出了渲染优化,其实渲染优化无非是减少回流,对于减少回流我们也有一些概念,我一直认为这个事情应该业务开发关注而不是框架关注(事实上框架也无…

一.先来看一个例子 下面这个例子来自某外文,我这里简单转述下. 视差滚动现在不是挺流行的嘛,然后Chris Ruppel当其使用background-attachment: fixed实现背景图片不随滚动条滚动而滚动效果的时候,发现,页面的绘制性能掉到了每秒30帧,这种帧频人眼已经可以感觉到一定的顿挫感了. 后来,参考一些其他同事还是同行的建议,做了一番优化,然后,页面的渲染性能—— 这优化之前完全就是便秘,屎拉不出来的感觉:而优化之后,完全就是一泻千里,裤子都来不及脱的感觉. 一兄得便秘,在厕…

原文:[原创]构建高性能ASP.NET站点之二 优化HTTP请求(前端) 构建高性能ASP.NET站点之二 优化HTTP请求(前端) 前言: 这段时间比较的忙,文章写不是很勤,希望大家谅解. 上一篇文章主要讲述了请求一个页面的过程,同时也提出了在这个过程中的一些优化点,本篇就开始细化页面的请求过程并且提出优化的方案.同时,在上篇文章中,不少朋友也提出了一些问题,在本篇中也对这些问题给出了回答! 系列文章链接: 构建高性能ASP.NET站点 开篇 构建高性能ASP.NET站点之一 剖析页面的处理过…

一.先来看一个例子 视差滚动现在不是挺流行的嘛,然后Chris Ruppel当其使用background-attachment: fixed实现背景图片不随滚动条滚动而滚动效果的时候,发现,页面的绘制性能掉到了每秒30帧,这种帧频人眼已经可以感觉到一定的顿挫感了. 后来,参考一些其他同事还是同行的建议,做了一番优化,然后,页面的渲染性能—— 大家肯定会好奇,这到底施了什么魔法,可以让渲染提升如此之显著.3个小tips: background-attachment: fixed改成了positio…

加载和执行 JavaScript是单线程,所以JavaScript的加载和执行是从上下文加载执行完一个继续加载执行下一个文件会阻塞页面资源的加载,所以一般情况下JavaScript文件放在body标签内底部,很多后端开发人员放在body标签外下面,这样做不好的地方有两点:1.不规范 2.可能会造成js获取不到页面元素而导致报错.而放在body标签内底部可以去保js执行前有页面渲染完成. js... //正确 js... 合并脚本每个<script>标签初始化下载都会阻塞页面渲染,所以减少页面的…

SEO要点:1.语义化html标签,用合适的标签嵌套合适的内容,不可过分依赖div,对浏览器更友善就能更容易被抓取.2.重要的内容html代码放在前面/左边.搜索引擎爬虫是从左往右,从上到下进行抓取的,利用布局来实现重要的代码在上面3.重要内容要写在html架构里面,蜘蛛不会抓取js的内容,4.尽量减少使用iframe,因为蜘蛛不会抓取iframe的内容.5.为图片img加上alt属性,加了alt就不必加title了,避免搜索引擎认为我们恶意优化.alt能让图片没加载时都能有文字提示.6.需要强…

前言:好久没翻阅我的gmail邮箱了,午休时就打开看了一下,看到InfoQ推荐的一篇名为“Javascript高性能动画与页面渲染”文章,粗略的看了一下,很赞!讲的很详细,对好些细节讲的都很好,很通俗易懂.so……笔记诞生 1.fps -frame per second 帧 页面是每一帧变化都是系统绘制出来的(GPU或者CPU).但这种绘制又和PC游戏的绘制不同,它的最高绘制频率受限于显示器的刷新频率(而非显卡),所以大多数情况下最高的绘制频率只能是每秒60帧(frame per second,…

Chris Ruppel当其使用background-attachment: fixed实现背景图片不随滚动条滚动而滚动效果的时候, 大家肯定会好奇,这到底施了什么魔法,可以让渲染提升如此之显著.3个小tips: 1)background-attachment:fixed改成了position: fixed,因为前面这玩意滚动实时计算重绘: 2)背景图片所在的元素替换为::before伪元素: 3)使用了CSS3 will-change加速: 相关代码如下(假设类名是front): 二.CSS3…

在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再加载更多的图片.这种加载图片的方式叫做图片懒加载,又叫做按需加载或图片的延时加载.这样做的好处是:1.可以加快页面首屏渲染的速度:2.节约用户的流量. 一.实现思路 1.图片img标签自定义一个属性data-src来存放真实的地址. 2.当滚动页面时,检查所有的img标签,判断是否出现在事业中,如果…

HTML5是一种最新发布网页构架的普遍模型,是构建对程序.对用户都更有价值的数据驱动的Web的前端技术框架,它的价值在于融合CSS/javaScript/flash等众多前端开发技术,更多的体现在对交互的理解和视觉设计的还原上. HTML5框架可以提升网站的访问速度,通过优化前端将响应时间加快,使用户的等待时间减少,所谓前端是指在客户端通过浏览器发送了一个请求,除去后台系 统用户请求.执行数据查询并对结果进行组织所需要处理消耗的时间,在涌现的新技术中,JavaScript和一套新的API纯脚本技…

fixed元素,常见网站右侧出现一个返回顶部的按钮,滚动的时候,会发现返回顶部这个区域在不停的进行重绘,而返回顶部是position:fixed定位的.这也解释了为什么fixed定位是最耗性能的属性之一 如何查看元素在不停的重绘呢?Chrome渲染分析工具 Rendering: 如上图,按F12调出开发者工具,然后按“ESC”(按2次)  调出Rendering界面. 1.Show paint rectangles 显示绘制矩形 2.Show composited layer borders 显…

个人在项目中用到的页面性能优化的方式总结. 一.均衡页面加载文件的大小和数量 1.项目中小图片图片转base64,通过工具如webpack进行图片压缩,文件进行压缩混淆等 2.vue-router 懒加载,异步路由 3.第三方依赖按需加载,比如使用element-ui框架,但是里面的组件只用到了其中一部分,可以单独建一个引入element组件的文件,在里面引入我们项目中需要的组件,然后vue.use它 4.通过webpack进行处理,有一个externals属性,可以在里面设置不需要打包的文件,…

前面的话 前面两篇博文分别介绍过偏移大小.客户区大小.本文介绍元素尺寸中内容最多的一部分——滚动scroll 滚动宽高 scrollHeight scrollHeight表示元素的总高度,包括由于溢出而无法展示在网页的不可见部分 scrollWidth scrollWidth表示元素的总宽度,包括由于溢出而无法展示在网页的不可见部分 [注意]IE7-浏览器返回值是不准确的 [1]没有滚动条时,scrollHeight与clientHeight属性结果相等,scrollWidth与clientWi…

网上找的帖子大多是直接在onload中请求数据.而我想实现的是点击按钮,然后请求服务器,接着返回数据,前端页面渲染.所以搞了挺久的,在此记录一下. 请求是按照微信官方给出的,wx.request 在这里,我的逻辑是:点击按钮--->根据绑定的事情注册函数-->发起微信请求-->判断是否返回数据,成功返回数据则显示请求成功.-->返回数据到前端页面进行渲染 废话不多说,直接上代码: 一.前端页面代码: <view class="container2">…

来源:GBin1.com 回 想一下,以前我们不得不花费大量时间去优化页面内容(图片.CSS等等),如今用户有更快速的互联网链接,我们似乎能够使用更大的图像或更大的闪 存文件,里面包含的有视频或者图片.然而,随着移动开发的兴起,我们又回到了过去的窘状.网站优化是十分重要的,需要下载的内容少,反应速度快,就能使我 们加载应用程序更快速. 图片:控制在合适的尺寸大小 很多时候我们在不同的网站使用同样的图像,例如一个网上商店,所有产品 都 有一个概览图片.打个比方,有三个页面描述产品,第一个页面显示产…

随着移动互联网的发展,我们越发要关注移动页面的性能优化,今天跟大家谈谈这方面的事情. 首先,为什么要最移动页面进行优化? 纵观目前移动网络的现状,移动页面布局越来越复杂,效果越来越炫,直接导致了文件越来越大,下载和运行速度越来越低,而速度低会造成不良影响,据统计:  71%的用户期望移动页面跟pc页面一样快,74%的用户能容忍的响应时间为5秒,所以我们必须保证移动端页面有足够的速度. 移动页面的速度跟三个因素有关,分别是:移动网络带宽速度,设备性能(CPU,GPU,浏览器),页面本身. 目前主流…

1. 从输入url到得到html的详细过程 1.1 加载资源的形式      输入 URL 或跳转页面 加载 html 1.2 加载一个资源的过程 浏览器根据DNS服务器得到域名的IP地址 向这个IP的机器发送http请求 服务器收到后 处理并返回 http请求 浏览器得到返回内容 1.3 浏览器渲染页面的过程 根据 HTML 结构生成 DOM Tree 根据 CSS 生成 CSSOM 将 DOM 和 CSSOM 整合形成 RenderTree 渲染树 浏览器根据 渲染树 开始渲染 遇到 <sc…

文章同步到github<Webkit技术内幕>之页面渲染过程 最近拜读了传说中的<Webkit技术内幕>一书,有很大收获,尤其是对页面渲染有了较深的认识.由于功力有限,而且书中设计到较多的底层也无法理解,所以本文主要整理和分享一下自己理解的基于Webkit内核浏览器的页面渲染的整体过程,不做深入介绍(也做不了深入介绍). 浏览器内核 浏览器之所以能呈现出更重页面,正是由于浏览器内核的存在,也被称为渲染引擎,主要作用就是,也就是能把HTML/CSS/JavaScript文本其相关的资…

web前端页面性能优化 网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢? 其实应该是属于功能的表现.并且影响用户访问体验的绝大部分来自前端页面.网站前端的用户体验决定了用户是否想要去使用网站的功能,而网站的功 能决定了用户是否会一票否决前端体验.如果前端优化得好,他不仅可以为企业节约成本,而且因为增强的用户体验,还给公司带来更多的用户.那么我 们应该如何对我们前端的页面进行性能优化呢? 浏览器访问优化 浏览器请求…

引言 在开始介绍今天的主角 CSS Containment 之前,我们需要了解一些前置知识回流和重绘,方便我们理解以及应用的场景. 简单回忆下回流和重绘 回流(Reflow):当浏览器必须重新处理和绘制部分或全部页面时,回流就会发生,例如元素的规模尺寸,布局,隐藏等改变而需要重新构建. 重绘(Repaint):当改变元素的部分属性而不影响布局时,重绘就会发生.例如改变元素的背景颜色.字体颜色等. 回流会造成什么 Reflows are very expensive in terms of per…