javascript高级程序设计及总结（持续性）

作者：Guff_9hys | 2024-07-23 19:33:00

踩

javascript高级程序设计

1.标签的位置，关于加载时，会出现浏览器一段时间空白


<html>
    <head>
        <title>html page</title>
        <script type="text/javascript" src="example1.js"></script>
        <script type="text/javascript" src="example2.js"></script>
    </head>
    <body>
    这里是body内容
    </body>
</html>
 
这种做法的目的是把所有的外部文件（css以及js文件）的引用都放在相同的地方
文档的<head>元素包含所有的js文件，意味着等着全部的js代码被下载以及解析和执行完成之后，
才能呈现页面的内容（浏览器在遇到<body>标签时才开始呈现内容）
对于那些需要很多js代码页面来说，会导致浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口
中将是一片空白，为了避免这个问题，现代web应用程序一般会把全部的js引用放到<body>元素页面的内容后面
 
<html>
    <head>
        <title>html page</title>
    </head>
    <body>
    这里是body内容
        <script type="text/javascript" src="example1.js"></script>
        <script type="text/javascript" src="example2.js"></script>
    </body>
</html>

嵌入代码和外部文件


一般建议最好是使用外部文件来嵌入js代码
  *可维护性，将所有的js代码文件放在一个文件夹中，维护起来就很轻松
  *可缓存，多个页面使用后同一个文件，那么这个文件只需要下载一次，能够加快页面加载速度
  *适应未来： html和xhtml包含外部文件的语法是相同的

parseInt


var num1 = parseInt('10',2)// 2 按照二进制解析
var num1 = parseInt('10',8)// 8 按照八进制解析
var num1 = parseInt('10',10)// 10 按照十进制解析
var num1 = parseInt('10',16)// 16 按照十六进制解析

基本数据类型，引用类型

基本类型和引用类型的特点

媒体查询@media

使用@media查询，可以针对不同的媒体类型定义不同的样式

all：用于所有的设备

print: 用于打印机

screen：用于电脑屏幕，平板电脑，智能手机

可以针对不同的屏幕尺寸设置不同的样式

当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面


@media screen and(min-width: 1366px) {
}
 
@media screen(min-width: 1520px) and (max-width: 1920px) {
}

flex弹性布局

当一个元素设置了flex布局之后，其子元素的float,clear 和vertical-align等属性将失效

前端优化：

核心：

传输层面：减少请求数，降低请求量

执行层面：减少重绘和回流

减少请求数：

合并样式，脚本文件

合并背景图片

css3图标，Icon Font

传输层面-降低请求量

开启GZip

优化静态资源，jQuery->Zepto,去除冗余代码

图片无损压缩

图片延迟加载

减少cookie携带

对更新缓慢的资源或者接口做缓存（浏览器缓存，localStorage）

按需加载，先加载主要资源，其余资源延迟加载，对非首屏资源滚动加载

fake页技术，将页面最初需要显示Html&Css内联，在页面所需资源加载结束前至少可看，理想情况是index.html下载结束就展示

页面渲染过程：

回流与重绘：

减少回流重绘

请求状态码：304

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Guff_9hys/article/detail/871228?site