自己做网站前端开发,国外扁平化网站,实体店营销案例100例,国内外网站开发现状一个网站的网页是好是坏#xff0c;往往是体现在速度和高度两个方面#xff0c;速度是网页所展示出来的时间#xff0c;能否为浏览用户节约时间。高度则是一个网站网页本身的质量#xff0c;能否为浏览用户带来真正的好体验。然而看似简单的两个点#xff0c;但是背后要实…一个网站的网页是好是坏往往是体现在速度和高度两个方面速度是网页所展示出来的时间能否为浏览用户节约时间。高度则是一个网站网页本身的质量能否为浏览用户带来真正的好体验。然而看似简单的两个点但是背后要实现起来是需要花费精力和时间的。任何网站的终极目标不仅仅是让其运行很快而是让使用该网站的用户满意。用户花在网站上的大多数时间不是等待加载而是在使用过程中等待响应。一个网页打开速度慢图片加载慢浏览卡顿页面的动画效果不流畅或者突然崩坏等这种网站无疑在用户心里就是“垃圾网站”。作为一个网站开发者谁愿意看到这种情况?所以提高网页性能势在必行!第一要对页面性能进行分析那么首要了解浏览器加载的过程主要包括连接和渲染。1、建立连接过程1) 浏览器查找域名的IP地址2) 浏览器给web服务器发送一个HTTP请求3) 服务器发送永久重定向响应4) 浏览器跟踪重定向地址5) 服务器“处理”请求6) 服务器发回一个HTML响应2、浏览器渲染解析HTML-构建DOM树-渲染树构建-渲染树布局-绘制渲染树第二优化网页性能的大概方法1、开启浏览器缓存浏览器要根据域名找出IP地址而DNS查找过程的第一步是在浏览器缓存中查找根据Chrome的PageSpeed给出的建议要利用浏览器缓存存储可缓存的资源。在 HTTP 标头中为静态资源设置有效期或最长存在时间可指示浏览器从本地磁盘中加载以前下载的资源而不是从网络中加载。HTTP 1.1提供的缓存方法主要有两种1) Expires和Cache-Controlmax-age.即内容在缓存中的生命有效期。第一次请求后将在生命有效期之内直接从本地缓存中拿取。2) Last-Modified和ETag.Last-Modified标记文件最后一次修改的时间浏览器请求是在头部加入上次请求缓存下来的Last-Modified时间若两次请求期间服务器的内容没有修改服务器返回304 Not Modified则不下载资源浏览器直接使用本地缓存;否则服务器会返回200以及更新后的版本。ETag是服务器对于文件生成的Hash散列其生成算法与最后一次修改的时间相关。浏览器第二次请求发送上次的ETag信息服务器通过简单的比对就知道是否应该返回304还是200。PageSpeed建议要为资源指定Last-Modified或ETag标头以便启动缓存验证。2、页面内容组织1)为 HTML文档指定字符集可让浏览器立即开始执行脚本。2)将内嵌样式块和元素从文档主体移至文档标题可改善显示性能。3)将小型样式表或者脚本内嵌到主 HTML 网页中可减少在下载其他资源时的往返时间 (RTT) 和延迟时间。3、HTML1)压缩HTML。2)为图片指定大小减少重排。3)减少HTML标签嵌套深度嵌套越深在移动端的Web页面渲染速度以及滚动流畅度都会有所减低。4)使用HTML5新标签例如header、footer、section、nav、article。因为它们语义化速度快结构合理浏览器上识别能力强。4、CSS1)避免使用滤镜。2)不使用import。3)合并和压缩CSS代码。4)减少渐变、阴影的使用。5)模块化、精简css提高复用率。6)合理使用CSS3高性能动画Translate3d支持硬件加速。7)使用CssSprite将零星的背景图包含到一张图中通过background-position来使它显示在正确的位置;只请求一张图减少了HTTP请求的次数。5、Java1)模块化代码SeaJs。2)合并和压缩Java代码。3)压缩工具YUI Compressor或JSMin等。4)使用事件委托机制避免频繁操作DOM节点。5)暂缓 Java 解析暂缓解析不需要的 Java(等到需要执行时再进行解析)可以提高网页的初始加载速度。6、 图片优化1)压缩图片2)图片时页面大部分加载时间所花的地方在图片设计的时候应该考虑相应的图片大小和格式第三网页性能优化实战分析以Chrome Developer Tools作为示例工具讲解(可通过F12键打开)目前各大主流浏览器都有类似的插件功能。1、 Network可以查看页面加载时长资源加载情况(状态、时长)资源加载时间具体分析从而针对性的优化页面2、timeline 可看页面渲染情况从而进行页面优化3、profiles可看函数执行情况第四网页性能优化推荐工具1、Chrome(Firefox) Developer Tools ——分析性能2、HttpWatch ——IE插件分析网页性能2、PageSpeed —— 查看性能建议3、Fiddler —— HTTP/HTTPS网络调试最后别忘记了一件事完成相关的网页优化操作后再进行适当的网页性能测试以防前面的工作变成无用功。一个好的网站不是开发一个人的事情还有产品、设计、SEO、测试等人员参与其中。
