我们已经准备好了,你呢?

2021我们与您携手共赢,为您的企业形象保驾护航!

Web性能一直是前端关注的问题,关系到网站的整体质量,影响用户体验,其作用不容忽视。许多北京网站建设公司已经注意到这一点,并不断寻找提高网站性能的方法。那么,提高Web性能的技巧有哪些呢?

营销型网站设计案例


  1. 减少HTTP请求。

    因为移动浏览器同时响应4个请求(安卓支持4个请求,iOS 5支持6个请求),所以需要尽量减少页面请求的数量,同时请求加载的数量不能超过4个。

    a)结合CSS和JavaScript。

    b)合并小图片。

    2.缓存。

    使用cache可以减少对服务器的请求数量,节省加载时间,所以所有静态资源都应该在服务器端cache,尽量使用长Cache(长Cache资源的更新可以使用时间戳)。

    a)缓存所有可缓存的资源。

    b)使用长缓存(用时间戳更新缓存)。

    c)使用外部引用CSS和JavaScript。

    3.压缩HTML、CSS和JavaScript。

    减少资源的大小可以加快网页的显示速度,所以我们应该压缩HTML、CSS、JavaScript等的代码。,并在服务器端设置GZip。

    a)压缩(例如,额外的空格、换行符和缩进)。

    b)启用GZip。

    4.按需加载。

    不影响第一屏的资源和当前屏幕未使用的资源在用户需要时加载,可以大大提高重要资源的显示速度,降低整体流量。

    说明:按需加载会导致大量重绘,影响渲染性能。

    a) LazyLoad

    b)滚动加载。

    c)通过媒体查询加载。

    5.预载。

    对于重资源页面(如游戏),可以使用增加Loading的方法,加载资源后会显示页面。但是加载时间过长,会造成用户流失。对于用户行为分析,可以在当前页面加载下一页的资源来提高速度。

    a)可感知的装载(例如,装载到太空游戏中)。

    b)不易察觉的加载(如提前加载下一页)

    6.压缩图片。

    图片是占用大量流量的资源,尽量避免使用。使用时选择一个非常合适的格式(在实现需求的前提下,以大小来判断)和合适的大小,然后用智能图来压缩,同时在代码中使用Srcset来按需显示。

    说明:图片尺寸过度压缩影响图片显示效果。

    a)用其他方法代替图片(1。使用CSS3 2。使用SVG 3。使用图标字体)。

    b)使用Srcset。

    c)选择合适的图片(1。webP比JPG 2强。PNG8比GIF好)。

    d)选择合适的尺寸(1。负载不超过1014KB 2。不宽于640(以手机屏幕一般宽度为准))。

    7.避免重定向。

    重定向会影响加载速度,请在服务器上正确设置以避免重定向。

    8.异步加载第三方资源。

    不可控的第三方资源会影响页面的加载和显示,因此需要异步加载第三方资源。

    9.[脚本执行优化]

    脚本处理不当会阻碍页面加载和渲染,所以在使用时要注意。

    A) CSS写在头部,JavaScript写在尾部或者异步。

    b)避免图片和iFrame的空Src。空的Src会重新加载当前页面,影响速度和效率。

    10.尽量避免重设图片大小。

    重置图片大小意味着在页面、CSS、JavaScript等中多次重置图片的大小。多次重置图片大小会导致图片被多次重绘,影响性能。尽量避免对图片使用DataURL。如果在DataURL图片中不使用图片的压缩算法,文件会变大,解码后会渲染,加载时间会很长。

    11.[CSS优化]

    a)尽量避免在HTML标签中写入Style属性。

    b)避免使用CSS表达式。CSS表达式的执行需要跳出CSS树的渲染,所以请避免CSS表达式。

    c)删除空的CSS规则。空的CSS规则会增加CSS文件的大小,影响CSS树的执行,因此需要删除空的CSS规则。

    12.正确使用“显示”的属性。

    Display属性会影响页面的渲染,请合理使用。

    a)显示:内联后不应使用宽度、高度、边距、填充和浮动。

    b)显示:不应在内嵌块后使用浮动。

    c)不应在显示:block后使用垂直对齐。

    d)显示后不应使用边距或浮动:table-*。

    13.不要滥用Float。

    Float在渲染时需要大量的计算,所以应该尽量少用。

    14.不要滥用网页字体。

    网页字体需要在当前页面上进行下载、解析和重绘,尽量减少使用。

    15.不要声明太多字体大小。

    字体太大导致CSS树效率低下。为了浏览器的兼容性和性能,当值为0时,不要带单位。

    16.标准化各种浏览器前缀。

    a)非常后面不应加前缀。

    b)只能使用CSS动画(-webkit-无前缀)。

    c)其他前缀为-WebKit-moz-ms-四个无前缀(-o-Opera浏览器改为使用blink内核,因此被淘汰)。

    避免让选择器看起来像正则表达式。高级选择器既耗时又难以阅读,因此请避免使用它们。

    17.减少重绘和回流。

    a)避免不必要的Dom操作。

    b)尝试用类代替样式,用类列表代替类名。

    c)避免使用文档。写

    d)减少绘图图像。

    17.缓存Dom选择和计算。

    a)每个Dom选择都应该被计算和缓存。

    b)缓存的列表。长度,每次都应计算该值,并用变量保存该值。

    18.[渲染优化]。

    HTML使用Viewport,可以加快页面渲染速度。请使用以下代码。

    19.减少Dom节点。

    过多的Dom节点会影响页面呈现,所以我们应该尽量减少Dom节点。

    20.动画优化。

    a)尽量使用CSS3动画。

    b)合理使用requestAnimationFrame动画代替setTimeout。

    c)适当使用Canvas动画。css动画应该在5个元素内使用,Canvas动画应该用于5个以上的元素(webGL可以用于iOS8)。


我们凭借多年的网站建设经验,坚持以“ 帮助中小企业实现网络营销化”为宗旨,累计为4000多家客户提供品质建站服务,得到了客户的一致好评。如果您有网站建设、网站改版、网站优化推广、域名注册、主机空间、网站备案等方面的需求...
我们会详细为你一一解答你心中的疑难。项目经理在线

我们已经准备好了,你呢?

2021我们与您携手共赢,为您的企业形象保驾护航!