在东莞SEO过程中,怎样进行前端性能的优化?怎么做?

浏览:/ 2017-09-29

    合并 CSS 和 JS 文件:

    现在前端有很多工程化打包工具。为了减少 HTTP 请求数量,可以通过这些工具再发布前将多个 CSS 或者 多个 JS 合并成一个文件。
SEO141.jpg
    采用 lazyLoad:
    俗称懒加载,可以控制网页上的内容在一开始无需加载,不需要发请求,等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。
    控制资源文件加载优先级
    基本原理:说到这里就需要知道浏览器加载 HTML 内容的原理,浏览器在加载 HTML 内容时,是将 HTML 内容从上至下依次解析,解析到 link 或者 script 标签就会加载 href 或者 src 对应链接内容,为了第一时间展示页面给用户,就需要将 CSS 提前加载,不要受 JS 加载影响。
    遵循原则:主要文件放在 head 内部,次要文件放在 body 底部。一般情况下都是 CSS 在头部,JS 在底部。
    利用浏览器缓存
    基本原理:浏览器缓存分强缓存和协商缓存,他们是将网络资源存储在本地,等待下次请求该资源时,如果命中就不需要到服务器重新请求该资源,直接在本地读取该资源。
    强缓存:在 web 服务器返回的响应中添加 Expires 和 Cache-Control Header。
    协商缓存:通过【Last-Modified,If-Modified-Since】和【ETag、If-None-Match】这两对 Header 分别管理。
    减少重排(Reflow)
    基本原理:重排是 DOM 的变化影响到了元素的几何属性(宽和高),浏览器会重新计算元素的几何属性,会使渲染树中受到影响的部分失效,浏览器会验证 DOM 树上的所有其它结点的 visibility 属性,这也是 Reflow 低效的原因。如果 Reflow 的过于频繁,CPU 使用率就会急剧上升。

阅读"在东莞SEO过程中,怎样进行前端性能的优化?怎么做?"的人还阅读

上一篇:2017年站长们需要明白哪些最新的东莞seo优化注意事项?

下一篇:在移动端的东莞SEO优化过程中,需要考虑到哪些因素?

  • =
  • 公司简介
  • 合作流程
  • 技术实力
  • 客户案例
  • 联系方式
  • 学习机会

微信在线咨询