Comments (2)
一、页面优化
1、减少HTTP请求数量
1、从设计实现层面简化页面:尽量将页面设置成百度首页那样,保持页面简洁、减少资源的使用。
2、合理设置HTTP缓存:合理设置缓存可以大大地减少HTTP请求,怎么叫合理呢?原则很简单,能缓存越多越好,能缓存越久越好。
3、资源合并和压缩:尽可能将外部脚本、样式进行合并,多个合为一个;Css、Javascript、image也可以使用工具进行压缩,压缩后能节省空间。
4、合并CSS图片。
5、inline image:使用data: url("…") scheme的方式将图片嵌入到页面或CSS中。
6、懒加载图片(异步加载)。
2、将外部脚本置底(将脚本内容在页面信息内容加载后再加载)
浏览器是可以并发请求的,这一特点使得其能够更快的加载资源,然而外链脚本在加载时却会阻塞其他资源,例如在脚本加载完成之前,它后面的图片、样式以及其他脚本都处于阻塞状态,直到脚本加载完成后才会开始加载。如果将脚本放在比较靠前的位置,则会影响整个页面的加载速度从而影响用户体验。解决这一问题的方法有很多,在 这里有比较详细的介绍 (这里是译文和 更详细的例子 ),而最简单可依赖的方法就是将脚本尽可能的往后挪,减少对并发下载的影响
3、异步执行inline脚本(保证脚本在页面内容后面加载)
inline脚本对性能的影响与外部脚本相比,是有过之而无不及。首页,与外部脚本一样, inline脚本在执行的时候一样会阻塞并发请求,除此之外,由于浏览器在页面处理方面是单线程的,当 inline脚本在页面渲染之前执行时,页面的渲染工作则会被推迟。简而言之, inline脚本在执行的时候,页面处于空白状态。鉴于以上两点原因,建议将执行时间较长的 inline脚本异步执行,异步的方式有很多种,例如使用 script元素的defer 属性(存在兼容性问题和其他一些问题,例如不能使用 document.write)、使用setTimeout ,此外,在HTML5中引入了 Web Workers的机制,恰恰可以解决此类问题。
4、Lazy Load Javascript(只有在需要加载的时候加载,在一般情况下并不加载信息内容。)
随着 Javascript框架的流行,越来越多的站点也使用起了框架。不过,一个框架往往包括了很多的功能实现,这些功能并不是每一个页面都需要的,如果下载了不需要的脚本则算得上是一种资源浪费 -既浪费了带宽又浪费了执行花费的时间。目前的做法大概有两种,一种是为那些流量特别大的页面专门定制一个专用的 mini版框架,另一种则是 Lazy Load。YUI 则使用了第二种方式,在 YUI的实现中,最初只加载核心模块,其他模块可以等到需要使用的时候才加载。
5、将CSS放在head中
如果将 CSS放在其他地方比如 BODY中,则浏览器有可能还未下载和解析到 CSS就已经开始渲染页面了,这就导致页面由无 CSS状态跳转到 CSS状态,用户体验比较糟糕。除此之外,有些浏览器会在 CSS下载完成后才开始渲染页面,如果 CSS放在靠下的位置则会导致浏览器将渲染时间推迟。
6、异步请求callback(就是将一些行为样式提取出来,慢慢的加载信息的内容)
在某些页面中可能存在这样一种需求,需要使用 script标签来异步的请求数据。类似:
Javascript:
function myCallback(info){undefined
//do something here
}
HTML:
cb返回的内容 :
myCallback(‘Hello world!’);
像以上这种方式直接在页面上写 《script》对页面的性能也是有影响的,即增加了页面首次加载的负担,推迟了 DOMLoaded和window.onload 事件的触发时机。如果时效性允许的话,可以考虑在 DOMLoaded事件触发的时候加载,或者使用 setTimeout方式来灵活的控制加载的时机。
7、减少不必要的HTTP跳转
对于以目录形式访问的 HTTP链接,很多人都会忽略链接最后是否带 ’/’,假如你的服务器对此是区别对待的话,那么你也需要注意,这其中很可能隐藏了 301跳转,增加了多余请求。具体参见下图,其中第一个链接是以无 ’/'结尾的方式访问的,于是服务器有了一次跳转。
8、避免重复的资源请求
这种情况主要是由于疏忽或页面由多个模块拼接而成,然后每个模块中请求了同样的资源时,会导致资源的重复请求
9、精简javascript和css
精简就是将Javascript或CSS中的空格和注释全去掉,
二、代码优化
1、javascript
1、DOM
DOM操作应该是脚本中最耗性能的一类操作,例如增加、修改、删除 DOM元素或者对 DOM集合进行操作。如果脚本中包含了大量的 DOM操作则需要注意以下几点:
(1)、 HTML Collection(HTML收集器,返回的是一个数组内容信息)
在脚本中 document.images、document.forms 、getElementsByTagName()返回的都是 HTMLCollection类型的集合,在平时使用的时候大多将它作为数组来使用,因为它有 length属性,也可以使用索引访问每一个元素。不过在访问性能上则比数组要差很多,原因是这个集合并不是一个静态的结果,它表示的仅仅是一个特定的查询,每次访问该集合时都会重新执行这个查询从而更新查询结果。所谓的 “访问集合” 包括读取集合的 length属性、访问集合中的元素。
因此,当你需要遍历 HTML Collection的时候,尽量将它转为数组后再访问,以提高性能。即使不转换为数组,也请尽可能少的访问它,例如在遍历的时候可以将 length属性、成员保存到局部变量后再使用局部变量。
(2)、 Reflow & Repaint
除了上面一点之外, DOM操作还需要考虑浏览器的 Reflow和Repaint ,因为这些都是需要消耗资源的,
2、慎用with
3、避免使用eval和Function
4、减少作用域链查找(这方面设计到一些内容的相关问题)
5、数据访问
6、字符串拼接
2、CSS选择符
3、HTML
4、Image压缩
三、CDN
四、Gzip
五、多域名
六、无Cookie服务器
from trisome.
一、优化网络
- 缓存资源,使用浏览器缓存相关等。
- 无阻塞加载——样式在尾部使用加载,js 脚本在胃部使用异步加载
- 减少 HTTP 请求
- 减少携带 Cookie
- 异步加载第三方资源
二、压缩文件
- 压缩代码
- 使用 Base64 代替小质量图像
- 合并图标成精灵图
- 使用 CDN 加载静态资源等
三、首屏体验
(1)、预解析——预先解析 DNS 获取域名获取队友 IP —— pre-parse
(2)、预加载——延后加载无需立即用到的资源,确保使用时已加载——pre-load
(3)、懒加载——延后加载无需立即渲染的资源,进入区域时才加载——lazy-load
四、渲染优化
- 减少 DOM 节点
- 优化动画-如优先使用 css 动画; 合理开启 GPU 加速;合理使用 requestAnimationFrame 代替 setTimeout
- 优化高频事件-使用防抖、节流;类似输入 input 等使用 single-promise,取消之前无用请求;
- 渲染页面使用分页、按需加载、虚拟列表或虚拟表格等。
- 大文件分片上传等。
- 移动端渲染页面等,如:SSR 渲染、NSR 渲染等。
五、构建方面优化
webpack、rollup、vite 等打包工具,主要 webpack
- 减少打包时间
(1)、配置 include/exclude 缩小 loader 对文件的搜索范围
(2)、缓存资源——配置 cache 缓存 loader 对文件的编译副本
(3)、配置 Thread 将 loader 单进程转换为多进程 - 减少打包体积
类似 tree-shaking 分割代码、按需加载、压缩资源等。
六、代码方面
-
css 一些代码策略
(1)、避免出现超过三层的嵌套规则
(2)、避免为ID选择器添加多余选择器
(3)、避免重复匹配重复定义,关注可继承属性 -
DOM 策略
(1)、缓存 DOM 计算属性和避免过多 DOM 操作
(2)、使用 DOMFragment 缓存批量化 DOM 操作
等等...
from trisome.
Related Issues (20)
- 说说什么是工程化? HOT 2
- Webpack loader 与 plugin 的区别 HOT 2
- 说一下Webpack打包原理 HOT 5
- Webpack 有哪些性能优化手段? HOT 2
- 说说Webpack打包流程 HOT 2
- 说说Webpack hash、chuckhash、 contenthash的区别,分别应用于什么场景? HOT 1
- 如何提高Webpack的打包速度? HOT 1
- 如何提高Webpack的构建速度? HOT 1
- 说说 git rebase 和 git merge 的区别 HOT 2
- Babel的原理是什么? HOT 4
- 说一下对http2的理解,它解决了什么问题? HOT 2
- 什么是HTTP队头阻塞?什么是TCP队头阻塞? HOT 2
- HTTP连接为什么要三次握手? HOT 1
- 说说浏览器缓存和HTTP缓存 HOT 2
- 说一下HTTPS的原理 HOT 1
- 说说TCP与UDP的区别 HOT 2
- 什么是无状态协议,HTTP 是无状态协议吗?怎么解决? HOT 2
- 说说web安全及防护措施 HOT 2
- 请求20个接口都对第一屏内容很关键如何做优化? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from trisome.