小编kac*_*ase的帖子

我正在尝试使用 JavaScript 中的 FileApi 访问文本文件的前几行。

为此，我从文件的开头切片任意数量的字节并将 blob 交给 FileReader。

对于大文件，这需要很长时间，但据我所知，只需要访问文件的前几个字节。后台是否有一些实现需要在切片之前访问整个文件？它是否取决于 FileApi 的浏览器实现？我目前在 Chrome 和 Edge（铬）中进行了测试。

使用性能开发工具在 Chrome 中进行分析显示 reader.onloadend 之前有大量空闲时间，并且 ram 使用量没有增加。然而，这可能是因为 FileApi 是在浏览器本身中实现的，并没有反映在 JavaScript 性能统计中。

我的 FileReader 实现看起来像这样：

const reader = new FileReader();

reader.onloadend = (evt) => {
  if (evt.target.readyState == FileReader.DONE) {
    console.log(evt.target.result.toString());
  }
};

// Slice first 10240 bytes of the file
var blob = files.item(0).slice(0, 1024 * 10);

// Start reading the sliced blob
reader.readAsBinaryString(blob);

它工作正常，但如所描述的那样，对于大文件来说表现不佳。我尝试了 10kb、100mb 和 6gb。记录前 10kb 之前的时间似乎与文件大小直接相关。

您对如何提高读取文件开头的性能有什么建议吗？

编辑：使用@BenjaminGruenbaum 建议的响应和 DOM 流确实不能提高读取性能。 …

Angular 17 introduced a new control flow syntax moving from

<div *ngFor="let item of items"></div>

to

@for (item of items) {
    <div></div>
}

When directly translating my loops, I get the following error:

 NG5002: @for loop must have a "track" expression

我想在Angular JS 1.4.0中实现一个动画,我希望它类似于一个,可以在这个页面上找到(Angular 1.1.5):http: //www.nganimate.org/ angularjs/NG重复/移动

据我所知,ngAnimate在过去的几个版本中发生了重大变化.

我用Plunkr重新创建了我的应用程序的重要部分.它可以在这里找到http://plnkr.co/edit/9DK3LEAaGDgDT2kIILjG?p=preview

我希望显示和隐藏的项目,因为不同的过滤器输入,使用css动画进行动画制作.

这是我的过滤器输入:

<input type="text" class="form-control" ng-model="search">

这是列表,其中显示搜索中的所有元素.

<ul>
    <li ng-class="item" ng-repeat="name in people | filter:search">
         <a href="#"> {{name.name}} </a>
    </li>
</ul>

这是我的CSS动画:

.item.ng-enter, 
.item.ng-leave
{ 
    -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    position: relative;
    display: block;
} 

.item.ng-enter.item.ng-enter-active, 
.item.ng-leave {
    opacity: …

我试图在Angular 2 ts(2.2.1)中创建一个上传表单,允许上传例如CSV文件,但不是直接发送到http服务的文件,我希望首先在文件中验证文件浏览器.

到目前为止,我已经可以使用以下代码上传文件并将其打印在控制台中:

1. 用于文件上传的Html输入

   <input type="file" (change)="changeListener($event)" #input />
   

   Run Code Online (Sandbox Code Playgroud)

2. 在我的角度组件中,我设置了eventListner和File阅读器.

   export class UploadComponent {
   
       public fileString;
   
       constructor() {
           this.fileString;
       }
   
       changeListener($event): void {
               this.readThis($event.target);
           }
   
       readThis(inputValue: any): void {
           var file: File = inputValue.files[0];
           var myReader: FileReader = new FileReader();
           var fileType = inputValue.parentElement.id;
           myReader.onloadend = function (e) {
               //myReader.result is a String of the uploaded file
               console.log(myReader.result);
   
               //fileString = myReader.result would not work, 
               //because it is not in the scope of the callback
           }
   
           myReader.readAsText(file);
       }
   }
   

   Run Code Online (Sandbox Code Playgroud)

到目前为止,此代码完美无缺. …