nodejs抓取动态网页(为什么要上https呢，全站https是一个的思路？)

　　nodejs抓取动态网页(为什么要上https呢，全站https是一个的思路？)

　　为什么要为整个站点使用 https？这主要是因为https可以防止中间人攻击和内容劫持，提高网站的访问安全性。但是由于增加了SSL/TLS服务器端和浏览器端的处理，性能会有相应的下降，不过我们也启用了HTTP/2，主要特点：多路复用（Multiplexing） Multiplexing 使用允许多个请求-通过单个 HTTP/2 连接同时发出的响应消息。另外，PWA 中的 service worker 还必须要求 网站 的协议是 https，也为此打下了基础。HTTPS是现代WEB的发展趋势。由于 PWA 不是本文的重点，以后可以在其他主题上展开。

　　浏览器端优化

　　移动端有多种，导致浏览器处理和效果过度，会导致体验不一致，尤其是安卓手机，所以我们在浏览器端的策略是尽量减少网页的权重，目前page 只处理当前必要的内容和多个页面。方式。这是谷歌现在提出的开源项目AMP的一个想法。

　　首屏直出优化

　　从用户发出请求到页面完整展示，一般来说网络正常需要1s以上，但如果页面打开时间超过1s，用户流失的概率会线性增加。所以手机端秒开是很重要的，所以我们的想法是减少白屏时间，尽快显示浏览器的可视区域，也就是所谓的首屏。我们从以下几个方面对其进行了优化。

　　直出文档，简化DOM结构服务器进行HTML渲染输出，只处理首屏需要的HTML，简化DOM树结构，如：

　　可以简化为

　　页面上只保留必要的 DOM。另外，可以估计手机的分辨率，可以确定最大首屏输出可视区域的DOM。如果需要滚动到第二个屏幕，可以通过 Ajax 延迟内容加载。减少 DOM 可以减少 HTML 的输出，当然更重要的浏览器布局和渲染时间也大大减少。当然，首先要加载首屏的静态资源和样式。下一个关键点是在第一个屏幕上只加载所需的样式和静态资源。

　　仅在首屏加载所需的样式和静态资源是远远不够的。DOM 处理是不够的。要从白屏显示完整的第一屏，还需要样式和静态资源。所以需要先加载样式和静态资源，所以直接提取公共样式的首屏使用的样式，直接将首屏使用的样式内置到html页面中。另外先加载其他需要显示的部分，比如图片、字体等，方便首页快速显示。

　　首屏渲染，js延迟执行

　　第一屏渲染的时候，这个时候js的执行可能会阻塞渲染线程，所以为了减少浏览器主线程的渲染过程，尽量延迟js的执行，尤其是在操作的情况下DOM，否则，在首屏显示过程中，会在页面底部，body之后，html之前直接生成额外的re-layout和repaint，js导入或者code。

　　优化直出服务器的处理时间，突出直出的关键。服务器的处理等待被最小化，这对于第一屏的直出非常重要。

　　图像优化

　　画质和音量控制 对于移动终端来说，分辨率比桌面要小很多。首先，图片的分辨率和图片的DPI值会降低。第二步会降低图片的质量，保证图片的体积变小。.

　　提高CDN缓存命中率，一是缩小缩略图的尺寸规格，二是尽量与其他终端的图片规格保持一致，如APP、小程序。

　　使用WEBP webp并不是所有的浏览器都支持，所以我们的做法是判断需要js加载的图片，如果支持就直接加载webp格式的图片。如果没有，请使用默认的 jpg 格式。格式。

　　浏览器端缓存优化

　　当有缓存时，可以减少浏览器的重新请求，大大提高网页的打开速度。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，而且由于缓存的文件可以重复使用，还可以减少带宽，减少网络负载。那么我们来看看服务器端缓存的原理。

　　缓存优化（max-age）

　　页面的缓存状态由http协议的头部决定。我们主要使用max-age（单位S）来设置缓存的最长有效时间，也就是时间长度。比如我设置了max-age=60，也就是在请求发出后的60秒内，浏览器再次请求时不会再次请求服务器，而是从浏览器缓存中读取数据。

　　预加载和延迟加载

　　预加载和延迟加载是一对好兄弟。如果使用得当，它们可以极大地改善浏览器端的体验。就是决定什么时候预加载，什么时候懒加载。我们主要是在浏览器首屏结束后，当浏览器比较空闲时，预加载下一屏要显示的内容。

　　当用户即将触发下一屏的时候，下一屏的数据或者DOM已经留了下来，自然体验会流畅很多，但是预加载需要一定的度数，因为一个页面的DOM太多了，而且浏览器占用内存也会太多。最好预加载用户会触发浏览的内容，比如第二屏、轮播后面的内容、标签页等。

　　延迟加载的应用场景主要是减少单个 DOM 渲染的大小。对于当前页面的非可视区域，只有在需要显示或被用户事件触发时才加载。所以，懒加载和预加载在不同的场景下会有不同的应用，只要保证页面的流畅度。

　　DNS 预取

