页面优化

最新推荐文章于 2022-09-02 18:22:29 发布

tamia_nice

最新推荐文章于 2022-09-02 18:22:29 发布

阅读量262

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_47144417/article/details/116081813

版权

vue 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

一、避免页面卡顿

页面卡顿：当拖动页面或者滚动页面的时候一卡一卡的，看起来不连贯，我们就说页面卡了。

1.失帧和帧率FPS

如果你家里买了电视盒的话，在设置里面应该改会有一个输出设置    1080P 60HZ  1920*1080
60HZ帧率FPS   即一秒60帧，欢聚话说一秒钟的动画是由60福静态图片连在一起形成的。
所以失帧就是1s钟没有60个画面，看起来不连贯。这可能是因为在渲染某些帧所花费的时间较长，导致停留在这些帧的时间较长，所以画面卡顿了。

2.页面渲染流程

60fps就是要求1帧的时间为：1s/= 16.67ms 。实际上，浏览器的内核自身职称体系运行也需要小号一些时间，所以留给我们的差不多只有10ms。
10ms内做的事情：
JavaScript -- Style --Layout -- Paint -- Composite
  首先js做了些逻辑，还触发了样式变化，style把应用的样式规则计算好之后，把影响到到页面元素的进项重新布局（叫做Layout），再把它画到内存的一个画布里面Paint成了像素，最后把这个画布树信心到屏幕上去，叫做Composite，形成一帧。
  上面的每一步并不一定都会执行
  例如：
  1.js只做一些运算，并未操作dom或者改变css
  2.style只改变color/background-color等不需要重新layout的属性。
  3.style只改变了transform属性，在blink和edge浏览器里面不需要layout和paint

3.掉帧分析

在这里插入图片描述

4.其他优化方法

1.减少layout
尽量减少页面重绘。能用transform就不要使用position/width/height做动画。
2.简化dom结构
使用flex比使用float在重绘方面有优势。

二、加快页面打开速度

1.减少渲染堵塞

1.避免head标签js堵塞所有放在head标签里的css和js都会堵塞渲染。如果这些css和js需要分析很久的画，那页面就空白了。两中解决办法： 1.把script标签放到body后面给script加defer属性，defer是HTML5新增的属性，一旦script是defer延迟的，那么这个script将会异步加载，但不会马上执行

<head>
<script  src="defer.js"  defer></script>
</head>

2.减少head标签里的css资源
由于css必须放在head标签里面，因为如果放在body里面，一旦加载好后，又会对layout好的dom进行重绘，样式可能发生闪烁。但是放在head又会在成堵塞页面渲染，若要加载很久，页面就会保持空白状态。所以尽可能减少css的代码量。

2.优化图片

1.使用响应式图片

响应式srcset

会加载两张图片先加载srcset，再加载src
如果不些src 则不会加载两张图片但兼容性没那么好

<img srcset="photo_350.jpg 1x,photo_640.jpg 2x" src="photo_350.jpg 1x" alt="">

使用响应式图片响应式picture

 <picture>
   <source srcset="banner_w1000.jpg" media="(min-width:801px)"> 
   <source srcset="banner_w800.jpg" media="(max-width:800px)"> 
   <img src="banner_w800.jpg" alt="">
   <source>
 </picture>

这样写回加载source里面的一张图片。但是假如是js动态插进去的，回加载两张只有写再html里面，初始化页面的时候才加载一张。

2.延迟加载图片

 <picture>
   <source data-srcset="banner_w350.jpg 1x,banner_w640.jpg 2x " media="(min-width:801px)"> 
   <img data-src="banner_w350.jpg" alt="" src="about:blank">
   <!-- src="about:blank   不会因为不存在的地址报错 -->
   <source>
 </picture>

3.压缩和缓存

1.gzip压缩
gzip压缩大大减少文件体积
如何开启压缩
只要再Nginx的配置里面添加如下代码

 server {
   gzip on ;
   gzip types    text/plain  application/javascript   application/x-javascript  text/javascript text/html  text/css;

 }

2.nginx.conf设定缓存时间
nginx.conf文件中

location ~* \.(jpg | jpeg | png | gif | webp)$ {
expires 30d;
}
location ~* \.(css | js)$ {
expires 7d;
}

3.使用etag
nginx.conf etag文件中

etag on

升级到HTTP/2
nginx.conf etag文件中

llisten  443 ssl http2 ;

3.其他优化方案

1.DNS预读取

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

提前解析DNS 不会堵塞页面渲染。这样可以缩短资源加载时间

2.HTML优化

1.移除注释，删除行缩进

3.代码优化

HTML别嵌套太多层，否则加重页面layout的压力
css的选择器别写太复杂，不然匹配的计算量会比较大
js别乱用闭包，闭包会加深作用域链，加长变量查找时间

三、增强用户效果

1.加loading效果

1.loading效果
2.进度条效果

2.加过渡动画效果

3.单击和输入

给按钮做一个有被按下去的效果 padding-top: 3px;把文字稍微挤下去再调深背景色

button {
  /* //普通蓝色 */
  background-color: #249bff;  
}

button:active {
  /* //更深蓝色 */
  padding-top: 3px;
  background-color: #3491df;
}

手机端会弹出不同的键盘方便输入

<input type="email">
<input type="number">
<input type="tel">

4.记住用户使用习惯

5.避免页面闪动

 由于js是放在外联的，导致它的加载要慢于dom的渲染，所以中间会有一个间隔
 还有以恶搞是容器的高度是图片成起来的，如果图片没加载好，容器就会塌，等图片加载出来后再把下面的内容挤下去。
 1.js内联引入
 2.给图片容器加高度

tamia_nice

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
页面优化

一、避免页面卡顿页面卡顿：当拖动页面或者滚动页面的时候一卡一卡的，看起来不连贯，我们就说页面卡了。1.失帧和帧率FPS如果你家里买了电视盒的话，在设置里面应该改会有一个输出设置 1080P 60HZ 1920*108060HZ帧率FPS 即一秒60帧，欢聚话说一秒钟的动画是由60福静态图片连在一起形成的。所以失帧就是1s钟没有60个画面，看起来不连贯。这可能是因为在渲染某些帧所花费的时间较长，导致停留在这些帧的时间较长，所以画面卡顿了。2.页面渲染流程60fps就是要求1帧的时间
复制链接

扫一扫