小编dan*_*oon的帖子

文档片段如何工作？

任何人都可以简要解释一下 documentFragment 实际上做了什么。我一直在寻找一个明确的解释，但直到现在我才得到任何解释。

我读到的是，documentFragment 类似于 DOM 结构，我们可以在其中添加修改 DOM 元素而不会中断文档的实际流程。

我还读到，documentFragment 比将每个元素一个一个地附加到 DOM 中要快。在我看来，documentFragment 不会每次都重新计算样式，因此速度更快。

我有两个例子，

以片段的方式进行：

var frag = document.createDocumentFragment();
var div1 = document.createElement("div");
var div2 = document.createElement("div");
frag.appendChild(div1);
frag.appendChild(div2);
document.getElementById("someId").appendChild(frag);

Run Code Online (Sandbox Code Playgroud)

以正常方式进行：

var div = document.createElement("div");
var div1 = document.createElement("div");
var div2 = document.createElement("div");
div.appendChild(div1);
div.appendChild(div2);

document.getElementById("someId").appendChild(div);

Run Code Online (Sandbox Code Playgroud)

在上面的两个例子中实际发生了什么？

html javascript documentfragment

Jef*_*ohn

2020 12-24

16
推荐指数

1
解决办法

6893
查看次数

在 aws Lambda 上安装“sharp”时出现问题

我正在尝试使用图像裁剪器依赖项作为 aws lambda 上传函数。它在我的本地机器（）上完美运行node v14.17.3，但在将其作为 lambda fn 触发时失败并出现以下错误。

"errorType":
"Error"
"errorMessage":
"\nSomething went wrong installing the \"sharp\" module\n\nCannot find module '../build/Release/sharp-linux-x64.node'\nRequire stack:\n- /var/task/node_modules/sharp/lib/sharp.js\n- /var/task/node_modules/sharp/lib/constructor.js\n- /var/task/node_modules/sharp/lib/index.js\n- /var/task/index.js\n- /var/runtime/UserFunction.js\n- /var/runtime/index.js\n\nPossible solutions:\n- Install with the --verbose flag and look for errors: \"npm install --ignore-scripts=false --verbose sharp\"\n- Install for the current runtime: \"npm install --platform=linux --arch=x64 sharp\"\n- Consult the installation documentation: https://sharp.pixelplumbing.com/install"
"stack":
"Error: "
"Something went wrong installing the \"sharp\" module"
""
"Cannot find module '../build/Release/sharp-linux-x64.node'"
"Require stack:"
"- /var/task/node_modules/sharp/lib/sharp.js"
"- …

Run Code Online (Sandbox Code Playgroud)

aws-lambda

tin*_*tin

2022 05-22

16
推荐指数

2
解决办法

8136
查看次数

offsetParent与parentElement或parentNode之间的差异

我有一个以下的DOM结构

<body>
    <div>
       <table>
          <outerElement>
              <innerElement />  
          </outerElement>
       <table>
    </div>
</body>

Run Code Online (Sandbox Code Playgroud)

DIV的溢出设置为auto,因此如果表变大,它会在DIV中滚动.

在这种情况下,为什么table.offsetParent两者都返回身体table.parentNode并parentElement返回Div？

我需要计算innerElement窗口内的当前位置,所以我从它遍历所有父元素,收集它们offsetTop和offsetLeft值.直到DIV offsetParent工作正常,然后它直接跳到身体.问题是如果在某些时候涉及滚动,我需要考虑scrollTop并且scrollLeft同样 - 就像上面例子中的DIV一样.问题是如果我使用offsetParent我从未遇到过DIV作为父母之一.

UPDATE

这是执行遍历的代码的一部分:

while (oElem && getStyle(oElem, 'position') != 'absolute' && getStyle(oElem, 'position') != 'relative') { 
   curleft += oElem.offsetLeft;
   curtop += oElem.offsetTop;
   oElem = oElem.offsetParent;
}

Run Code Online (Sandbox Code Playgroud)

where getStyle是一个自定义函数,在这种情况下检索位置样式.

html javascript dom offset

Yur*_*ter

2017 12-05

12
推荐指数

2
解决办法

2万
查看次数

Magento 2 - Fotorama

我在Productdetail页面上有一个带有ProdcutSlider的问题.我不知道如何设置容器宽度和高度.

我找到了Fotorama插件的一些配置,但没有关于widht和height的信息.

我的Productimages有另一个方面.

<div class="fotorama__stage" style="width: 581px; height: 581px; line-height: 581px;">

这是插件的尺寸.

我的图像尺寸是530px x 350px,因此有太多的空白区域(顶部/底部).

有任何想法吗？

jquery slider fotorama magento2

use*_*425

2019 03-19

11
推荐指数

2
解决办法

8568
查看次数

无法使用 babel 项目在 webpack 中导入 const 枚举

我正在开发一个使用 create-react-app 构建的 React 项目，后来我们弹出并修改了很多 webpack 配置。现在我很难const enums从外部库导入。我无法控制该外部包。它在其文件中定义了常量枚举d.ts。

