Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 国产成人免费网站,久久精品免看国产成,18女人腿打开无遮挡网站 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營(yíng)銷服務(wù)商
          
				
          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
          
			
          
			
          				
				
          免費(fèi)咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          Web前端性能優(yōu)化：html、css、js篇
          
        
           
          
	
	
          
		
                        
          言
          我想死你們啦~
          今天給大家?guī)?lái)前端面試必會(huì)問(wèn)到的前端性能優(yōu)化問(wèn)題，暫定分三期給大家?guī)?lái)，第一期講述基本的代碼優(yōu)化，后續(xù)還有網(wǎng)絡(luò)傳輸層優(yōu)化和頁(yè)面加載速度優(yōu)化，敬請(qǐng)期待，也歡迎點(diǎn)擊查看原文了解更多前端小知識(shí)。
          點(diǎn)關(guān)注，不迷路，我們一起咸魚(yú)翻個(gè)身兒。
          正文
          為什么要進(jìn)行性能優(yōu)化？
          • 用戶: 提升用戶體驗(yàn)，改善頁(yè)面性能。
          • 開(kāi)發(fā)者: 體現(xiàn)公司意志和開(kāi)發(fā)人員技能。
          性能優(yōu)化的總體方向
          • 高效 ：合理安排資源
          • 快速 ：減少等待時(shí)間
          • 標(biāo)準(zhǔn) ：
          • 首次有效繪制（First Meaningful Paint，簡(jiǎn)稱FMP，當(dāng)主要內(nèi)容呈現(xiàn)在頁(yè)面上）
          • 英雄渲染時(shí)間（Hero Rendering Times，度量用戶體驗(yàn)的新指標(biāo)，當(dāng)用戶最關(guān)心的內(nèi)容渲染完成）
          • 可交互時(shí)間（Time to Interactive，簡(jiǎn)稱TTI，指頁(yè)面布局已經(jīng)穩(wěn)定，關(guān)鍵的頁(yè)面字體是可見(jiàn)的，并且主進(jìn)程可用于處理用戶輸入，基本上用戶可以點(diǎn)擊UI并與其交互）
          • 輸入響應(yīng)（Input responsiveness，界面響應(yīng)用戶輸入所需的時(shí)間）
          • 感知速度指數(shù)（Perceptual Speed Index，簡(jiǎn)稱PSI，測(cè)量頁(yè)面在加載過(guò)程中視覺(jué)上的變化速度，分?jǐn)?shù)越低越好）
          1.1、HTML/CSS優(yōu)化
          1、能用html/css解決的問(wèn)題就不要用js，更快的開(kāi)發(fā)速度，更小的維護(hù)成本。
          適用場(chǎng)景：
          //導(dǎo)航高亮
nav li {
 opacity: 0.5;
}
nav li:hover {
 opacity: 1;
}
//鼠標(biāo)懸停顯示模塊
.menu {
 display: none;
}
.nav:hover + .menu {
 display: inline-block;
}
.menu:before {
 content: '';
 position: absolute;
 top: -20px;
 left: 0px;
 width: 100%;
 height: 20px;
}

          2、自定義radio/checkbox樣式
          input[type=checkbox]{}
input[type=checkbox]:checked{}

          3、巧用css偽類，合理使用原生選擇器，如：:focus、@media、input[type=email]:invalid
          4、使用全局樣式sass、scss
          5、優(yōu)化HTML標(biāo)簽
          • 文字<p> 、<h1>減少css代碼
          • 表單<form>
          • 列表<ol>、<ul>
          • 圖片<img>、<picture>
          • 鏈接<a>、<button>
          • 根據(jù)情況使用input type值
          • 使用HTML5語(yǔ)義化標(biāo)簽
          //一個(gè)語(yǔ)義化的網(wǎng)頁(yè)布局
<nav></nav>
<header></header>
<main>
 <section></section>
 <section></section>
