总结:js抓取网页内容怎么找到热门程度排名前十的网站
　　js抓取网页内容，每隔5分钟有更新的网页，每分钟会出现一次，要找到全网热门程度排名前十的网站，并在代码中找到数据。然后分析生成list的源代码，筛选出热门的网站。操作步骤：1.获取网页源代码，找到热门程度排名前十的网站。2.生成list代码。3.删除不需要的记录。4.查看list中每一页的内容。5.查看每一页内容是否存在重复，并删除不重复的。
　　
　　6.最后保存。效果如下图：1.获取网页源代码，找到热门程度排名前十的网站。2.根据数据计算程序生成网页list，并删除每一页内容。3.查看list中每一页的内容，只有10页是必然有重复的。这个cube会出现很多空格。如下图所示：4.最后保存5.删除list中任何一行6.保存，点击modify命令，只需添加索引标题，文本内容，list即可。
　　这个list是不会在下一个html文件中出现的，如下图所示：想要知道某页的热门程度，直接在列表select中输入一串数字，从小到大排序。因为第一页不会存在空格。排序后直接复制到代码中，就可以获取到当前页的最新数据了。总结这是一种简单的爬虫，方便快捷的定位网页源代码，和通过上面步骤获取list列表数据。
　　
　　可能还需要一点excel，经常处理这样的表。即大部分数据都是存在excel中的。而通过上述步骤获取的数据，可以复制到本地放在mongodb数据库中，也可以通过python爬虫工具（如pythonbeautifulsoup、requests、beautifulsoup、xlrd）访问数据库获取更多excel数据。
　　这是我写的这个demo：-spider-list/index.html，数据处理的是计算机三维转换程序，主要为分析热门的python代码。数据处理完整过程图如下：。 查看全部

　　近期发布:2019年网页抓取工具前七出炉
　　互联网不断涌现出新的信息、新的设计模式和大量的 c。将这些数据组织到一个独特的库中并非易事。但是，有很多优秀的网络抓取工具可用。
　　代理爬取
　　使用代理抓取 API，您可以抓取网络上的任何 网站/ 平台。有代理支持、验证码绕过以及基于动态内容抓取 JavaScript 页面的优势。
　　代理爬取
　　它对 1000 个请求是免费的，这足以探索 Proxy Crawl 在复杂内容页面中使用的强大功能。
　　刮擦
　　Scrapy 是一个开源项目，为网页抓取提供支持。Scrapy 抓取框架在从 网站 和网页中提取数据方面做得非常出色。
　　
　　刮擦
　　最重要的是，Scrapy 可用于挖掘数据、监控数据模式以及为大型任务执行自动化测试。强大的功能可以与 ProxyCrawl*** 集成。借助 Scrapy，由于内置工具，选择内容源（HTML 和 XML）变得轻而易举。也可以使用 Scrapy API 扩展提供的功能。
　　抓住
　　Grab 是一个基于 Python 的框架，用于创建自定义 Web Scraping 规则集。使用 Grab，可以为小型个人项目创建抓取机制，以及构建可同时扩展到数百万页的大型动态抓取任务。
　　抓住
　　内置 API 提供了执行网络请求和处理已删除内容的方法。Grab 提供的另一个 API 称为 Spider。使用 Spider API，可以使用自定义类创建异步爬虫。
　　雪貂
　　Ferret 对于网络抓取来说是相当新的，并且在开源社区中获得了相当大的关注。Ferret 的目标是提供更清洁的客户端抓取解决方案。例如，允许开发人员编写不必依赖于应用程序状态的爬虫。
　　此外，Ferret 使用自定义的声明性语言，避免了构建系统的复杂性。相反，也可以编写严格的规则来从任何站点抓取数据。
　　
　　X 射线
　　由于 X-Ray、Osmosis 等库的可用性，使用 Node.js 抓取 Web 非常简单。
　　差异机器人
　　Diffbot 是市场上的新玩家。您甚至不必编写太多代码，因为 Diffbot 的 AI 算法可以解密 网站 页面中的结构化数据，而无需手动规范化。
　　差异机器人
　　PhantomJS 云
　　PhantomJS Cloud 是 PhantomJS 浏览器的 SaaS 替代品。使用 PhantomJS Cloud，可以直接从网页内部获取数据，并且可以生成可视文件并在 PDF 文档中呈现页面。
　　PhantomJS 本身就是一个浏览器，这意味着你可以像浏览器一样加载和执行页面资源。如果您手头的任务需要抓取许多基于 JavaScript 的 网站，这将特别有用。
　　原文来自：
　　官方发布:网站建设-搜索引擎优化-上海牛巨微好评
　　编辑是网页内容制作的重要人员，也是内容优化团队的重要成员。网络编辑所要求的综合素质远高于传统媒体，包括通过文字与搜索引擎打交道。其实本章的内容是专门为编者准备的。希望各位编者通过本章的学习，提高网站的搜索引擎友好度。
　　编辑如何配合SEO思维在更关注SEO的网站中，与SEO相关的从业者职位往往包括：SEO编辑、SEO分析师、SEO顾问、SEO顾问、SEO顾问项目经理、等等，还有一些信息网站，尤其是传统媒体转型的信息网站，编辑们往往还停留在“做好内容是编辑的职责”的老思维。事实上，SEO是一项需要实施的长期工作。编辑们在SEO方面进行针对性的培训是非常有必要的。
　　一、选对关键词 1、根据实际情况选择不同的流行度关键词：相似但不同关键词的内容，搜索引擎用户的检索次数非常不同。 网站创作内容时通常会选择最热门的关键词，但由于热门关键词竞争激烈，很多网站也会选择抽检量较低的一些关键词 避免竞争。
　　
　　编辑可以根据实际情况进行选择。百度指数()是基于百度海量网民行为数据的数据共享平台。编辑可以通过百度指数研究关键词搜索趋势，把握市场趋势，了解搜索背后的真实需求，洞察网民的兴趣和需求。 2.选择最常用的关键词：关键词可能是SEO人员最熟悉的。 关键词 将出现在标题的文本中，将网页的主题传达给搜索引擎。意味着必要。
　　但是，同一个物品可能有多个名称，同一个事物可能有多种表现形式。比如单反相机，官方标准名称是“5d mark ii”，而大多数用户喜欢称它为“无敌兔”，搜索引擎用户通常使用“5D2”来检索有关它的信息。另一个例子是“年龄”。类似的表达方式包括“几岁”和“几岁”。那么，在这种多义的情况下，编辑在确认文章关键词时，尤其是在确认标题中收录的关键词时，应该参考绝大多数用户的使用习惯。向搜索引擎用户倾斜。
　　二、了解搜索引擎的基础知识， 1.了解分词的一些基础知识：网页标题或文章往往由N个单关键词组成，搜索引擎会自动找到最重要的那个关键词，并把那个关键词作为页面的主题内容。例如，如果文章的标题是“百合的药用价值”，搜索引擎会将“百合”作为文章的主题内容。那么，由于“Lily”是文章的主题，其他栏目如“Related 文章”可以考虑多放一些与Lily相关的文章，这样可以增加网页的数量页面相关性，二来可以吸引更多用户点击。
　　2、了解搜索引擎对页面结构的划分：一般来说，一个网页往往由几个模块组成，文字占据重要位置。边框）远没有文字重要。结合上一点，与“百合”相关的“相关内容”最好放在正文下方，而与“百合”间接相关的“山药”、“苦瓜”等更适合放在放置在边框位置。 ，不干扰搜索引擎对网页的判断，还能起到吸引用户点击的作用。
　　
　　3、了解最基本的源代码：很多网站，尤其是传统企业、媒体网站，所有页面使用相同的标题和摘要——这是一种对搜索引擎极其不友好的行为，虽然这往​​往是网站技术人员不了解SEO造成的，但如果编辑对此稍有了解，就可以避免此类问题。
　　上海牛聚微网络科技有限公司的经营范围包括一般项目：网络技术服务；软件开发;信息咨询服务（不包括许可信息咨询服务）；企业管理咨询；信息系统运维服务；信息技术咨询服务；大数据服务；物联网技术研发；人工智能公共服务平台技术咨询服务；数据处理服务；计算机系统服务；动画游戏开发；数字文化创意内容应用服务；咨询和规划服务；物联网技术服务；社会经济咨询服务；营销策划；组织文化艺术交流活动；品牌管理;专业的设计服务；供应链管理服务；人工智能硬件销售；工业机器人安装维护；智能机器人销售；智能机器人研发；工程技术研究与试验开发；内贸代理；医务人员防护用品零售；网络销售（需取得许可的商品销售除外）（依法须经批准的项目除外，独立携带凭营业执照开展业务活动）。
　　---------------------------------------
　　有一种方法可以用脚走路。有一条路，你必须用心去走。绊倒的往往不是荆棘和石头，而是心。所以，看似道路在我们眼前铺开，实则心在路上怦怦直跳。深足浅足，快乐在路上，悲伤在路上。但只要你的心不走死胡同，生活就永远不会给你死胡同。返回搜狐，查看更多 查看全部