我尝试过babel-plugin-use-const-enumbabel 插件和预设。这对我也没有帮助。

我的网络包配置：

.....
.....
{
  test: /\.(js|mjs|jsx|ts|tsx)$/,
  include: [paths.appSrc],
  loader: require.resolve("babel-loader"),
  options: {
    customize: require.resolve("babel-preset-react-app/webpack-overrides"),
    plugins: [
        [require.resolve("babel-plugin-const-enum"), { transform: "constObject" }],
        [require.resolve("@babel/plugin-transform-typescript"), { isTSX: true, optimizeConstEnums: true }],
        [require.resolve("@babel/plugin-transform-react-jsx")],
        [require.resolve("@babel/plugin-proposal-class-properties"), { loose: true }],
        [require.resolve("@babel/plugin-proposal-nullish-coalescing-operator")],
        [require.resolve("@babel/plugin-proposal-optional-chaining"), { isTSX: true }],
        [require.resolve("@babel/plugin-transform-arrow-functions")],
        [require.resolve("@babel/plugin-proposal-private-methods"), { loose: true }],
        [
          require.resolve("babel-plugin-named-asset-import"),
          {
            loaderMap: {
              svg: {
                ReactComponent: "@svgr/webpack?-svgo,+titleProp,+ref![path]",
              },
            },
          },
        ],
    ],
    presets: ["@babel/preset-env"],
  },
}, …

Run Code Online (Sandbox Code Playgroud)

typescript reactjs webpack babel-loader

Pra*_*vel

2022 11-24

10
推荐指数

1
解决办法

1790
查看次数

Puppeteer 错误错误：等待选择器超时

目前我有一个网站，其 HTML 中有此内容。我通过检查chrome开发者工具中的元素确认了这一点。

<div class="hdp-photo-carousel" style="transform: translateX(0px);">
  <div class="photo-tile photo-tile-large">

Run Code Online (Sandbox Code Playgroud)

我直观地看到页面打开，我可以看到该项目在那里。然后 30 秒后我收到此错误：

<div class="hdp-photo-carousel" style="transform: translateX(0px);">
  <div class="photo-tile photo-tile-large">

Run Code Online (Sandbox Code Playgroud)

我在 puppeteer js 中的代码是：

const pptrFirefox = require('puppeteer-firefox');

(async () => {
  const browser = await pptrFirefox.launch({headless: false});
  const page = await browser.newPage();
  await page.goto('https://zillow.com');
  await page.type('.react-autosuggest__input', '8002 Blandwood Rd. Downey, CA 90240');
  await page.click('.zsg-search-button_primary');
  await page.waitForSelector('.photo-tile');
  console.log('did I get this far?');
})();

Run Code Online (Sandbox Code Playgroud)

谁能告诉我我做错了什么？

javascript node.js web-scraping puppeteer

Fab*_*ioG

2023 02-07

9
推荐指数

2
解决办法

3万
查看次数

"连接"在网络标签中的Chrome开发者工具中意味着什么,为什么它只出现在某些网站上？

我一直试图在网上寻找解释,但我似乎找不到一个.如果你在Chrome浏览器上访问像youtube.com这样的网站并将鼠标悬停在与文件名"http://www.youtube.com/"相对应的蓝色栏上,你会看到以下四种不同的东西:

-blocking

- 发送

-等候

-接收

我看到,在网络标签中查看其他网站的页面时

-DNS查找

-Connecting

- 发送

-等候

-接收

即使页面非常简单,也需要很长时间才能完成所有这些工作.是什么让我的服务器显示页面加载的不同统计键,我可以做些什么来优化？一般来说,我在哪里可以找到有关网络工具的更全面的信息？

networking latency google-chrome-devtools

dan*_*oon

2012 08-23

8
推荐指数

1
解决办法

5088
查看次数

Angular cli 构建不包含 css 组件

阅读 angular-cli 文档和有关堆栈溢出的一些讨论，我了解到，当使用生成的组件完成项目时，默认情况下内联样式将全部包含在构建中，但是当我构建项目时，似乎没有一个包括内联样式。
例如这个组件：

成分

import { MenubarService } from '../../services/menubar-service/menubar.service'
 
@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css'],
    providers:[LoginService]
})
export class LoginComponent implements OnInit {
    constructor(.......

Run Code Online (Sandbox Code Playgroud)

最终项目中不存在 login.component.css 文件。我注意到它有两个原因：
首先，我的应用程序的样式显然与我使用“ngserve”命令时的样式不同，其次是因为使用浏览器检查器元素，我找不到 css 的痕迹。
这是我的 angular-cli 的配置文件

{
  "project": {
  "version": "1.0.0-beta.18",
  "name": "genioimprese"
},
"apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "images",
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "styles.css",
        "paper.css"
      ],
      "scripts": [],
      "environments": {
        "source": "environments/environment.ts", …

Run Code Online (Sandbox Code Playgroud)

angular-cli angular

mau*_*rok

2020 10-08

8
推荐指数

1
解决办法

5040
查看次数