</main>
<footer></footer>

          6、不濫用高消耗的樣式
          • box-shadow、border-radius、float需要瀏覽器進(jìn)行大量的計(jì)算，應(yīng)減少使用
          7、選擇器合并
          • 把有共同的屬性內(nèi)容的一系列選擇器組合到一起，能壓縮空間和資源開(kāi)銷
          8、 0值去單位
          • 對(duì)于為0的值，盡量不要加單位，增加兼容性
          1.2、JS優(yōu)化
          1、減少前端代碼耦合
          • 使用傳參的方法減少耦合
          • 利用策略模式抽離公共組件、參數(shù)、封裝請(qǐng)求
          2、JS書(shū)寫(xiě)優(yōu)化
          • 按照強(qiáng)類型風(fēng)格去寫(xiě)代碼，指明變量類型和返回類型
          • 字面量與局部變量的訪問(wèn)速度最快，數(shù)組元素和對(duì)象成員相對(duì)較慢
           //bad
 let num,
 str,
 obj;
 //good
 let num = 0;
 str = '',
 obj = null;
 //bad
 getPrice:function(price){
 if (price < 0) {
 return false;
 }else {
 return price * 10
 }
 }
 //good
 getPrice:function(price){
 if (price < 0) {
 return -1;
 }else {
 return price * 10
 }
 }
 //類型確定，解析器不會(huì)去做一些額外的的工作，類型不確定的情況下回發(fā)生優(yōu)化回滾
 //優(yōu)化回滾：編譯器已經(jīng)編譯完成函數(shù)，類型變化導(dǎo)致回滾到通用狀態(tài)，重新生成函數(shù)

          3、減少作用域查找
          • 盡量少的不要讓代碼暴露在全局作用域下，變量從局部作用域到全局作用域的搜索過(guò)程越長(zhǎng)速度越慢
           //bad
 <script>
 var map = document.querySelector('#imap');
 map.style.height = '10px';
 </script>
 //good
 <script>
 !function() {
 var map = document.querySelector('#imap');
 map.style.height = '10px';
 }
 </script>

          4、對(duì)象嵌套的越深，讀取速度就越慢
          • 無(wú)意義的對(duì)象嵌套拖累讀取速度
          5、避免 == 的使用
          • 確定類型的情況下直接使用 ===
          6、合并表達(dá)式
          • 用三目運(yùn)算符代替簡(jiǎn)單的if-else
           //bad
 function getPrice(count){
 if(count < 0){
 return -1;
 }else {
 return count * 100;
 }
 }
 //good
 function getPrice(count){
 return count <0 ? return -1 : count * 100;
 }
 //在進(jìn)行代碼壓縮的時(shí)候，即時(shí)書(shū)寫(xiě)的是if-else，壓縮工具也會(huì)幫你把它改成三目運(yùn)算符的形式

          1.3、使用ES6簡(jiǎn)化代碼
          1、使用箭頭函數(shù)取代小函數(shù)
           var num = [4,6,8,3,1,0]
 //bad
 num.sort(function (a,b){
 return a-b;
 })
 //good
 num.sort(a,b => a-b);
 ```
 * 使用ES6的class
 ```
 class Person {
 constructor(name, age) {
 this.name = name;
 this.age = age;
 }
 addAge() {
 this.age++;
 }
 setName(name) {
 this.name = name;
 }
 }

          2、字符串拼接
           let url = `/list.html?page=${page}&type=${type}`;

          3、塊級(jí)作用域變量，使用let代替var
           尾聲
          總結(jié)的內(nèi)容到這里差不多就結(jié)束了，大多數(shù)來(lái)自工作中的一些總結(jié)和整理。文中若有不當(dāng)之處，歡迎指出共同交流~~
          orm表單復(fù)雜demo制作與涉及到的方法講解，深入理解form基本屬性與使用方法
          天給大家?guī)?lái)的是新浪微博PC端的模擬登陸。
          工具
          這次使用的工具是Charles和chrome瀏覽器，看過(guò)我之前文章的同學(xué)應(yīng)該知道我使用的Mac電腦，F(xiàn)iddler不能用，之前用虛擬機(jī)很麻煩。很早的時(shí)候有裝過(guò)Charles，但是不太會(huì)用，后來(lái)發(fā)現(xiàn)一篇比較詳細(xì)的文章，忘了記錄了。發(fā)現(xiàn)Charles還是非常好用的，而且有個(gè)很好的功能，就是可以開(kāi)啟多個(gè)Session進(jìn)行抓取對(duì)比，這個(gè)功能非常，如果經(jīng)常做爬蟲(chóng)調(diào)試的人一定能知道。我們抓取一個(gè)網(wǎng)站的登錄過(guò)程，然后在模擬的過(guò)程中，可以再另一個(gè)session中抓取自己模擬登錄的過(guò)程，然后對(duì)比一下自己的請(qǐng)求發(fā)送的數(shù)據(jù)和瀏覽器請(qǐng)求發(fā)送的數(shù)據(jù)是否一致。之前我調(diào)試一直都是通過(guò)打印查看，這樣一方面很不方便，另外一方面打印也不完整。所以非常推薦大家使用Charles，網(wǎng)上破解也有很多。
          Charles
          打開(kāi)Charles，要開(kāi)啟SSL代理抓取，這樣才能抓取到HTTPS請(qǐng)求，畢竟現(xiàn)在很多網(wǎng)站都已經(jīng)使用HTTPS請(qǐng)求了
          HTTPS抓取設(shè)置
          Host填*表示匹配所有網(wǎng)址，HTTP請(qǐng)求端口是80端口，HTTPS請(qǐng)求端口是443端口，設(shè)置好就可以開(kāi)始抓取了。
          抓取請(qǐng)求
          打開(kāi)chrome瀏覽器，最好清理緩存，然后使用隱身模式訪問(wèn)https://weibo.com/
          打開(kāi)隱身窗口
          無(wú)痕模式
          在網(wǎng)頁(yè)上執(zhí)行一遍登錄操作
          微博登錄過(guò)程
          抓取到登錄過(guò)程后，我們就可以開(kāi)始分析了，記住一定要清理緩存。我有好幾次抓取都不一樣，后來(lái)?yè)Q了Safari瀏覽器（因?yàn)槲液苌儆眠@個(gè)），其實(shí)這一步用什么瀏覽器都無(wú)所謂，chrome瀏覽器主要是用來(lái)調(diào)試JS用的。
          過(guò)程分析
          查找登錄請(qǐng)求
          登錄一般url里面應(yīng)該都會(huì)有l(wèi)ogin，而且是post請(qǐng)求，當(dāng)然不排除其他方式。
          https://login.sina.com.cn/sso/login.php?client=ssologin.js(v1.4.19)
          登錄請(qǐng)求url
          找到登錄請(qǐng)求后，這里主要關(guān)注Form表單信息，參數(shù)很多，我們需要先大概區(qū)分一下哪些可能是固定參數(shù)，哪些是變化的參數(shù)。
          參數(shù)確定
          一目了然可以看到那些是固定的了吧，這些所有的參數(shù)其實(shí)我們都是可以追根溯源的，但是沒(méi)那個(gè)必要，在這種參數(shù)比較多的情況下，太費(fèi)事了，可以采用多次抓取登錄過(guò)程，對(duì)比請(qǐng)求參數(shù)的方式確定部分固定的或者不重要的參數(shù)，那么需要我們通過(guò)其他方式獲取的參數(shù)有pcid、door、su、servertime、nonce、rsakv、sp、prelt，這里servertime比較有爭(zhēng)議，一般看到這種time或者151開(kāi)頭的10位或者13位數(shù)字，都是時(shí)間戳，用time.time()獲取就可以，但是這里是servertime，我們應(yīng)該引起注意。
          參數(shù)分析
          下面我們一一來(lái)看這幾個(gè)參數(shù)怎么獲取
          • su
          • 我們要先說(shuō)一下這個(gè)su，因?yàn)槠渌膮?shù)都和它有關(guān)系。這個(gè)su在js調(diào)試的時(shí)候可以看到它的算法，但是其實(shí)我們可以根據(jù)它的特點(diǎn)先猜測(cè)一下，有可能是base64加密的。為什么？
          Base64是一種基于64個(gè)可打印字符來(lái)表示二進(jìn)制數(shù)據(jù)的方法，哪64個(gè)字符呢？ 
A-Z、a-z、0-9和"+"、"/"，很多時(shí)候base64加密的字符串尾部為 1個(gè)或2個(gè) "="，
因?yàn)樗前?個(gè)字節(jié)的二進(jìn)制拼接，如果最后剩下一個(gè)，那么尾部就會(huì)添加2個(gè)=，
如果剩下兩個(gè)，尾部就添加1個(gè)=，如果剛合適那當(dāng)然就沒(méi)有=了

          推薦一個(gè)工具網(wǎng)站https://tool.lu/encdec/
          image.png
          使用編解碼試試看，最終我發(fā)現(xiàn)是賬號(hào)，而且是采用了url encode和base64編碼，所有最終我們的su就是
          image.png
          • pcid、servertime、nonce、rsakv
          • 它的值時(shí)gz-48fb749c5c715e0d5caeed045716492e153c，我們先在Charles中搜索一下

          • pcid
          • 我們一般都是搜索response的數(shù)據(jù)，主要是看一下是不是在某一個(gè)請(qǐng)求的返回值里面，這里非常棒，我們找到了pcid和值出現(xiàn)的地方https://login.sina.com.cn/sso/prelogin.php?entry=weibo&callback=sinaSSOController.preloginCallBack&su=MTgwOTE3MzQxMzY%3D&rsakt=mod&checkpin=1&client=ssologin.js(v1.4.19)&_=1518956150179，在這個(gè)請(qǐng)求的返回值里面，而且我們還有意外的收獲，我們得到了四個(gè)參數(shù)，和登錄請(qǐng)求里面的一樣，我們現(xiàn)在確定了四個(gè)參數(shù)的來(lái)源，

          • image.png
          • 看一下請(qǐng)求的參數(shù)

          • image.png
          • 除了su和下面的時(shí)間戳其他的參數(shù)基本固定，時(shí)間戳沒(méi)什么特點(diǎn)，我們就用int(time.time() * 1000)生成，因?yàn)槭?3位的。su我們上面已經(jīng)知道了。那么這四個(gè)參數(shù)也搞定了??
          • door
          • door很熟悉吧，是驗(yàn)證碼。那么驗(yàn)證碼的請(qǐng)求怎么確定，非常簡(jiǎn)單因?yàn)槲覀兊尿?yàn)證碼是一張圖片，所以找圖片請(qǐng)求就可以了

          • 驗(yàn)證碼
          • 這個(gè)往上翻一翻就能很快找到，找到后我們看看它的參數(shù)

          • 參數(shù)
          • p的值就是pcid的值，我們已經(jīng)知道了。r有點(diǎn)不太好找了，先在Charles里搜一下62026273，沒(méi)找到，那么應(yīng)該就是本地生成的，其實(shí)你可以寫(xiě)死試試，有沒(méi)有問(wèn)題。除了搜這個(gè)值以外，我們還可以搜一下這個(gè)請(qǐng)求是在哪里生成的，看它附近有沒(méi)有有用的數(shù)據(jù)。

          • image.png
          • 搜一部分就行了，先用小部分搜，如果結(jié)果太多，在多加一些搜索，這里我們找到了一條，點(diǎn)擊去看一看，點(diǎn)到JavaScript那個(gè)頁(yè)簽，Charles會(huì)幫我們格式化js

          • image.png
          • 找到了pincodeUrl，再搜索一下pincodeUrl

          • image.png
          • 看到?jīng)]有，開(kāi)不開(kāi)心？激不激動(dòng)？

          • 驗(yàn)證碼請(qǐng)求
          • prelt
          • 這個(gè)參數(shù)和驗(yàn)證碼請(qǐng)求的那個(gè)r參數(shù)類似，值搜不到，但是我們可以搜這個(gè)prelt，你問(wèn)r那個(gè)為啥不搜？[鄙視眼]你猜猜能搜到多少？

          • image.png
          • 同樣點(diǎn)進(jìn)去，切換到JavaScript頁(yè)簽，發(fā)現(xiàn)了preloginTime，再搜它吧


          • image.png
          • 多搜一些你就發(fā)現(xiàn)它應(yīng)該是個(gè)時(shí)間段，結(jié)合prelt本身的值，我們就可以構(gòu)造出一個(gè)值。可以通過(guò)多次請(qǐng)求來(lái)確定一個(gè)范圍，另外時(shí)間差，而且它用的是本地的時(shí)間計(jì)算的，那么也不需要多么精確，確定一個(gè)范圍應(yīng)該就可以了，所以在一個(gè)范圍內(nèi)取隨機(jī)數(shù)就行了

          • -sp
          • 最麻煩的來(lái)了，sp這么長(zhǎng)一段，觀察其特點(diǎn)，發(fā)現(xiàn)應(yīng)該是16進(jìn)制，所有字符都是在0-9、a-f之間，而且參數(shù)pwencode的值rsa2，基本上我們就可以確定其采用的是rsa加密算法。這串字符肯定是搜索不到的，可以搜sp，刪掉明顯不是的，我們一般看的是sp=xx這樣的，就是看賦值，從賦值的操作上下文去查看

          • image.png
          • 經(jīng)過(guò)過(guò)濾分析，只剩下兩個(gè)地方https://passport.weibo.com/visitor/visitor?entry=miniblog&a=enter&url=https%3A%2F%2Fweibo.com%2F&domain=.weibo.com&ua=php-sso_sdk_client-0.6.23&_rand=1518956141.4946和https://js1.t.sinajs.cn/t5/register/js/v6/pl/register/loginBox/index.js?version=d7a77880fa9c5f84

          • image.png
          • 然后打開(kāi)chrome瀏覽器，開(kāi)發(fā)者工具，然后訪問(wèn)https://weibo.com，切換到source頁(yè)簽找到這兩個(gè)js文件，并搜索sp，通過(guò)觀察特點(diǎn)基本確認(rèn)為第二個(gè)js文件

          • image.png
          • e.sp = b，在b的計(jì)算之前打上斷點(diǎn)，然后執(zhí)行登錄操作，這里我們還發(fā)現(xiàn)了su的計(jì)算算法，跟我們上面分析的基本一致

          • image.png
          • 通過(guò)調(diào)試這段代碼我們就得到了其加密方式，這里有幾個(gè)變量me.rsaPubkey、me.servertime、me.nonce、b，通過(guò)console中查看b是密碼，然后就是這pubkey

          • image.png
          • 在上面pcid參數(shù)的請(qǐng)求的返回值里面我們看到有這個(gè)值。OK這幾個(gè)變量我們都知道了，下面你了解一下rsa加密算法的python實(shí)現(xiàn)，直接貼代碼

          • image.png
          執(zhí)行登錄請(qǐng)求
          登錄請(qǐng)求的所有參數(shù)都已經(jīng)分析完了，登錄后查看response數(shù)據(jù)
          image.png
          然后再看一下登錄請(qǐng)求的下一個(gè)請(qǐng)求，發(fā)現(xiàn)是通過(guò)登錄請(qǐng)求的返回值中的url，然后發(fā)送此請(qǐng)求
          image.png
          返回值中又出現(xiàn)了另外一個(gè)url，我們?cè)谙旅嬉舱业搅耍崛rl發(fā)送請(qǐng)求
          image.png
          看到返回狀態(tài)了嗎？302重定向。發(fā)送請(qǐng)求以后查看一下response的url，發(fā)現(xiàn)是在它下面的請(qǐng)求地址
          返回值和下面的請(qǐng)求好像有點(diǎn)關(guān)聯(lián)，有下一個(gè)請(qǐng)求的參數(shù)。別急，先等等，我們就這樣一直請(qǐng)求、提取請(qǐng)求、再請(qǐng)求，得有個(gè)終點(diǎn)吧，到哪里算一站呢。我們想想登錄以后，顯示一個(gè)頁(yè)面有用戶名。我們只要能得到這個(gè)用戶名那就說(shuō)明登錄成功了。
          image.png
          這里看到了這個(gè)home請(qǐng)求中出現(xiàn)了我的用戶昵稱，然后上面那個(gè)請(qǐng)求的返回狀態(tài)302，又是重定向。使用上面的方式確認(rèn)一下。提取userdomain，然后拼接https://weibo.com/
          image.png
          成功了
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
亚洲大尺度无码无码专线一区|
一本大道东京热无码一区|
男人免费视频一区二区在线观看|
国产亚洲一区二区三区在线不卡
|
无码人妻精一区二区三区|
久久久国产一区二区三区|
日韩精品一区二区三区在线观看l
日韩精品一区二区三区毛片
|
波多野结衣免费一区视频|
精品不卡一区二区|
久久国产精品视频一区|
上原亚衣一区二区在线观看|
在线成人综合色一区|
国产美女在线一区二区三区|
一区二区三区午夜视频|
日本欧洲视频一区|
中文字幕乱码一区二区免费|
99久久精品国产免看国产一区
|
一区二区三区四区无限乱码|
无码精品视频一区二区三区|
亚洲片国产一区一级在线观看|
中字幕一区二区三区乱码|
亚洲美女视频一区|
2020天堂中文字幕一区在线观|
夜夜嗨AV一区二区三区|
亚洲一区二区三区在线观看精品中文|
亚洲国产精品一区二区三区久久|
国产一区高清视频|
亚洲片一区二区三区|
国产精品福利区一区二区三区四区|
福利一区国产原创多挂探花|
国产91精品一区二区麻豆亚洲|
久久精品无码一区二区三区日韩|
国产观看精品一区二区三区|
国产精品高清一区二区人妖|
国产精品视频一区二区三区|
亚洲熟妇AV一区二区三区宅男|
成人精品一区二区不卡视频|
日本一区二区三区中文字幕|
亚洲一区二区三区乱码A|
亚洲日韩精品一区二区三区无码
|
亚洲日韩激情无码一区
|