　　技术文章:[Python]爬虫技术:(JavaScript渲染)动态页面抓取超级指南
　　点击上方“Dataartisan Data Artisan”订阅！
　　当我们进行网络爬取时，我们会使用一定的规则从返回的 HTML 数据中提取有效信息。但是如果网页收录 JavaScript 代码，我们必须渲染它以获取原创数据。在这一点上，如果我们仍然以通常的方式从中抓取数据，我们将一无所获。浏览器知道如何处理这段代码并显示出来，但是我们的程序应该如何处理这段代码呢？接下来，我将介绍一种简单粗暴的方法来抓取收录 JavaScript 代码的网页信息。大多数人使用 lxml 和 BeautifulSoup 这两个包来提取数据。在这篇文章中我不会涉及任何爬虫框架的内容，因为我只使用了最基本的 lxml 包来处理数据。你可能想知道为什么我更喜欢 lxml。那' s 因为lxml使用元素遍历来处理数据，而不是像BeautifulSoup那样使用正则表达式来提取数据。在这篇文章中我要介绍一个非常有趣的案例——突然发现我的文章出现在最近的Pycoders周刊147上，所以我想爬取Pycoders周刊中所有档案的链接。
　　显然，这是一个带有 JavaScript 渲染的网页。我想抓取网页中的所有个人资料信息和相应的链接信息。那么我该怎么办呢？首先，我们无法通过 HTTP 方法获取任何信息。
　　import requests<br />from lxml import html<br /># storing responsere<br />sponse = requests.get(&#39;http://pycoders.com/archive&#39;)<br /># creating lxml tree from response body<br />tree = html.fromstring(response.text)<br /># Finding all anchor tags in response<br />print tree.xpath(&#39;//div[@class="campaign"]/a/@href&#39;)
　　当我们运行上述代码时，我们无法获得任何信息。这怎么可能？网页清楚地显示了这么多文件的信息。接下来我们需要考虑如何解决这个问题？如何获取内容信息？接下来我将展示如何使用 Web 工具包从 JS 渲染的网页中获取数据。什么是网络套件？Web 工具包可以做任何浏览器可以处理的事情。对于某些浏览器，Web kit 是底层的网页渲染工具。Web kit 是 QT 库的一部分，所以如果你已经安装了 QT 和 PyQT4 库，你可以直接运行它。您可以使用命令行安装存储库：
　　
　　sudo apt-get install python-qt4
　　现在所有的准备工作都完成了，我们将使用一种全新的方法来提取信息。解决方案我们先通过Web kit发送请求信息，然后等待页面完全加载完毕再赋值给一个变量。接下来我们使用 lxml 从 HTML 数据中提取有效信息。这个过程需要一点时间，但您会惊讶地看到整个页面加载完毕。
　　import sys<br />from PyQt4.QtGui import *<br />from PyQt4.Qtcore import *<br />from PyQt4.QtWebKit import *<br /><br />class Render(QWebPage):<br />    def __init__(self, url):<br />        self.app = QApplication(sys.argv) <br />        QWebPage.__init__(self)        <br />        self.loadFinished.connect(self._loadFinished) <br />        self.mainFrame().load(QUrl(url))        <br />        self.app.exec_()        <br />   def _loadFinished(self, result):        <br />    self.frame = self.mainFrame()        <br />    self.app.quit()
　　Render 类可用于渲染网页。当我们创建一个新的 Render 类时，它可以加载 url 中的所有信息并将其存储在一个新的框架中。
　　url = &#39;http://pycoders.com/archive/&#39;<br /># This does the magic.Loads everything<br />r = Render(url)<br /># Result is a QString.<br />result = r.frame.toHtml()
　　使用上面的代码，我们将 HTML 结果存储在变量 result 中。由于lxml不能直接处理这种特殊的字符串数据，我们需要转换数据格式。
　　# QString should be converted to string before processed by lxml<br />formatted_result = str(result.toAscii())<br /># Next build lxml tree from formatted_result<br />tree = html.fromstring(formatted_result)<br /># Now using correct Xpath we are fetching URL of archives<br />archive_links = tree.xpath(&#39;//div[@class="campaign"]/a/@href&#39;)<br />print archive_links
　　
　　使用上面的代码，我们可以得到所有的文件链接信息，然后我们可以使用这些Render和这些URL链接来提取文本内容信息。Web kit 提供了一个强大的网页渲染工具，我们可以使用这个工具从 JS 渲染的网页中抓取有效的信息。
　　在本文中，我介绍了一种从 JS 渲染的网页中获取信息的有效方法。虽然这个工具比较慢，但是非常简单粗暴。我希望你会喜欢这个文章。现在您可以将此方法应用于您发现难以处理的任何网页。愿一切顺利。
　　原文链接：原作者：Naren Aryan 译者：fibears
　　操作细节:网站后台管理系统操作指南
　　网站后台管理系统操作指南V30网站后台管理系统操作指南网络营销服务中心NITCCC 一系统操作环境3 二操作系统概述3 三栏管理模块操作71 栏目列表72 新增栏目11 四个产品模块操作 111 添加产品 11 标题标签 关键词标签 描述 标签描述 122 产品列表 143 产品批量上传 144 添加分类 155 分类列表 15 五首页广告模块操作 161 添加广告 172 广告列表 17 六个友情链接模块操作 171 添加链接 172 链接列表 18 七个权限管理模块操作 181 添加管理员 182 管理员列表 193 修改我的密码 20 八个 网站管理模块操作 201网站 设置 202 语言管理 233 主题管理 244 电子邮件模板 245 数据库备份 256数据库优化 25 一系统运行环境 PHP运行环境 Linux op操作系统 PHP5 或以上 Mysql 数据库 ZendOptimizer 328 NET 操作环境 Windows 操作系统 net35 或以上 Mssql 数据库技术支持 两种操作系统概述 福利类型 网站第一品牌 一切为了福利 感谢您使用 Benefit 30网站后台管理系统 图2-01 用户名和密码如图2-01 用户输入用户名和密码后，鼠标左键点击确定进入系统 如果用户忘记密码，点击此处取回，进入取回密码页面，提交用户名和邮箱即可取回密码。前提是系统已经配置了邮件转发功能，并且需要管理员邮箱。图2-02 图2-02 用户登录后的窗口。操作系统界面界面框架主要由头部左右主窗口三部分组成。 1.头部由NITC LOGO和三组按键组成。第一组走到前端，点击打开。然后去前台浏览效果并清除缓存。该功能主要是清除服务器上的缓存。空网站临时文件帮助是福利类网站后台管理系统操作指南退出是福利类网站后台管理系统第二组a刷新主窗口按钮b返回后台综合页面位置c 这是网站后台管理导航，除了产品展示类，完全对应前端导航栏包括子栏目，为用户提供直接、清晰、方便快捷operation 上述所有列均为系统默认列。点击按钮管理相应导航栏的内容。 d。管理更多导航栏。用户可以控制添加或修改导航栏的名称以及是否显示。仍然可以管理导航栏。第三组内容在后台提交或修改了任何数据。如果想在前台看到相应的变化，需要点击这个按钮发布。如图2-03所示，点击Generate Marketing Page按钮，新更新的页面会生成一个note。专供福利类型网站后台管理添加、编辑、删除、排序等操作。只有点击前台生成营销页面后才会生效。这是福利类型的一大特点网站 图2-03 静态网页更新 福利网站搜索引擎优化是对细节的优化。同理网站为什么有的内容排名好，有的排名差。这是因为网站如何做出成功或失败的细节网站网站排名更好网站权重更高。你不妨从网页的基础开始。让网页静态化是您不会后悔的选择。网站静态化有什么好处？ @>静态的好处是提高静态网页的速度。众所周知，aspphpjspnet等动态程序需要读取并调用数据库内容来显示数据。相对于流量，数据库读取次数增加，服务器资源被占用。影响网站的速度，使用网站做静态，直接去掉读数据库的操作，减少链接，提高响应速度网站第二个静态基于web的搜索引擎是从网站@ >优化分析的。搜索引擎更喜欢静态网页。与动态网页相比，搜索引擎更喜欢静态网页，这样更容易爬取。搜索引擎SEO排名更容易提高。阿里巴巴、百度、慧聪等页面大多采用静态或伪静态网页展示，更方便搜索引擎抓取和排名。 3、静态网页稳定网站1 从安全角度来看，静态网页除了开源程序外，不容易被黑客攻击。使用开源cms如果黑客不知道你的网站后端网站使用程序数据库的地址静态网页不易被黑客攻击2From网站稳定性据说如果程序数据库有问题，会直接影响网站的访问，而静态网页会避免这种情况，不会因为程序等而丢失。 信任级别2主功能模块左侧操作按钮网站栏目导航栏目添加栏目栏目管理产品管理产品中心添加产品产品列表产品批量上传添加分类分类列表首页广告添加广告广告管理友好链接添加链接链接列表权限管理添加管理员管理员列表修改我的密码网站管理网站设置语言管理主题管理生成全站邮件模板数据库备份数据库优化图2-04是登录后的综合页面a是用户友好的提示和日期b用户第一次使用向导使用NITC福利类型网站后台操作系统可以根据用户向导一步步进行相关操作，最终生成您的网站c客户咨询信息和产品统计 dNITC官方广告联系方式及版权声明 图2-04 三栏管理模块操作1栏目列表 福利类型网站特色模块 除了产品展示，前台和后台栏目完全对应前端展示栏目内容 后台管理栏目内容旨在为客户提供方便易懂的操作方法 在栏目列表中，用户可以单独展示分类，添加、编辑栏目内容、优化、设置、删除等。目前NITC30版本的栏目管理共有三种栏目。系统列是 NITC30 默认定义的列，不能删除。如果操作不想在前端导航显示，用户可以点击相应栏的显示，将隐藏的系统栏分为首页公司介绍产品展示新闻在线咨询联系我们首页公司介绍产品展示新闻在
　　
<p>在线咨询咨询列表 在咨询列表页面，用户可以查看删除或转发咨询信息的操作。会诊统计 在会诊统计页面，用户可以查看当年度月度会诊统计图和饼图。查询次数的饼图是各个地区查询的比例。联系我们 b文章列表用户在添加栏目时可以选择栏目类型文章列表的显示方式与新闻列表相同 c单页用户添加栏目时，栏目类型可以选择单页，单页显示方式和关于我们的显示方式一样。 2列添加一列添加注意当前NITCV30版本的列目录级别为二级列类型为文章单页列表四产品模块操作图4-011添加产品图4 -01 在添加产品页面填写相应信息并提交。请注意，以下项目是确保信息完整性的必需项目。添加多语言版本时，添加一种语言信息后会添加其他语言版本。信息还要尽量填写 允许的产品图片后缀格式 pdf格式 备注格式 下载页码格式 下载演示格式 下载文档格式 下载文件后缀 GIFJPG PNG 所有界面中的标志代表语言版本 所有界面中的代表都有一个鼠标悬停时提示。在前台显示内容会出现的位置，主要是为了方便用户明确添加以后会出现的内容的位置 Title label 关键词 label Description label description 下图显示了相关标签显示在搜索引擎。这里，titleKeywordsDescription等标签将在系统中详细说明其他优化设置同理。如何编写标题标签 网页优化中最重要的因素之一就是网页的标题标签。 TitleTag 在编写标题标签时通常会考虑以下因素。 1.所有网页都应该有自己的有很多独特的TitleTags网站犯了一个很初级的错误，就是所有页面都使用相同的标题，比如欢迎访问公司。事实上，虽然每个页面都属于同一个网站，但肯定会是他们在谈论不同的东西，可能是你的产品，也可能是你的服务。不同的网页必须为这个网页的具体内容写一个标题标签。 2 当您的网页被搜索引擎搜索时，标题标签应该对用户足够有吸引力。列出时，页面的标题来自标题标签。当用户决定点击哪个网站时，很大程度上取决于你的标题是怎么写的，对用户来说是否足够吸引人。如果你的标签只是一堆没有意义的关键词即使你的顶级用户不点击也没用3标题标签应该收录关键词这个关键词应该be for this page 而不是你的整个 网站，例如，这篇文章谈论的是标题标签。标题自然收录标题标签而不是我的整个网站待优化关键词同时虚拟主机关键词应该自然地融入到一个逻辑连贯的句子中而不是一个生硬的 关键词stacking 4 通常搜索引擎只考虑标题标签中有限数量的单词，例如前十到十五个单词，所以一个长满 关键词 的标题标签只会让你的 网站@ > 看起来更像垃圾。搜索引擎排名技术的改进 关键词只要你的标题标签不太长，它是在前面还是后面并不重要 5 尝试在标题标签中提及你的品牌或 网站可能的@>Name 当然，品牌或网站Name 与关键词 相比应该是次要的。例如，我通常在写网页时像这样构造标题标签文章Name –分类名称——网站如果名字太长，就用名字文章——网站如果名字太长，就用名字文章如何选择关键字 tagKeyword 标签是用来描述一个网页的属性，但是要列出的内容是 关键词这意味着根据页面的主题和内容选择合适的关键词除了考虑核心内容选择关键词时的页面，也应该便于用户通过搜索引擎检索。注 1. 使用半角逗号分隔不同的关键词。不要使用空格或英文输入状态下的空格。 2.关键字不是关键字。短语而不是段落 关键字标签曾经是搜索引擎排名中非常重要的因素，但现在它们已被许多搜索引擎完全忽略。如果我们添加这个标签，它不会损害页面的整体性能，但如果使用不当，则不会影响页面。不仅没有好处，还有诈骗的嫌疑。在使用关键词标签关键词时，要注意以下几点 1、关键词标签的内容要与页面的核心内容相关。确保使用的 关键词 出现在页面文本中。 2、用户使用方便。搜索引擎检索到的关键词太少，不适合META标签中的关键词 3 不要重复使用关键词 否则可能会被搜索引擎惩罚 4 查看全部

