整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
喽，大家好，我是雷工！
今天继续学习JavaScript基础语法，JS的书写位置，俗话说：好记性不如烂笔头，边学边记，方便回顾。
代码写在标签内部
示例：
<body>
<button onclick="alert('你还真信呀？~')">点击关注【雷工笔记】月薪过万</button>
</body>2.1、要将JS代码直接写在HTML文件里面。
2.2、在HTML文件中添加一个script，用script标签包住，script标签中的代码就是JS代码。
2.3、script标签的位置可以在HTML文件中的任何地方，但推荐在head标签中或者body标签中。
示例：
<body>
<script>
alert('hello,欢迎关注雷工笔记')
</script>
</body>雷工提醒：
我们习惯将<script>标签放在HTML文件的底部附近，原因是浏览器会按照代码在文件中的顺序加载HTML。
如果先加载的JS代码希望修改其下方的HTML，那么其可能因为要修改的HTML还未被加载而失效。所以比较稳妥的策略是将JS代码放在html文件的底部附近。
3.1、先创建一个JS文件，后缀名是xxxx.js。
3.2、使用script标签引入JS文件。
示例：
<body>
<!--用src引入外部JS文件-->
<script src="leigong.js"></script>
</body>雷工提醒：
外联式JavaScript会让代码看上去更加有序，更容易复用，且没有了脚本的混淆，html也更容易阅读，因此这是值得我们学习的好习惯。
4.1、外联式中，script标签的位置可以在HTML文件中的任何地方，但推荐在body标签中，尽量写到文件末尾</body>
前面。
4.2、JS中内嵌式写法和外联式写法不可以混合使用，如果外联式写法，script标签中间就不可以再写代码，否则会被忽略，只执行外联部分。
以上是关于JavaScript基础中书写位置的相关知识的笔记，有不当之处还望指正。
想起一句话，貌似是锤子科技发布会上听到的：从来没有什么失败的人，只有半途而废的人。
每天进步一点点，加油。
次我们来说一下，HTML网页中的定位，有很多小伙伴一定好奇，为什么我们写的代码都是按顺序罗列的而在网页的展示效果中，我们的各种样式，标签，图片等东西都是出现在网页的各个位置，网页看起来很美观，各种盒模型摆放合理，这是因为在HTML中有定位的能力，今天我们就来学习一下。
position在英语中是位置的意思，而在我们CSS代码中position也是跟位置有关的，position有三个属性值分别为relative（相对定位：相对于自己原来的位置进行定位，但保留自己原来的位置，别的元素无法占用），absolute（绝对定位：相对于有定位的父级进行定位，如果没有则相对于文档进行定位，定位会脱离文档，不保留原来的位置，会和原来的文档不在一个层），fixed（位置定位：他的位置不会随着滑轮的滚动而改变较常见于弹窗广告，他也会脱离文档流）。
我们说完了position，接下来我们就说说他是怎么进行定位的，我们有left，top，right，bottom，五个属性分别对应 距左边，距上边，距右边，距下边，大家注意到我在每个方向前都加了个距字，我们所做的定位是距各个方向的距离而不是移动，例：left:200px，是向右移动200像素，他的意思是距离左边增加200像素。在我们实际的编程中一般都不常用bottom，我们知道，滑轮是可以一直往下滑的，所以我们相对于底部定位的话就很困难。
我们来通过代码和结果来看一下：
没有定位的样式
加了relative
加了relative的结果
上面这个结果图看着比例不太对是因为作者截图没截好[捂脸]
我们可以看出猫图片并没有移动，而是给兔子图片留着位置。
加了absolute
加了absolute的结果
这个结果我们可以看出猫图片向前移动了，并没有保留兔子图片原来的位置
加了fixed
代码中的<br>是为了使滑轮可以滑动，以便更好的展示效果。
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
用了fixed的效果展示。
以上的代码样式只对兔子图片起作用，我没有给猫添加任何样式，猫图片只是作为参照物。
览器加载页面是按从上到下顺序加载的。加载 JS 并执行的时候，会阻塞其他资源的加载。这是因为 JS 可能会有 DOM 、样式等等操作，所以浏览器要先加载这段 JS 并执行，再加载放在它后面的 HTML、CSS。
因此，加入一段巨大的 JS 放在最上面，浏览器首先要下载并执行，这段时间里面，页面是空白的。相比于加载了部分 HTML 和 样式 但是没有 JS 交互功能，显然是后者对于浏览者体验要好。
然而，是否所有 JS 都要放在最下面呢？并不是。
举实际的例子：
html5shiv是一段 JS 脚本，用来是早期 IE 兼容 HTML5 新增标签的支持。
这个 JS 脚本，必须要放在上面 head 部分，为什么呢？因为在老 IE 浏览器下面，不支持 <section> 这样的标签，所以用 JS 来兼容。如果放在底部，等 IE 浏览器先报错了，才会执行这块 JS 没多大用。
jQuery 这类的库，也是建议放在最上面的。首先最大的疑问可能是 jQuery 这么大，放在上面岂不是阻塞的很厉害？
不过 jQuery 通常引用的是 CDN 地址，而且经过 gzip 压缩之后并不是很大，而且引用公共 CDN 上面的 jQuery 话，很大几率早已被用户缓存下来了。所以可以不需要考虑阻塞产生的性能问题。
而我们都知道，JS 是按顺序执行下来的。也就是你没运行 jQuery 之前，先运行了调用 jQuery 函数的代码，就会报错。你可以控制你自己写的 JS 放在页面最下面，放在 jQuery 下面，但是你无法保证页面上其他地方会不会有人图省事直接在 HTML 代码里面输出 JS。如果有，那么就会报错。
所以我建议，类库放在上面加载，其余代码尽可能放在最底下加载。
然而，前端性能优化只是薄薄一层
可能前端优化半天，还不如上个 CDN 或者加个宽带或者优化一个后端算法来的效果好。
*请认真填写需求信息，我们会在24小时内与您取得联系。
