【总结】代码中属性的顺序是如何影响性能的?-轻识

CSS 样式的书写顺序是一种约定俗成的规范，它有助于保持样式表的清晰和可读性。并使多人协作更加顺畅。但需要注意的是，根据具体项目和团队的需求，可能会有一些微调或自定义的顺序。因此，在实际工作中，根据项目的要求和团队的约定进行适当的调整。

1、CSS样式书写顺序及原理

1.1、CSS推荐的书写顺序

      
        // 1、定位属性：
      
      
        display position float / left top right bottom / overflow clear z-index
      
      
        // 2、自身属性：
      
      
        width height / padding border margin / background
      
      
        // 3、文字样式：
      
      
        font-family font-size font-style font-weight font-varient / color
      
      
        // 4、文本属性：
      
      
        text-align vertical-align / text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow
      
      
        // 5、css3中新增属性：
      
      
        content / box-shadow border-radius / transform...

1.2、目的：减少浏览器reflow（回流），提升浏览器渲染dom的性能。

1.3、原理：

css样式解析到显示至浏览器屏幕上就发生在2,3,4步骤，可见浏览器并不是一获取到css样式就立马开始解析而是根据css样式的书写顺序将之按照dom树的结构分布render样式，完成第2步，然后开始遍历每个树结点的css样式进行解析，此时的css样式的遍历顺序完全是按照之前的书写顺序。在解析过程中，一旦浏览器发现某个元素的定位变化影响布局，则需要倒回去重新渲染。

浏览器的渲染流程为:

① 解析html构建dom树，解析css构建css树：将html解析成树形的数据结构，将css解析成树形的数据结构

② 构建render树：DOM树和CSS树合并之后形成的render树。

③ 布局render树：有了render树，浏览器已经知道那些网页中有哪些节点，各个节点的css定义和以及它们的从属关系，从而计算出每个节点在屏幕中的位置。

④ 绘制render树：按照计算出来的规则，把内容渲染在屏幕上。

2、html/vue中属性的书写顺序

首先，Vue 在处理模板时，会先将模板编译成渲染函数，然后再执行渲染函数生成虚拟 DOM。在编译阶段，Vue 会对模板进行静态分析和优化，包括属性排序、静态节点优化等。因此，即使你在模板中改变了属性的顺序，Vue 在编译阶段也会将其优化成最优的顺序。

因此，属性的书写顺序不会影响渲染性能。但是，属性的书写顺序对于代码的可读性和维护性还是有一定影响的。通常情况下，建议按照一定的规范（ESLint）来书写属性，例如按照属性的功能分组、按照字母表顺序排列等。这样可以提高代码的可读性和维护性，也有助于团队协作。

3、js的书写顺序

JS语言是单线程机制。所谓单线程就是按次序执行，执行完一个任务再执行下一个。对于浏览器来说无法在渲染页面的同时执行JS代码。当浏览器遇到<script>标签的时候，浏览器必须先话时间下载外链的文件然后并执行，在这过程中，页面渲染和用户交互是完全被阻塞的。所以脚本会阻塞页面的渲染，直到它们全部下载并执行完成后，页面渲染才会继续。为提升性能一般解决方式如下：

① 把<script>标签放在<body>结尾处，这样尽可能减少页面阻塞。

② 尽量减少页面包含的<script>标签数量，可以把多个js文件合并打包成一个js文件,这样子做的好处就是可以最小化延迟时间将会明显的改善页面的总体性能。

在加载js、image等阻塞性内容时，我们可以采用懒加载等手段来优化，减少阻塞。在错误处理上面我们也应该注意处理，防止导致错误终端我们的程序。

4 、js中错误处理方式

4.1、 try-catch-finally 语句：try-catch-finally 语句可以用来捕获和处理异常。try 块中的代码可能会抛出异常，如果出现异常，就会跳转到 catch 块中执行。catch 块中可以对异常进行处理，例如输出错误信息、记录日志等。finally 块中的代码会在 try-catch 块中的代码执行完毕后执行，无论是否出现异常。

      
        try {
      
      
          // 可能抛出异常的代码
      
      
        } catch (error) {
      
      
          // 错误处理逻辑
      
      
        } finally {
      
      
          // 清理操作
      
      
        }

4.2 、throw 语句：通过 throw 语句，我们可以手动抛出自定义的异常。这可以用于在特定条件下，主动引发错误并中断程序的执行。

      
        function divide(x, y) {
      
      
          if (y === 0) {
      
      
            throw new Error("除数不能为零");
      
      
          }
      
      
          return x / y;
      
      
        }
      
      
        
          

      
      
        try {
      
      
          console.log(divide(10, 0));
      
      
        } catch (error) {
      
      
          console.log(error.message); // 输出 "除数不能为零"
      
      
        }

4.3、 Promise 对象：Promise 对象可以用来处理异步操作中的错误，可以使用 then 方法和 catch 方法来处理成功和失败的情况。在 Promise 对象中，可以使用 reject 方法抛出异常，然后在 catch 方法中进行处理。

      
        function fetchData() {
      
      
          return fetch('https://api.example.com/data')
      
      
            .then(response => {
      
      
              if (!response.ok) {
      
      
                throw new Error('Network response was not ok');
      
      
              }
      
      
              return response.json();
      
      
            })
      
      
            .catch(error => {
      
      
              console.error('An error occurred:', error.message);
      
      
            });
      
      
        }

4.4、window.onerror：window.onerror 是一个全局的错误处理器，可以用来捕获未被捕获的异常。当 JavaScript 发生未被捕获的异常时，会触发 window.onerror 事件，并将异常信息传递给该事件处理程序。

      
        window.onerror = function(message, url, line, column, error) {
      
      
          console.error('An error occurred:', message, url, line, column, error);
      
      
        };