JavaScript Performance Optimizations

The most intuitive feeling of performance is the speed at which the site responds at the time of the interaction, that is, the time it takes to request a response cycle , which is related to many factors

Before the request is issued:

Overall principle: The number of requests sent should be minimized at the client
The first example: Click the Delete button in the order list to delete an order, you can make a click to send Ajax to the server, the client receives a response to directly refresh the page, can also be made after the client received corresponding delete order list in the DOM of the corresponding items, the latter one of the obvious request less than the first one, the performance is better, However, the requirement for developers to be high, and possibly due to changes in the order list data may result in other locations on the page also need to change, such as the total number of orders, but the front end with the data binding function of the framework to help us solve this problem

The second example: Single page application in the first screen usually loaded a lot of script tags, each script has a SRC, the page image also has SRC, and each link tag has href, each src or href is a request, so the number of requests is significantly many, As a result, many of the script tags are combined to reduce the number of requests, thus optimizing performance, and further, when sending requests, the code compression is not the same as the space that does not compress the apparently occupied HTTP request message, so the compression code can further optimize the performance, the picture is the same reason, Make a picture of all the pictures and just send a single request. Sometimes all of the files are merged back very large, so the need to load on demand is also considered

Third case: linkage between provinces and cities if you look at the front-end, you can send an Ajax for all provinces after the page has been loaded, and then use that province's ID to get all the cities in that province after selecting a province, but from the point of view of the number of requests, It's obviously a better way to bring the province's data along while returning the HTML page in the background.

During the request process:

From the source host to the target host, the data frame needs to be finally arrived by the multi-hop router based on the routing algorithm, we want to minimize the number of hops, so there is a static file deployed to the CDN, so that the client directly access to the resources on their nearest host

After the request is issued:

The main performance key here is the process of server processing

First, the Load Balancer server will forward the request to a different Web server to process separately, the forwarded algorithm (such as the hunt) has a certain impact on performance

The main performance bottleneck is that it is consumed when the database server is connected again and queries are made in the database (it is learnt that like fuzzy query performance is very poor)

During the response:

Consistent with the performance analysis in the above request process, no longer repeat

After the response is received:

Dom operations are extremely expensive, so DOM operations should be minimized

-- CSS性能优化问题 --1. 加载方面   1）慎用 @import：import 会使我们的 link 样式由原本的并发加载，变成异步加载；   2）压缩代码体积：      a. 压缩代码，删除换行，多余的空格和注释；      b. 合并重复代码，提高代码的通用性；      c. 精简包含选择符，在使用包含选择的时候，尽量精简层级；      d. 能使用复合样式时，尽量使用复合样式；      e. 多利用继承，来精简样式；2. 优化请求   1）使用 css 精灵，减少图片个数和体积；   2）合理合并文件，精简外部文件个数；   3）对于不需要重复使用的图片，可适当使用 data Uri；   4）在设计统一的情况下，可使用 FontIcon 的方法，来统一整合页面上的图片；3. 渲染方面   1）涉及动画方面，尽量可以使用位移来解决，努力减少回流；   2）涉及动画方面，可以利用 3D，来进行 GPU 加速；   3）避免使用 table，为了减少回流；   4）避免 text-shadow 和 box-shadow 层级过多；   5）减少浮动和绝对定位的滥用；   6）不滥用 WEB 字体，在部分浏览器下会造成渲染阻塞；

-- JS 优化问题 --1. 最小化 DOM 访问次数，尽可能在 JS 端执行；2. 如果需要多次访问某个 DOM 节点，请使用局部变量存储对它的引用；3. 小心处理 HTML 集合，因为它实时连系着底层的文档，把集合的长度缓存到一个变量中，并在迭代中使用它，如果需要经常操作集合，建议把它拷贝到一个数组中；4. 如果可能的话，使用速度更快的 API，比如 querySelectorAll 和 firstElementChild；5. 要留意重绘和重排，批量修改样式时，“离线”操作 DOM 树。使用缓存，并减少访问布局的次数；6. 使用事件委托来减少事件处理器的数量；7. 避免多次访问对象成员或函数中的全局变量，尽量将它们赋值给局部变量以缓存；8. 能用 CSS 解决的问题，尽量不用 JS 去解决；

JavaScript Performance Tuning