网站开发合同支付,广东品牌网站设计专家,免费做情网站,h5和手机网站避免页面卡顿
怎么衡量页面卡顿的情况呢#xff1f; 失帧和帧率FPS 60Hz就是帧率fps#xff0c;即一秒钟60帧#xff0c;换句话说#xff0c;一秒钟的动画是由60幅静态图片连在一起形成的。 卡了#xff0c;失帧了#xff0c;或者掉帧了#xff0c;一秒钟没有60个画面 失帧和帧率FPS 60Hz就是帧率fps即一秒钟60帧换句话说一秒钟的动画是由60幅静态图片连在一起形成的。 卡了失帧了或者掉帧了一秒钟没有60个画面看起来不连贯了。这可能是因为在渲染某些帧所花的时间比较长导致停留在这些帧的时间比较长所以画面停顿了。 页面渲染流程 60fps就要求1帧的时间为1s/6016.67ms。浏览器显示页面的时候要处理JS逻辑还要做渲染每个执行片段不能超过16.67ms。实际上浏览器内核自身支撑体系运行也需要消耗一些时间所以留给我们的差不多只有10ms。 渲染流程JavaScrip-Style-Layout-Paint-Composite 首先用JS做了些逻辑还触发了样式变化Style把应用的样式规则计算好之后把影响到的页面元素进行重新布局叫作Layout再把它画到内存的一个画布里面paint成了像素最后把这个画布刷新到屏幕上去叫作Composite形成一帧。 掉帧分析 一般最长的开销是JS脚本并且可能JS里面做了很多DOM操作或者改了很多CSS导致Rendering的时间也很长。 所以可观察这些JS执行的具体开销包括调用的函数栈及每个函数的执行时间。 拆分代码段 把代码拆分成一个个单元每个单元就是一个task任务每一帧之前去取一个task执行并且控制每个task的执行时间都在10ms以内。 减少layout 由于layout是比较耗时的操作所以要尽量减少页面重绘。例如能用transform就不要使用position/width/height做动画另外要减少layout的影响范围。 简化DOM结构 当DOM结构越复杂时需要重绘的元素也就越多。所以DOM应该保持简单特别是那些需要做动画的或者要监听scroll/mousemove事件的。另外使用flex比使用float在重绘方面会有优势flex需要重绘的元素会比float少使用flex布局做动画会更加流畅。
加快页面打开速度
页面的打开速度对网站的优化有极大的意义那么如何评价一个页面打开得快不快可以用两个指标描述一个是ready的时间另一个是load的时间。
减少渲染堵塞 避免head标签JS堵塞 所有放在head标签里的CSS和JS都会堵塞渲染。如果这些CSS和JS需要加载解析很久的话那么页面就空白了。 有两种解决办法 **第一种**把script放到body后面这也是很多网站采取的方法 **第二种**给script加defer的属性defer是HTML5新增的属性。一旦script是defer延迟的那么这个script将会异步加载但不会马上执行会在ready state change变为Interactive后按顺序依次执行。 减少head标签里的CSS资源 由于CSS必须要放在head标签里面因为如果放在body里面一旦加载好之后又会对layout好的DOM进行重绘样式可能会发生闪烁。 1不要放太多base64放在CSS里面 放太多base64放在CSS里面会导致CSS极速膨胀把一张3k的图片转成base64体积将变成4k。 2把CSS写成内联的 这样虽然对缓存不利但是对于首次加载是有很大的作用的。 如果把CSS放到CDN上为了得到这个CSS它首先需要进行域名解析然后建立http/https连接其次才是下载。为了加载这个资源DNS查找花掉了0.5s建立TCP连接花掉了0.95s建立https连接花掉了0.6s从发送请求到收到第一个字节的数据又花掉了1.27s总的时间接近3s。
优化图片 使用响应式图片 响应式图片的优点是浏览器能够根据屏幕大小、设备像素比DPR、横竖屏自动加载合适的图片。 DPR1加载1倍图DPR2加载2倍图 延迟加载图片 图片往往是占据最多流量和带宽的资源。如果一口气全部放出来那么页面的loaded时间将会较长并且由于并行加载资源数是有限的图片太多会导致放在body后面的JS解析比较慢页面将长时间处于不可交互状态。
压缩和缓存 gzip压缩 Cache-Control 使用etag 所谓etag就是对文件做的一个校验和第一次访问的时候响应头里面返回这个文件的etag浏览器第二次访问的时候把etag带上Nginx根据这个etag和新渲染的文件计算出的etag进行比较如果相等则返回304。 如果网站的信息特别重要连很小的概率如百万分之一都不允许文件大小相等那么就不要使用etag了。 使用etag的代价是增加了服务器的计算负担特别是当文件比较大时。
升级到HTTP/2
HTTP/2的优点在于对于一个域只建立一次TCP连接使用多路复用传输多个资源这样就不用使用诸如雪碧图、合并JS/CSS文件等技术减少请求数。
还能进行报文头压缩使用二进制传输和Server Push提前把资源推送给浏览器不用等HTML解析了才能触发加载。
其他优化方案 DNS预读取 一个网站很可能要加载7、8个域的资源第一次打开时要做7/8次的DNS查找这个时间是非常可观的。方法是在head标签里面写上几个link标签对以上几个网站提前解析DNS由于它使并行的不会堵塞页面渲染。 HTML优化 例如把注释remove掉把行前缩进删掉 代码优化 例如HTML别嵌套太多层否则加重页面layout的压力CSS的选择器别写太复杂不然匹配的计算量会比较大对JS别滥用闭包闭包会加深作用域链加长变量查找的时间。
增强用户体验
加Loading效果
加过渡动画效果
单击和输入
用户单击按钮提交的时候可以给按钮做一个效果使用HTML5的input自动补全根据当前输入框的特点自动补全
记住用户使用习惯 记住位置 记住用户的输入信息 哪些需要被记住哪些不需要被记住可能根据不同的使用场景如果记住了一些不必要的信息可能会适得其反。
避免页面抖动
总结
总之呢页面优化都是一点一点细节的优化增加用户的体验也就是提高我们的收益最大化。
