《高性能网站建设指南》规则7、8—避免CSS表达式、使用外部JavaScript和CSS

2019-10-11 admin

避免CSS表达式

使用CSS表达式将背景色设置为每小时变化一次:

backgroud-color: expression( (new Date()).getHours() % 2 ? "#FFF" : "#000" );

对于低版本IE不支持min-width,可以识别表达式,而其他浏览器识别静态配置:

width: expression( document.body.clientWidth < 600 ? "600px" : "auto" );
min-width: 600px;

更新表达式

表达式的问题在于对其进行的求值的频率比人们期望的要高。它们不只是页面呈现和大小改变时求值,当页面滚动、甚至用户鼠标在页面上移过时都要求值。

围绕问题展开工作

用两种技术可以避免css表达式产生这一问题——创建一次性表达式和使用事件处理器取代css表达式。

一次性表达式

<style>
p {
    background-color: expression( altBgcolor(this) );
}
</style>
<script type="text/javascript">
function altBgcolor(elem) {
    elem.style.backgroundColor = (new Date()).getHours() % 2 ? "#F08A00" : "#B8D4FF";
}
</script>

css表达式调用了altBgcolor()函数,而该函数将样式的backgroud-color属性设置为一个明确的值,并移除了CSS表达式。

事件处理器

当浏览器的大小改变时,这个例子使用setMinWidth()函数来修改所有段落元素的大小

function setMinWidth() {
    var aElements = document.getElementsByTagName("p");
    for (var i = 0; i < aElements.length; i ++) {
        aElements[i].runtimeStyle.width = ( document.body.clientWidth < 600 ? "600px" : "auto" );
    }
}
if (1 != navigator.userAgent.indexOf("MSIE")) {
    window.onresize = setMinWidth;
}

但这在第一次呈现时并不能恰当的设置段落的大小,所以需要使用”一次性表达式“介绍得方法设置初始宽度。

规则8——使用外部JavaScript和CSS

内联vs外置

纯粹而言,内联快一些,这主要是因为外部示例需要承担多个HTTP请求带来的开销。

但是JavaScript和css文件外置有机会被浏览器缓存起来。

如果你的网站的本质上能够为用户带来高完整缓存率,使用外部文件的收益就更大。如果不太可能产生完整缓存,则内联是更好的选择。

组件重用

如果你的网站中每个页面都使用了相同的javascript和css,使用外部文件可以提高这些组件的重用率。在这种情况下使用外部文件更加具有优势,因为当用户在页面间导航时,javascript和css组件已经位于浏览器的缓存中了。

在典型情况下,页面之间javascript和css的重用既不可能100%重叠,也不可能100%无关。

最好的答案就是折中,将你的页面划分成几种页面类型,然后为每种类型创建单独的脚本和样式表。这比维护一个单独的文件要复杂,但通常比为每个页面维护不同的脚本和样式表要容易,并且对于给定的任意页面都只需要下载很少的多余的javascript和css。

主页

我所见过的使用内联方式反而更好的一个例外是主页。

页面查看

主页拥有没有很高的页面查看数量,然而,通常每个会话只有一个页面查看。

空缓存vs完整缓存

完整缓存的百分比要比其他网站更低。出于安全的原因,很多用户选择在每次关闭浏览器时清空缓存。下一次用户打开浏览器时,产生的是一个主页的空缓存页面查看。

组件重用

重用率很低,很多主页是用户来到网站后访问的唯一一个页面,因此它们谈不上重用。

分析了这些基准,我们更加倾向于适用内联,当然,没有适用于所有主页的唯一答案。

两全其美

这里介绍得两项技术使你既可以获得内联的优势,同时也能缓存外部文件。

加载后下载

对于作为多次页面查看中的第一次的主页,我们希望为主页内联javascript和css,但又能为所有后续页面查看提供外部文件。这可以通过在主页加载完成后动态下载外部组件来实现(通过onload事件)。这能够将外部文件放到浏览器的缓存中以便用户接下来访问其他页面。

这些页面中javascript和css被加载到页面中两次(先是内联的,然后是外部的)。要使其能够工作,必须处理双重定义。例如脚本,可以定义但不能执行函数(至少不能让用户察觉)。使用了相对单位(百分比或em)的css如果指定两次可能会产生问题。将这些组件放到一个不可见的IFrame中是一种更好的方式。

动态内联

这可以通过使用前一个例子中的加载后下载技术来完成。当用户第一次访问页面时,服务器发现没有cookie,于是生成一个内联了组件的页面。然后服务器添加javascript来在页面加载后动态下载外部文件(并设置cookie)。下一次访问页面时,服务器看到了cookie,就会生成一个使用外部文件的页面。

这种方式的美好之处在于它的宽容。即便cookie的状态和缓存的状态不匹配,页面也能够工作,只是没有本应该的那么优化而已。

[转载]原文链接:https://segmentfault.com/a/1190000020654160

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-77154.html

文章标题:《高性能网站建设指南》规则7、8—避免CSS表达式、使用外部JavaScript和CSS

相关文章
JavaScript编辑器推荐
主流编辑器有SublimeText,Notepad++,webstorm等,是使用最广泛的编辑器,但也有一些JavaScript编辑器提供有着各自的特性和功能,适应不同人的需求,以下是几款优秀的编辑器,相信你一定能找到自己喜欢的。 1. W...
2015-11-12
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
2015年JavaScript或“亲库而远框架”
2014年过去了,作为一个JavaScript开发者很难满怀信心的去“挽回”一个特定的库或技术,即便是强大的Angular,似乎也因为最近的一些事情而动摇。 2014年10月的ng-europe会议上,Angular开发者团队透露了一个关于...
2015-11-12
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
JavaScript实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如...
2017-03-17
Angular2-primeNG文件上传模块FileUpload使用详解
近期在学习使用Angular2做小项目,期间用到很多primeNG的模块。 本系列将结合实战总结angular2-primeNG各个模块的使用经验。 文件上传模块FileUploadModule 首先要在使用该组件的模块内导入文件上传模块 ...
2017-03-09
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: &lt;template...
2017-03-13
YouTube正式默认使用HTML5视频播放器
YouTube视频网站现在默认使用HTML5播放器,这意味着更好的性能、 稳定性、 电池寿命和甚至是更好的安全性。现在用户通过Chrome、IE 11、Safari 8和Beta版本的Firefox进行浏览的时候都默认使用HTML5视频播放...
2015-11-12
JavaScript常用特效chm下载
下载地址:JavaScript常用特效chm下载 对了,如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
回到顶部