• 注册
  • 网站性能优化 网站性能优化 关注:0 内容:10

    网页性能优化

  • 查看作者
  • 打赏作者
  • 当前位置: 小同php论坛 > 网站性能优化 > 正文
    • 网站性能优化
    •   网站的划分一般为二:前端和后台。我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,修改密码,为文章发表评论等等。而前端呢?其实应该是属于功能的表现。影响用户访问体验的绝大部分都来自前端页面,本文将提供一个优化网页性能的大概思路。

        1. 加载时优化

        最好的优化是根本不下载资源。所以要尽量减少不必要的资源。

        1. 评估所有依赖是否必要,权衡利弊。

        2. 依赖的下载路径是否可靠,不可用时候是否会阻碍整个页面。

        2. 压缩所有可以压缩的资源

        1. 代码,全部压缩。

        2. 去掉不必要的图片。

        3. 多使用css3来代替图片。

        4. 使用压缩率更高的图片。特别是gif动图,一些视频格式(H.264或WebM)的体积比gif小很多。

        5. 用艺术字字体,不要用图片。

        6. 为使用更新浏览器的用户提供更现代的图片格式。

        7. 多种分辨率的位图供不同页面大小使用。

        8. 要给标签指明宽高,否则会导致reflow。

        9.
      使用HTTP/2。比如,精灵图是由很多小图片组成的一张大图片,可以减少http请求。但是却难以缓存,修改一个小图片,导致所有小图片缓存失效。HTTP/2,一个链接内可以发起多个请求,便无需使用精灵图。

        3. 缓存优化

        浏览器缓存机制

        1. 访问页面,请求各种资源,浏览器检查本地是否有缓存。

        2. 如果有,检查资源是否过期。没过期,直接使用缓存。过期了,便向服务器发出请求。

        3. 发出的请求中会带上etag和last-modified首部字段。

        4. 服务器会通过Etag和last-modified来判断浏览器缓存的资源是否已经不可用。

        5. 如果资源仍然有效,便返回304告知浏览器使用缓存。否则返回更新后的资源。

        按照这一套逻辑,便可规划好网站的缓存。

        如果资源提前过期,如何通知浏览器更新资源?

        通常无法做到这一点,因为浏览器发现资源没过期,根本不会发出请求。但是可以通过修改资源的网址来实现。所以需要给资源文件名加上版本号或者随机标记。例如
      style.12.css。也就是说,不要让浏览器缓存html文件,否则,过期之前,浏览器都不会请求服务器。

        4. 关键渲染路径

        浏览器渲染一张网页通过以下步骤。

        1. 处理 HTML 标记并构建 DOM 树。

        2. 处理 CSS 标记并构建 CSSOM 树。

        3. 将 DOM 与 CSSOM 合并成一个渲染树。

        4. 根据渲染树来布局,以计算每个节点的几何信息。

        5. 将各个节点绘制到屏幕上。

        优化关键渲染路径,便是指优化这个渲染过程,让网页尽快呈现出来。

        css

        CSS文件会阻塞渲染。浏览器构建好DOM树后,必须等待CSSOM树构建完成。

        在文档顶部防止外联CSS的标签,让浏览器尽快请求CSS文件。

        避免在css文件中使用@import,因为只有包含import的文件被下载编译后,浏览器才会发现并下载import的css。

        可以考虑使用内联CSS,无需额外请求,不会阻塞渲染。

        js

        在CSSOM构建完成前,js不会开始执行。

        js也会阻止DOM树构建。除非在

      请登录之后再进行评论

      登录

      广告位预留

    • 实时动态
    • 偏好设置
    • 帖子间隔 侧栏位置: