資訊專欄INFORMATION COLUMN
摘要：對于已經(jīng)完成的項目，為了讓搜索引擎爬蟲能爬幾個頁面，又是改前端代碼，又是改后端語言真的是郁悶。對于渲染完成后的字符串，需要用正則或把其中的代碼給去掉，這樣爬蟲就可以正常解析了實現(xiàn)，包括緩存策略共行代碼
玩Google Webmasters的可能會有這種經(jīng)歷。自己開發(fā)的app用了Vue/React，寫完后用Fetch as Google一爬傻眼了，爬不到東西。
網(wǎng)上搜解決方案出來的都是一堆額外的SSR框架，要上node，還看起來麻煩的要死。對于已經(jīng)完成的項目，為了讓搜索引擎爬蟲能爬幾個頁面，又是改前端代碼，又是改后端語言真的是郁悶。
一種迅雷不及掩耳盜鈴式的解決方案：判斷瀏覽者是人還是爬蟲
a. 是人，直接走正常html + javascript渲染流程
b. 是爬蟲，去[2]
緩存文件夾找渲染好的html文件
a. 存在，把渲染好的html文件直接丟給爬蟲
b. 不存在，去[3]
服務(wù)器開命令行瀏覽器訪問同樣地址，將渲染完成后的頁面生成字符串丟給爬蟲，并將字符串存儲為html文件存放到緩存文件夾
如此一來，用戶仍舊按原方式訪問應(yīng)用，而爬蟲爬到的是已經(jīng)渲染好的頁面，這樣就不會出現(xiàn)爬蟲空白頁面的情況了。當(dāng)然在執(zhí)行這套方案的時候有兩個要點：
關(guān)于命令行瀏覽器。Headless Browser很多，但不是所有的都能用。很多地方說用PhantomJs來做，這個瀏覽器其實是不靠譜的。一來需要額外寫個setTimeout的腳本來等待頁面渲染完成，二來目前該瀏覽器不支持ES6，如果javascript里有不支持的語法會導(dǎo)致渲染失敗。而使用chrome瀏覽器的話，語法支持沒問題，而且只需一行代碼即可搞定
google-chrome --headless --disable-gpu --dump-dom --no-sandbox --window-size=1280,1696
關(guān)于生成的字符串。用dump dom的方式生成的字符串是不能直接使用的，因為字符串中仍然包含用來客戶端渲染的javascript代碼，爬蟲爬到后會嘗試執(zhí)行，然后又得出爬出了一個空頁面。對于渲染完成后的字符串，需要用正則或DOM把其中的javascript代碼給去掉，這樣爬蟲就可以正常解析了
PHP實現(xiàn)，包括緩存策略共50行代碼
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/107376.html
摘要：對于已經(jīng)完成的項目，為了讓搜索引擎爬蟲能爬幾個頁面，又是改前端代碼，又是改后端語言真的是郁悶。對于渲染完成后的字符串，需要用正則或把其中的代碼給去掉，這樣爬蟲就可以正常解析了實現(xiàn)，包括緩存策略共行代碼 玩Google Webmasters的可能會有這種經(jīng)歷。自己開發(fā)的app用了Vue/React，寫完后用Fetch as Google一爬傻眼了，爬不到東西。showImg(https:...
摘要：然而這些代碼也會競爭系統(tǒng)的處理能力，因此在頁面內(nèi)容被渲染完成之前，必須要經(jīng)常處理一些東西。注意事項當(dāng)在網(wǎng)站上選擇渲染策略時，團(tuán)隊通常會考慮的影響。它顯示了抓取工具顯示任何頁面的方式預(yù)覽，找到的序列化內(nèi)容執(zhí)行后以及渲染過程中遇到的任何錯誤。 客戶端渲染（CSR） 客戶端渲染意味著在瀏覽器中使用Javascript直接渲染頁面。所有的邏輯，數(shù)據(jù)獲取，模板和路由都在客戶端處理。 對于移動設(shè)備...
摘要：前言大多數(shù)項目要支持應(yīng)該是為了考慮，畢竟對于應(yīng)用來說，搜索引擎是一個很大的流量入口。引入是一個構(gòu)建客戶端應(yīng)用的框架，即組件是在瀏覽器中進(jìn)行渲染的。由于服務(wù)端渲染要用做中間層，所以部署項目時，需要處于運行環(huán)境。 前言 大多數(shù)Vue項目要支持SSR應(yīng)該是為了SEO考慮，畢竟對于WEB應(yīng)用來說，搜索引擎是一個很大的流量入口。Vue SSR現(xiàn)在已經(jīng)比較成熟了，但是如果是把一個SPA應(yīng)用改造成S...
摘要：說起，其實早在出現(xiàn)之前，網(wǎng)頁就是在服務(wù)端渲染的。沒有涉及流式渲染組件緩存對的服務(wù)端渲染有更深一步的認(rèn)識，實際在生產(chǎn)環(huán)境中的應(yīng)用可能還需要考慮很多因素。選擇的服務(wù)端渲染方案，是情理之中的選擇，不是對新技術(shù)的盲目追捧，而是一切為了需要。 作者：威威（滬江前端開發(fā)工程師）本文原創(chuàng)，轉(zhuǎn)載請注明作者及出處。 背景 最近， 產(chǎn)品同學(xué)一如往常笑嘻嘻的遞來需求文檔， 縱使內(nèi)心萬般拒絕， 身體倒是很誠實...
摘要：服務(wù)端渲染兩種方式根據(jù)上文介紹對服務(wù)端渲染利弊有所了解，我們可以根據(jù)利弊權(quán)衡取舍，最近在做服務(wù)端渲染的項目，找到多種服務(wù)端渲染解決方案，大致分為兩類。第一種方式傳統(tǒng)方式服務(wù)端渲染，解決用戶體驗和更好的，有諸多工具使用這種方式如的的等。 最近在開發(fā)一個服務(wù)端渲染工具，通過一篇小文大致介紹下服務(wù)端渲染，和服務(wù)端渲染的方式方法。在此文后面有兩中服務(wù)端渲染方式的構(gòu)思，根據(jù)你對服務(wù)端渲染的利弊權(quán)...
閱讀 511·2021-10-09 09:44
閱讀 2073·2021-09-02 15:41
閱讀 3550·2019-08-30 15:53
閱讀 1829·2019-08-30 15:44
閱讀 1283·2019-08-30 13:10
閱讀 1188·2019-08-30 11:25
閱讀 1458·2019-08-30 10:51
閱讀 3365·2019-08-30 10:49
