web前端性能优化问题

时间 2019-11-12

标签 web 前端性能优化问题栏目 HTML 繁體版

原文原文链接

经常使用的几大优化解决：css

　　　　途径：html

　　　　　　1>启用http/2--愈来愈多的浏览器都开始支持 HTTP/2。HTTP/2 为同一服务器的并发链接问题带来了不少好处。换句话说，若是有不少小型资源须要加载（若是你　　打包过的话就没有必要了），在延迟和性能方面 HTTP/2 秒杀 HTTP/1。webpack

　　　　　　2>设计层面保持简洁，减小资源请求。web

　　　　　　3>根据需求设置http缓存--少变的能够在header中延长过时头；变化不频繁而又可能会变的资源可使用 Last-Modifed来作请求验证gulp

　　　　　　4>资源合并压缩--外部的文件进行压缩处理（js,css,image），减小屡次请求。压缩合并工具grunt，gulp，webpack等浏览器

　　　　　　5>css Sprites 精灵图多个图片在一个总体的图片上，减小图片的请求缓存

　 2. 减小DOM的数量服务器

　　　　DOM的操做费时费力，每次的访问及修改都会致使页面的reflow和repaint须要耗费大量的资源，如使用循环的时候，结束后将变量保存到局部，在进行访问。cookie

　　 3. 避免404并发

　　 4.减小DNS查询的数量

　　　　DNS解析优化（DNS缓存、减小DNS查找、keep-alive、适当的主机域名）

　　 5. 避免没必要要的http跳转

　　　　根据服务器需求http路由请求时‘/’是否要带

　　　　去除没有必要的cookie 存在请求头中

　　　　cookie<=4k 尽可能减少cookie的使用

　　　　合理使用cookie的生命周期

　　 2. 页面内容是用无域名cookie

　　　　静态页面资源不须要cookie，可使用domain单独存放这些静态文件，有些proxy拒绝缓存带有cookie的内容，若是能将这些静态资源cookie去除，那就能够获得这些　　　 proxy的缓存支持。

　　　1.<title>标题：只强调重点便可，尽可能把重要的关键词放在前面，关键词不要重复出现，尽可能作到每一个页面的<title>标题中不要设置相同的内容。

　　 2.<meta keywords>标签：关键词，列举出几个页面的重要关键字便可，切记过度堆砌。

3.<meta description>标签：网页描述，须要高度归纳网页内容，切记不能太长，过度堆砌关键词，每一个页面也要有所不一样。

4.<body>中的标签：尽可能让代码语义化，在适当的位置使用适当的标签，用正确的标签作正确的事。让阅读源码者和“蜘蛛”都一目了然。好比：h1-h6 是用于标题类的， <nav>标签是用来设置页面主导航的等。

　　 5.<a>标签：页内连接，要加 “title” 属性加以说明，让访客和 “蜘蛛” 知道。而外部连接，连接到其余网站的，则须要加上 el="nofollow" 属性, 告诉 “蜘蛛” 不要爬，因为一旦“蜘蛛”爬了外部连接以后，就不会再回来了。

　　　　保持单个内容小于25kb

参考文章：

http://blog.csdn.net/grandpang/article/details/51329289

http://www.cnblogs.com/EnSnail/p/5671345.html

http://www.qdfuns.com/notes/18892/168da392c447a172d3dd0d8e1754ca48.html

http://www.cnblogs.com/lei2007/archive/2013/08/16/3262897.html

http://www.cnblogs.com/ricoliu/p/6090290.html