本文目录导航：

• 罕用的前端性能优化方法有哪些?
• 如何做好网站前端优化
• 前端性能优化有哪些方法

罕用的前端性能优化方法有哪些?

罕用的优化有两局部第一：面向内容的优化1. 增加 HTTP 恳求 2. 增加 DNS 查找3. 防止重定向4. 经常使用 Ajax 缓存5. 提前载入组件6. 预先载入组件 7. 增加 DOM 元素数量8. 切分组件到多个域9. 最小化 iframe 的数量10.不要产生http 404 失误第二：面向 Server1. 增加 cookie 2. 针对 Web 组件经常使用域名有关性的

如何做好网站前端优化

1、提高页面加载速度。

能用css处置的不用背景图片，背景图片也尽量紧缩大小，可以几个icons放在一个图片上，经常使用background-position找到须要的图片位置。

可以增加HTTP恳求数，提高网页加载速度。

2、 结构、体现和行为的分别。

另外一个关键的拖慢网页加载速度的要素就是将css和JS都沉积在HTML页面上，每次看到有人间接在页面上编写CSS和JS我都很痛心疾首。

经过外链的模式能大大放慢网页加载速度的，css文件可以放在head里，JS文件可以搁置在body的最下方，在不影响阅读的状况下再去加载JS文件。

3、 优化网站分级结构。

在每个内页加面包屑导航是很有必要的，可以让蜘蛛进入页面之后不至于迷路，有条件的话，最好能独自加个Sitemap页面，将网站结构了如指掌地展如今蜘蛛背地，更无利于蜘蛛抓敞开息。

4、 集中网站权重。

由于蜘蛛调配到每个页面的权重是必定的，这些权重也将平均调配到每个a链接上，那么为了集中网站权重，可以经常使用”rel=nofollow”属性，它通知蜘蛛无需抓取指标页,可以将权重分给其余的链接。

5、 文本强调标签的经常使用。

当着重强调某个关键词须要加粗示意，决定strong标签比经常使用b标签要更有强调作用。

6、 a标签的title属性的经常使用。

在不影响页面性能的状况下，可以尽量给a标签加上title属性，可以更无利于蜘蛛抓敞开息。

7、 图片alt属性的经常使用。

这个属性可以在图片加载不进去的时刻显示在页面上关系的文字消息，作用同上。

8、 H标签的经常使用。

关键是H1标签的经常使用须要特意留意，由于它自带权重，一个页面有且最多只能有一个H1标签，放在该页面最关键的题目下面，如首页的logo上可以加H1标签。

前端性能优化有哪些方法

前端性能优化的方法有：

一、增加http恳求数

罕用的增加http恳求数有以下几种：

1、兼并图片。

当图片较多时，可以兼并为一张大图，从而增加http恳求数。

经常变动的图片或许不太适合，变动相对稳固的就可以思考。

兼并大图除了能增加http恳求数外，还可以充沛应用缓存来优化性能。

2、兼并紧缩css样式表和js脚本，他们的独特目的都是为了增加http衔接数。

3、去掉不用要的恳求。

开发写代码或许系统更新之后残留的有效恳求衔接。

4、充沛应用缓存。

这里说的缓存是客户端侧缓存或许说阅读器缓存。

Expires头消息是客户端侧缓存的关键依据，格局相似于Expires:sun ,20 Dec 2017 23:00:00 GMT。

以Apache为例，可在Apache的性能文件中设置Expires。

二、图片优化

优化方法：

1、尽或许的经常使用PNG格局的图片，它相对来说体积较小。

2、关于不同格局的图片，在上线之前最好启动必定的优化。

3、图片的提前加载，也叫做赖加载。

三、经常使用CDN

CDN即内容散发网络，可以经常使用户就近取得所需内容，处置网络拥堵的状况，提高用户访问网站的照应速度。

四、开启GZIP

GZIP即数据紧缩，用于紧缩经常使用Internet传输的一切文本资源。

开启GZIP的方法很便捷，到对应的web服务性能文件中设置一下即可。

以Apache为例，在性能文件中增加。

五、样式表和JS文件的优化

六、经常使用无cookie域名

无cookie域名的概念：当发送一个恳求时，同时还要恳求一张静态的图片和发送cookie时，主机关于这些cookie不会做任何经常使用，也就是说这些cookie没什么用，没不要随恳求一起发送。