美文网首页
前端性能优化

前端性能优化

作者: Ancestor楠 | 来源:发表于2020-07-20 10:20 被阅读0次

一、代码部署:

1、代码的压缩与合并:

guip-minify-css:去换行、去空格、多文件合并成一个

2、图片、js、css等静态资源使用和主站不同域名地址存储,从而使得在传输资源时不会带上不必要的cookie信息:

不携带Cookie节省带宽

3、使用内容分发网络 CDN:

分发CDN

4、为文件设置Last-Modified、Expires和Etag:

缓存(公司运维人员)

5、使用GZIP压缩传送:

GZIP压缩节省40%

6、权衡DNS查找次数(使用不同域名会增加DNS查找):

权衡DNS查找次数,与第2点矛盾

7、避免不必要的重定向(加"/"):

加"/"可避免不必要的重定向

二、编码

html:

1、使用结构清晰,简单,语义化标签

2、避免空的src和href

3、不要在HTML中缩放图片---会导致重新计算像素点

css:

1、精简css选择器:层级要少

 2、把CSS放到顶部

3、避免@import方式引入样式

4、css中使用base64图片数据取代图片文件,减少请求数,在线转base64网站:http://tool.css-js.com/base64.html

5、使用css动画来取代javascript动画

6、使用字体图标,图标库网站:http://fontawesome.io/icons/,在线制作网站:www.iconfont.cn

7、使用css sprite--雪碧图

减少浏览器请求次数;

不会出现闪烁

8、使用svg图形--小,清晰

9、避免使用CSS表达式:

a {star : expression(onfocus=this.blur)}

javascript:

1、减少引用库的个数

2、使用requirejs或seajs异步加载js

3、JS放到页面底部引入

4、避免全局查找

5、减少属性查找

6、使用原生方法

7、用switch语句代替复杂的if else语句

8、减少语句数,比如说多个变量声明可以写成一句

9、使用字面量表达式来初始化数组或者对象

10、使用DocumentFragments或innerHTML取代复杂的元素注入

11、使用事件代理(事件委托)

12、避免多次访问dom选择集

13、高频触发事件设置使用函数节流,如:onmousemove、onmouseover

14、使用Web Storage缓存数据

15、使用Array的join方法来代替字符串的“+”连接(先将要连接的字符串放进数组)

相关文章

  • 前端性能优化(中)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(上)...

  • 前端性能优化(下)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(中)...

  • 前端性能优化(上)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 为什么要进行前端性能...

  • 前端面试必问及加分点---性能优化篇

    如何进行网站性能优化 你有用过哪些前端性能优化的方法? 谈谈性能优化问题 代码层面的优化 前端性能优化最佳实践

  • 前端性能优化

    对于前端的性能优化,主要有分为加载优化和性能优化。在Google官方文档中,给出了性能优化有哪些好处。前端优化的最...

  • 常用的后端性能优化六种方式:缓存化+服务化+异步化等

    性能优化专题 前端性能优化 数据库性能优化 jvm和多线程优化 架构层面优化 缓存性能优化 常用的后端性能优化六大...

  • 关于前端性能优化问题详解

    关于前端性能优化问题详解 出处:http://segmentfault.com/blogs 前端性能优化指南 AJ...

  • 前端性能优化

    前端性能优化 下面是我认知的前端性能优化的策略,本书主要着手 JavaScript 优化展开阐述。 JavaScr...

  • 2019-10-22

    2018 前端性能优化清单

  • 2020-04-11

    前端工程化相关 前端动画相关 优化前端性能

网友评论

      本文标题:前端性能优化

      本文链接:https://www.haomeiwen.com/subject/neofhktx.html