　　DNS预读配置的DNS解析，可以减少DNS次数，加快不同域名资源的加载。目前，仍然有很多浏览器支持。

　　配置也很简单：

　　当然，减少DNS的最佳时机是减少使用DNS的站点数量，我们会去掉一些二级域名。

　　CSS、JS优化

　　项目建设主要采用webpack的工具链，管理依赖，构建打包CSS，最小化CSS和JS，对我们现有的多页面项目进行多入口分包管理。

　　多页面 css 和 js 构建

　　打包代码如下，方便js的源文件目录，构建各个页面模块的js。所有页面都将收录两个 js 文件，libjs（全局公共 js）、xxx.js（当前页面特定的 js）和 css。. 这样每个页面的js和css都会最小化。同时，我们也对这些静态字符串文件进行gzip压缩。当然，这些文件会根据版本进行静态存储，并通过 CDN 进行缓存。

　　DOM 优化

　　页面流畅度与 DOM 渲染和操作密切相关。渲染过程大致如下：

　　处理 HTML 标记并构建 DOM 树。

　　处理 CSS 标记并构建 CSSOM 树。

　　将 DOM 和 CSSOM 组合成一个渲染树。

　　根据渲染树布局计算每个节点的几何形状。

　　将每个节点绘制到屏幕上。

　　您可以使用 DEVTOOLS 来分析整个渲染过程中的性能问题。

　　简化DOM，DOM操作优化

　　简化 DOM 可以减少渲染过程的时间，优化 DOM 操作可以减少重新布局和重绘的时间。简化 DOM 相应的方法已经在首屏引入。

　　这里主要讲DOM操作的优化。首先，减少 DOM 操作的数量。你可以在 js 执行过程中多次 DOM 操作生成好的 HTML 结果，一次性插入到 DOM 中。其次，尽量不要在页面的 DOM 树中使用它们。直接操作，可以在文档流的DOM外进行操作，也可以使用fragment一次性插入到文档流中。

　　当然，react 和 vue 现在都使用虚拟 DOM 技术，通过 diff 算法进行泛化的 DOM 操作。这也是一种高效高效的方法，但是对于一些不容易优化的页面，还是需要人为的干预和操作 DOM 才能让性能达到最佳。

　　减少重新布局和重绘

　　首先，为了减少布局调整，当您更改样式时，浏览器会检查是否有任何更改需要计算布局，以及是否需要更新渲染树。对“几何属性”（例如宽度、高度、左侧或顶部）的更改需要布局计算。第二，绘图的复杂性，减少绘图区域：改变transform或opacity属性以外的任何属性都会触发绘图。绘图通常是像素管道中最昂贵的部分；应尽可能避免。

　　通过提升图层和编排*敏*感*词*来减少绘图区域。Chrome DevTools 可用于快速确定正在绘制的区域。打开 DevTools 并按键盘上的 Esc 键。在出现的面板中，转到“渲染”选项卡并选中“显示绘制矩形”。每次绘图时，Chrome 都会将屏幕闪烁绿色。如果您看到整个屏幕呈绿色闪烁，或者看到您认为不应绘制的屏幕区域，则应进一步调查。

　　页面*敏*感*词*优化

　　尽可能使用 CSS3 *敏*感*词*，使用 transform 和 opacity 属性更改来制作*敏*感*词*。使用 will-change 或 translateZ 来促进移动元素。避免过度使用提升规则；每一层都需要内存和管理开销。另外，*敏*感*词*的层数需要减少，每增加一层都会增加内存占用和管理的开销。

　　如果一定要用js*敏*感*词*，推荐使用：requestAnimationFrame。另外，在不能使用页面*敏*感*词*的场景中尽量不要使用*敏*感*词*。如果一定要使用，可以简化*敏*感*词*渲染过程。

　　我们之前用过一个js插件，iScroll就是一个例子，在页面中初始化了多个iScroll的实例，尤其是安卓手机上，特别卡顿。最后，我们的解决方案是使用css3*敏*感*词*和触摸事件来实现简单轻量。对于需要滚动的部分，页面的滚动部分使用原生滚动，保证了不同终端的体验一致。

　　总结

　　移动端的优化如果对以上几点展开，可以单独写一篇文章文章，我们对以上几个方面进行了优化，也产生了比较好的效果，移动端的打开速度和体验终端有了不错的提升，一般开放时间增加了30-50%。在网络稳定的情况下，服务器的耗时基本在50ms以内，首屏时间在500ms以内，但是从来没有优化过。没有限制，没有最好，只有更好。它需要开发者从根本上去探索，勇于创新，以达到越来越好的局面。

　　后续我们还可以深入挖掘web的基本技术点。同时，我们可以积极面对PWA、AMP等现代web新思维的诸多方面，不断探索，在web前端的未来我们可以走的更好。提供更好的用户体验，创造更高的社会价值。

　　亲爱的“攻城狮”，如果你喜欢这篇文章，请在文末点个赞，也欢迎你去51Testing软件测试网掌握更多IT技术文章 ~