　　js抓取网页内容首先要抓到所有pagelet数据（pagelet）
　　js抓取网页内容首先要抓到所有pagelet数据（pagelet是javascript写的唯一一个tracebox，当浏览器关闭时，他会把所有的数据写入到cookie），那么，那个记住pagelet会再次回来的javascript解释引擎解释成原来的页面内容。之后，可以利用javascript的tostring方法接收该页面，那么就可以看到这个页面所有的html标签。
<p>看到<a>标签后你可以用this.fn="'<a>'"去设置记住的页面<a>。functioncrawler(e){varw=e.target.attribute;for(vari=0;i 查看全部

　　js抓取网页内容 JavaScript SEO 终极指南（Google SEOer必看）
　　5.分类筛选器
　　所以，如果这些内容在JavaScript 上没有处理好的话，很容易造成索引及排名上遇到困难。
　　那如何检查网页上哪些内容是JavaScript 所产生的呢
　　一、通过使用Chrome 插件：
　　这边介绍的工具叫做『Quick Javascript Switcher』，这个插件可以直接开关网页的JavaScript 功能，只要你关掉JavaScript 后，发现哪个部分的内容不见了，那很大程度就是那个内容是JavaScript 所产生。
　　从下图可以看到，当我们用插件关掉JavaScript 功能后，Pressplay 的主要内容消失不见了，那就代表说其中主要内容由JavaScript 所产生。
　　二、从开发者工具关闭
　　首先点击鼠标右键找到『检查』，你会进入开发者介面。
　　接着使用快捷键『Control + Shift + p』 (Windows) 或是『Command + Option + p』 (Mac)。
　　接着在光标处中输入JavaScript，就会看到一个『Disable JavaScript』选项，点击即可关闭JavaScript，同理要再打开只需使用相同方法再点击一次便可打开JavaScript 功能。
　　为什么网页源代码没有JavaScript 产生的内容！？
　　一般来说，我们在检查网页中的meta 标签、H 标签等内容时，最常做的就是从网页源代码中去查看，也就是『右键> 检查网页源代码』所呈现的内容。
　　而这个文件就是HTML 文件，但这份HTML 文件仅仅代表浏览器在解析页面时的最初讯息，而JavaScript 所产生的内容并不在一开始的HTML 文件上。
　　所以，检查网页源代码无法知道JavaScript 更新后的动态内容。
　　此时就要介绍一下HTML 加工后的DOM 了，这边为了不复杂化，简单叙述一下，当你『右键> 检查』出来的东西便是加工过的DOM（如下图）。DOM 里面会随着你与网站的互动，将JavaScript 所产生的内容加上去。
　　那如何区分HTML 源代码还是加工后的DOM 呢？
　　PS: 如果Google 爬取页面时无法完整呈现JavaScript 产生的页面，它至少可以索引为加载过的HTML 原始码。
　　在确认并且知道哪些内容属于JavaScript 所产生的之后，再就是理解Google 怎么爬取JavaScript，并且优化你的内容让网页排名上升。
　　二、Google 怎么爬取JS 网站
　　对于搜索引擎而言，JavaScript 一直是Google 努力在改善爬虫技术，让搜索引擎索引并排名的目标之一。虽然JavaScript 为访客带来更良好的使用体验，但是对于搜索引擎而言却不是一件容易的事情，请记得：
　　根据onely 网站调查指出，许多大品牌网页上JavaScript 之内容未被索引的情况：
　　你可以想像，Yoox 在国外是知名电商网站，每个月可以有高达1400 万的流量，但是网站由JavaScript 产生的内容竟然由高达92% 是Google 不会索引到的，由此可知这样对SEO 的影响可以有多大，损失又可以有多多。
　　但同样的，也有把JavaScript 所产生的内容处理的很好的网站， 以及 的网站分别让JavaScript 所产生的内容，被100% 及99% 的索引了，所以，只要方法得当，我们也能让JavaScript 与SEO 兼顾。
　　Google 爬取页面的过程
　　在早期搜索引擎只需要下载HTML 档便可完整了解网页内容，但由于JavaScript 技术的崛起及普及，搜索引擎甚至需要像浏览器一样，以便他们以访客的角度查看网页内容。
　　而Google 处理渲染的系统，被称为Web Rendering Service (WRS)，中文可以翻译成网页渲染器，后面以WRS 代称，而Google 也给出了一张简化的图作为说明。
　　简单说明Google 爬取步骤，传统爬取HTML 档页面时，每项元素都很好爬取，整个索引并排名页面的过程也迅速：
　　1.Google bot 下载HTML 档
　　2.Google bot 从源代码中提取url 网址，并快速访问这些url
　　3.Google bot 下载CSS 档案
　　4.Google bot 将下载下来的资源送到Google 的Indexer
　　5.Google 的Indexer 检索页面
　　但如果是今天爬取JavaScript 所产生的网站内容的话，Google 会怎么爬取呢：
　　1.Google bot 下载HTML 档
　　2.Google bot 在源代码中找不到链接，因为JavaScript 未被执行
　　3.Google bot 下载CSS 及JavaScript 档案
　　4.Google bot 使用WRS（渲染器，Indexer 的一部分）解析、编译并执行JavaScript
　　5.WRS 从外部API、资料库获取资料（data）
　　6.Indexer 可以索引内容
　　7.Google 发现新的链接，并将其加入爬取排队队伍之中（Googlebot's crawling queue）。至此，执行一般Google bot 爬取HTML 页面的第二步。
　　可以发现，为了渲染出页面，Google 多了许多步骤。再来讲一下渲染过程中，Crawler、Processing、Renderer 及Index 之重要节点。
　　三、Google 爬取JavaScript 过程中的重要节点
　　Crawler（爬虫）
　　首先，crawler 会先向网站服务器发送一段请求(request)，网站服务器会返回内容及其标头(header)，然后crawler 将它储存起来。
　　而由于mobile-first indexing的关系，发送请求的可能大多都是来自手机版的爬虫(mobile user-agent)，从Google Search Console上可以检查到，你可以透过网址审查或是涵盖范围来知道现在是电脑版索引还是手机版优先索引的状态。
　　然后有些网站会使用user-agent detection，侦测访客来到自己网站时，是用手机还是桌机、浏览器是什么、浏览器版本的不同资讯，再根据这些资讯给访客相对应的资讯，例如今天侦测到访客是用手机版本的chrome，便呈现手机版的页面给访客看。
　　需要注意的是，有些网站遇到爬虫时可能会设定禁止该爬虫爬取页面，或是禁止特定地区ip 的访客查看页面，这时候就要小心如果网页没设定好的话，很有可能爬虫是看不到你的内容的喔。
　　记得从几个方面测试看看Google 爬虫能否顺利看到你的页面：Google Search Console 的网址检查器、移动友好测试工具以及富媒体结果测试工具。
　　补充：从爬取过程那张图可以看到，Google 将爬取后产生的页面称之为HTML，但实际上，为了建构页面内容，Google 其实爬取并储存了相关所需的资源，像是CSS 文档、JS 文档、API 端口、XHR requests等相关资源。
　　Processing（处理）
　　Processing 的过程中其实是非常复杂且处理很多事的，这边重点讲述Google 处理JavaScript 的过程。
　　（一）遵循限制性最高的要求
　　什么是限制性最高的要求，就是假设今天Google 渲染(render)出页面后，原本meta robots 的信息是index 被加入了noindex，那么Google 将不会索引其页面，甚至其它尚未被渲染的页面，因为JS 产生noindex 这类的语法，则可能导致页面无法被渲染。
　　（二）处理资源及链接
　　Google 并不像访客那样浏览页面，Processing 的过程中有个很重要的工作便是检查页面上的链接以及建构该页面所需的文档。
　　这些链接被记录，加到等待爬取的排队序列中（crawl queue），反覆执行找链接、链接排队、爬取链接，便是Google 本身爬取整个网路世界的方式。
　　Google 透过属性，将建构页面所需的资源，像是JS、CSS 文档被记录。但是页面对页面的链接需要以特定的形式所呈现，才能被Google 所抓取，那就是以链接”>的形式。
　　
　　能被爬取的連結a>
　　不能被爬取的連結span>
　　不能被爬取的連結a>
　　能被爬取的連結a>
　　如果你的链接是JavaScript 所产生的话，那必须等到页面被渲染后，爬虫才能爬到。但有个风险就是，不一定页面上的内容全数都能被成功渲染，有可能因为检索预算不足的情况下渲染不到你的链接，所以务必留意链接的部分。
　　（三）删除重复内容
　　Google 倾向将重复页面删除，或者是降低重复页面的爬取优先级别。许多JavaScript 所产生的网页，都会有个app shell models，可以想像他是最小化的HTML、CSS 及JS 所组成，用户可以在不同需求下再次载入所需要的内容。
　　但这有一个问题就是，app shell models 只有最简单少量的内容及源代码，所以很有可能被Google 误判为重复性内容，也造成其页面能够被渲染的优先级下降，正确的内容无法被索引，以及错误的页面被排名。
　　（四）缓存及其它
　　Google 下载页面HTML、CSS、JS 文档并渲染后，就会将其缓存。并且还有其它许多事情是Google 会同时处理的，并不止于这些，但处理页面的部分重点就在上述几项。
　　Render queue （渲染序列）
　　接下来许多页面即将被渲染， 所以在渲染排队中，根据Google 早期的说法，由于检索预算的优化，渲染页面并检索会是比较后期的事，俗称第二波索引( two waves of indexing )，但其实在近期onely 的Bartosz Goralewicz 与John 及Martin 讲述到，第二波索引的影响其实越来越小，Google 在等待渲染的中位数时间也只有5 秒钟，可见Google 在渲染并索引这一块下了相当大的功夫，未来渲染也将与检索能够同步进行‍。
　　Renderer（渲染器）
　　还记得前面说的食谱与料理吗？页面在渲染前的DOM 跟渲染后的DOM 就像料理的食谱，以及做好的烤鸡一样，简单讲DOM 就是像图中那树状图所呈现。
　　料理前的食谱是不会改变的，所以渲染前的页面源代码一样不会因触发JavaScript 而改变，所以可以想像Renderer 就是一个主厨，料理食谱并且产生一道料理（JavaScript 渲染出来的页面），Renderer 为的就是去渲染出JavaScript 相关内容。
　　要知道光是可以爬取整个网路世界成千上亿的资料便是不容易，还要将其内容渲染出来耗费资源非同小可，根据onely 指出，为了让JavaScript 内容被爬取、渲染并且索引，耗费的资源是一般HTML 页面的20 倍，一定要格外小心。让我们看看渲染器中有哪些重要的东西吧。
　　(1)快取资源（Cache Resource）
　　Google 相当重度依赖快取，它会快取各种文档，文档快取、页面快取、API requests 等，在被送到渲染器前就会先快取起来。因为不太可能每准备渲染一页，Google 就下载一次资源，所以优先快取好的文档资源就能快速渲染页面。
　　但这也带来几个问题，有可能Google 会快取到旧的档案、旧版本的资源，导致在渲染页面时出现错误。如果有这种状况出现记得做好版本控制或是内容指纹，让Google 可以知道你更新了新的内容。
　　(2)没有特定逾时时间（No Fixed Timeout）
　　很多网上谣传渲染器只会用5 秒渲染你的页面，但其实并不然，Google 渲染时可能会加载原有快取的档案，会有5 秒的这一说法，主要是因为网址审查工具相关工具，检测页面时需要获取资源所以需要设立合理的逾时时间。
　　为了确保内容完整呈现，Google 没有特地设定逾时时间，但为了爬虫爬取及访客体验，更快的速度一定是更好的。
　　(3)渲染后，Google 看到了什么？
　　这边要提到一个很重要的点是，Google 并不会主动与网页上的内容做互动，所以有些JavaScript 的特效，需要访客点击或触发的特效，是不会被Google 所触发，不会点击更不会滚动页面。
　　所以早期你们一定有听过一个说法，不要使用瀑布流网页的原因就是如此，因为Google 不会卷动你页面的情况下，就无法触发JavaScript 所产生的内容，但Google 也不笨喔，为了克服瀑布流，他们直接把机器人设定成一台超长版手机，这样可以直接渲染出指定长度的内容。
　　可是一般需要JavaScript 触发的内容无法被Google 渲染出来了喔，所以一定要特别注意，链接也不要出现JavaScript 所产生之链接。
　　四、如何打造JavaScript 友善的网站
　　前面我们说到JavaScript 现在越来越重要，也是越来越多网站使用的技术，所以与其完全避开使用JavaScript，不如打造一个既能满足开发者需求，又能争取排名的JavaScript 网站，让来看看有哪些重要因素吧。
　　1.可被爬取(Crawlability)：确保你的网站能保持良好的结构被爬取，并且爬虫也能找到有价值的内容。
　　2.可被渲染(Renderability)：确保页面上的内容可以被渲染。
　　3.爬取预算(Crawl budget)：Google 花了多少资源及时间渲染你的页面
　　你的JavaScript 内容对搜索引擎足够友善吗？
　　首先检查。你要知道你的网页在Google 眼中长的如何，那到底有哪些常见检查方法，这些方法正确吗？
　　1.透过网址审查工具
　　Google Search Console 的网站审查工具可以呈现渲染后的页面，其它官方的工具包含AMP 测试工具、富媒体搜索结果测试等官方检测工具，皆能呈现出渲染后的样貌，这边以移动友好测试工具为例。
　　可以看到屏幕截图的画面，显示出Google 渲染出的画面，可以试着去看屏幕截图，重要内容是否能够被渲染出来。
　　渲染后的屏幕画面
　　另一方，你可以从检查工具的源代码中查看内容是否有被渲染出来，直接搜索内容、H 标签等方式确认。
　　记得从渲染后的HTML（DOM – the rendered code）检查：
　　2.site 指令+关键字检查
　　site 指令一般而言，大多用来检查页面在Google 之收录状况，那如果说你直接『site:网址』后发现页面有被Google 收录，你就能用这个方法检查，因为Google 其实会根据关键字修改搜索结果页上的Description，所以当你输入一段内文时，Google 其实很有可能根据你这一段内文呈现在Description 上给你看。
　　以pressplay 页面为例，pressplay 上的课程简介其实就是用JavaScript 去产生的，下图中可以看到，当我们将JavaScript 功能关闭时，就会发现内容只剩下下面那一段，那么要确认Google 是否有索引到主要内容便可用『site 指令+关键字』做检查。
　　只有上面红框文字非JavaScript 产生。
　　而在连老师『每月给你SEO最新趋势』这堂课中会发现，只要将JavaScript 功能关掉，主要内容便只剩下其中红框这一段，再来，复制一段JavaScript 产生内容的文字『每年服务客户横跨12大产业，我们了解你的产业问题，资深SEO专家团队陪你洞悉新·SEO』+ site:网址试试看。
　　有没有发现，其实JavaScript 产生的内容Google 是有渲染出来并且索引到的，但如果要更准确的检查，建议还是要从官方的网址测试工具查看。
　　注：网址审查工具：
　　Google Search Console 网址审查工具#%E7%B6%B2%E5%9D%80%E5%AF%A9%E6%9F%A5
　　结构化测试工具
　　富媒体搜索结果测试工具
　　AMP 测试工具
　　移动友好检测工具
　　Google 无法索引我的网页怎么办
　　刚刚前面有提到，透过网址审查工具首先检查Google 渲染页面的状态为何，如果渲染未出现主要内容，那么就可能导致内容无法被索引，你需要透过网址审查工具中的更多信息，查看是否有资源遭到阻挡。
　　更多信息中会告诉你哪些资源遭到封锁
　　所以，先确保内容是否能被正确渲染后，再确保能否被索引，接着才能优化内容竞争排名。
　　Google 未能索引你网页的原因：
　　了解Google是否能渲染你的内容，是否能正确索引，然后再争取排名，一步步找出问题并解决它。
　　五、渲染方式的不同：向Google 展示JavaScript 内容的不同方式
　　你以为你的页面对Google 来说只是渲染出来，然后查看内容、收录并且排名吗？其实没那么简单，网页渲染的呈现方式还能分为客户端渲染（Client Side Rendering）、服务器端渲染（Server Side Rendering）、混合式渲染等方式。
　　
　　SSR（服务器端渲染），通常对于Google bot 以及访客而言，能够接受到完整的HTML 档案，内容也已经呈现好了。
　　CSR（客户端渲染），近几年来越来越流行的渲染方式，对于Google bot 及访客而言，最初拿到的页面几乎是空白的HTML 档案，随着访客的操作，JavaScript 非同步的产生并下载内容。用料理与食谱来比喻，Google bot 及访客都只拿到了一份食谱，后面呈现端看访客如何烘培蛋糕（操作网站）。
　　但是，Google bot 并不像访客一样，会有许多花里胡哨的操作，Google bot 不会滚动、不会点击更不会跟网站进行互动，所以如果你是全CSR（客户端渲染）的页面一定要注意，解决方法如下:
　　①服务器端渲染（SSR）
　　敞偌你的页面因为JavaScript 渲染问题导致页面无法被索引，那强烈建议将重要页面或是网站改成服务器端渲染。
　　②动态渲染（Dynamic Rendering ）
　　有时候当然不可能说全改成SSR ，于是动态渲染就变成当今蛮重要的一种渲染方式，能同时做到CSR 想呈现的效果，又能同时达到SEO 排名。
　　从下图可以看到，网页使用了全JavaScript 所产生的内容，但是提供给Google bot 的是另一静态HTML 页面，很好的解决了Google 爬虫无法查看渲染页面的问题。
　　以下三种服务可以很好的帮助你实现动态渲染功能：
　　Prerender.io
　　Puppeteer
　　Rendertron #0
　　Google 官方文件也提供了转译原理、说明及方式，推荐大家看看。而下图是各种渲染JavaScript 的方法，其实大部分对于Google 来说都是渲染的出来的，比较难的还是在CSR（客户端渲染）的部分，所以如果你是CSR 建议导入动态渲染喔。
　　六、如何建构一个友善SEO 的JavaScript 网站
　　其实这个小节的内容有部分你可能过去就知道了，但因为JavaScript 的关系仍有部分不同。
　　允许Google 爬取
　　如果连网页都不能爬取、渲染的JavaScript 资源都无法读取的话，就不用说要排名啰，记得Robots.txt里不要禁止渲染相关资源，在Robots.txt中加入以下指令：
　　User-Agent: Googlebot
　　Allow: .js
　　Allow: .css
　　On-page 优化
　　基本上on-page 上的重要元素应该都要能够被呈现出来，记得透过网址审查工具仔细检查是否都有出现：
　　JavaScript 网站最常出现的一个状况是重复Title/Description 被重复使用，记得可以从Google Search Console 中的涵盖范围查看，又或者透过Screaming Frog 等工具确认。
　　网址的点击
　　前面虽然都有提到，但这边还是正式说明一下，在2018 年的Google I/O 大会上便说到，因为Googlebot 并不会去点击、滚动或是与网页做互动，所以如果你的链接是以onclick 的方式呈现的话，将不会被Googlebot 所爬取。
　　对Google 而言，好链接与坏链接
　　同样的，在导航上、分页上、内容上一样切记要使用 的方式去呈现链接，才能确保Google 会发现并爬取你的链接。
　　网址的更新
　　对于部分网页采用SPA（Single Page Application）方式所呈现的网页，在更新网页时，必须使用History API，对于较早期的开发者而言，在更新网页Url 时采用的是片段（fragement）的方式，那网址就会变成我们常见的锚点，如下：
　　Our products
　　但以『#』这种形式的连结对于Google 来说并不会抓取喔！虽然早期开发出一种连结形式，将『#』取代成『#!』，但这种方式已经过时了，网址也会变得相当丑。
　　但是透过History API 的方式就能让网页资讯变动时，链接才会变换成Google 可爬取的形式，完整介绍可参考Google 官方文件。
　　错误页面
　　因为JavaScript 框架是客户端而非伺服务器端，所以像是当SPA 页面产生错误时，并没有办法传递出404 状态码到服务器中，此时请采取以下其中一种方式解决：
　　l使用JavaScript 转移到你原本就设定好404 状态码及页面不存在讯息之页面
　　l将错误页面加上noindex 标签，并在页面上呈现『404 页面错误』信息，这样子页面就能被视作软404（soft 404）的状态。
　　Sitemap
　　我们可能因为使用JavaScript 产生了网站的许多内容，并没有办法说一次到位，解决所有JavaScript 产生的SEO 问题，此时Sitemap.xml 有着重要的角色，就是告知Google 网站重要的页面有哪些，对于你提交的页面，Google 可能会优先爬取。
　　但同时，你也必须确保Sitemap 上的所有页面链接没有以下问题：
　　重复内容
　　被canonical 指到别的页面
　　404 错误页面
　　301 转址到其它页面
　　空白页面
　　等等…
　　这样Sitemap 才能真正的发挥他的作用，让Google 知道你重要的页面。
　　总结
　　JavaScript 所产生的内容，已经不像过往几年Google 爬虫完全无法理解，随着开发技术的进步JavaScript 也成为网页开发的重要元素，所以不要急着排斥它。
　　记得首先，让Google 能够渲染出你的页面；其次，确认Google 有顺利索引你的页面；接着，按着你一般优化SEO 的方式，排除重复内容、优化内容，加强关键字排名。
　　这看似简单的几个步骤就花了很大一个篇幅在说明了，所以一起努力建立一个友善SEO 的JavaScript 网站吧！
　　参考资料：
　　l了解JavaScript 搜寻引擎最佳化(SEO) 基础知识
　　l修正会影响搜寻体验的JavaScript 问题
　　l导入动态转译
　　lRendering on the Web
　　lJavaScript SEO: What You Need to Know
　　lThe Ultimate Guide to JavaScript SEO (2020 Edition)
　　lJavaScript and SEO: The Difference Between Crawling and Indexing
　　lMaking JavaScript and Google Search work together
　　lRendering SEO manifesto – why JavaScript SEO is not enough
　　lJavaScript vs. Crawl Budget: Ready Player One
　　lEverything You Know About JavaScript Indexing is Wrong
　　lStatic vs. Server Rendering
　　lDeliver search-friendly JavaScript-powered websites (Google I/O '18)
　　lJavaScript SEO – How Does Google Crawl JavaScript 查看全部

　　js抓取网页内容简单的说，不过有一定要用到
　　js抓取网页内容简单的说，不过有一定一定要保存下来，随着网站变更，需要及时获取最新的更新的数据。js抓取网页内容更快，复杂的一些，需要用到一些调试等，稍微复杂一点。
　　
　　一般都是应该用到了，有些场景下会用到。1.在存储数据库的时候都会用到，但是很多情况下会用到模拟方法去抓取一个页面。2.在用户登录的时候，往往需要验证身份，而提交数据给服务器的时候一般对此来判断真假。服务器验证身份，传给数据库进行判断，有时候可能有多个身份，有时候一个。3.在网站需要实时更新的时候，这时候一般都会通过请求头中的data选项将需要推送的数据信息传递出去，那么也会用到http代理请求获取数据的方法。而一些地方可能会有开放接口，那么也可能会有，这就是你需要抓取的数据源。等等。
　　当我们在爬取一些网站或者大量网站的时候，我们会发现我们并不是能够通过简单的网页来完成更新，比如这个网站我们爬取下来可能数据量是很大的，我们要多次传递文本。这时候有可能我们的机器等级，或者是内存的足够程度，这些不断的传递文本我们是不能够完成更新的，所以这时候会用到http代理，代理通过传递包含正确请求规则和协议的请求，可以模拟浏览器发送ajax请求并且能够返回原始请求。
　　
　　通过验证包含某些规则的请求，可以模拟http请求并且成功返回结果。原理：作用：以上只是一个最简单最容易的方法。对于解决慢爬取问题，可以采用代理池。1.对于python爬虫中的代理，一般有以下几种，1.轮询代理：importrequests2.http代理：requests.get('')3.https代理：requests.post('')4.其他:伪装请求，路由代理或者脚本requests的get_request只需要一个正常的请求即可，所以代理池python可以用:/。
　　2.其他这是golang或者java和javascript引擎的。通过gzip压缩上传代理到http代理池(代理池构建器构建代理链并且给代理发布)代理池(1到6):straxper,phantom代理池thehttprequestthatsendsanotherurlforallproxywillbeexecutedinredirectingandretrievingresponses.foreignproxy:指使用httpheader不对http上传文件有限制。
　　json-redirect：没有设置gziprequest参数。postman：postmaniscombinedwithjsongzip.untraceableparser(json-redirect).theindexoftheoptionstoproxymustbeconfigedascontent-typeminor.4.postman的ifexistsjson-redirect.等。ifexists的关键字必须是post,不是get,而且返回。 查看全部

　　js抓取网页内容 JavaScript SEO怎么做
　　点击可听原文音频
　　Hi. I’m Charles from Cross Border Digital. Are you using JavaScript to build your website? Or maybe you're thinking about using one of the modern JavaScript frameworks like Ember，or Node, or React, or Angular. Great frameworks for building very app-like interfaces on the web.
　　大家好，我是来自Cross Border Digital的Charles. 你是否在用JavaScript建站？或者你正在考虑用使用当前比较流行的JavaScript框架：Ember、Node、React 或者是Angular建站。这些都是非常优秀的框架，给网站访客提供类似App的操作体验。
　　But there are some specific challenges to using these JavaScript frameworks when it comes to SEO. Today, I want to share some insights and advice to help you use these frameworks in a way that will work with Google and ensure that you can rank your website.
　　但是，当涉及到SEO时，使用这些JavaScript框架存在一些特定的挑战。今天，我想分享一些见解和建议，以帮助您以与Google兼容的方式使用这些框架，确保网站在搜索引擎可以获得排名。
　　So when it comes to understanding the implications of using JavaScript to build your website, there's really two key things that we need to talk about.
　　因此，在理解使用JavaScript开发网站的意味着什么时，实际上需要讨论两个关键问题。
　　The first is how Google actually works, how they treat JavaScript, how they understand JavaScript.
　　首先是Google的实际工作方式，如何对待JavaScript，如何理解JavaScript。
　　And the second is understanding the difference between client-side and server-side rendering of the content and HTML on your website.
　　其次是了解网站上内容和HTML在客户端和服务器端渲染的区别。
　　These two things together if we can understand these, then we can understand how Google is going to interpret our JavaScript-powered website.
　　如果我们能理解这两点，那么就能了解Google如何读取JavaScript网站。
　　OK, so let's first talk about Google. There are in fact two parts to Google's crawling and indexing of the web.
　　首先来讨论一下谷歌运作方式。谷歌爬取收录网站可以分为两部分：
　　The first part, the crawler known as Google bot is the part of the infrastructure that follows every link it can find on the web to uncover every URL on your website and on every other website on the web. The Google bot crawler can't render JavaScript. It's simply visits a page. It will do a very quick pass of any HTML that it finds on the page to see if there are any other links it can follow, but otherwise, it simply passes the URLs that it does find back to the indexer.
　　
　　第一部分，被称为Googlebot的爬虫，是搜索引擎基础结构的一部分，它通过页面上的链接，去发现更多的页面。Google bot爬虫无法渲染JavaScript。它只是访问页面。爬虫会快速查找HTML页面上的链接，继续抓取新的页面，没有新页面就会将爬取到的链接返回谷歌索引（indexer）。
　　The indexer is the part of Google's infrastructure that completely renders a page of all the content, all of the CSS, all of the layout to try in the content, to try and understand what that page is about. So that when someone does a query, it can return that page if it is relevant. Now the indexer can render JavaScript.
　　索引是Google搜索引擎基础结构的一部分，它负责渲染页面的所有内容，CSS，布局以了解该页面的核心信息。当用户在搜索引擎搜索时，才能返回客户搜索相关的页面。Indexer可以渲染JavaScript。
　　So it is true to say that Google can render JavaScript-powered web pages.
　　因此，谷歌支持渲染基于JavaScript开发的网页。
　　But to completely understand the implications of using JavaScript, it is also important to understand the difference between client-side and server-side rendering of JavaScript, because that makes a big difference to the way that Google will interpret your website.
　　但是要完全了解使用JavaScript对网站的影响，理解客户端和服务器端JavaScript渲染的区别也很重要，因为会导致Google读取网站的方式有很大的不同。
　　So generally speaking, these modern JavaScript frameworks like React, Node, and Ember, and Angular, they render in the client side. That means that when someone visits your web page that's built on one of these frameworks, the JavaScript application is delivered to the browser and then it renders everything in the browser. It calls the CSS, it calls the content, it calls the images, and any other resources required to lay out your web page into the browser and renders them on the client side.
　　因此，一般而言，这些现代JavaScript框架（例如React，Node和Ember和Angular）在客户端渲染。这意味着，当用户访问基于这些框架之一开发的网页时，JavaScript应用程序将交付给浏览器，然后在浏览器渲染所有内容。将CSS，文本，图片以及其他与页面展示有关的资源推送到浏览器，在客户端渲染。
　　A server side rendering is when all of that work is done on the server and the HTML of the complete page and all of the content is delivered to the browser.
　　服务器端渲染是指在服务器端完成所有渲染工作并将完整页面的HTML和所有内容都交付给浏览器。
　　Now this has big implications for Google because as we said, the Google bot can't render JavaScript. So that means that when Google bot visits your home page or your JavaScript-powered website, if you're rendering client side, it means that the Google bot will get that JavaScript application, but it can't render any content or any link. So it won't find any other links to crawl. It will have to send that single URL back to the indexer. The indexer will then render that page it will find any links and content on that page. It will send any links back to the crawler so that they can then continue to follow those you URLs to see if they can find any other links.
　　这就对Google收录网站产生了重大影响，因为前面所说，Google bot无法渲染JavaScript。因此，这意味着当Googlebot访问您的主页或基于JavaScript的网站时，如果网站是客户端渲染，则意味着Googlebot将获取该JavaScript应用程序，但无法渲染任何内容或任何链接。因此Google bot无法找到页面上的链接。只会返回一个URL给谷歌indexer。谷歌Indexer将渲染页面并发现页面上的更多链接和内容。发现新的链接则会返回给Google bot去继续抓取进一步发现更多的链接。
　　And in this way, it really slows down the process of crawling your website in a very big way.And this is particularly relevant for large websites. So the other thing that I have to say about client-side rendering is that Google's indexer uses a version of Chrome for rendering JavaScript-powered websites that is about three years old.
　　这就极大地减慢了网站被谷歌抓取的速度，这对于大型网站影响尤为重大。另外，关于客户端渲染，Google的indexer用来来渲染JavaScript网站所使用的Chrome版本已有大约三年的历史。
　　And that means that it can't support all the latest features of these modern JavaScript frameworks. So if you're building a JavaScript-powered website that renders on the client side, it is very important that you ensure that it is set up in such a way that it degrades nicely forolder versions of browsers so that Google can render your content and your HTML completely.
　　这意味着它不能支持那些现代JavaScript框架的所有最新功能。因此，如果您要构建一个以JavaScript为基础的网站，并在客户端进行渲染，那么确保Google可以完全渲染您的内容和HTML。
　　
　　I've seen many cases where a client-side rendered JavaScript page, Google is able to crawl or index part of it but it doesn't see all of the continent because of some of the features that have been included in that page. So very important that your JavaScript-powered web page degrades nicely for all the versions of the browser.
　　我看过很多客户端渲染的JavaScript页面，Google能够对其进行抓取和编制索引，但是页面中包含的某些功能谷歌无法完整抓取。因此要确保你基于JavaScript开发网页对于所有版本的浏览器都可以很好地渲染。
　　So we know that Google bot can't render JavaScript. And whilst the Google indexer can render JavaScript, we also know that it is limited to older versions of Chrome. So it doesn't support all the latest features of these modern JavaScript frameworks. So if we are doing client-side rendering, it is more difficult to get all of our content indexed and it really does slow down the entire process of crawling and indexing your website, which includes any changes you make. So if you make changes to your website, particularly if you have a large website, it can take weeks or months for those changes to be reflected in the Google index.
　　我们知道Google bot无法渲染JavaScript。Google indexer可以呈现JavaScript，但我们也知道它仅限于旧版Chrome。因此，它不支持这些现代JavaScript框架的所有最新功能。因此，如果在进行客户端渲染，则很难对所有的内容建立索引，这确实会减慢对网站被抓取和索引的整个过程，其中包括您所做的任何更改。因此，如果您对网站进行更改，尤其大型网站，则这些更改可能需要数周或数月才能反映在Google索引中。
　　So what to do? Well, our strong recommendation is to use old-fashioned content management systems for public facing web sites, first and foremost. If you haven't yet startedthe build of your website, then we would strongly recommend you look at one of the content management systems like Ambraco, or Wordpress, or Drupal. Or if you're doing e-commerce, use one of the platforms like Shopify, or BigCommerce.
　　那么该怎么办？我们强烈建议普通网站使用老式的内容管理系统。如果您还没有开始网站的搭建，那么我们强烈建议您考虑内容管理系统，例如Ambraco，Wordpress或Drupal。如果是电商网站，可以考虑用Shopify, BigCommerce电商建站系统。
　　These content management applications render everything on the server side and deliver the complete HTML to the browser and to Google, which makes it much easier and faster for Google to completely crawl and index your website.
　　这些内容管理应用程序在服务器端呈现所有内容，并向浏览器和Google提供完整的HTML，这使Google能够更轻松，更快地完全抓取您的网站并为其建立索引。
　　If you have already built a JavaScript-powered website, or if you really want to for whatever reason, then our drawing recommendation is to configure that application to render everything on the server side and deliver the complete HTML and content to the browser and to Google in the same way that one of these older traditional content management systems does. If you can do that properly, then it will make it a lot easier and faster for Google to index your JavaScript-powered website.
　　如果您已经建立了JavaScript网站，或者出于特殊原因确实想要这样做，那么我们的建议是配置该应用程序在服务器端渲染所有内容，并将完整的HTML和内容提供给浏览器和Google 就像这些较旧的传统内容管理系统之一一样。这对于谷歌快速抓取收录你的JavaScript网站会有很大帮助。
　　Perhaps, you've already launched a JavaScript-powered website that is rendering everything on the client side. You're not sure how to configure it to do that on the server side. There are third party services like Prerender.io, which might help. They might be worth looking at as well.
　　又或许，您已经发布了一个在客户端渲染的基于JavaScript开发的网站，不知道如何改为在服务器端渲染。有一些第三方服务获取可以帮你解决这个问题，比如Prerender.io。可以了解一下。
　　So in a nutshell, a lot of SEO is about making it easy for Google and not putting hurdles in Google's way. And when it comes to using JavaScript on your website, there are quite a fewpitfalls and traps that if you're not aware of them, it's easy to fall into.
　　简而言之，很多SEO都是为了帮助Google而不是阻碍Google抓取网站。在您的网站上使用JavaScript时，会有很多陷阱，稍不小心就掉入。
　　So if you have any questions, we would love to help. So hit us up here on WeChat. We could have you to discuss your specific case and we look forward to talking to you. Thanks.
　　如果您有任何疑问，欢迎联系我们微信小编。期待与您交流，谢谢大家。 查看全部

　　js抓取网页内容时将filename中的文件名直接
　　js抓取网页内容时，javascript将filename中的文件名直接作为目标文件名，
　　用http轮询服务端来获取服务器的参数值.这样就可以保证一定几率下能获取到目标内容.如果可以连接后就可以通过请求获取文件后缀名,然后把这个文件后缀名发送给服务器.而服务器获取好你的参数值就可以存成文件名,如果不需要那个文件名就设置参数值.返回给客户端,客户端再解析和编译.这个是一个闭环逻辑...
　　
　　针对不同浏览器实现不同，jquery官方的api列表中有一个entrylist，这些api我们用起来已经很习惯了，回顾下我们用的webpack插件arraybuffer，如下github-arraybuffer/arraybuffer:arraybuffer:abetterwaytoreducearraysizegithub-arraybuffer/coarse-enumerable:savebygzipformat。
　　我的经验是file_path_matching根据文件url先查找相应的文件名
　　
　　把网页读出来，然后针对不同的文件使用不同的js解析，处理url请求对应的内容。
　　大规模编写，全用js请求获取。几万行代码完美解决。
　　如果是静态网页的话，请使用es2015版本的javascript，可以使用es6库，速度高，效率也会慢一些；脚本语言也可以用nodejs实现，一行代码就可以搞定了。 查看全部

　　js抓取网页内容 【第2030期】JavaScript 启动性能瓶颈分析与解决方案
　　前言
　　找到它存在的意义。今日早读文章由@王下邀月熊翻译授权分享。
　　正文从这开始~~
　　在 Web 开发中，随着需求的增加与代码库的扩张，我们最终发布的 Web 页面也逐渐膨胀。不过这种膨胀远不止意味着占据更多的传输带宽，其还意味着用户浏览网页时可能更差劲的性能体验。浏览器在下载完某个页面依赖的脚本之后，其还需要经过语法分析、解释与运行这些步骤。而本文则会深入分析浏览器对于 JavaScript 的这些处理流程，挖掘出那些影响你应用启动时间的罪魁祸首，并且根据我个人的经验提出相对应的解决方案。回顾过去，我们还没有专门地考虑过如何去优化 JavaScript 解析/编译这些步骤；我们预想中的是解析器在发现 查看全部

　　js抓取网页内容不难，大不了搞个cookie/验证码
　　js抓取网页内容不难，大不了搞个cookie/验证码。难得是关键业务的抓取及时，于公司利益而言显然产品是第一位的，而对于你自己如何获得以及管理是第二位的，处理起来自然是有难度的。
　　阿里巴巴一百多家公司的商品信息，你100%要拿下，关键是你自己整理。而且阿里巴巴不是真的卖东西，而是做服务。还有就是做好你的行业。
　　抓取有困难，
　　我们公司抓的网址比你这个更多，但是软件部总监说别抓了，要不试试用什么有道云笔记吧。我觉得就是抓完之后怎么管理的问题，你要设置好回链接，设置好退订以及什么什么的，然后做好可视化的模板，下面的人只要点一下就好了。
　　据我了解，做过微信公众号运营的会比较喜欢微擎这种类型的抓取工具，再不行你把阿里巴巴进去看看？如果之前用过会js抓，那么就看能不能有代码抓代码，就是传统的写个request模拟浏览器给阿里巴巴发请求抓取。抓一次会有很多页面，你一个个抓。爬那么多商品总会有比较全的，但是你要去看下有哪些是按照id排的，有些比较靠后的靠你推广来的你就抓不到了，但是记得要验证抓取的商品信息，不要你懂一点点就提交了，很可能对方人工回复你，而且人家没看页面，说代码问题要你返回去。
　　所以最简单方法就是js爬。然后你网站的重点页面就可以抓，我之前用过一款工具一般爬网站的话不要专注全站来抓，可以走特定的工具来抓，效率上能高些。专注抓网站的话一方面要爬过来的页面要完全有商品信息，对于js代码一定要能看出来是怎么一回事。另一方面要把功能做好就是会注册跟认证，找好归宿。 查看全部

　　js抓取网页内容 JavaScript SEO怎么做
　　点击可听原文音频
　　Hi. I’m Charles from Cross Border Digital. Are you using JavaScript to build your website? Or maybe you're thinking about using one of the modern JavaScript frameworks like Ember，or Node, or React, or Angular. Great frameworks for building very app-like interfaces on the web.
　　大家好，我是来自Cross Border Digital的Charles. 你是否在用JavaScript建站？或者你正在考虑用使用当前比较流行的JavaScript框架：Ember、Node、React 或者是Angular建站。这些都是非常优秀的框架，给网站访客提供类似App的操作体验。
　　But there are some specific challenges to using these JavaScript frameworks when it comes to SEO. Today, I want to share some insights and advice to help you use these frameworks in a way that will work with Google and ensure that you can rank your website.
　　但是，当涉及到SEO时，使用这些JavaScript框架存在一些特定的挑战。今天，我想分享一些见解和建议，以帮助您以与Google兼容的方式使用这些框架，确保网站在搜索引擎可以获得排名。
　　So when it comes to understanding the implications of using JavaScript to build your website, there's really two key things that we need to talk about.
　　因此，在理解使用JavaScript开发网站的意味着什么时，实际上需要讨论两个关键问题。
　　The first is how Google actually works, how they treat JavaScript, how they understand JavaScript.
　　首先是Google的实际工作方式，如何对待JavaScript，如何理解JavaScript。
　　And the second is understanding the difference between client-side and server-side rendering of the content and HTML on your website.
　　其次是了解网站上内容和HTML在客户端和服务器端渲染的区别。
　　These two things together if we can understand these, then we can understand how Google is going to interpret our JavaScript-powered website.
　　如果我们能理解这两点，那么就能了解Google如何读取JavaScript网站。
　　OK, so let's first talk about Google. There are in fact two parts to Google's crawling and indexing of the web.
　　首先来讨论一下谷歌运作方式。谷歌爬取收录网站可以分为两部分：
　　The first part, the crawler known as Google bot is the part of the infrastructure that follows every link it can find on the web to uncover every URL on your website and on every other website on the web. The Google bot crawler can't render JavaScript. It's simply visits a page. It will do a very quick pass of any HTML that it finds on the page to see if there are any other links it can follow, but otherwise, it simply passes the URLs that it does find back to the indexer.
　　第一部分，被称为Googlebot的爬虫，是搜索引擎基础结构的一部分，它通过页面上的链接，去发现更多的页面。Google bot爬虫无法渲染JavaScript。它只是访问页面。爬虫会快速查找HTML页面上的链接，继续抓取新的页面，没有新页面就会将爬取到的链接返回谷歌索引（indexer）。
　　The indexer is the part of Google's infrastructure that completely renders a page of all the content, all of the CSS, all of the layout to try in the content, to try and understand what that page is about. So that when someone does a query, it can return that page if it is relevant. Now the indexer can render JavaScript.
　　索引是Google搜索引擎基础结构的一部分，它负责渲染页面的所有内容，CSS，布局以了解该页面的核心信息。当用户在搜索引擎搜索时，才能返回客户搜索相关的页面。Indexer可以渲染JavaScript。
　　So it is true to say that Google can render JavaScript-powered web pages.
　　因此，谷歌支持渲染基于JavaScript开发的网页。
　　But to completely understand the implications of using JavaScript, it is also important to understand the difference between client-side and server-side rendering of JavaScript, because that makes a big difference to the way that Google will interpret your website.
　　但是要完全了解使用JavaScript对网站的影响，理解客户端和服务器端JavaScript渲染的区别也很重要，因为会导致Google读取网站的方式有很大的不同。
　　So generally speaking, these modern JavaScript frameworks like React, Node, and Ember, and Angular, they render in the client side. That means that when someone visits your web page that's built on one of these frameworks, the JavaScript application is delivered to the browser and then it renders everything in the browser. It calls the CSS, it calls the content, it calls the images, and any other resources required to lay out your web page into the browser and renders them on the client side.
　　因此，一般而言，这些现代JavaScript框架（例如React，Node和Ember和Angular）在客户端渲染。这意味着，当用户访问基于这些框架之一开发的网页时，JavaScript应用程序将交付给浏览器，然后在浏览器渲染所有内容。将CSS，文本，图片以及其他与页面展示有关的资源推送到浏览器，在客户端渲染。
　　A server side rendering is when all of that work is done on the server and the HTML of the complete page and all of the content is delivered to the browser.
　　服务器端渲染是指在服务器端完成所有渲染工作并将完整页面的HTML和所有内容都交付给浏览器。
　　Now this has big implications for Google because as we said, the Google bot can't render JavaScript. So that means that when Google bot visits your home page or your JavaScript-powered website, if you're rendering client side, it means that the Google bot will get that JavaScript application, but it can't render any content or any link. So it won't find any other links to crawl. It will have to send that single URL back to the indexer. The indexer will then render that page it will find any links and content on that page. It will send any links back to the crawler so that they can then continue to follow those you URLs to see if they can find any other links.
　　这就对Google收录网站产生了重大影响，因为前面所说，Google bot无法渲染JavaScript。因此，这意味着当Googlebot访问您的主页或基于JavaScript的网站时，如果网站是客户端渲染，则意味着Googlebot将获取该JavaScript应用程序，但无法渲染任何内容或任何链接。因此Google bot无法找到页面上的链接。只会返回一个URL给谷歌indexer。谷歌Indexer将渲染页面并发现页面上的更多链接和内容。发现新的链接则会返回给Google bot去继续抓取进一步发现更多的链接。
　　And in this way, it really slows down the process of crawling your website in a very big way.And this is particularly relevant for large websites. So the other thing that I have to say about client-side rendering is that Google's indexer uses a version of Chrome for rendering JavaScript-powered websites that is about three years old.
　　这就极大地减慢了网站被谷歌抓取的速度，这对于大型网站影响尤为重大。另外，关于客户端渲染，Google的indexer用来来渲染JavaScript网站所使用的Chrome版本已有大约三年的历史。
　　And that means that it can't support all the latest features of these modern JavaScript frameworks. So if you're building a JavaScript-powered website that renders on the client side, it is very important that you ensure that it is set up in such a way that it degrades nicely forolder versions of browsers so that Google can render your content and your HTML completely.
　　这意味着它不能支持那些现代JavaScript框架的所有最新功能。因此，如果您要构建一个以JavaScript为基础的网站，并在客户端进行渲染，那么确保Google可以完全渲染您的内容和HTML。
　　I've seen many cases where a client-side rendered JavaScript page, Google is able to crawl or index part of it but it doesn't see all of the continent because of some of the features that have been included in that page. So very important that your JavaScript-powered web page degrades nicely for all the versions of the browser.
　　我看过很多客户端渲染的JavaScript页面，Google能够对其进行抓取和编制索引，但是页面中包含的某些功能谷歌无法完整抓取。因此要确保你基于JavaScript开发网页对于所有版本的浏览器都可以很好地渲染。
　　So we know that Google bot can't render JavaScript. And whilst the Google indexer can render JavaScript, we also know that it is limited to older versions of Chrome. So it doesn't support all the latest features of these modern JavaScript frameworks. So if we are doing client-side rendering, it is more difficult to get all of our content indexed and it really does slow down the entire process of crawling and indexing your website, which includes any changes you make. So if you make changes to your website, particularly if you have a large website, it can take weeks or months for those changes to be reflected in the Google index.
　　我们知道Google bot无法渲染JavaScript。Google indexer可以呈现JavaScript，但我们也知道它仅限于旧版Chrome。因此，它不支持这些现代JavaScript框架的所有最新功能。因此，如果在进行客户端渲染，则很难对所有的内容建立索引，这确实会减慢对网站被抓取和索引的整个过程，其中包括您所做的任何更改。因此，如果您对网站进行更改，尤其大型网站，则这些更改可能需要数周或数月才能反映在Google索引中。
　　So what to do? Well, our strong recommendation is to use old-fashioned content management systems for public facing web sites, first and foremost. If you haven't yet startedthe build of your website, then we would strongly recommend you look at one of the content management systems like Ambraco, or Wordpress, or Drupal. Or if you're doing e-commerce, use one of the platforms like Shopify, or BigCommerce.
　　那么该怎么办？我们强烈建议普通网站使用老式的内容管理系统。如果您还没有开始网站的搭建，那么我们强烈建议您考虑内容管理系统，例如Ambraco，Wordpress或Drupal。如果是电商网站，可以考虑用Shopify, BigCommerce电商建站系统。
　　These content management applications render everything on the server side and deliver the complete HTML to the browser and to Google, which makes it much easier and faster for Google to completely crawl and index your website.
　　这些内容管理应用程序在服务器端呈现所有内容，并向浏览器和Google提供完整的HTML，这使Google能够更轻松，更快地完全抓取您的网站并为其建立索引。
　　If you have already built a JavaScript-powered website, or if you really want to for whatever reason, then our drawing recommendation is to configure that application to render everything on the server side and deliver the complete HTML and content to the browser and to Google in the same way that one of these older traditional content management systems does. If you can do that properly, then it will make it a lot easier and faster for Google to index your JavaScript-powered website.
　　如果您已经建立了JavaScript网站，或者出于特殊原因确实想要这样做，那么我们的建议是配置该应用程序在服务器端渲染所有内容，并将完整的HTML和内容提供给浏览器和Google 就像这些较旧的传统内容管理系统之一一样。这对于谷歌快速抓取收录你的JavaScript网站会有很大帮助。
　　Perhaps, you've already launched a JavaScript-powered website that is rendering everything on the client side. You're not sure how to configure it to do that on the server side. There are third party services like Prerender.io, which might help. They might be worth looking at as well.
　　又或许，您已经发布了一个在客户端渲染的基于JavaScript开发的网站，不知道如何改为在服务器端渲染。有一些第三方服务获取可以帮你解决这个问题，比如Prerender.io。可以了解一下。
　　So in a nutshell, a lot of SEO is about making it easy for Google and not putting hurdles in Google's way. And when it comes to using JavaScript on your website, there are quite a fewpitfalls and traps that if you're not aware of them, it's easy to fall into.
　　简而言之，很多SEO都是为了帮助Google而不是阻碍Google抓取网站。在您的网站上使用JavaScript时，会有很多陷阱，稍不小心就掉入。
　　So if you have any questions, we would love to help. So hit us up here on WeChat. We could have you to discuss your specific case and we look forward to talking to you. Thanks.
　　如果您有任何疑问，欢迎联系我们微信小编。期待与您交流，谢谢大家。 查看全部

　　js抓取网页内容 【第2030期】JavaScript 启动性能瓶颈分析与解决方案
　　前言
　　找到它存在的意义。今日早读文章由@王下邀月熊翻译授权分享。
　　正文从这开始~~
　　在 Web 开发中，随着需求的增加与代码库的扩张，我们最终发布的 Web 页面也逐渐膨胀。不过这种膨胀远不止意味着占据更多的传输带宽，其还意味着用户浏览网页时可能更差劲的性能体验。浏览器在下载完某个页面依赖的脚本之后，其还需要经过语法分析、解释与运行这些步骤。而本文则会深入分析浏览器对于 JavaScript 的这些处理流程，挖掘出那些影响你应用启动时间的罪魁祸首，并且根据我个人的经验提出相对应的解决方案。回顾过去，我们还没有专门地考虑过如何去优化 JavaScript 解析/编译这些步骤；我们预想中的是解析器在发现 查看全部

　　js抓取网页内容 JavaScript SEO怎么做
　　点击可听原文音频
　　Hi. I’m Charles from Cross Border Digital. Are you using JavaScript to build your website? Or maybe you're thinking about using one of the modern JavaScript frameworks like Ember，or Node, or React, or Angular. Great frameworks for building very app-like interfaces on the web.
　　大家好，我是来自Cross Border Digital的Charles. 你是否在用JavaScript建站？或者你正在考虑用使用当前比较流行的JavaScript框架：Ember、Node、React 或者是Angular建站。这些都是非常优秀的框架，给网站访客提供类似App的操作体验。
　　But there are some specific challenges to using these JavaScript frameworks when it comes to SEO. Today, I want to share some insights and advice to help you use these frameworks in a way that will work with Google and ensure that you can rank your website.
　　但是，当涉及到SEO时，使用这些JavaScript框架存在一些特定的挑战。今天，我想分享一些见解和建议，以帮助您以与Google兼容的方式使用这些框架，确保网站在搜索引擎可以获得排名。
　　So when it comes to understanding the implications of using JavaScript to build your website, there's really two key things that we need to talk about.
　　因此，在理解使用JavaScript开发网站的意味着什么时，实际上需要讨论两个关键问题。
　　The first is how Google actually works, how they treat JavaScript, how they understand JavaScript.
　　首先是Google的实际工作方式，如何对待JavaScript，如何理解JavaScript。
　　And the second is understanding the difference between client-side and server-side rendering of the content and HTML on your website.
　　其次是了解网站上内容和HTML在客户端和服务器端渲染的区别。
　　These two things together if we can understand these, then we can understand how Google is going to interpret our JavaScript-powered website.
　　如果我们能理解这两点，那么就能了解Google如何读取JavaScript网站。
　　OK, so let's first talk about Google. There are in fact two parts to Google's crawling and indexing of the web.
　　首先来讨论一下谷歌运作方式。谷歌爬取收录网站可以分为两部分：
　　The first part, the crawler known as Google bot is the part of the infrastructure that follows every link it can find on the web to uncover every URL on your website and on every other website on the web. The Google bot crawler can't render JavaScript. It's simply visits a page. It will do a very quick pass of any HTML that it finds on the page to see if there are any other links it can follow, but otherwise, it simply passes the URLs that it does find back to the indexer.
　　第一部分，被称为Googlebot的爬虫，是搜索引擎基础结构的一部分，它通过页面上的链接，去发现更多的页面。Google bot爬虫无法渲染JavaScript。它只是访问页面。爬虫会快速查找HTML页面上的链接，继续抓取新的页面，没有新页面就会将爬取到的链接返回谷歌索引（indexer）。
　　The indexer is the part of Google's infrastructure that completely renders a page of all the content, all of the CSS, all of the layout to try in the content, to try and understand what that page is about. So that when someone does a query, it can return that page if it is relevant. Now the indexer can render JavaScript.
　　索引是Google搜索引擎基础结构的一部分，它负责渲染页面的所有内容，CSS，布局以了解该页面的核心信息。当用户在搜索引擎搜索时，才能返回客户搜索相关的页面。Indexer可以渲染JavaScript。
　　So it is true to say that Google can render JavaScript-powered web pages.
　　因此，谷歌支持渲染基于JavaScript开发的网页。
　　But to completely understand the implications of using JavaScript, it is also important to understand the difference between client-side and server-side rendering of JavaScript, because that makes a big difference to the way that Google will interpret your website.
　　但是要完全了解使用JavaScript对网站的影响，理解客户端和服务器端JavaScript渲染的区别也很重要，因为会导致Google读取网站的方式有很大的不同。
　　So generally speaking, these modern JavaScript frameworks like React, Node, and Ember, and Angular, they render in the client side. That means that when someone visits your web page that's built on one of these frameworks, the JavaScript application is delivered to the browser and then it renders everything in the browser. It calls the CSS, it calls the content, it calls the images, and any other resources required to lay out your web page into the browser and renders them on the client side.
　　因此，一般而言，这些现代JavaScript框架（例如React，Node和Ember和Angular）在客户端渲染。这意味着，当用户访问基于这些框架之一开发的网页时，JavaScript应用程序将交付给浏览器，然后在浏览器渲染所有内容。将CSS，文本，图片以及其他与页面展示有关的资源推送到浏览器，在客户端渲染。
　　A server side rendering is when all of that work is done on the server and the HTML of the complete page and all of the content is delivered to the browser.
　　服务器端渲染是指在服务器端完成所有渲染工作并将完整页面的HTML和所有内容都交付给浏览器。
　　Now this has big implications for Google because as we said, the Google bot can't render JavaScript. So that means that when Google bot visits your home page or your JavaScript-powered website, if you're rendering client side, it means that the Google bot will get that JavaScript application, but it can't render any content or any link. So it won't find any other links to crawl. It will have to send that single URL back to the indexer. The indexer will then render that page it will find any links and content on that page. It will send any links back to the crawler so that they can then continue to follow those you URLs to see if they can find any other links.
　　这就对Google收录网站产生了重大影响，因为前面所说，Google bot无法渲染JavaScript。因此，这意味着当Googlebot访问您的主页或基于JavaScript的网站时，如果网站是客户端渲染，则意味着Googlebot将获取该JavaScript应用程序，但无法渲染任何内容或任何链接。因此Google bot无法找到页面上的链接。只会返回一个URL给谷歌indexer。谷歌Indexer将渲染页面并发现页面上的更多链接和内容。发现新的链接则会返回给Google bot去继续抓取进一步发现更多的链接。
　　And in this way, it really slows down the process of crawling your website in a very big way.And this is particularly relevant for large websites. So the other thing that I have to say about client-side rendering is that Google's indexer uses a version of Chrome for rendering JavaScript-powered websites that is about three years old.
　　这就极大地减慢了网站被谷歌抓取的速度，这对于大型网站影响尤为重大。另外，关于客户端渲染，Google的indexer用来来渲染JavaScript网站所使用的Chrome版本已有大约三年的历史。
　　And that means that it can't support all the latest features of these modern JavaScript frameworks. So if you're building a JavaScript-powered website that renders on the client side, it is very important that you ensure that it is set up in such a way that it degrades nicely forolder versions of browsers so that Google can render your content and your HTML completely.
　　这意味着它不能支持那些现代JavaScript框架的所有最新功能。因此，如果您要构建一个以JavaScript为基础的网站，并在客户端进行渲染，那么确保Google可以完全渲染您的内容和HTML。
　　I've seen many cases where a client-side rendered JavaScript page, Google is able to crawl or index part of it but it doesn't see all of the continent because of some of the features that have been included in that page. So very important that your JavaScript-powered web page degrades nicely for all the versions of the browser.
　　我看过很多客户端渲染的JavaScript页面，Google能够对其进行抓取和编制索引，但是页面中包含的某些功能谷歌无法完整抓取。因此要确保你基于JavaScript开发网页对于所有版本的浏览器都可以很好地渲染。
　　So we know that Google bot can't render JavaScript. And whilst the Google indexer can render JavaScript, we also know that it is limited to older versions of Chrome. So it doesn't support all the latest features of these modern JavaScript frameworks. So if we are doing client-side rendering, it is more difficult to get all of our content indexed and it really does slow down the entire process of crawling and indexing your website, which includes any changes you make. So if you make changes to your website, particularly if you have a large website, it can take weeks or months for those changes to be reflected in the Google index.
　　我们知道Google bot无法渲染JavaScript。Google indexer可以呈现JavaScript，但我们也知道它仅限于旧版Chrome。因此，它不支持这些现代JavaScript框架的所有最新功能。因此，如果在进行客户端渲染，则很难对所有的内容建立索引，这确实会减慢对网站被抓取和索引的整个过程，其中包括您所做的任何更改。因此，如果您对网站进行更改，尤其大型网站，则这些更改可能需要数周或数月才能反映在Google索引中。
　　So what to do? Well, our strong recommendation is to use old-fashioned content management systems for public facing web sites, first and foremost. If you haven't yet startedthe build of your website, then we would strongly recommend you look at one of the content management systems like Ambraco, or Wordpress, or Drupal. Or if you're doing e-commerce, use one of the platforms like Shopify, or BigCommerce.
　　那么该怎么办？我们强烈建议普通网站使用老式的内容管理系统。如果您还没有开始网站的搭建，那么我们强烈建议您考虑内容管理系统，例如Ambraco，Wordpress或Drupal。如果是电商网站，可以考虑用Shopify, BigCommerce电商建站系统。
　　These content management applications render everything on the server side and deliver the complete HTML to the browser and to Google, which makes it much easier and faster for Google to completely crawl and index your website.
　　这些内容管理应用程序在服务器端呈现所有内容，并向浏览器和Google提供完整的HTML，这使Google能够更轻松，更快地完全抓取您的网站并为其建立索引。
　　If you have already built a JavaScript-powered website, or if you really want to for whatever reason, then our drawing recommendation is to configure that application to render everything on the server side and deliver the complete HTML and content to the browser and to Google in the same way that one of these older traditional content management systems does. If you can do that properly, then it will make it a lot easier and faster for Google to index your JavaScript-powered website.
　　如果您已经建立了JavaScript网站，或者出于特殊原因确实想要这样做，那么我们的建议是配置该应用程序在服务器端渲染所有内容，并将完整的HTML和内容提供给浏览器和Google 就像这些较旧的传统内容管理系统之一一样。这对于谷歌快速抓取收录你的JavaScript网站会有很大帮助。
　　Perhaps, you've already launched a JavaScript-powered website that is rendering everything on the client side. You're not sure how to configure it to do that on the server side. There are third party services like Prerender.io, which might help. They might be worth looking at as well.
　　又或许，您已经发布了一个在客户端渲染的基于JavaScript开发的网站，不知道如何改为在服务器端渲染。有一些第三方服务获取可以帮你解决这个问题，比如Prerender.io。可以了解一下。
　　So in a nutshell, a lot of SEO is about making it easy for Google and not putting hurdles in Google's way. And when it comes to using JavaScript on your website, there are quite a fewpitfalls and traps that if you're not aware of them, it's easy to fall into.
　　简而言之，很多SEO都是为了帮助Google而不是阻碍Google抓取网站。在您的网站上使用JavaScript时，会有很多陷阱，稍不小心就掉入。
　　So if you have any questions, we would love to help. So hit us up here on WeChat. We could have you to discuss your specific case and we look forward to talking to you. Thanks.
　　如果您有任何疑问，欢迎联系我们微信小编。期待与您交流，谢谢大家。 查看全部

　　js抓取网页内容 【第2030期】JavaScript 启动性能瓶颈分析与解决方案
　　前言
　　找到它存在的意义。今日早读文章由@王下邀月熊翻译授权分享。
　　正文从这开始~~
　　在 Web 开发中，随着需求的增加与代码库的扩张，我们最终发布的 Web 页面也逐渐膨胀。不过这种膨胀远不止意味着占据更多的传输带宽，其还意味着用户浏览网页时可能更差劲的性能体验。浏览器在下载完某个页面依赖的脚本之后，其还需要经过语法分析、解释与运行这些步骤。而本文则会深入分析浏览器对于 JavaScript 的这些处理流程，挖掘出那些影响你应用启动时间的罪魁祸首，并且根据我个人的经验提出相对应的解决方案。回顾过去，我们还没有专门地考虑过如何去优化 JavaScript 解析/编译这些步骤；我们预想中的是解析器在发现 查看全部

　　js抓取网页内容 JavaScript 启动性能瓶颈分析与解决方案
　　（点击上方公众号，可快速关注）
　　英文：Addy Osmani 译文：王下邀月熊_Chevalier
　　/a/40139
　　
　　在 Web 开发中，随着需求的增加与代码库的扩张，我们最终发布的 Web 页面也逐渐膨胀。不过这种膨胀远不止意味着占据更多的传输带宽，其还意味着用户浏览网页时可能更差劲的性能体验。浏览器在下载完某个页面依赖的脚本之后，其还需要经过语法分析、解释与运行这些步骤。而本文则会深入分析浏览器对于 JavaScript 的这些处理流程，挖掘出那些影响你应用启动时间的罪魁祸首，并且根据我个人的经验提出相对应的解决方案。回顾过去，我们还没有专门地考虑过如何去优化 JavaScript 解析/编译这些步骤；我们预想中的是解析器在发现 查看全部

　　js抓取网页内容 同构 JavaScript 应用 —— Web 世界的未来？
　　Web 世界有一个至理名言，就是 Java 提出的“Write once, run everywhere”。但这句话只适用于 Java 么？我们能否也用它来形容 JavaScript 呢？答案是 Yes。
　　我将会在这篇文章中介绍同构 JavaScript 应用的概念，并推荐一些资源帮助你构建此类应用。
　　一路走来
　　多年以前，web 只是一些由 HTML 和 CSS 搭建的静态页面，没有太多的交互。用户的每一个动作都需要服务器来创建并返回一个完整的页面。幸而有了 JavaScript，开发者开始创建很棒的效果，不过 Ajax 的到来才是这场革新的真正开始。Web 开发者开始编写能够与服务端进行交互，且在不重载页面的情况下向服务端发送并接受数据的页面。
　　随着时间的推移，客户端代码可以做的事情越来越多，催生了被称作单页面应用（SPA）的一类应用。SPA 在首次加载页面时就获取了所有必需的资源，或者再按需动态加载并且渲染到页面上。 Gmail 和 StackEdit editor 是很棒的 SPA 示例。
　　SPA 准许重度的交互设计，因为几乎所有的操作都在客户端执行，保持最低限度地与服务端进行交流。不幸的是，它们也存在一些严重的问题，我们选择几个进行讨论。
　　性能
　　因为相对于静态页面，SPA 需要更多的客户端代码，需要下载数据的体积也更大。这使得手机加载速度很慢，可能会导致一些极端的状况 —— 比如糟糕的用户体验以及收入上的损失等。依据 Microsoft 的一篇文章 ——
　　Bing 的一项研究表明：页面的加载时间每增加 10ms，站点年度总收入就会减少 $250K。
　　SEO
　　因为单页面应用依赖于 JavaScript 的执行，服务器不会提供它们可能用到的任何 HTML 内容。因此，web 爬虫很难去索引到这些页面。爬虫就是可以向 web 服务器发送请求，并且将结果分析成原始文本的程序，而不需要像一个浏览器运行 JavaScript 那样解释和执行客户端的内容。不久前，Google 优化了搜索引擎的 web 爬虫，现在它也可以抓取基于客户端 JavaScript 所构建的页面了。但是 Bing、Yahoo 以及其他搜索引擎怎么办？一个好的索引对任何公司来说都至关重要，它通常会带来更多的流量以及更高的回报。
　　同构 JavaScript 应用
　　同构 JavaScript 应用基于 JavaScript 编写，可以在客户端和服务端运行。正因为此，你只需要写一次代码，就可以在服务端渲染静态页面，还可以在客户端完成复杂的交互。所以，这种方式互通了两个世界，并且避免了前面提到了两个问题。
　　现在，有很多框架可以帮助你开发这类应用。其中最著名的一个可能是 Meteor。Meter 是一个开源 JavaScript 框架，基于 Node.js 编写，专注于实时 web 应用。我想提到的另一个项目是 Rendr，它是 Airbnb 开发的一款轻量级类库，准许同时在客户端和服务端运行 Backbone.js。
　　越来越多的公司将 Node.js 应用到他们的产品中。客户端和服务端的代码共享成为一个更加普通而自然的选择。在我看来，这种做法将是 web 开发的未来。有些类库通过共享模板又增强了这一趋势，比如 React。
　　结论
　　这篇文章介绍了同构 JavaScript 应用的概念，它是应用开发的一种全新方式，可以最大限度地结合服务端和客户端应用程序。我们还讨论了运用这种方式尝试解决的问题，以及你现在就可以参与实践的一些项目。
　　你听说过同构 JavaScript 应用么？你开发过么？你有开发经验么？
　　原文：Isomorphic JavaScript Applications — the Future of the Web? 查看全部

　　js抓取网页内容 JavaScript SEO怎么做
　　点击可听原文音频
　　Hi. I’m Charles from Cross Border Digital. Are you using JavaScript to build your website? Or maybe you're thinking about using one of the modern JavaScript frameworks like Ember，or Node, or React, or Angular. Great frameworks for building very app-like interfaces on the web.
　　大家好，我是来自Cross Border Digital的Charles. 你是否在用JavaScript建站？或者你正在考虑用使用当前比较流行的JavaScript框架：Ember、Node、React 或者是Angular建站。这些都是非常优秀的框架，给网站访客提供类似App的操作体验。
　　But there are some specific challenges to using these JavaScript frameworks when it comes to SEO. Today, I want to share some insights and advice to help you use these frameworks in a way that will work with Google and ensure that you can rank your website.
　　但是，当涉及到SEO时，使用这些JavaScript框架存在一些特定的挑战。今天，我想分享一些见解和建议，以帮助您以与Google兼容的方式使用这些框架，确保网站在搜索引擎可以获得排名。
　　So when it comes to understanding the implications of using JavaScript to build your website, there's really two key things that we need to talk about.
　　因此，在理解使用JavaScript开发网站的意味着什么时，实际上需要讨论两个关键问题。
　　The first is how Google actually works, how they treat JavaScript, how they understand JavaScript.
　　首先是Google的实际工作方式，如何对待JavaScript，如何理解JavaScript。
　　And the second is understanding the difference between client-side and server-side rendering of the content and HTML on your website.
　　其次是了解网站上内容和HTML在客户端和服务器端渲染的区别。
　　These two things together if we can understand these, then we can understand how Google is going to interpret our JavaScript-powered website.
　　如果我们能理解这两点，那么就能了解Google如何读取JavaScript网站。
　　OK, so let's first talk about Google. There are in fact two parts to Google's crawling and indexing of the web.
　　首先来讨论一下谷歌运作方式。谷歌爬取收录网站可以分为两部分：
　　The first part, the crawler known as Google bot is the part of the infrastructure that follows every link it can find on the web to uncover every URL on your website and on every other website on the web. The Google bot crawler can't render JavaScript. It's simply visits a page. It will do a very quick pass of any HTML that it finds on the page to see if there are any other links it can follow, but otherwise, it simply passes the URLs that it does find back to the indexer.
　　第一部分，被称为Googlebot的爬虫，是搜索引擎基础结构的一部分，它通过页面上的链接，去发现更多的页面。Google bot爬虫无法渲染JavaScript。它只是访问页面。爬虫会快速查找HTML页面上的链接，继续抓取新的页面，没有新页面就会将爬取到的链接返回谷歌索引（indexer）。
　　The indexer is the part of Google's infrastructure that completely renders a page of all the content, all of the CSS, all of the layout to try in the content, to try and understand what that page is about. So that when someone does a query, it can return that page if it is relevant. Now the indexer can render JavaScript.
　　索引是Google搜索引擎基础结构的一部分，它负责渲染页面的所有内容，CSS，布局以了解该页面的核心信息。当用户在搜索引擎搜索时，才能返回客户搜索相关的页面。Indexer可以渲染JavaScript。
　　So it is true to say that Google can render JavaScript-powered web pages.
　　因此，谷歌支持渲染基于JavaScript开发的网页。
　　But to completely understand the implications of using JavaScript, it is also important to understand the difference between client-side and server-side rendering of JavaScript, because that makes a big difference to the way that Google will interpret your website.
　　但是要完全了解使用JavaScript对网站的影响，理解客户端和服务器端JavaScript渲染的区别也很重要，因为会导致Google读取网站的方式有很大的不同。
　　So generally speaking, these modern JavaScript frameworks like React, Node, and Ember, and Angular, they render in the client side. That means that when someone visits your web page that's built on one of these frameworks, the JavaScript application is delivered to the browser and then it renders everything in the browser. It calls the CSS, it calls the content, it calls the images, and any other resources required to lay out your web page into the browser and renders them on the client side.
　　因此，一般而言，这些现代JavaScript框架（例如React，Node和Ember和Angular）在客户端渲染。这意味着，当用户访问基于这些框架之一开发的网页时，JavaScript应用程序将交付给浏览器，然后在浏览器渲染所有内容。将CSS，文本，图片以及其他与页面展示有关的资源推送到浏览器，在客户端渲染。
　　A server side rendering is when all of that work is done on the server and the HTML of the complete page and all of the content is delivered to the browser.
　　服务器端渲染是指在服务器端完成所有渲染工作并将完整页面的HTML和所有内容都交付给浏览器。
　　Now this has big implications for Google because as we said, the Google bot can't render JavaScript. So that means that when Google bot visits your home page or your JavaScript-powered website, if you're rendering client side, it means that the Google bot will get that JavaScript application, but it can't render any content or any link. So it won't find any other links to crawl. It will have to send that single URL back to the indexer. The indexer will then render that page it will find any links and content on that page. It will send any links back to the crawler so that they can then continue to follow those you URLs to see if they can find any other links.
　　这就对Google收录网站产生了重大影响，因为前面所说，Google bot无法渲染JavaScript。因此，这意味着当Googlebot访问您的主页或基于JavaScript的网站时，如果网站是客户端渲染，则意味着Googlebot将获取该JavaScript应用程序，但无法渲染任何内容或任何链接。因此Google bot无法找到页面上的链接。只会返回一个URL给谷歌indexer。谷歌Indexer将渲染页面并发现页面上的更多链接和内容。发现新的链接则会返回给Google bot去继续抓取进一步发现更多的链接。
　　And in this way, it really slows down the process of crawling your website in a very big way.And this is particularly relevant for large websites. So the other thing that I have to say about client-side rendering is that Google's indexer uses a version of Chrome for rendering JavaScript-powered websites that is about three years old.
　　这就极大地减慢了网站被谷歌抓取的速度，这对于大型网站影响尤为重大。另外，关于客户端渲染，Google的indexer用来来渲染JavaScript网站所使用的Chrome版本已有大约三年的历史。
　　And that means that it can't support all the latest features of these modern JavaScript frameworks. So if you're building a JavaScript-powered website that renders on the client side, it is very important that you ensure that it is set up in such a way that it degrades nicely forolder versions of browsers so that Google can render your content and your HTML completely.
　　这意味着它不能支持那些现代JavaScript框架的所有最新功能。因此，如果您要构建一个以JavaScript为基础的网站，并在客户端进行渲染，那么确保Google可以完全渲染您的内容和HTML。
　　I've seen many cases where a client-side rendered JavaScript page, Google is able to crawl or index part of it but it doesn't see all of the continent because of some of the features that have been included in that page. So very important that your JavaScript-powered web page degrades nicely for all the versions of the browser.
　　我看过很多客户端渲染的JavaScript页面，Google能够对其进行抓取和编制索引，但是页面中包含的某些功能谷歌无法完整抓取。因此要确保你基于JavaScript开发网页对于所有版本的浏览器都可以很好地渲染。
　　So we know that Google bot can't render JavaScript. And whilst the Google indexer can render JavaScript, we also know that it is limited to older versions of Chrome. So it doesn't support all the latest features of these modern JavaScript frameworks. So if we are doing client-side rendering, it is more difficult to get all of our content indexed and it really does slow down the entire process of crawling and indexing your website, which includes any changes you make. So if you make changes to your website, particularly if you have a large website, it can take weeks or months for those changes to be reflected in the Google index.
　　我们知道Google bot无法渲染JavaScript。Google indexer可以呈现JavaScript，但我们也知道它仅限于旧版Chrome。因此，它不支持这些现代JavaScript框架的所有最新功能。因此，如果在进行客户端渲染，则很难对所有的内容建立索引，这确实会减慢对网站被抓取和索引的整个过程，其中包括您所做的任何更改。因此，如果您对网站进行更改，尤其大型网站，则这些更改可能需要数周或数月才能反映在Google索引中。
　　So what to do? Well, our strong recommendation is to use old-fashioned content management systems for public facing web sites, first and foremost. If you haven't yet startedthe build of your website, then we would strongly recommend you look at one of the content management systems like Ambraco, or Wordpress, or Drupal. Or if you're doing e-commerce, use one of the platforms like Shopify, or BigCommerce.
　　那么该怎么办？我们强烈建议普通网站使用老式的内容管理系统。如果您还没有开始网站的搭建，那么我们强烈建议您考虑内容管理系统，例如Ambraco，Wordpress或Drupal。如果是电商网站，可以考虑用Shopify, BigCommerce电商建站系统。
　　These content management applications render everything on the server side and deliver the complete HTML to the browser and to Google, which makes it much easier and faster for Google to completely crawl and index your website.
　　这些内容管理应用程序在服务器端呈现所有内容，并向浏览器和Google提供完整的HTML，这使Google能够更轻松，更快地完全抓取您的网站并为其建立索引。
　　If you have already built a JavaScript-powered website, or if you really want to for whatever reason, then our drawing recommendation is to configure that application to render everything on the server side and deliver the complete HTML and content to the browser and to Google in the same way that one of these older traditional content management systems does. If you can do that properly, then it will make it a lot easier and faster for Google to index your JavaScript-powered website.
　　如果您已经建立了JavaScript网站，或者出于特殊原因确实想要这样做，那么我们的建议是配置该应用程序在服务器端渲染所有内容，并将完整的HTML和内容提供给浏览器和Google 就像这些较旧的传统内容管理系统之一一样。这对于谷歌快速抓取收录你的JavaScript网站会有很大帮助。
　　Perhaps, you've already launched a JavaScript-powered website that is rendering everything on the client side. You're not sure how to configure it to do that on the server side. There are third party services like Prerender.io, which might help. They might be worth looking at as well.
　　又或许，您已经发布了一个在客户端渲染的基于JavaScript开发的网站，不知道如何改为在服务器端渲染。有一些第三方服务获取可以帮你解决这个问题，比如Prerender.io。可以了解一下。
　　So in a nutshell, a lot of SEO is about making it easy for Google and not putting hurdles in Google's way. And when it comes to using JavaScript on your website, there are quite a fewpitfalls and traps that if you're not aware of them, it's easy to fall into.
　　简而言之，很多SEO都是为了帮助Google而不是阻碍Google抓取网站。在您的网站上使用JavaScript时，会有很多陷阱，稍不小心就掉入。
　　So if you have any questions, we would love to help. So hit us up here on WeChat. We could have you to discuss your specific case and we look forward to talking to you. Thanks.
　　如果您有任何疑问，欢迎联系我们微信小编。期待与您交流，谢谢大家。 查看全部

　　js抓取网页内容 【第2030期】JavaScript 启动性能瓶颈分析与解决方案
　　前言
　　找到它存在的意义。今日早读文章由@王下邀月熊翻译授权分享。
　　正文从这开始~~
　　在 Web 开发中，随着需求的增加与代码库的扩张，我们最终发布的 Web 页面也逐渐膨胀。不过这种膨胀远不止意味着占据更多的传输带宽，其还意味着用户浏览网页时可能更差劲的性能体验。浏览器在下载完某个页面依赖的脚本之后，其还需要经过语法分析、解释与运行这些步骤。而本文则会深入分析浏览器对于 JavaScript 的这些处理流程，挖掘出那些影响你应用启动时间的罪魁祸首，并且根据我个人的经验提出相对应的解决方案。回顾过去，我们还没有专门地考虑过如何去优化 JavaScript 解析/编译这些步骤；我们预想中的是解析器在发现 查看全部

　　用 Node.js 轻松开发网页爬虫
　　一段时间以来，我尝试创建一个网站，我会访问一个网站，打开浏览器的控制台获取需要的源代码。
　　后来我了解到可以用网页爬虫，于是开始用Node来抓取页面数据。
　　准备工作
　　我们需要准备以下3个包来做开发准备。
　　1）Axios（）
　　Axios是一个基于Node.js的Promise的HTTP客户端，可以用它来抓取指定的网站。
　　2）Cheerio（）
　　Cheerio是一个类似jQuyer但是以服务器运行的库。我们使用它选择从Axios返回来的内容。
　　3）Fs()
　　fs是一个node模块，用来把抓取到的内容加入一个JSON文件中。
　　开始开发
　　下面我们开始我们的项目。
　　首先创建一个文件夹，然后用cd命令进行该目录。
　　说明：我们使用系统的终端或命令行工具运行。
　　要初始化项目，先运行
　　npm init
　　然后进行如下步骤（你也可以同步进行输入）。如果你完成了初始化操作，下面就可以创建 package.json 文件。
　　接下来我们开始安装以下两个软件包：
　　npm install --save axios cheerio
　　请记住，fs如果安装过了，我们就不需要再重复安装一次了。
　　你可以在node_modules目录中看已经安装好的node插件包，也可以在package.json文件中看到该文件名。
　　从dev.to网站抓取内容
　　我们下面从 dev.to网站上下手，抓取该网站上的用户资料，它的用户资料URL是 形式，我们的目标是取得每个用户的文章并把它保存到JSON文件。如下图：
　　
　　接下来在你的项目目录中创建一个JavaScript文件，我们称之为devtoList.js，如果你不喜欢可以换其它的名字。
　　第一步，我们引用已经安装好的node包：
　　let axios = require('axios')
　　let cheerio = require('cheerio')
　　let fs = require('fs')
　　下面我们开始抓取：
　　axios.get('')
　　.then((response) => {
　　if(response.status === 200) {
　　const html = response.data;
　　const $ = cheerio.load(html);
　　}
　　}, (error) => console.log(err) );
　　在该代码的第一行是指定抓取网站的URL地址。当开始抓取后，axios是基于承诺式的，then 分支便开始检查返回的内容是否正确，并且开始取得数据。
　　如果控制台日志 reponse.data 中你可以看到HTML标签。那我们将调入HTML给cheerio（jQuery已经隐含在其中的场景了）。如果要替换response.data，需要硬编码HTML。
　　const html = 'I have a bunch of questions on how to behave when contributing to open source'
　　const h3 = cheerio.load(html)
　　console.log(h3.text())
　　接下将返回没有H3标签的字符串。
　　选择内容
　　接下来的重点是，你可以打开工作台中要查找要抓取的指定内容。如下HTML：

　　从上面的源代码中看到，我们看到文章是从single-article的类包含的，文章标题是在h3标签中。
　　进行如下的代码改造：
　　axios.get('')
　　.then((response) => {
　　if(response.status === 200) {
　　const html = response.data;
　　const $ = cheerio.load(html);
　　let devtoList = [];
　　$('.single-article').each(function(i, elem) {
　　devtoList[i] = {
　　title: $(this).find('h3').text().trim(),
　　url: $(this).children('.index-article-link').attr('href'),
　　tags: $(this).find('.tags').text().split('#')
　　.map(tag =>tag.trim())
　　.filter(function(n){ return n != "" })
　　}
　　});
　　}
　　}, (error) => console.log(err) );
　　上面的代码也很好理解，如果你看到了上面的参考图片，我们可以循环从.single-article类节点中抓取内容。如果我们查找到仅有h3标签，我们就使用trim()函数来删除一些空白空格。最后我们过滤一些空值。另外，我们通过锚标签中的href取得URL。
　　获取标签很简单，我们首先把它们当作一个字符串，如#tag #tag2，接下来把这些字符串分拆为数组。最后再将数据中的空格去除，最后再过滤掉所有空值。
　　我们声明了一个空数组 let devList = [] ，外部循环数据将放在此数组中。
　　开始执行。这个devtoList数据对象将保存着抓取的网站。现在我们将要存储的数据以JSON文件的格式使用。
　　axios.get('')
　　.then((response) => {
　　if(response.status === 200) {
　　const html = response.data;
　　const $ = cheerio.load(html);
　　let devtoList = [];
　　$('.single-article').each(function(i, elem) {
　　devtoList[i] = {
　　title: $(this).find('h3').text().trim(),
　　url: $(this).children('.index-article-link').attr('href'),
　　tags: $(this).find('.tags').text().split('#')
　　.map(tag =>tag.trim())
　　.filter(function(n){ return n != "" })
　　}
　　});
　　const devtoListTrimmed = devtoList.filter(n => n != undefined )
　　fs.writeFile('devtoList.json',
　　JSON.stringify(devtoListTrimmed, null, 4),
　　(err)=> console.log('File successfully written!'))
　　}
　　}, (error) => console.log(err) );
　　该原始 devtoList数组对象可能有空值，需要trim它们，接下来使用fs模块来写入到文件（前面我们命名为devtoList.json，数组对象的内容被转换为JSON格式）
　　以上爬虫源代码，可以在GitHub上找到：
　　希望本篇文章的内容对你有用，假期愉快！
　　编译：陆晓龙 查看全部

　　js抓取网页内容 JavaScript SEO怎么做
　　点击可听原文音频
　　Hi. I’m Charles from Cross Border Digital. Are you using JavaScript to build your website? Or maybe you're thinking about using one of the modern JavaScript frameworks like Ember，or Node, or React, or Angular. Great frameworks for building very app-like interfaces on the web.
　　大家好，我是来自Cross Border Digital的Charles. 你是否在用JavaScript建站？或者你正在考虑用使用当前比较流行的JavaScript框架：Ember、Node、React 或者是Angular建站。这些都是非常优秀的框架，给网站访客提供类似App的操作体验。
　　But there are some specific challenges to using these JavaScript frameworks when it comes to SEO. Today, I want to share some insights and advice to help you use these frameworks in a way that will work with Google and ensure that you can rank your website.
　　但是，当涉及到SEO时，使用这些JavaScript框架存在一些特定的挑战。今天，我想分享一些见解和建议，以帮助您以与Google兼容的方式使用这些框架，确保网站在搜索引擎可以获得排名。
　　So when it comes to understanding the implications of using JavaScript to build your website, there's really two key things that we need to talk about.
　　因此，在理解使用JavaScript开发网站的意味着什么时，实际上需要讨论两个关键问题。
　　The first is how Google actually works, how they treat JavaScript, how they understand JavaScript.
　　首先是Google的实际工作方式，如何对待JavaScript，如何理解JavaScript。
　　And the second is understanding the difference between client-side and server-side rendering of the content and HTML on your website.
　　其次是了解网站上内容和HTML在客户端和服务器端渲染的区别。
　　These two things together if we can understand these, then we can understand how Google is going to interpret our JavaScript-powered website.
　　如果我们能理解这两点，那么就能了解Google如何读取JavaScript网站。
　　OK, so let's first talk about Google. There are in fact two parts to Google's crawling and indexing of the web.
　　首先来讨论一下谷歌运作方式。谷歌爬取收录网站可以分为两部分：
　　The first part, the crawler known as Google bot is the part of the infrastructure that follows every link it can find on the web to uncover every URL on your website and on every other website on the web. The Google bot crawler can't render JavaScript. It's simply visits a page. It will do a very quick pass of any HTML that it finds on the page to see if there are any other links it can follow, but otherwise, it simply passes the URLs that it does find back to the indexer.
　　第一部分，被称为Googlebot的爬虫，是搜索引擎基础结构的一部分，它通过页面上的链接，去发现更多的页面。Google bot爬虫无法渲染JavaScript。它只是访问页面。爬虫会快速查找HTML页面上的链接，继续抓取新的页面，没有新页面就会将爬取到的链接返回谷歌索引（indexer）。
　　The indexer is the part of Google's infrastructure that completely renders a page of all the content, all of the CSS, all of the layout to try in the content, to try and understand what that page is about. So that when someone does a query, it can return that page if it is relevant. Now the indexer can render JavaScript.
　　索引是Google搜索引擎基础结构的一部分，它负责渲染页面的所有内容，CSS，布局以了解该页面的核心信息。当用户在搜索引擎搜索时，才能返回客户搜索相关的页面。Indexer可以渲染JavaScript。
　　So it is true to say that Google can render JavaScript-powered web pages.
　　因此，谷歌支持渲染基于JavaScript开发的网页。
　　But to completely understand the implications of using JavaScript, it is also important to understand the difference between client-side and server-side rendering of JavaScript, because that makes a big difference to the way that Google will interpret your website.
　　但是要完全了解使用JavaScript对网站的影响，理解客户端和服务器端JavaScript渲染的区别也很重要，因为会导致Google读取网站的方式有很大的不同。
　　So generally speaking, these modern JavaScript frameworks like React, Node, and Ember, and Angular, they render in the client side. That means that when someone visits your web page that's built on one of these frameworks, the JavaScript application is delivered to the browser and then it renders everything in the browser. It calls the CSS, it calls the content, it calls the images, and any other resources required to lay out your web page into the browser and renders them on the client side.
　　因此，一般而言，这些现代JavaScript框架（例如React，Node和Ember和Angular）在客户端渲染。这意味着，当用户访问基于这些框架之一开发的网页时，JavaScript应用程序将交付给浏览器，然后在浏览器渲染所有内容。将CSS，文本，图片以及其他与页面展示有关的资源推送到浏览器，在客户端渲染。
　　A server side rendering is when all of that work is done on the server and the HTML of the complete page and all of the content is delivered to the browser.
　　服务器端渲染是指在服务器端完成所有渲染工作并将完整页面的HTML和所有内容都交付给浏览器。
　　Now this has big implications for Google because as we said, the Google bot can't render JavaScript. So that means that when Google bot visits your home page or your JavaScript-powered website, if you're rendering client side, it means that the Google bot will get that JavaScript application, but it can't render any content or any link. So it won't find any other links to crawl. It will have to send that single URL back to the indexer. The indexer will then render that page it will find any links and content on that page. It will send any links back to the crawler so that they can then continue to follow those you URLs to see if they can find any other links.
　　这就对Google收录网站产生了重大影响，因为前面所说，Google bot无法渲染JavaScript。因此，这意味着当Googlebot访问您的主页或基于JavaScript的网站时，如果网站是客户端渲染，则意味着Googlebot将获取该JavaScript应用程序，但无法渲染任何内容或任何链接。因此Google bot无法找到页面上的链接。只会返回一个URL给谷歌indexer。谷歌Indexer将渲染页面并发现页面上的更多链接和内容。发现新的链接则会返回给Google bot去继续抓取进一步发现更多的链接。
　　And in this way, it really slows down the process of crawling your website in a very big way.And this is particularly relevant for large websites. So the other thing that I have to say about client-side rendering is that Google's indexer uses a version of Chrome for rendering JavaScript-powered websites that is about three years old.
　　这就极大地减慢了网站被谷歌抓取的速度，这对于大型网站影响尤为重大。另外，关于客户端渲染，Google的indexer用来来渲染JavaScript网站所使用的Chrome版本已有大约三年的历史。
　　And that means that it can't support all the latest features of these modern JavaScript frameworks. So if you're building a JavaScript-powered website that renders on the client side, it is very important that you ensure that it is set up in such a way that it degrades nicely forolder versions of browsers so that Google can render your content and your HTML completely.
　　这意味着它不能支持那些现代JavaScript框架的所有最新功能。因此，如果您要构建一个以JavaScript为基础的网站，并在客户端进行渲染，那么确保Google可以完全渲染您的内容和HTML。
　　I've seen many cases where a client-side rendered JavaScript page, Google is able to crawl or index part of it but it doesn't see all of the continent because of some of the features that have been included in that page. So very important that your JavaScript-powered web page degrades nicely for all the versions of the browser.
　　我看过很多客户端渲染的JavaScript页面，Google能够对其进行抓取和编制索引，但是页面中包含的某些功能谷歌无法完整抓取。因此要确保你基于JavaScript开发网页对于所有版本的浏览器都可以很好地渲染。
　　So we know that Google bot can't render JavaScript. And whilst the Google indexer can render JavaScript, we also know that it is limited to older versions of Chrome. So it doesn't support all the latest features of these modern JavaScript frameworks. So if we are doing client-side rendering, it is more difficult to get all of our content indexed and it really does slow down the entire process of crawling and indexing your website, which includes any changes you make. So if you make changes to your website, particularly if you have a large website, it can take weeks or months for those changes to be reflected in the Google index.
　　我们知道Google bot无法渲染JavaScript。Google indexer可以呈现JavaScript，但我们也知道它仅限于旧版Chrome。因此，它不支持这些现代JavaScript框架的所有最新功能。因此，如果在进行客户端渲染，则很难对所有的内容建立索引，这确实会减慢对网站被抓取和索引的整个过程，其中包括您所做的任何更改。因此，如果您对网站进行更改，尤其大型网站，则这些更改可能需要数周或数月才能反映在Google索引中。
　　So what to do? Well, our strong recommendation is to use old-fashioned content management systems for public facing web sites, first and foremost. If you haven't yet startedthe build of your website, then we would strongly recommend you look at one of the content management systems like Ambraco, or Wordpress, or Drupal. Or if you're doing e-commerce, use one of the platforms like Shopify, or BigCommerce.
　　那么该怎么办？我们强烈建议普通网站使用老式的内容管理系统。如果您还没有开始网站的搭建，那么我们强烈建议您考虑内容管理系统，例如Ambraco，Wordpress或Drupal。如果是电商网站，可以考虑用Shopify, BigCommerce电商建站系统。
　　These content management applications render everything on the server side and deliver the complete HTML to the browser and to Google, which makes it much easier and faster for Google to completely crawl and index your website.
　　这些内容管理应用程序在服务器端呈现所有内容，并向浏览器和Google提供完整的HTML，这使Google能够更轻松，更快地完全抓取您的网站并为其建立索引。
　　If you have already built a JavaScript-powered website, or if you really want to for whatever reason, then our drawing recommendation is to configure that application to render everything on the server side and deliver the complete HTML and content to the browser and to Google in the same way that one of these older traditional content management systems does. If you can do that properly, then it will make it a lot easier and faster for Google to index your JavaScript-powered website.
　　如果您已经建立了JavaScript网站，或者出于特殊原因确实想要这样做，那么我们的建议是配置该应用程序在服务器端渲染所有内容，并将完整的HTML和内容提供给浏览器和Google 就像这些较旧的传统内容管理系统之一一样。这对于谷歌快速抓取收录你的JavaScript网站会有很大帮助。
　　Perhaps, you've already launched a JavaScript-powered website that is rendering everything on the client side. You're not sure how to configure it to do that on the server side. There are third party services like Prerender.io, which might help. They might be worth looking at as well.
　　又或许，您已经发布了一个在客户端渲染的基于JavaScript开发的网站，不知道如何改为在服务器端渲染。有一些第三方服务获取可以帮你解决这个问题，比如Prerender.io。可以了解一下。
　　So in a nutshell, a lot of SEO is about making it easy for Google and not putting hurdles in Google's way. And when it comes to using JavaScript on your website, there are quite a fewpitfalls and traps that if you're not aware of them, it's easy to fall into.
　　简而言之，很多SEO都是为了帮助Google而不是阻碍Google抓取网站。在您的网站上使用JavaScript时，会有很多陷阱，稍不小心就掉入。
　　So if you have any questions, we would love to help. So hit us up here on WeChat. We could have you to discuss your specific case and we look forward to talking to you. Thanks.
　　如果您有任何疑问，欢迎联系我们微信小编。期待与您交流，谢谢大家。
　　 查看全部