每周完成一個(gè)ARTS：
1.A（Algorithm）每周至少做一個(gè) leetcode 的算法題
2.R（Review）閱讀并點(diǎn)評至少一篇英文技術(shù)文章
3.T（Tip）學(xué)習(xí)至少一個(gè)技術(shù)技巧
4.S（Share）分享一篇有觀點(diǎn)和思考的技術(shù)文章
A
Longest Substring Without Repeating Characters
/**
* @param {string} s
* @return {number}
*/
var lengthOfLongestSubstring = function(s) {
let newStr = {};
let len = s.length;
let max = 0;
for(let i = 0; i < len; i++){
let num = 0;
for(let j = i; j < len; j++){
if(newStr[s[j]] === undefined){
newStr[s[j]] = true;
num++;
console.log(num)
}else{
newStr = {};
break;
}
}
max = num > max? num:max;
if(max === len){break;}
}
return max;
}
console.log(lengthOfLongestSubstring ('adsfghj'))
過程很暴力...所以在git上提交時(shí)候最后一個(gè)用例提示超時(shí)了。
R
Beginning HTML, XHTML, CSS, and JavaScript?
A Web of Structured[]Documents
Before we create our first web page, let ’ s just take a moment to look at the printed information we see every day, and how it compares to what we see on the Web. Every day, you come across all kinds of printed documents — newspapers, train timetables, insurance[]forms. You can think of the Web as being a sea of documents that all link together, and bear a strong similarity[
] to the printed documents that you meet in everyday life.
Chapter 1: Structuring Documents for the Web
Every morning I used to read a newspaper. A newspaper is made up of several stories or articles[] (and probably a fair smattering of advertisements[
] , too). Each story has a headline and then some paragraphs, perhaps a subheading, and then some more paragraphs; it may also include a picture or two.
I don ’ t buy a daily paper anymore, as I tend to look at news online, but the structure of articles on news web sites is very similar to the structure of articles in newspapers. Each article is made up of headings, paragraphs of text, and some pictures (sometimes the pictures might be replaced by a video). The parallel[] is quite clear; the only real difference is that in a newspaper you may have several stories on a single page, whereas[
] on the Web each story tends to get its own page. The news web sites also often use homepages that display the headline and a brief[
] summary[
] of the stories.
To Be Continued...
T
Echarts坐標(biāo)軸名稱過長，折行顯示
//yAxis.axisLabel.formatter 回調(diào)函數(shù) 實(shí)現(xiàn)標(biāo)簽過長的換行處理
//通過設(shè)置provideNumber，控制每行顯示的字?jǐn)?shù)
option = {
yAxis: {
type: 'category',
data: ['文言文', '書面表達(dá)', '語運(yùn)用', '寫作文', '論述類文本'],
axisLabel : {
interval : 0,
formatter : function(params){
var newParamsName = "";// 最終拼接成的字符串
var paramsNameNumber = params.length;// 實(shí)際標(biāo)簽的個(gè)數(shù)
var provideNumber = 2;// 每行能顯示的字的個(gè)數(shù)
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 計(jì)算行數(shù)，向上取整
//判斷是否需要換行
if (paramsNameNumber > provideNumber) {
//循環(huán)得到每行的顯示內(nèi)容，p代表行
for (var p = 0; p < rowNumber; p++) {
var tempStr = "";// 表示每一次截取的字符串
var start = p * provideNumber;// 開始截取的位置
var end = start + provideNumber;// 結(jié)束截取的位置
if (p == rowNumber - 1) {
// 最后一次不換行
tempStr = params.substring(start, paramsNameNumber);
} else {
// 每一次拼接字符串并換行
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr;// 最終拼成的字符串
}
} else {
// 將舊標(biāo)簽的值賦給新標(biāo)簽
newParamsName = params;
}
return newParamsName
}
}
},
xAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70],
type: 'bar'
}]
};
折行效果圖如下：
S
css加載會(huì)造成阻塞嗎
I CSS的加載不會(huì)阻塞DOM樹的解析
II CSS的加載會(huì)阻塞DOM樹的渲染
III CSS加載會(huì)阻塞后面js語句的執(zhí)行
因此，為了避免讓用戶看到長時(shí)間的白屏?xí)r間，我們應(yīng)該盡可能的提高css加載速度，比如可以使用以下幾種方法:
使用CDN(因?yàn)镃DN會(huì)根據(jù)你的網(wǎng)絡(luò)狀況，替你挑選最近的一個(gè)具有緩存內(nèi)容的節(jié)點(diǎn)為你提供資源，因此可以減少加載時(shí)間)
對css進(jìn)行壓縮(可以用很多打包工具，比如webpack,gulp等，也可以通過開啟gzip壓縮)
合理的使用緩存(設(shè)置cache-control,expires,以及E-tag都是不錯(cuò)的，不過要注意一個(gè)問題，就是文件更新后，你要避免緩存而帶來的影響。其中一個(gè)解決防范是在文件名字后面加一個(gè)版本號)
減少http請求數(shù)，將多個(gè)css文件合并，或者是干脆直接寫成內(nèi)聯(lián)樣式(內(nèi)聯(lián)樣式的一個(gè)缺點(diǎn)就是不能緩存)
