ARTS打卡，第三周

每周完成一个ARTS：
1.A（Algorithm）每周至少做一个 leetcode 的算法题
2.R（Review）阅读并点评至少一篇英文技术文章
3.T（Tip）学习至少一个技术技巧
4.S（Share）分享一篇有观点和思考的技术文章

A

Median of Two Sorted Arrays

var nums1 = ['1','3'];
var nums2 = ['2'];
var findMedianSortedArrays = function(nums1,nums2){=
    var nums3 = nums1.concat(nums2)
    num = nums3.sort(function(a,b){
        return a-b;
    });
    var x = num.length
    if (x>1){
        if (x%2==0){
            mid = (num[x/2] + num[x/2-1])/2
        }
        if (x%2!=0){
            mid = num[(x-1)/2]
        }
    }else if(x=1){
        mid =arr
    }
    return mid;
}
console.log(findMedianSortedArrays(nums1,nums2))

整体思路就是合并数组（刚开始还去重了，竟然错了，自己审题不清），排序，取中位数。

R

Beginning HTML, XHTML, CSS, and JavaScript®

Consider[ $\color{red}{*考虑*}$ ] another example: Say I ’ m catching a train to see a friend, so I check the schedule[ $\color{red}{*计划表*}$ ] or timetable to see what time the trains go that way. The main part of the schedule is a table telling me what times trains arrive and when they depart[ $\color{red}{*启程*}$ ] from different stations. You can probably think of several types of documents that use tables. From the listings in the financial[ $\color{red}{*财务的*}$ ] supplement[ $\color{red}{*补充清单*}$ ] of your paper to the TV schedule, you come across tables of information every day — and often when this information is put on the Web, these tables are recreated.

Another common type of printed document is a form. For example, on my desk at the moment, I have a form (which I really must mail) from an insurance[ $\color{red}{*保险*}$ ] company. This form contains fields for me to write my name, address, and the amount of coverage I want, along with checkboxes to indicate[ $\color{red}{*指出*}$ ] the number of rooms in the house and what type of lock I have on my front door. There are lots of forms on the Web, from simple search boxes that ask what you are looking for to the registration[ $\color{red}{*注册*}$ ] forms you are required[ $\color{red}{*必须的*}$ ] to go through before you can place an online order for books or CDs.

As you can see, there are many parallels[ $\color{red}{*平行*}$ ] between the structure of printed documents you come across every day and pages you see on the Web. When it comes to writing web pages, it is the XHTML code you start learning in this chapter that tells the web browser how the information you want to display is structured[ $\color{red}{*构成*}$ ] — what text to put in a heading, or in a paragraph, or in a table, and so on — so that the browser can present[ $\color{red}{*展现*}$ ] it properly[ $\color{red}{*正确的*}$ ] to the user.

To Be Continued...

T

前端开发变量命名系列

前端开发变量命名要规范、易读、简短的代码。
推荐的这篇文章呢，可以帮助前端小白对前端变量命名有初步的印象，其次要在项目中逐渐养成良好的变量名命名的习惯。
在项目过程中呢也没有必要死搬硬套，只要自圆其说，形成一套系统化、实用的变量命名理化体系就可以了。
文章比较长，适合在上下班的公交车或地铁刷刷。

S

回流和重绘

Layout(回流) 我们将可见DOM节点以及它对应的样式结合起来，可是我们还需要计算它们在设备视口(viewport)内的确切位置和大小，这个计算的阶段就是回流。

Painting(重绘) 通过构造渲染树和回流阶段，我们知道了哪些节点是可见的，以及可见节点的样式和具体的几何信息(位置、大小)，那么我们就可以将渲染树的每个节点都转换为屏幕上的实际像素，这个阶段就叫做重绘节点

从这篇文章里我回顾了一下浏览器的渲染过程，为了构建渲染树，浏览器主要完成的工作，需要注意的是渲染树只包含可见的节点；
并介绍了何时会发生重绘，浏览器的优化机制，以及如何减少回流与重绘。
空暇时间自己要认真学习了解如何减少回流与重绘，以减少浏览器的计算消耗，提高前端的业务水平。

最后编辑于：2019.08.17 23:52:50