常用的几大优化解决：

  • 页面内容的优化
  1. 减少http请求

　　　　途径：

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

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

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

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

　　　　　　5>css Sprites  精灵图  多个图片在一个整体的图片上， 减少图片的请求

　     2. 减少DOM的数量

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

　　 3. 避免404

　　 4.减少DNS查询的数量

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

　　 5. 避免不必要的http跳转

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

  • JavaScript&&css的优化
  1. 样式表置顶--脚本表置底
  2. 外部引入文件
  3. 避免css表达式
  4. link替代@import   因为@import相当于将css放到底部
  5. 避免Fliters
  6. 避免重复代码
  7. Javascript代码优化 减少空格和注释
  • 图片
  1. 压缩图片使用Sprite技术 -- 水平排列  ，颜色接近的排在一起 ，
  2. favcion.ico 浏览器会去读取这个图片 --确保存在，小 <1k  ,过期时间设置较长
  • cookie
  1. 减少cookie的大小和控制cookie污染

　　　　去除没有必要的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

web前端性能优化问题的更多相关文章

  1. web前端性能优化指南(转)

    web前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络 ...

  2. Web前端性能优化教程09：图像和Cookie优化

    本文是Web前端性能优化系列文章中的第九篇,主要讲述内容:图像和Cookie优化.完整教程可查看:  一. 图像优化 图像基础知识 gif: 适用于动画效果,例如提示的滚动条图案 jpg: 是一种使用 ...

  3. Web前端性能优化教程06：减少DNS查找、避免重定向

    本文是Web前端性能优化系列文章中的第六篇,主要讲述内容:减少DNS查找.避免重定向.完整教程可查看:  一.减少DNS查找 基础知识 DNS(Domain Name System): 负责将域名UR ...

  4. Web前端性能优化教程08：配置ETag

    本文是Web前端性能优化系列文章中的第五篇,主要讲述内容:配置ETag.完整教程可查看:Web前端性能优化 什么是ETag? 实体标签(EntityTag)是唯一标识了一个组件的一个特定版本的字符串, ...

  5. Web前端性能优化教程05：网站样式和脚本

    本文是Web前端性能优化系列文章中的第五篇,主要讲述内容:网站样式和脚本代码的放置位置.使用外部javascript和css.完整教程可查看:Web前端性能优化 一.将样式表放在顶部 可视性回馈的重要 ...

  6. Web前端性能优化教程03：添加Expires头

    本文是Web前端性能优化系列文章中的第三篇,主要讲述添内容:加Expires头.完整教程可查看:Web前端性能优化 什么是Expires头? Expires存储的是一个用来控制缓存失效的日期.当浏览器 ...

  7. Web前端性能优化教程04：压缩组件

    本文是Web前端性能优化系列文章中的第四篇,主要讲述内容:压缩组件.完整教程可查看:Web前端性能优化 基础知识 gzip编码:gzip是GUNzip的缩写,是使用无损压缩算法的一种,最早是用于Uni ...

  8. Web前端性能优化教程07：精简JS 移除重复脚本

    本文是Web前端性能优化系列文章中的第七篇,主要讲述内容:精简Javascript代码,以及移出重复脚本.完整教程可查看:  一.精简javascript 基础知识 精简:从javascript代码中 ...

  9. WEB前端性能优化:HTML,CSS,JS和服务器端优化

    对前端开发工程师来说,前端性能优化的重要性是不言而喻的,最为大家所知的是YSLOW的23条优化规则,在我的理解中,性能优化不纯粹是指用户访问网站的速度,也包括开发的效率,这里我总结下我理解中的WEB前 ...

  10. Web前端性能优化的9大问题

    1.请减少HTTP请求基本原理:在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出.一个正常HTTP请求的流程简述:如在浏览器中输入&qu ...

随机推荐

  1. BZOJ3930: [CQOI2015]选数

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=3930 容斥原理. 令l=(L-1)/k,r=R/k,这样找k的倍数就相当于找1的倍数. 设F[ ...

  2. hdu_3483A Very Simple Problem(C(m,n)+快速幂矩阵)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3483 A Very Simple Problem Time Limit: 4000/2000 MS ( ...

  3. ImportError: No module named 'BaseHTTPServer'：解决方案

    利用python写了一小段代码,里面使用到了Python标准库的BaseHTTPServer来构建一个基础HTTP服务器: 1 #-*- coding:utf-8 -*- 2 import http. ...

  4. zzuli oj 1135 算菜价

    题目: Description 妈妈每天都要出去买菜,但是回来后,兜里的钱也懒得数一数,到底花了多少钱真是一笔糊涂帐.现在好了,作为好儿子(女儿)的你可以给她用程序算一下了,呵呵. Input 输入含 ...

  5. Xmanager 远程到ubuntu失败

    原因: 22端口没打开 SSH server服务没打开 解决办法: 打开22端口 如果没安装过防火墙:sudo apt-get install ufw ,sudo ufw enable 启动端口:su ...

  6. Ajax 跨域，这应该是最全的解决方案了

    https://segmentfault.com/a/1190000012469713 前言 从刚接触前端开发起,跨域这个词就一直以很高的频率在身边重复出现,一直到现在,已经调试过N个跨域相关的问题了 ...

  7. PHP UEditor富文本编辑器 显示 后端配置项没有正常加载，上传插件不能正常使用

    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码... 问题描述 我的编辑器在本地测试的时候没问 ...

  8. ios开发 第三天

    1.复合 对象可以引用其它对象,可以利用其它对象提供的特性. 通过包含作为实例变量的对象指针实现的. 2.OC是单一继承 3.继承-重构 4.类实例化对象时,self指向了对象的首地址. 类对象isa ...

  9. 使用SQL 提示优化sql

    use index 在查询语句中表名的后面,添加use index来提供希望mysql去参考的索引列表,就可以让mysql不再考虑其他可用的索引 explain select * from renta ...

  10. 2017-06-23（chmod whoami chown）

    文件权限设定 chmod u-x newfile chmod u-x,g+w newfile chmod a=rwx newfile [mode=421] r = 4 , w=2, x=1 chmod ...