作为前端你可能要知道如何加快页面渲染速度的几点知识

1. content-visibility

content-visibility:auto

// 一般来说，大多数Web应用都有复杂的UI元素，它的扩展范围超出了用户在浏览器视图中看到的内容。在这种情况下，我们可以使用内容可见性（ content-visibility ）来跳过屏幕外内容的渲染。如果你有大量的离屏内容，这将大大减少页面渲染时间。
// 这个功能是最新增加的功能之一，也是对提高渲染性能影响最大的功能之一。虽然 content-visibility 接受几个值，但我们可以在元素上使用 content-visibility: auto; 来获得直接的性能提升。
// 性能可提升将近7倍


// 注意：如果你使用了该属性，页面无法正常滚动那你不妨试试下面这个配套的属性：
contain-intrinsic-size: 2000px  // 它指定了一个元素的自然大小，因此，元素将以给定的高度而不是0px呈现。
     

2. will-change

// 在页面上使用动画效果是一个前端必备的技能之一，同时要知道这些动画是和其他元素一起定期渲染的，今天就来说说这个主角 will-change ，他可以让浏览器使用GPU来优化其中的一些动画操作，将识别 will-change 属性并优化未来与不透明度相关的变化

//直观的属性，会让动画FPS从50 直接飙升到 120FPS。
// FPS是什么? 玩游戏的人会知道，如果不知道麻烦自行百度
// 注意： 如果给非动画元素使用该属性则会造成资源浪费。

// css
.box{
  will-change:opacity;
}

// html  父元素使用给属性，子元素来表示动画，
这里是一些动画元素

3. 减少渲染阻止时间

// 通常我们引入css的时候会这样做；

// 如果项目不大，大可使用该引入方法，反之优化的方法则需要通过分解方式来引入css样式表，详情如下：





// 根据样式因素分解样式表可以减少渲染阻止时间。

4. 根据被引入的js文件来加快页面的渲染

// 一般情况下我们在页面中引入文件是如下操作；



    
    
    
    


    // 目光聚焦到此处
    



下面可以使用这两种方法来加快页面渲染
1. 
async: 字面意思就是 异步，他将告诉浏览器，此js文件是异步加载的，也就意味着浏览器加载到此处时不会堵塞，
会和其他元素节点同时进行；
注意：正因如此，携带async的script标签文件，要处理好引用关系，
比如，b.js文件里面的函数值，要引用a.js文件里面的某个变量，那你最好将async去掉，以便达到按顺序执行文件。

2. 
defer：字面意思是 推迟， 他规定浏览器是否对脚本执行进行延迟，直到页面加载为止。
一旦页面加载完毕就会立即执行该文件；

5. 老生常谈的几点；

1. 处理好循环操作，比如将循环的数组赋值一个变量，去循环其变量；
2. 如果要向页面追加数据，可使用:document.createDocumentFragment( ) 根据系统刷新不乏走，最大程度避免丢帧现象；
3. 对源代码进行压缩；
4. 懒加载；
5. 防抖： 输入搜索时候，可以用debounce等优化方式，减少HTTP请求；
6. 节流：简单解答：只允许一个函数在N秒内执行一次，从而减少HTTP请求；
7. 图片编码优化，尽量使用svg和字体图标

6. 服务器方面优化补充

1. 利用CDN
2. 按需加载资源
3. 在使用 DOM 操作库时用上 array-ids
4. 缓存优化
5. 避免重定向
6. 启用 HTTP/2
7. 应用性能分析
8. 使用负载均衡方案
9. 使用索引加速数据库查询
10. 使用更快的转译方案

暂时就这么多……