网页设计与显示原理，如何解析其背后的视觉呈现机制？
- 内容介绍
- 文章标签
- 相关推荐
咱每天刷手机逛淘宝看资讯的时候,有没有突然好奇过——为啥有的网页打开跟飞一样快,字配图都整整齐齐戳中审美;有的却卡得加载半天,图片歪歪扭扭像被狗 无语了... 啃了?今天就来唠唠这些"看不见"的幕后功臣:网页到底是怎么从一串代码,变成你眼里鲜活画面的?以及设计师们为了让你"看得爽",背地里使了哪些小手段?
要说网页显示,核心玩家必须是浏览器!它就像个全能翻译官,把服务器传过来的HTML/CSS/JS代码 往白了说... ,吭哧吭哧翻成你能看懂的画面.这个过程要是拆开来,其实特像厨师做菜——先备料再炒菜,一步都不能乱.
调整一下。 先说说是HTML搭骨架:你写的这些标签,浏览器会先拆成一棵"DOM树".比如说一个简单的首页,标题是 然后CSS穿衣服:光有骨架肯定不好看啊!CSS就是给DOM节点穿衣服化妆的.浏览器会把所有CSS样式收集起来,生成一份"样式规则表".比如说给 泰酷辣！ 等骨架和衣服都搞好了,浏览器就要开始"组装"了:把DOM树和样式规则合并成一棵渲染树.注意哦!这时候没用的节点会直接被开除,看不见嘛留着干嘛?渲染树里只有真正要显示的元素,每个节点都带着自己的"长相"和"身份". 接下来是Layout环节:俗话说"站没站相坐没坐相"可不行.渲染树会给每个元素算好精确位置——比如说这个按钮要放在距左100px距顶50px的地方,那行文字要占多宽才不会换行 你猜怎么着？ …这一步有点像装修时量尺寸,差一点都会歪歪扭扭.要是后面修改了某个元素,浏览器就得重新算一遍所有相关元素的位置,这就是传说中的"重排"——特别费性能,所以程序员们都尽量避免它. 再说说一步Repaint:位置算好了,该拿笔画出来啦!浏览器会根据每个节点的数据,给每个像素点填颜色画形状——比如说红色按钮就把对应区域涂红,白色文字就填白色像素.要是只改颜色不改位置,那就不用算位置直接重绘就行,这比重排温柔多了.，摆烂... 哈哈是不是有点绕?简单就是:HTML定结构→CSS定样式→生 开倒车。 成渲染树→算好位置→画出像素——缺一环都出不来你看到的画面! 咱再说回网页设计本身.现在打开任何一个大站,第一感觉肯定是"舒服",但你知道吗?这种舒服都是设计师用一堆"反直觉"的数据算出来的? 先聊布局:都说"简洁即高级",但简洁不是随便删东西!比如说首页最重要的数据,设计师会把它放在视线最容易落 的地方——心理学上叫"视觉重心",大概就在页面左上角往下一点.再比如说响应式设计:现在没人只用电脑上网了吧?手机屏3英寸,平板屏10英寸,电脑屏27英寸——设计师得用"媒体查询"盯着屏幕尺寸变:屏幕小的时候导航栏自动叠成汉堡包icon,图片宽度改成100%自适应;屏幕大的时候就舒展开来排成三列.不然你拿手机看电脑版淘宝,那字小得跟蚂蚁似 的,who受得了? 然后是色彩和字体:别看只是选个红色蓝色,这里面门道可大了!比如说奶茶店网站肯定要用暖色调,让人看着就想喝;科技公司就得用冷色调,显得专业可靠.字体也一样:标题要用粗体大字号,正文就得用细体小字号但保证清晰.还有个超重要但容易忽略的点:对比度——黑字配白背景对比度高看得清,但深灰配浅灰就容易瞎眼;色盲模式更是考虑到特殊群体…这些细节 designer 们可都算到骨子里了! 对了哦!顺便说个好多新手站长问爆 的问题: 为什么百度不收录我的网站? 别慌!这锅不一定是内容不行——很大概率是前端做得太拉胯!比如说你的代码冗余一大堆没用 的JS/CSS文件;或者加载速度慢得像蜗牛 有啥用呢？ ;再或者移动端适配没做好!所以啊想让搜索引擎看得起,前端优化必须跟上:代码压缩一下,CSS雪碧图合一下,picture标签适配不同设备图片…这些细节做好了,蜘蛛爬起来顺风顺水,收录还不是分分钟 的事? 有没有遇到过这种情况:打开一个页面明明网速很快，但点击按钮时卡一下,drag滚动条时画面糊几秒?别怀疑!肯定是浏览器在背地里"偷偷加班".想要网页丝滑无卡顿 ,核心就是减少浏览器 的 "无效劳动".，将心比心... 首当其冲 的是减少重排和重绘.刚才说了重排最费性能 ——比如说你用JS改一个div 的宽度 ,浏览器可能要重新算整个页面 的布局 .那怎么避免呢?简单!要么一次性改完所有属性 ,要么把元素先设成display:none 改完再显示回来 ——这样就只触发一次重排. 然后是用CSS动画代替JS动效.实话实说 JS动画确实灵活 ,但它跑在浏览器 的 "主线程 "上 ——主线程还要处理点击事件加载资源呢 , JS动画一跑起来主线程直接堵死 !而 CSS动画不一样 ,它跑在专门 的 "合成线程 "上 ,跟 靠谱。 主线程互不干扰 .比如说hover时按钮变大这种效果 ,用CSS transition比JS写定时器顺滑10倍 !不信你可以试试 :打开某个电商网站 , hover一下加入购物车按钮 ——是不是一点都不卡 ?那就是 CSS动画 的功劳~ 再说说再唠个小众但超实用 的点: 分辨率适配.咱们现在用 的手机屏动不动就是Retina级别的 ,要是还拿几年前那种低清图片往上放 ,那画面简直跟马赛克似 的 !设计师们为了解决这个问题 ,发明了好几种办法 : 第一种是 矢量图.比如说SVG格式 的图标 ——不管放大多少倍都不会模糊 .主要原因是 SVG不是由像素组成 的 ,而是由数学路径画出来 的 .微信图标/支付宝图标基本都是SVG格式 ,随便放大 N倍都清晰得能数出毛边~，靠谱。 第二种是 多倍图.针对不同分辨率 的屏幕准备不同大小 的图片 :比如说Retina屏用@2x图 ,高清屏用@3x图 .然后用CSS background-size或者img srcset属性让浏览器自动选对应的图片 ——这样不管什么屏幕看过去都是清晰锐利哒 ! 到时候….. 写到这儿突然发现 :原来我们每天看 的网页背后 ,藏着这么多程序员和设计师 的 "小心机".从一行行代码到到头来呈现 在眼前の画面 ,中间 ,都是为了你能多看一眼多点一次 .下次再遇到好看の网页别急着划走 ——不妨停留三秒想想 :哦~原来这里藏着这么多学问呢 ! 害…不说啦不说啦 ,我还要去改bug呢 客观地说... 你们要是还有啥好奇の问题 ,评论区喊我呀 ~
咱每天刷手机逛淘宝看资讯的时候,有没有突然好奇过——为啥有的网页打开跟飞一样快,字配图都整整齐齐戳中审美;有的却卡得加载半天,图片歪歪扭扭像被狗 无语了... 啃了?今天就来唠唠这些"看不见"的幕后功臣:网页到底是怎么从一串代码,变成你眼里鲜活画面的?以及设计师们为了让你"看得爽",背地里使了哪些小手段?
要说网页显示,核心玩家必须是浏览器!它就像个全能翻译官,把服务器传过来的HTML/CSS/JS代码 往白了说... ,吭哧吭哧翻成你能看懂的画面.这个过程要是拆开来,其实特像厨师做菜——先备料再炒菜,一步都不能乱.
调整一下。 先说说是HTML搭骨架:你写的这些标签,浏览器会先拆成一棵"DOM树".比如说一个简单的首页,标题是 然后CSS穿衣服:光有骨架肯定不好看啊!CSS就是给DOM节点穿衣服化妆的.浏览器会把所有CSS样式收集起来,生成一份"样式规则表".比如说给 泰酷辣！ 等骨架和衣服都搞好了,浏览器就要开始"组装"了:把DOM树和样式规则合并成一棵渲染树.注意哦!这时候没用的节点会直接被开除,看不见嘛留着干嘛?渲染树里只有真正要显示的元素,每个节点都带着自己的"长相"和"身份". 接下来是Layout环节:俗话说"站没站相坐没坐相"可不行.渲染树会给每个元素算好精确位置——比如说这个按钮要放在距左100px距顶50px的地方,那行文字要占多宽才不会换行 你猜怎么着？ …这一步有点像装修时量尺寸,差一点都会歪歪扭扭.要是后面修改了某个元素,浏览器就得重新算一遍所有相关元素的位置,这就是传说中的"重排"——特别费性能,所以程序员们都尽量避免它. 再说说一步Repaint:位置算好了,该拿笔画出来啦!浏览器会根据每个节点的数据,给每个像素点填颜色画形状——比如说红色按钮就把对应区域涂红,白色文字就填白色像素.要是只改颜色不改位置,那就不用算位置直接重绘就行,这比重排温柔多了.，摆烂... 哈哈是不是有点绕?简单就是:HTML定结构→CSS定样式→生 开倒车。 成渲染树→算好位置→画出像素——缺一环都出不来你看到的画面! 咱再说回网页设计本身.现在打开任何一个大站,第一感觉肯定是"舒服",但你知道吗?这种舒服都是设计师用一堆"反直觉"的数据算出来的? 先聊布局:都说"简洁即高级",但简洁不是随便删东西!比如说首页最重要的数据,设计师会把它放在视线最容易落 的地方——心理学上叫"视觉重心",大概就在页面左上角往下一点.再比如说响应式设计:现在没人只用电脑上网了吧?手机屏3英寸,平板屏10英寸,电脑屏27英寸——设计师得用"媒体查询"盯着屏幕尺寸变:屏幕小的时候导航栏自动叠成汉堡包icon,图片宽度改成100%自适应;屏幕大的时候就舒展开来排成三列.不然你拿手机看电脑版淘宝,那字小得跟蚂蚁似 的,who受得了? 然后是色彩和字体:别看只是选个红色蓝色,这里面门道可大了!比如说奶茶店网站肯定要用暖色调,让人看着就想喝;科技公司就得用冷色调,显得专业可靠.字体也一样:标题要用粗体大字号,正文就得用细体小字号但保证清晰.还有个超重要但容易忽略的点:对比度——黑字配白背景对比度高看得清,但深灰配浅灰就容易瞎眼;色盲模式更是考虑到特殊群体…这些细节 designer 们可都算到骨子里了! 对了哦!顺便说个好多新手站长问爆 的问题: 为什么百度不收录我的网站? 别慌!这锅不一定是内容不行——很大概率是前端做得太拉胯!比如说你的代码冗余一大堆没用 的JS/CSS文件;或者加载速度慢得像蜗牛 有啥用呢？ ;再或者移动端适配没做好!所以啊想让搜索引擎看得起,前端优化必须跟上:代码压缩一下,CSS雪碧图合一下,picture标签适配不同设备图片…这些细节做好了,蜘蛛爬起来顺风顺水,收录还不是分分钟 的事? 有没有遇到过这种情况:打开一个页面明明网速很快，但点击按钮时卡一下,drag滚动条时画面糊几秒?别怀疑!肯定是浏览器在背地里"偷偷加班".想要网页丝滑无卡顿 ,核心就是减少浏览器 的 "无效劳动".，将心比心... 首当其冲 的是减少重排和重绘.刚才说了重排最费性能 ——比如说你用JS改一个div 的宽度 ,浏览器可能要重新算整个页面 的布局 .那怎么避免呢?简单!要么一次性改完所有属性 ,要么把元素先设成display:none 改完再显示回来 ——这样就只触发一次重排. 然后是用CSS动画代替JS动效.实话实说 JS动画确实灵活 ,但它跑在浏览器 的 "主线程 "上 ——主线程还要处理点击事件加载资源呢 , JS动画一跑起来主线程直接堵死 !而 CSS动画不一样 ,它跑在专门 的 "合成线程 "上 ,跟 靠谱。 主线程互不干扰 .比如说hover时按钮变大这种效果 ,用CSS transition比JS写定时器顺滑10倍 !不信你可以试试 :打开某个电商网站 , hover一下加入购物车按钮 ——是不是一点都不卡 ?那就是 CSS动画 的功劳~ 再说说再唠个小众但超实用 的点: 分辨率适配.咱们现在用 的手机屏动不动就是Retina级别的 ,要是还拿几年前那种低清图片往上放 ,那画面简直跟马赛克似 的 !设计师们为了解决这个问题 ,发明了好几种办法 : 第一种是 矢量图.比如说SVG格式 的图标 ——不管放大多少倍都不会模糊 .主要原因是 SVG不是由像素组成 的 ,而是由数学路径画出来 的 .微信图标/支付宝图标基本都是SVG格式 ,随便放大 N倍都清晰得能数出毛边~，靠谱。 第二种是 多倍图.针对不同分辨率 的屏幕准备不同大小 的图片 :比如说Retina屏用@2x图 ,高清屏用@3x图 .然后用CSS background-size或者img srcset属性让浏览器自动选对应的图片 ——这样不管什么屏幕看过去都是清晰锐利哒 ! 到时候….. 写到这儿突然发现 :原来我们每天看 的网页背后 ,藏着这么多程序员和设计师 的 "小心机".从一行行代码到到头来呈现 在眼前の画面 ,中间 ,都是为了你能多看一眼多点一次 .下次再遇到好看の网页别急着划走 ——不妨停留三秒想想 :哦~原来这里藏着这么多学问呢 ! 害…不说啦不说啦 ,我还要去改bug呢 客观地说... 你们要是还有啥好奇の问题 ,评论区喊我呀 ~