构建现代网站的20个技巧(二）

2021-10-16 分类：网站建设

11.将JS在HTML文件底部引入

浏览器会先检索、解析和执行加载的脚本，然后渲染剩余的页面内容，以防脚本创建新元素。脚本在底部后，浏览器可以一直渲染页面直到脚本加载完全，以便用户尽快加载页面显示出来。

12.避免HTML中脚本标签

不同于引入脚本，脚本标签需要浏览器停止渲染（处理脚本），阻碍后续资源文件的分析和下载。这导致页面初始加载减慢，甚至留下可怕的“空白页”体验。而且脚本分散在内联标签里很难维护。

13.不要在HTML元素中使用内联脚本事件

例如<button onclick="validate()">Validate</button>。这种做法违反了标签、表示和行为之间的清爽原则。而且，如果相关的脚本实在文档底部加载，用户可能先点击了页面触发事件从而尝试调用脚本程序，但是其实脚本还没加载——引发错误!

三.CSS

14.熟悉和使用CSS级联规则

简单的id和class选择器是好用的，但是这也意味着标签混乱，到处是无法重用的的id和class。应该用标签，子元素标签，同列标签和，小部分的id和class标签组合，使css更简单和通用。避免使用“!imporant”。

15.面向未来的使用前缀特定属性

新草案制定时，一些浏览器厂商会通过添加前缀以实现可能支持的标准。为了确保CSS标签以后可用，带前缀的和标准的属性名称都用上最好。这篇文章还提供了一个JavaScript解决方法。

16.用优雅的CSS处理兼容性，而不是hack

CSS hack随着浏览器的更新，显得不可靠。解决方法是为html或body标签添加特定浏览器的class，并在css规则中使用。条件注释也可以在特定浏览器版本时使用需要的CSS文件。

四.JavaScript

17.总是将功能探测优先于浏览器(navigator.useragent)探测。

判断是否存在一个特定功能（或错误）时，useragent字符串是一个糟糕的指标。更严重的是，解析useragent的代码是错误的。例如，一个浏览器探测库期待主版本号是一个一位数字，所以会把Firefox 15报告为Firefox 1，把IE 10报告为IE 1!更可靠的是直接探测功能或问题，并用它作为代码分支决策的标准。我们推荐Modernizr，它是实现功能探测的最简单方法。

18.尽可能在Ready后立刻执行脚本

技术上如jQuery的$(document).ready()使脚本在HTML页面加载完后立即执行，也是脚本可以安全执行的最早时刻。然而复杂的脚本会让页面显得迟缓，并阻止用户立刻操作页面。所以，一些比如tooltip（提示框）,dialog（对话框）在需要显示时初始化，不造成页面卡顿。

19.如果ajax关系用户交互，越早请求越好

ajax请求会花费很长时间，而且不需要等待HTML页面渲染就可以发起请求。所以，把$(document).ready()放在ajax请求完成回调函数中更好。

20.延迟加载非必要的脚本（如Facebook Like，Google +1，Twitter）。

所有人都希望他们的网页在社交网络上流行，但是社交网络的脚本往往很大，可能会引起用户响应迟缓。在请求这些脚本前等待页面加载完毕，可以使页面响应更快。更妙的是，重新考虑这些按钮是否有必要，以及它们是否改善了你的页面整体体验。

文章题目：构建现代网站的20个技巧(二）
网页URL：https://www.cdcxhl.com/news35/131535.html

成都网站建设公司_创新互联，为您提供网站营销、企业建站、网站设计公司、网站制作、面包屑导航、做网站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容