• 登录
  • 关于我们
  • 首页

NinJa911 Blog

记录我的生活点点滴滴

  • 首页
  • GoLang
  • 生活琐碎
  • PHP之路
  • 设计之路
  • 关注网络
  • 应用开发
  • 服务器运维
  • 麻子相册

[转载]网页设计必须考虑的问题——浏览器加载渲染

分类:设计之路 评论:0 浏览: By 张麻子 @2013-01-10 14:05客户端:PC浏览器

随着web设计的快速发展,我们作为前端设计人员已经不能仅仅满足于表达页面样式了,在尽可能完美诠释页面样式的同时,我们需要越来越多的考虑页面加载速度问题。


经常被前端制作的前辈推荐看这篇文章《浏览器内部工作原理》,此文章内容超多,自己看完后大概总结了以下几点,分享出来和大家共同学习。




  1. js的加载会阻塞此js文件下面的图片的加载,但不会阻塞其他js,css的加载
  2. js的加载会阻塞浏览器的渲染,需要等待js加载执行完毕后才可以继续渲染
  3. js的加载虽然是异步进行的,但是执行仍然会保持从上到下的顺序(以上三点就是为何phpwind9.0采用了js文件底部异步加载的原因)
  4. alert 直接会阻止页面的渲染,ff中不阻塞其他的js,css加载,但是会阻止img加载,chorm中会阻塞其他所有的加载。
  5. 边解析边更新DOM树和Style Object且重新绘制页面。
  6. js的执行加载都会阻塞网页的渲染。
  7. javascript会因为顺序执行而阻塞之后js的代码。
  8. image、flash等组件的加载不会阻塞网页的解析。
  9. css的加载也会阻止图片的加载和浏览器的渲染当不会阻止js的加载。
  10. js的文件的加载会阻止dom的加载,但css文件则不会。



平时设计页面、书写代码时候务必要考虑以上十条,这样才可以使你作出的页面漂亮利落~!

本文地址:http://blog.ninja911.com/blog-show-blog_id-49.html

除非注明,本站博文或媒介均为原创,转载请注明出处,欢迎转载。

tags: #加载 #浏览器 #渲染 #网页设计 #问题
评论
留言
引用:
1

关于我

网名:ninja911

小名:张麻子

擅长:网页设计、PHP编程、DIV+CSS、Javascript、JQuery、Ajax、SEO、AAuto、Python

Email:ninja911@qq.com

职业:PHP工程师

现居:四川省成都市

RSS订阅

标签
安装 AAuto PHP 自动 Windows8 Google flash css nbcompressor 解决 红包 Windows njcms 博客 Ecshop 解决方案 模块 百度 uploadify IE Linux Android 快手 工具 电商 网站 支持 浏览器 JetBrains 注册机 注册码 Laravel Go 脚本 blog 点点
日历
存档
  • 2015-11(3)
  • 2015-06(1)
  • 2015-05(1)
  • 2015-03(2)
  • 2015-01(2)
  • 2014-07(4)
  • 2014-06(3)
  • 2014-05(1)
  • 2014-04(3)
  • 2014-03(1)
  • 2014-01(8)
  • 2013-05(2)
  • 2013-04(8)
  • 2013-02(2)
  • 2013-01(3)
  • 2012-12(1)
  • 2012-11(6)
  • 2012-10(13)
  • 2012-09(4)
  • 2012-08(24)
友情链接
  • Lincoo
  • jalena's Blog
  • AAuto快手官网
  • 花与剑 Blog
  • 时空镜像

©2011 - Blog.NinJa911.COM 保留所有权利

蜀ICP备11022085号-5    Powered By NJCMS