随笔分类 - web性能优化
摘要：主要来源于这篇文章：写给中高级前端关于性能优化的9大策略和6大指标 | 网易四年实践，算是这篇文章的学习笔记。 性能优化：从过程趋势来说，可分为网络层面和渲染层面；从结果趋势来说，可分为时间层面和体积层面。 一、网络层面 网络层面的优化就是让资源体积更小，加载更快。 1、构建策略 —— webpac
阅读全文
摘要：本篇文章翻译自adobe Web Platform Team的博客：CSS animations and transitions performance: looking inside the browser，虽然是一篇旧文，但是里面谈到的知识点很有用，对CSS的性能优化有很大帮助。 在这篇文章中，
阅读全文
摘要：在网上看到一个这样的问题： transform与position:absolute 有什么区别？查阅资料后发现这道题目其实不简单，涉及到重排、重绘、硬件加速等网页优化的知识。 一、问题背景 过去几年，我们常常会听说硬件加速给移动端带来了巨大的体验提升，但是即使对于很多经验丰富的开发者来说，恐怕对其背
阅读全文
摘要：在网络请求中，我们在使用到某些资源比如：图片，JS，CSS 等等，在执行之前总需要等待资源的下载，如果我们能做到预先加载资源，那在资源执行的时候就不必等待网络的开销，这时候就轮到 preload 大显身手的时候了。 一、preload 提前加载 preload 是一个新的 Web 标准，在页面生命周
阅读全文
摘要：在看《你不知道的JavaScript》的时候，看到了这个么一段代码： function foo() { var a = arguments[0] !== (void 0 ) ? arguments[0] : 2; return a; } 并且我们在使用 ?. 操作符，比如：let name = pe
阅读全文
摘要：在工作中，有时会遇到需要一些不能使用分页方式来加载列表数据的业务情况，对于此，我们称这种列表叫做长列表。比如，在一些外汇交易系统中，前端会实时的展示用户的持仓情况(收益、亏损、手数等)，此时对于用户的持仓列表一般是不能分页的。 在浅析如何利用时间分片高性能渲染十万级数据一文中，提到了可以使用时间分片
阅读全文
摘要：在实际工作中，我们很少会遇到一次性需要向页面中插入大量数据的情况，但是为了丰富我们的知识体系，我们有必要了解并清楚当遇到大量数据时，如何才能在不卡主页面的情况下渲染数据，以及其中背后的原理。对于一次性插入大量数据的情况，一般有两种做法： 1、时间分片 2、虚拟列表 我们首先来看一下“时间分片”的原理
阅读全文
摘要：最近总结了一下自己在项目中使用到的性能优化手段，这里主要从两个部分来详解vue项目的性能优化：代码层优化、webpack打包优化 一、代码优化 1、v-if 和 v-show v-if 是懒加载，当状态为 true 时才会加载，并且为 false 时不会占用布局空间； v-show 是无论状态是 t
阅读全文
摘要：一、概述 我们应该都知道 vue会通过 object.defineProperty 对数据进行劫持，来实现视图响应数据的变化，然而有些时候我们的组件就是纯粹的数据展示，不会有任何改变，我们就不需要 vue来劫持我们的数据，在大量数据展示的情况下，这能够很明显的减少组件初始化的时间，那如何禁止 vue
阅读全文
摘要：以前我们总说，JS是单线程没有多线程，当JS在页面中运行长耗时同步任务的时候就会导致页面假死影响用户体验，从而需要设置把任务放在任务队列中；执行任务队列中的任务也并非多线程进行的，然而现在HTML5提供了我们前端开发这样的能力 - Web Workers API，我们一起来看一看 Web Worke
阅读全文
摘要：一、什么是CDN CDN的全称是(Content Delivery Network)，即内容分发网络。其目的是通过在现有的Internet中增加一层新的CACHE(缓存)层，将网站的内容发布到最接近用户的网络”边缘“的节点，使用户可以就近取得所需的内容，提高用户访问网站的响应速度。从技术上全面解决由
阅读全文
摘要：1、内存的生命周期 无论你使用那种语言，内存的生命周期基本是都差不多：分配内存 —— 使用内存 —— 释放内存，以下是生命周期中每一步发生了什么的一个概述： Allocate memory —— 操作系统分配内存，允许你的程序使用它。在基础语言中（例如 C ），这是一个开发者自己处理的明确操作。然而
阅读全文
摘要：一、什么是内存泄漏 引擎中有垃圾回收机制，它主要针对一些程序中不再使用的对象，对其清理回收释放掉内存。那么垃圾回收机制会把不再使用的对象（垃圾）全都回收掉吗？ 其实引擎虽然针对垃圾回收做了各种优化从而尽可能的确保垃圾得以回收，但并不是说我们就可以完全不用关心这块了，我们代码中依然要主动避免一些不利于
阅读全文
摘要：一、问题背景 1、我们经常说的强缓存和协商缓存，那么想一想在项目上，什么文件用强缓存？什么文件用协商缓存呢？那么我这里就来说一说。 就拿前端SPA部署来说，打包过后的文件为 index.html、css、js、img 文件等， （1）index.html 应该不缓存，或者是设置 no-cache 的
阅读全文
摘要：前端缓存，这是一个老生常谈的话题，也常被作为前端面试的一个知识点。今天我们再来总结一下。 分类：前端缓存分为强缓存和协商缓存两种。 一、强缓存 强缓存主要使用 Expires、Cache-Control 两个头字段，两者同时存在 Cache-Control 优先级更高。当命中强缓存的时候，客户端不会
阅读全文
摘要：CDN全称Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接
阅读全文
摘要：当浏览器请求一个URL的时候，通过firebug我们可以发现大概有以下几个过程：阻挡、域名解析、建立连接、发送请求、等待响应、接收数据。后面四个跟用户的网络情况和你的服务器处理速度有关，本文重点说说前两个。 1、阻挡：解决方案——提高浏览器并发连接数 阻挡：不同的浏览器对单个域名的最大并发连接数有一
阅读全文
摘要：一、网络加载类 1、减少 HTTP 资源请求次数 合并静态资源图片、JavaScript 或 CSS 代码，减少页面请求数和资源请求消耗 避免重复的资源，防止增加多余请求 2、减小 HTTP 请求大小 减少没必要的图片、JavaScript、CSS 及 HTML 代码 对文件进行压缩优化 使用 gz
阅读全文
摘要：在大型网站中，我们发现页面资源经常使用不同的域名进行引用，例如126邮箱的部分js、css、图片存放于http://mimg.127.net/域名下，京东的部分静态图片存放在http://img11.360buyimg.com域名下，那这样做究竟有什么好处呢，和性能又有什么关系呢，下面进行具体分析。
阅读全文
摘要：我们知道，对于每一个http请求，无论是动态的网页aspx，还是jsp，还是/user/add这种MVC模式的URL，还是CSS或者JS文件，每一个http请求都会带着在硬盘上存有的跟这个域相关存有的cookie信息。越来越多的cookie导致请求头越来越大。那么应该如何去优化呢？ cookie存储
阅读全文
